<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/aaaerror.txt');

header('Content-Type: text/html');

// Database connection
$servername = "localhost";
$username = "appshett_ibill";
$password = "appshett_ibill";
$dbname = "appshett_ibill";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Database connection failed: " . $conn->connect_error);
}

// Fetch all records
$sql = "SELECT * FROM enrollments ORDER BY id DESC";
$result = $conn->query($sql);

// Define site title
$site_title = "SHETTY VERIFY";
?>

<!DOCTYPE html>
<html lang="en" class="light-style layout-compact layout-navbar-fixed layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="/assets/" data-base-url="/assets/" data-framework="html" data-template="vertical-menu-theme-default-light">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title><?php echo $site_title; ?> Dashboard</title>
    <meta name="description" content="" />
    <meta name="keywords" content="">
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/vendor/fonts/boxiconsc4a7.css?id=87122b3a3900320673311cebdeb618da" />
    <link rel="stylesheet" href="/assets/vendor/fonts/fontawesome8a69.css?id=a2997cb6a1c98cc3c85f4c99cdea95b5" />
    <link rel="stylesheet" href="/assets/vendor/fonts/flag-icons80a8.css?id=121bcc3078c6c2f608037fb9ca8bce8d" />
    <link rel="stylesheet" href="/assets/vendor/css/rtl/corea8ac.css?id=55b2a9dfaa009c41df62ca8d16e913a8" class="template-customizer-core-css" />
    <link rel="stylesheet" href="/assets/vendor/css/rtl/theme-default4c4b.css?id=9182924a7b965439eca5e189ba43eba1" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="/assets/css/demob77a.css?id=69dfc5e48fce5a4ff55ff7b593cdf93d" />
    <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbare482.css?id=73d641bb8db2475ecafc6c68461ed01b" />
    <link rel="stylesheet" href="/assets/vendor/libs/typeahead-js/typeahead05d2.css?id=de339ead5e9c9e36f12e46cbef7aaffd" />
    <link rel="stylesheet" href="/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css">
    <link rel="stylesheet" href="/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css">
    <script src="/assets/vendor/js/helpers.js"></script>
    <script src="/assets/vendor/js/template-customizer.js"></script>
    <script src="/assets/js/config.js"></script>
    <script>
        window.templateCustomizer = new TemplateCustomizer({
            cssPath: '',
            themesPath: '',
            defaultStyle: "light",
            defaultShowDropdownOnHover: "true",
            displayCustomizer: "true",
            lang: 'en',
            pathResolver: function(path) {
                var resolvedPaths = {
                    'core.css': '/assets/vendor/css/rtl/core.css?id=55b2a9dfaa009c41df62ca8d16e913a8',
                    'core-dark.css': '/assets/vendor/css/rtl/core-dark.css?id=d98ae2a03b5b1b05651411ee58ef81a6',
                    'theme-default.css': '/assets/vendor/css/rtl/theme-default.css?id=9182924a7b965439eca5e189ba43eba1',
                    'theme-default-dark.css': '/assets/vendor/css/rtl/theme-default-dark.css?id=ae30991ef3f62e7c03ca6f8930843e80',
                    'theme-bordered.css': '/assets/vendor/css/rtl/theme-bordered.css?id=a4f95a927b1e2bcdfd57a3bbfb2bd3d9',
                    'theme-bordered-dark.css': '/assets/vendor/css/rtl/theme-bordered-dark.css?id=2a668deb480284f975db82d0a7277156',
                    'theme-semi-dark.css': '/assets/vendor/css/rtl/theme-semi-dark.css?id=9c02fb39c47f91b2d198f343fa8b4df7',
                    'theme-semi-dark-dark.css': '/assets/vendor/css/rtl/theme-semi-dark-dark.css?id=c4b1950a14ffd431f752917b97a0ee51',
                }
                return resolvedPaths[path] || path;
            },
            'controls': ["rtl","style","headerType","contentLayout","layoutCollapsed","layoutNavbarOptions","themes"],
        });
    </script>
    <style>
        .table-image {
            max-width: 200px;
            height: auto;
            cursor: pointer;
            display: none; /* Hidden until loaded */
        }
        .modal-image {
            max-width: 100%;
            height: auto;
        }
        .image-loading {
            width: 200px;
            height: 150px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            text-align: center;
        }
        .image-error {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <?php include "includes/aside.php"; ?>
            <div class="layout-page">
                <?php include "includes/navbar.php"; ?>
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <h5>Welcome back, Admin!</h5>
                        <div class="card">
                            <h5 class="card-header">View Submission History</h5>
                            <div class="card-datatable table-responsive">
                                <table class="dt-responsive table border-top" id="submissionsTable">
                                    <thead>
                                        <tr>
                                            <th></th> <!-- Control column for responsive -->
                                            <th>ID</th>
                                            <th>First Name</th>
                                            <th>Middle Name</th>
                                            <th>Last Name</th>
                                            <th>Date of Birth</th>
                                            <th>State Origin</th>
                                            <th>LGA Origin</th>
                                            <th>Area Residence</th>
                                            <th>Phone Number</th>
                                            <th>Gender</th>
                                            <th>Height</th>
                                            <th>Enrollment Type</th>
                                            <th>Image</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        if ($result->num_rows > 0) {
                                            while ($row = $result->fetch_assoc()) {
                                                $imagePath = "https://app.twinshub.com.ng/ajax/uploads/" . htmlspecialchars($row["picture"]);
                                                echo "<tr>";
                                                echo "<td></td>"; // Empty control column
                                                echo "<td>" . htmlspecialchars($row["id"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["first_name"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["middle_name"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["last_name"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["dob"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["state_origin"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["lga_origin"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["area_residence"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["phone_number"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["gender"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["height"]) . "</td>";
                                                echo "<td>" . htmlspecialchars($row["enrollment_type"]) . "</td>";
                                                echo "<td>";
                                                echo "<div class='image-loading' data-image-path='$imagePath'>Loading...</div>";
                                                echo "<img src='$imagePath' alt='Uploaded Image' class='img-fluid table-image' data-bs-toggle='modal' data-bs-target='#imageModal' data-image='$imagePath'>";
                                                echo "</td>";
                                                echo "</tr>";
                                            }
                                        } else {
                                            echo "<tr><td colspan='14'>No submissions found</td></tr>";
                                        }
                                        $conn->close();
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Image Modal -->
                    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="" class="modal-image" id="modalImage" alt="Preview">
                                </div>
                            </div>
                        </div>
                    </div>

                    <footer class="content-footer footer bg-footer-theme">
                        <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
                            <div class="mb-2 mb-md-0">
                                © <script>document.write(new Date().getFullYear())</script>
      , All Rights Reserved Developed By <a href="https://chat.whatsapp.com/IVeuVW5SKXN7vnI23nXclJ">M SHETTY</a>
                          </div>
                        </div>
                    </footer>
                    <div class="content-backdrop fade"></div>
                </div>
            </div>
            <div class="layout-overlay layout-menu-toggle"></div>
            <div class="drag-target"></div>
        </div>
    </div>

    <script src="/assets/vendor/libs/jquery/jquery1e84.js?id=0f7eb1f3a93e3e19e8505fd8c175925a"></script>
    <script src="/assets/vendor/libs/popper/popper0a73.js?id=baf82d96b7771efbcc05c3b77135d24c"></script>
    <script src="/assets/vendor/js/bootstrapcfc4.js?id=4648227467e3fd3f4cf976cfb0e43aea"></script>
    <script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar6188.js?id=44b8e955848dc0c56597c09f6aebf89a"></script>
    <script src="/assets/vendor/libs/hammer/hammer2de0.js?id=0a520e103384b609e3c9eb3b732d1be8"></script>
    <script src="/assets/vendor/libs/typeahead-js/typeahead60e7.js?id=f6bda588c16867a6cc4158cb4ed37ec6"></script>
    <script src="/assets/vendor/js/menu2dc9.js?id=c6ce30ded4234d0c4ca0fb5f2a2990d8"></script>
    <script src="/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
    <script src="/assets/js/maind63d.js?id=6bea3f2e092d5fe7327c226f3242f31b"></script>
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            var table = $('#submissionsTable').DataTable({
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.modal({
                            header: function(row) {
                                var data = row.data();
                                return 'Details for ' + data[2] + ' ' + data[4]; // First Name + Last Name
                            }
                        }),
                        renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                            tableClass: 'table'
                        })
                    }
                },
                columnDefs: [{
                    className: 'control',
                    orderable: false,
                    targets: 0
                }],
                order: [[1, 'desc']],
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>'
            });

            // Load images dynamically and log paths
            $('.table-image').each(function() {
                var $img = $(this);
                var $loading = $img.prev('.image-loading');
                var imgSrc = $img.attr('src');

                // Log the image path for debugging
                console.log('Attempting to load image: ' + imgSrc);

                // Create a new Image object to load the image
                var img = new Image();
                img.onload = function() {
                    console.log('Image loaded successfully: ' + imgSrc);
                    $loading.hide(); // Hide loading indicator
                    $img.show(); // Show the image
                };
                img.onerror = function() {
                    console.error('Failed to load image: ' + imgSrc);
                    $loading.html('Image not found<br><span class="image-error">' + imgSrc + '</span>');
                    $img.hide(); // Ensure image stays hidden on error
                };
                img.src = imgSrc; // Trigger the load
            });

            // Handle image preview in modal
            $('.table-image').on('click', function() {
                var imageSrc = $(this).data('image');
                $('#modalImage').attr('src', imageSrc);
            });
        });
    </script>
</body>
</html>