﻿﻿<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include('include/config.php');
include('php/constant.php');

// Initialize Alert Variables
$alert = '';
$alert_class = '';

// Handle POST Requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Insert New Gallery Images
    if (isset($_POST['action']) && $_POST['action'] === 'insert') {
        $cat_id = mysqli_real_escape_string($con, $_POST['cat_id']);

        // Handle Multiple Image Uploads
        if (!empty($_FILES['multiple_images']['name'][0])) {
            foreach ($_FILES['multiple_images']['tmp_name'] as $key => $tmp_name) {
                $file_name = basename($_FILES['multiple_images']['name'][$key]);
                $target_dir = "assets/img/gallery/";
                $target_file = $target_dir . $file_name;

                // Move uploaded file to target directory
                if (move_uploaded_file($_FILES['multiple_images']['tmp_name'][$key], $target_file)) {
                    // Insert into database
                    $sql = "INSERT INTO gallery_images (cat_id, image) 
                            VALUES ('$cat_id', '$file_name')";
                    mysqli_query($con, $sql);
                }
            }
            $alert = 'Gallery images added successfully.';
            $alert_class = 'alert-success';
        } else {
            $alert = 'Error: No images were uploaded.';
            $alert_class = 'alert-danger';
        }
    }

    // Update Gallery Image
    if (isset($_POST['action']) && $_POST['action'] === 'update') {
        $cat_id = mysqli_real_escape_string($con, $_POST['cat_id']);
    
        // Handle new image uploads (optional)
        if (!empty($_FILES['new_images']['name'][0])) {
            $allowed_types = ['image/jpeg', 'image/png', 'image/gif'];
            $max_size = 4 * 1024 * 1024; // 4MB
    
            foreach ($_FILES['new_images']['tmp_name'] as $key => $tmp_name) {
                $file_type = $_FILES['new_images']['type'][$key];
                $file_size = $_FILES['new_images']['size'][$key];
                $file_name = basename($_FILES['new_images']['name'][$key]);
    
                // Validate file type and size
                if (!in_array($file_type, $allowed_types)) {
                    $alert = 'Error: Invalid file type. Only JPEG, PNG, and GIF are allowed.';
                    $alert_class = 'alert-danger';
                    return;
                }
    
                if ($file_size > $max_size) {
                    $alert = 'Error: File size exceeds the maximum limit of 4MB.';
                    $alert_class = 'alert-danger';
                    return;
                }
    
                // Move uploaded file to target directory
                $target_dir = "assets/img/gallery/";
                $target_file = $target_dir . $file_name;
    
                if (move_uploaded_file($_FILES['new_images']['tmp_name'][$key], $target_file)) {
                    // Insert new image into the database
                    $sql = "INSERT INTO gallery_images (cat_id, image) 
                            VALUES ('$cat_id', '$file_name')";
                    mysqli_query($con, $sql);
                }
            }
        }
    
        $alert = 'Gallery images updated successfully.';
        $alert_class = 'alert-success';
    }

    // Delete Gallery Image
    if (isset($_POST['action']) && $_POST['action'] === 'delete') {
        $id = mysqli_real_escape_string($con, $_POST['id']);

        // Fetch image filename before deletion
        $sql = "SELECT image FROM gallery_images WHERE id = $id";
        $result = mysqli_query($con, $sql);
        $row = mysqli_fetch_assoc($result);

        if ($row) {
            $image_path = "assets/img/gallery/" . $row['image'];

            // Delete file from server
            if (file_exists($image_path)) {
                unlink($image_path);
            }

            // Delete record from database
            $sql = "DELETE FROM gallery_images WHERE id = $id";
            if (mysqli_query($con, $sql)) {
                $alert = 'Gallery image deleted successfully.';
                $alert_class = 'alert-success';
            } else {
                $alert = 'Error: ' . mysqli_error($con);
                $alert_class = 'alert-danger';
            }
        } else {
            $alert = 'Error: Image not found.';
            $alert_class = 'alert-danger';
        }
    }
}

// Fetch All Gallery Categories
function fetchCategories($con) {
    $sql = "SELECT * FROM gallery_category";
    $result = mysqli_query($con, $sql);
    $categories = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $categories[] = $row;
    }
    return $categories;
}

// Fetch All Gallery Images Grouped by Category
function fetchGalleryImagesGroupedByCategory($con) {
    $sql = "SELECT gc.id AS category_id, gc.title AS category_title, GROUP_CONCAT(gi.image) AS images
            FROM gallery_category gc
            LEFT JOIN gallery_images gi ON gc.id = gi.cat_id
            GROUP BY gc.id, gc.title";
    $result = mysqli_query($con, $sql);
    $grouped_images = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $grouped_images[] = $row;
    }
    return $grouped_images;
}
?>
<!DOCTYPE html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery Images</title>
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    <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=Arimo:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    <!-- Feather CSS -->
    <link rel="stylesheet" href="assets/plugins/feather/feather.css">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">
    <!-- Daterangepikcer CSS -->
    <link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="assets/plugins/datatables/datatables.min.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Layout Js -->
    <script src="assets/js/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
			var BASE_PHP_URL = "<?php echo BASE_PHP_URL; ?>";  // This will contain the PHP constant
		</script>
        <style>
            /* Style for image preview container */
.image-preview {
    position: relative;
    display: inline-block;
}

/* Style for the "X" button */
.image-preview .delete-image {
    position: absolute;
    top: 5px; /* Adjust distance from top */
    right: 5px; /* Adjust distance from right */
    font-size: 12px; /* Smaller font size for compactness */
    padding: 2px 6px; /* Compact padding */
    border-radius: 50%; /* Circular shape for better aesthetics */
    z-index: 10; /* Ensure it's above the image */
}

/* Ensure images are displayed in a grid-like structure */
#image-container-<?php echo $category['category_id']; ?> {
    gap: 10px; /* Add spacing between images */
    margin-top: 10px; /* Space between the upload field and images */
}
        </style>
</head>
<body>
    <!-- Dynamic Alert -->
    <?php if (!empty($alert)): ?>
    <div class="alert <?php echo $alert_class; ?> alert-dismissible fade show" role="alert">
        <strong><?php echo ($alert_class === 'alert-success') ? 'Success!' : 'Error!'; ?></strong> <?php echo $alert; ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <?php endif; ?>

    <!-- Main Wrapper -->
    <div class="main-wrapper">
        <!-- Header -->
        <?php include("include/header.php")?>
        <!-- /Header -->
        <!-- Sidebar -->
        <?php include("include/sidebar.php")?>
        <!-- /Sidebar -->
        <!-- Page Wrapper -->
        <div class="page-wrapper">
            <div class="content container-fluid">
                <!-- Page Header -->
                <div class="page-header">
                    <div class="content-page-header">
                        <h5>Gallery Images</h5>
                        <div class="list-btn">
                            <ul class="filter-list">
                                <li>
                                    <a class="btn btn-primary" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_modal">
                                        <i class="fa fa-plus-circle me" aria-hidden="true"></i> Add Gallery Images
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- /Page Header -->
                <!-- Table -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card-table">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-stripped table-hover datatable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Category</th>
                                                <th>Images</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $gallery_images = fetchGalleryImagesGroupedByCategory($con);
                                            foreach ($gallery_images as $index => $category): ?>
                                                <tr>
                                                    <td><?php echo $index + 1; ?></td>
                                                    <td><?php echo htmlspecialchars($category['category_title']); ?></td>
                                                    <td>
                                                        <?php
                                                        $images = $category['images'] ? explode(',', $category['images']) : [];
                                                        if (!empty($images)) {
                                                            foreach ($images as $img) {
                                                                echo '<img src="assets/img/gallery/' . htmlspecialchars($img) . '" alt="Gallery Image" style="width: 50px; height: auto; margin-right: 5px;">';
                                                            }
                                                        } else {
                                                            echo 'No Images';
                                                        }
                                                        ?>
                                                    </td>
                                                    <td class="d-flex align-items-center">
                                                        <a class="btn-action-icon me-2" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#edit_modal_<?php echo $category['category_id']; ?>">
                                                            <i class="fe fe-edit"></i>
                                                        </a>
                                                        <a class="btn-action-icon me-2" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#delete_modal_<?php echo $category['category_id']; ?>">
                                                            <i class="fe fe-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>

                                                <!-- Edit Modal -->
                                                <!-- Edit Modal -->
                                                <div class="modal custom-modal fade" id="edit_modal_<?php echo $category['category_id']; ?>" role="dialog">
                                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                                            <div class="modal-content">
                                                                <div class="modal-header border-0 pb-0">
                                                                    <h4 class="mb-0">Edit Gallery Images</h4>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <form method="POST" action="" enctype="multipart/form-data">
                                                                    <input type="hidden" name="action" value="update">
                                                                    <input type="hidden" name="id" value="<?php echo $category['category_id']; ?>">
                                                    
                                                                    <div class="modal-body">
                                                                        <div class="row">
                                                                            <!-- Category Selection -->
                                                                            <div class="col-lg-6 col-md-12">
                                                                                <div class="input-block mb-3">
                                                                                    <label>Gallery Category</label>
                                                                                    <select class="form-select" name="cat_id" required>
                                                                                        <?php
                                                                                        $categories = fetchCategories($con);
                                                                                        foreach ($categories as $cat) {
                                                                                            $selected = ($cat['id'] == $category['category_id']) ? 'selected' : '';
                                                                                            echo '<option value="' . $cat['id'] . '" ' . $selected . '>' . htmlspecialchars($cat['title']) . '</option>';
                                                                                        }
                                                                                        ?>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                    
                                                                            <!-- Upload New Images (Multiple) -->
                                                                            <div class="col-lg-12 col-md-12">
                                                                                <div class="input-block mb-3">
                                                                                    <label>New Images (Optional)</label>
                                                                                    <div class="service-upload mb-0">
                                                                                        <span><img src="assets/img/icons/drop-icon.svg" alt="upload"></span>
                                                                                        <h6 class="drop-browse align-center">Drop your files here or <span class="text-primary ms-1">browse</span></h6>
                                                                                        <p class="text-muted">Maximum size: 4MB per image</p>
                                                                                        <input type="file" class="form-control" name="new_images[]" accept="image/*" multiple>
                                                                                    </div>
                                                                                    <small class="text-muted">Leave blank to keep the current images.</small>
                                                                                </div>
                                                                            </div>
                                                    
                                                                            <!-- Current Images Section -->
                                                                            <div class="col-lg-12 col-md-12">
                                                                                <label>Current Images</label>
                                                                                <div class="d-flex flex-wrap" id="image-container-<?php echo $category['category_id']; ?>">
                                                                                    <?php
                                                                                    $gallery_images = mysqli_query($con, "SELECT * FROM gallery_images WHERE cat_id = " . $category['category_id']);
                                                                                    while ($image = mysqli_fetch_assoc($gallery_images)) {
                                                                                        echo '
                                                                                        <div class="image-preview position-relative me-2 mb-2" id="image-' . $image['id'] . '">
                                                                                            <img src="assets/img/gallery/' . $image['image'] . '" class="img-thumbnail" width="100">
                                                                                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 delete-image" data-id="' . $image['id'] . '">X</button>
                                                                                        </div>';
                                                                                    }
                                                                                    ?>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                    
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-back cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
                                                                        <button type="submit" class="btn btn-primary paid-continue-btn">Update</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>



                                                                                                <!-- Delete Modal -->
                                                                                                <div class="modal custom-modal fade" id="delete_modal_<?php echo $category['category_id']; ?>" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered modal-md">
                                                        <div class="modal-content">
                                                            <div class="modal-body">
                                                                <div class="form-header">
                                                                    <h3>Delete Gallery Image</h3>
                                                                    <p>Are you sure you want to delete this gallery image?</p>
                                                                </div>
                                                                <div class="modal-btn delete-action">
                                                                    <div class="row">
                                                                        <div class="col-6">
                                                                            <form method="POST" action="">
                                                                                <input type="hidden" name="action" value="delete">
                                                                                <input type="hidden" name="id" value="<?php echo $category['category_id']; ?>">
                                                                                <button type="submit" class="w-100 btn btn-primary paid-continue-btn">Delete</button>
                                                                            </form>
                                                                        </div>
                                                                        <div class="col-6">
                                                                            <button type="button" class="w-100 btn btn-primary paid-cancel-btn" data-bs-dismiss="modal">Cancel</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Table -->
            </div>
        </div>
        <!-- /Page Wrapper -->

        <!-- Add Modal -->
        <div class="modal custom-modal fade" id="add_modal" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        <h4 class="mb-0">Add Gallery Images</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="insert">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-6 col-md-12">
                                    <div class="input-block mb-3">
                                        <label>Gallery Category</label>
                                        <select class="form-select" name="cat_id" required>
                                            <option value="">Select Category</option>
                                            <?php
                                            $categories = fetchCategories($con);
                                            foreach ($categories as $category) {
                                                echo '<option value="' . $category['id'] . '">' . $category['title'] . '</option>';
                                            }
                                            ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="input-block mb-3">
                                        <label>Multiple Images</label>
                                        <div class="service-upload mb-0">
                                            <span><img src="assets/img/icons/drop-icon.svg" alt="upload"></span>
                                            <h6 class="drop-browse align-center">Drop your files here or <span class="text-primary ms-1">browse</span></h6>
                                            <p class="text-muted">Maximum size: 4MB</p>
                                            <input type="file" class="form-control" name="multiple_images[]" accept="image/*" multiple required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-back cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary paid-continue-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /Add Modal -->
    </div>
    <!-- /Main Wrapper -->
    <!-- jQuery -->
    <script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script src="assets/js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <!-- Bootstrap Core JS -->
    <script src="assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <!-- Datatable JS -->
    <script src="assets/plugins/datatables/datatables.min.js" type="text/javascript"></script>
    <!-- select CSS -->
    <script src="assets/plugins/select2/js/select2.min.js" type="text/javascript"></script>
    <!-- Slimscroll JS -->
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- Datepicker Core JS -->
    <script src="assets/plugins/moment/moment.min.js" type="text/javascript"></script>
    <script src="assets/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="assets/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <!-- multiselect JS -->
    <script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Theme Settings JS -->
    <script src="assets/js/theme-settings.js" type="text/javascript"></script>
    <script src="assets/js/greedynav.js" type="text/javascript"></script>
    <!-- Custom JS -->
    <script src="assets/js/script.js" type="text/javascript"></script>
    <script src="../../cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="|49" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".delete-image").forEach(button => {
            button.addEventListener("click", function () {
                let imageId = this.getAttribute("data-id");
                let imageElement = document.getElementById("image-" + imageId);

                if (confirm("Are you sure you want to delete this image?")) {
                    fetch(BASE_PHP_URL+"delet-gallery-img.php", {
                        method: "POST",
                        headers: { "Content-Type": "application/x-www-form-urlencoded" },
                        body: "id=" + imageId
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            imageElement.remove();
                        } else {
                            alert("Error deleting image.");
                        }
                    })
                    .catch(error => console.error("Error:", error));
                }
            });
        });
    });


    </script>
</body>
</html>