<?php
include "db.php";
session_start();
if (!isset($_SESSION['email'])) {
  header("Location:login.php");
}
?>

<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicon icon-->
    <link rel="shortcut icon" type="image/png" href="../sglogo.png" />

    <!-- Core Css -->
    <link rel="stylesheet" href="assets/css/styles.css" />

    <title>Admin || Gallery Data</title>
    <link rel="stylesheet" href="assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</head>

<style>

table td {
    color: #000000d4 !important;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 650px;
        margin-left: auto;
    }
}
</style>

<body class="link-sidebar">
    <!-- Preloader -->

    <div id="main-wrapper">
        <!-- Sidebar Start -->

        <?php
    include "header.php";
    ?>

        <div class="body-wrapper">
            <div class="container-fluid">
                <div class="card card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <div class="d-sm-flex align-items-center justify-space-between">
                                <h4 class="mb-4 mb-sm-0 card-title">Gallery Data</h4>
                                <nav aria-label="breadcrumb" class="ms-auto">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item d-flex align-items-center gap-2">
                                            <a class="text-muted text-decoration-none d-flex" href="index.php">
                                                <iconify-icon icon="solar:home-2-line-duotone" class="fs-6">
                                                </iconify-icon>
                                            </a>

                                            <!-- Blog Button -->
                                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#blogFormModal"><i class="fa fa-plus"></i>
                                                Add gallery
                                            </button>
                                        </li>
                                    </ol>

                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Blog Form Modal -->
<div class="modal fade" id="blogFormModal" tabindex="-1" aria-labelledby="blogFormModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="insert_gallery.php" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title" id="blogFormModalLabel">Add Gallery</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="mb-3">
            <label for="" class="form-label">Image</label>
            <input type="file" class="form-control" name="image" >
          </div>

        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-success" name="submit" >Submit</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

                <div class="datatables">
                    <!-- start File export -->
                    <div class="card">
                        <div class="card-body">

                            <div class="table-responsive" >

<table id="file_export" class="table w-100 table-striped table-bordered display ">
    <thead>
        <tr>
            <th>Sr.No</th>
            <th>Image</th>
            <th>Uploaded At</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $sql = "SELECT * FROM gallery ORDER BY id DESC";
        $result = mysqli_query($conn, $sql);
        $sr = 1;

        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) {
                ?>
                <tr id="row-<?= $row['id'] ?>">
                    <td><?= $sr++ ?></td>
                    <td>
                        <?php if (!empty($row['image'])) { ?>
                            <img src="../images/<?= htmlspecialchars($row['image']) ?>" alt="Blog Image" width="200">
                        <?php } else { echo "No Image"; } ?>
                    </td>
                    <td><?= date("d-m-Y h:i A", strtotime($row['uploaded_at'])) ?></td>
                    <td>
    <!-- Edit Button -->
    <button class="btn btn-primary btn-sm me-1 editBlogBtn" 
            data-id="<?= $row['id'] ?>"
            data-bs-toggle="modal" 
            data-bs-target="#editBlogModal">
        <i class="fas fa-edit"></i>
    </button>

    <!-- Delete Button -->
    <button class="btn btn-danger btn-sm deleteEventBtn" data-id="<?= $row['id'] ?>">
        <i class="fas fa-trash-alt"></i>
    </button>
</td>
                </tr>
                <!-- Edit Blog Modal -->
                <?php
            }
        }
        ?>
    </tbody>
</table>

                            </div>
                        </div>
                    </div>
                    <!-- end File export -->

                </div>
            </div>
        </div>
    </div>

    <!-- SweetAlert CDN -->

<script>
document.querySelectorAll('.editBlogBtn').forEach(button => {
    button.addEventListener('click', function () {
        const row = this.closest('tr');
        const id = this.getAttribute('data-id');
        const imgTag = row.querySelector('img');
        const imageSrc = imgTag ? imgTag.getAttribute('src') : '';

        document.getElementById('edit_id').value = id;

        const previewImage = document.getElementById('previewImage');
        if (imageSrc) {
            previewImage.src = imageSrc;
            previewImage.style.display = 'block';
        } else {
            previewImage.style.display = 'none';
        }
    });
});
</script>

<div class="modal fade" id="editBlogModal" tabindex="-1" aria-labelledby="editBlogModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="update_gallery.php" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title">Edit Image</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="edit_id" id="edit_id" >

          <div class="mb-3">
            <label>Image</label>
            <input type="file" name="edit_image" class="form-control">
            <img id="previewImage" src="#" style="max-width:150px; margin-top:5px;" />
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-success" type="submit">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.deleteEventBtn').forEach(button => {
    button.addEventListener('click', function () {
        const id = this.getAttribute('data-id');
        const row = document.getElementById('row-' + id);

        Swal.fire({
            title: 'Are you sure?',
            text: "This Gallery will be deleted permanently!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('delete_gallery.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'id=' + id
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire('Deleted!', 'Gallery has been deleted.', 'success');
                        row.remove();
                    } else {
                        Swal.fire('Error!', 'Could not delete the Gallery.', 'error');
                    }
                });
            }
        });
    });
});
</script>

    <script>
    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }
    </script>
    </div>

    <div class="dark-transparent sidebartoggler"></div>
    <script src="assets/js/vendor.min.js"></script>
    <!-- Import Js Files -->
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/dist/simplebar.min.js"></script>
    <script src="assets/js/theme/app.init.js"></script>
    <script src="assets/js/theme/theme.js"></script>
    <script src="assets/js/theme/app.min.js"></script>
    <script src="assets/js/theme/sidebarmenu-default.js"></script>

    <!-- solar icons -->
    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>

    <!-- highlight.js (code view) -->
    <script src="assets/js/highlights/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();


    document.querySelectorAll("pre.code-view > code").forEach((codeBlock) => {
        codeBlock.textContent = codeBlock.innerHTML;
    });
    </script>
    <script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <script src="assets/js/datatable/datatable-advanced.init.js"></script>

    
</body>


</html>