{{> header}}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<title>Home Banners</title>
<style>
    div.dt-buttons {
        display: none;
    }
</style>

<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2" style="border-left: 2px solid #083c30;">
            <div class="card-header" style="background-color:#083c30; color:white;">
                <h4><b>Home Banners</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="float-sm-right">
                                <button data-bs-toggle="modal" data-bs-target="#addModal"
                                    style="background-color:#083c30; color:white; border:none; border-radius:5px; width: 180px; height: 40px;">
                                    <i class="fa-solid fa-plus"></i> Add Banner
                                </button>
                            </ol>
                        </div>
                        <div class="col-sm-12 table-responsive">

                            <table id="example2" class="table table-bordered datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Picture</th>
                                        <th>Active/Inactive</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each banners}}
                                    <tr>
                                        <td>{{inc @index}}</td>
                                        <td><img src="{{this.bannerImg}}" alt="Banner Image" width="200"
                                                class="img-thumbnail" /></td>

                                        <td>
                                            {{#if this.isActive}}
                                            <span class="text-success fw-bold">Active</span>
                                            {{else}}
                                            <span class="text-danger fw-bold">Inactive</span>
                                            {{/if}}
                                        </td>

                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-warning btn-sm editBtn"
                                                data-bs-toggle="modal" data-bs-target="#editModal"
                                                data-id="{{this._id}}" data-img="{{this.bannerImge}}"
                                                data-status="{{this.isActive}}">
                                                <i class="fa-solid fa-pen"></i>
                                            </a>
                                            <a href="javascript:void(0);" data-bs-toggle="modal" data-id="{{this._id}}"
                                                data-bs-target="#deleteModal" class="btn btn-danger btn-sm">
                                                <i class="fa-solid fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Add Banner Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-white" style="background-color: #083c30;">
                <h5 class="modal-title" id="addModalLabel">Add New Banner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <i
                        class="fas fa-times"></i></button>

            </div>
            <form action="/admin/homeBanners/add" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="bannerImg" class="form-label">Banner Image</label>
                        <input type="file" class="form-control" id="bannerImg" name="bannerImg" required
                            accept="image/jpeg, image/png, image/jpg">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Add Banner</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Banner Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editBannerForm" method="POST" enctype="multipart/form-data">
                <div class="modal-header text-white" style="background-color:#083c30;">
                    <h5 class="modal-title">Edit Banner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <i
                            class="fas fa-times"></i></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="editBannerId" />

                    {{!-- <div class="mb-3 text-center">
                        <img id="currentBannerImg" src="" alt="Banner Image" width="200" class="img-thumbnail mb-2" />
                    </div> --}}

                    <div class="mb-3">
                        <label for="bannerImage" class="form-label">Upload New Banner</label>
                        <input type="file" name="bannerImage" id="bannerImage" class="form-control"
                            accept="image/png, image/jpeg, image/jpg, image/webp">
                    </div>

                    <div class="mb-3">
                        <label for="isActive" class="form-label">Status</label>
                        <select name="isActive" id="editStatus" class="form-control">
                            <option value="true">Active</option>
                            <option value="false">Inactive</option>
                        </select>
                    </div>
                </div>

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

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-white" style="background-color: #083c30;">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <i
                        class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this banner?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="#" id="deleteBannerBtn" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.getElementById("bannerImage").addEventListener("change", function () {
        const file = this.files[0];
        if (file) {
            const validTypes = ["image/jpeg", "image/jpg", "image/png", "image/svg+xml"];
            if (!validTypes.includes(file.type)) {
                Swal.fire({
                    //icon: "error",
                    title: "Invalid File Type",
                    text: "Please upload only JPG or PNG image Formats.",
                    confirmButtonColor: "#3085d6"
                });
                this.value = ""; // reset input
            }
        }
    });
</script>

<script>
    document.querySelectorAll(".editBtn").forEach(button => {
        button.addEventListener("click", function () {
            const id = this.getAttribute("data-id");
            const img = this.getAttribute("data-img");
            const status = this.getAttribute("data-status");

            // Set form action dynamically
            document.getElementById("editBannerForm").action = `/admin/updateBanners/${id}`;

            // Set hidden input
            document.getElementById("editBannerId").value = id;
            document.getElementById("bannerImage").value = img;


            // Fix dropdown selection
            document.getElementById("editStatus").value = status === "true" ? "true" : "false";
        });
    });
</script>

<script>

    document.getElementById('deleteModal').addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const bannerId = button.getAttribute('data-id');
        const deleteBtn = document.getElementById('deleteBannerBtn');
        deleteBtn.href = `/admin/homeBanners/delete/${bannerId}`;
    });
</script>


<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdn.datatables.net/1.11.5/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://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="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/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>

{{> footer}}