<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery Images</title>
    <link rel="shortcut icon" href="Images\hariyali logo.jpg" type="image/x-icon">
    <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="sidebar.css">
</head>

<body>
    <div class="wrapper">
        <aside id="sidebar">
            <div class="d-flex">
                <button class="toggle-btn" type="button">
                    <img src="Images/hariyali logo.jpg" alt="" srcset="">
                </button>
                <div class="sidebar-logo">
                    <a href="#">Hariyali</a>
                </div>
            </div>
            <ul class="sidebar-nav">
                <li class="sidebar-item">
                    <a href="dashboard.html" class="sidebar-link">
                        <i class="fa-solid fa-gauge"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="adminManagement.html" class="sidebar-link">
                        <i class="fa-solid fa-user"></i>
                        <span>Admin Management</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="userManagement.html" class="sidebar-link">
                        <i class="fa-solid fa-users"></i>
                        <span>User Management</span>
                    </a>
                </li>
                <li class="sidebar-item">
                        <a href="membershipDueReport.html" class="sidebar-link">
                        <i class="fa-solid fa-chart-column"></i>
                        <span>Membership Due Report</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="memberHistory" class="sidebar-link">
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        <span>Member History</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="idCardIssueRegister.html" class="sidebar-link">
                        <i class="fa-solid fa-id-card"></i>
                        <span>ID Card Issue Register</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="category.html" class="sidebar-link">
                        <i class="fa-solid fa-shapes"></i>
                        <span>Category</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="products.html" class="sidebar-link">
                        <i class="fa-brands fa-product-hunt"></i>
                        <span>Products</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="purchase.html" class="sidebar-link">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span>Purchase</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="sales.html" class="sidebar-link">
                        <i class="fa-solid fa-bag-shopping"></i>
                        <span>Sales</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="gallery.html" class="sidebar-link">
                        <i class="fa-solid fa-image"></i>
                        <span>Gallery</span>
                    </a>
                </li>
            </ul>
            <div class="sidebar-footer">
                <a href="profile.html" class="sidebar-link">
                    <i class="lni lni-exit"></i>
                    <span>Username</span>
                </a>
            </div>
        </aside>
        <div class="main">
            <!-- Menu Name -->
            <div class="menu_header">
                <div class="text-left p-2">
                    <h1>
                       Website Gallery 
                    </h1>
                </div>
            </div>

            <!-- Table controls -->
            <div class="container  mt-3" style="max-width: 600px;">
                <div class="search-filter-container">
            
                    <div class="row g-2 justify-content-center">
                        <form action="" method="post" class="d-flex flex-column align-items-center w-100">
                            <h3 style="color: #094A9E;">Website Gallery</h3>
                            <div class="input-container w-100 mb-4 d-flex align-items-center">
                                <input type="text" id="imageName" class="form-control pl-5" placeholder="Photo" readonly style="cursor: not-allowed;">
                                <i class="fa-solid fa-image input-icon"></i>
                                <button type="button" id="deleteButton" class="action-buttons-10 ms-2">Delete <i class="fa-solid fa-trash"></i> </button>
                            </div>
                            
                            <!-- Delete Confirmation Modal -->
                            <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content modal-slide-down">
                                        <div class="modal-header border-0">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-title text-center">
                                            <i class="fa-solid fa-trash modal-icon"></i>
                                        </div>
                                        <div class="modal-body text-center">
                                            <p style="color: #7A7A7A;">Are you sure you want to delete this Image? <br> This process cannot be undone.</p>
                                        </div>
                                        <div class="modal-footer justify-content-center border-0">
                                            <button type="button" id="confirmDeleteButton" class="btn confirm-delete" style="min-width: 95px;">Delete</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                    
                </div>

                <div class="mt-3">
                    <a href="gallery.html"><button class="btn custom-button" type="Submit" style="min-width: 100px;">Back</button></a>
                </div>
            </div>
    </div>

    <script>

document.addEventListener("DOMContentLoaded", function () {
    const deleteButton = document.getElementById("deleteButton");
    const deleteModal = new bootstrap.Modal(document.getElementById("deleteModal"));
    const confirmDeleteButton = document.getElementById("confirmDeleteButton");
    const inputContainer = document.querySelector(".input-container");

    deleteButton.addEventListener("click", function () {
        deleteModal.show();
    });

    confirmDeleteButton.addEventListener("click", function () {
        inputContainer.remove();
        deleteModal.hide();
    });
});


    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
    <script src="sidebar.js"></script>
    <script src="https://kit.fontawesome.com/cd0fa2db27.js" crossorigin="anonymous"></script>
</body>

</html> 