{{>adminheader}}
<link rel="stylesheet" href="/superAdmin/css/summernote-bs4.min.css">
<title>{{title}}s</title>

<!-- Toast Container -->
<style>
    #statusFilter {
        padding: 3px 20px;
        border-radius: 5px;
        margin: 0 5px;
    }

        {
            {
            !-- .table tbody tr {
                cursor: grab;
            }

            tr.grabbing {
                cursor: grabbing;
                /* Cursor when grabbing */
            }

            --
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    tr {
        cursor: grab;
        /* Default cursor */
    }

    tr.grabbing {
        cursor: grabbing;
        /* Cursor when grabbing */
    }
</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 black;">
            <div class="card-header">
                <h4><b> {{title}}s</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 trigger modal -->
                                <button
                                    style="background-color: #ffc107; color:rgb(0, 0, 0); border:none; border-radius:5px; width: 180px; height: 40px;"
                                    type="button" data-bs-toggle="modal" data-bs-target="#addUserModal">
                                    <i class="fa-solid fa-plus"></i> Add {{title}}
                                </button>
                            </ol>
                        </div>

                        <div class="col-sm-12 table-responsive">
                            <div class="filter-search-container" style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;
    ">
                                <!-- Status Filter Dropdown -->
                                <div class="status-filter-container" style="max-width: 200px;">
                                    <label for="statusFilter" class="form-label filter-label"
                                        style="display: block;">Filter by Status:</label>
                                    <select id="statusFilter" class="form-select status-dropdown">
                                        <option value="All">All</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>

                                <!-- Search Input -->
                                <div class="search-container" style="max-width: 300px;">
                                    <input type="text" id="searchInput" class="form-control"
                                        placeholder="Search for promotions..." />
                                </div>
                            </div>

                            <table id="example2" aria-describedby="example1_info">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Name</th>
                                        <th>Link</th>
                                        <th>City</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Image</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each promotions}}
                                    <tr class="draggable-row" draggable="true">
                                        <td>{{inc @index}}</td>
                                        <td>{{this.name}}</td>
                                        <td><a href="{{this.link}}" target="_blank">Click here</a></td>
                                        <td>{{this.city.name}}</td>
                                        <td>{{ formatDate1 this.startDate }}</td>
                                        <td>{{ formatDate1 this.endDate }}</td>
                                        <td><img src="{{this.image}}" width="200px" height="100px" /></td>
                                        <td>{{ capitalizeFirst this.status }}</td>
                                        <td>
                                            <div class="eye d-flex justify-content-center">
                                                <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-name="{{this.name}}"
                                                    data-link="{{this.link}}" data-image="{{this.image}}"
                                                    data-city="{{this.city._id}}" data-startdate="{{this.startDate}}"
                                                    data-enddate="{{this.endDate}}" data-status="{{this.status}}"
                                                    data-bs-target="#editModal" class="btn btn-md btn-warning m-1">
                                                    <i class="fa-solid fa-edit"></i>
                                                </a>
                                                <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-bs-target="#deleteModal"
                                                    class="btn btn-md btn-danger m-1">
                                                    <i class="fa-solid fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>

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

<!-- Delete 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">
                <h4 style="color: black; font-weight: 500;">Are you sure you want to delete this Event ?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                <a href="/admin/events/delete/{{this._id}}" type="button" class="btn btn-danger"> yes </a>
            </div>
        </div>
    </div>
</div>

<!-- Add City Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title fs-5" id="addUserModalLabel"><b>Add {{title}}</b></h3>
            </div>
            <form id="addPartnerForm" action="/admin/events" method="post" enctype="multipart/form-data"
                onsubmit="return validateForm()">
                <div class="modal-body">
                    <div class="mb-2">
                        <label for="username" class="form-label">City Name</label>
                        <select class="form-control" id="city" name="city" required>
                            <option value="" selected disabled>Select City</option>
                            {{#each citys}}
                            <option value="{{this._id}}">{{this.name}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="mb-2">
                        <label for="username" class="form-label">Name</label>
                        <input type="text" class="form-control" id="username" name="name" required minlength="3"
                            maxlength="30" pattern="[A-Za-z\s]+" title="Only alphabets and spaces are allowed."
                            placeholder="Enter Name">
                        <small class="form-text text-muted">Name must be between 3 and 30 characters.</small>
                    </div>
                   <div class="mb-2">
    <label for="link" class="form-label">Link</label>
    <input
        class="form-control"
        type="url"
        id="link"
        name="link"
        required
        placeholder="Enter a secure (https) URL"
    />
    <p class="error-message" id="link-error" style="display: none; color: red;"></p>
</div>


                    <div class="mb-2">
                        <label for="image" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="image" name="startDate" required>
                    </div>
                    <div class="mb-2">
                        <label for="image" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="image" name="endDate" required>
                    </div>
                    <div class="mb-2">
                        <label for="image" class="form-label">Image</label>
                        <input type="file" class="form-control" id="image" name="image" required
                            accept=".jpg, .jpeg, .png, .gif">
                        <small class="form-text text-muted">Recommended size: 656 X 326 pixels</small>
                    </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-primary">Add {{title}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title fs-5" id="editModalLabel"><b>Edit {{title}}</b></h3>
            </div>
            <form id="updatePartnerForm" action="" method="post" enctype="multipart/form-data"
                onsubmit="return validateEditForm()">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editCity" class="form-label">City Name</label>
                        <select class="form-control" id="editCity" name="city" required>
                            <option value="" selected disabled>Select City</option>
                            {{#each citys}}
                            <option value="{{this._id}}">{{this.name}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="editCityName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="editCityName" name="name" required minlength="3"
                            maxlength="30" pattern="[A-Za-z\s]+" title="Only alphabets and spaces are allowed.">
                        <small class="form-text text-muted">Name must be between 3 and 30 characters.</small>
                    </div>
                    <div class="mb-3">
                        <label for="editCitylink" class="form-label">Link</label>
                        <input type="url" class="form-control" id="editCitylink" name="link" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCityStartDate" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="editCityStartDate" name="startDate" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCityEndDate" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="editCityEndDate" name="endDate" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCityImage" class="form-label">Partner Image</label>
                        <input type="file" class="form-control" id="editCityImage" name="image"
                            accept=".jpg, .jpeg, .png, .gif">
                        <small class="form-text text-muted">Recommended size: 656 X 326 pixels</small>
                    </div>
                    <div class="mb-3">
                        <label for="editStatus" class="form-label">Status</label>
                        <select class="form-control" id="editStatus" name="status" required>
                            <option value="" selected disabled>Choose Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </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-primary">Update {{title}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Clear form data when the modal is hidden
    const addUserModal = document.getElementById('addUserModal');
    const addPartnerForm = document.getElementById('addPartnerForm');

    addUserModal.addEventListener('hidden.bs.modal', () => {
        addPartnerForm.reset(); // Reset the form
    });
</script>
<script>
    document.getElementById('searchInput').addEventListener('input', function () {
        const filter = this.value.toLowerCase();
        const rows = document.querySelectorAll('#example2 tbody tr');

        rows.forEach(row => {
            const cells = row.getElementsByTagName('td');
            let match = false;

            for (let i = 0; i < cells.length - 1; i++) { // Exclude Action column
                const cellText = cells[i].textContent || cells[i].innerText;
                if (cellText.toLowerCase().indexOf(filter) > -1) {
                    match = true;
                    break;
                }
            }

            row.style.display = match ? '' : 'none';
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('#statusFilter').on('change', function () {
            const selectedStatus = $(this).val();

            // Iterate over each table row and show/hide based on the selected status
            $('#example2 tbody tr').each(function () {
                const rowStatus = $(this).find('td:nth-child(8)').text().trim(); // Assuming status is in the 8th column

                // Show row if the status matches the filter or if "All" is selected
                if (selectedStatus === "All" || rowStatus === selectedStatus) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>

<script>
    document.querySelectorAll('tr').forEach(row => {
        row.addEventListener('mousedown', () => {
            row.classList.add('grabbing');
        });

        row.addEventListener('mouseup', () => {
            row.classList.remove('grabbing');
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const deleteModal = document.getElementById('deleteModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget; // Button that triggered the modal
            const id = button.getAttribute('data-id'); // Extract ID from data-id attribute
            const deleteLink = deleteModal.querySelector('.modal-footer a');

            // Update the href attribute of the delete link
            deleteLink.href = `/admin/events/delete/${id}`;
        });
    });

    document.getElementById("link").addEventListener("blur", function (event) {
    const url = event.target.value.trim(); // Get and trim the input value
    const linkError = document.getElementById("link-error");

    if (url.length > 0) {
        if (url.startsWith("https://")) {
            // Valid URL
            linkError.style.display = "none"; // Hide the error message
            linkError.textContent = ""; // Clear any existing error text
        } else {
            // Invalid URL
            linkError.style.display = "block";
            linkError.textContent = "Only HTTPS links are allowed.";
        }
    } else {
        linkError.style.display = "none"; // Hide error if input is empty
        linkError.textContent = "";
    }
});

</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const tableBody = document.querySelector("#example2 tbody");
        let draggedRow = null;

        // Make rows draggable
        tableBody.querySelectorAll(".draggable-row").forEach(row => {
            row.addEventListener("dragstart", function () {
                draggedRow = row;
                row.classList.add("dragging");
            });

            row.addEventListener("dragover", function (e) {
                e.preventDefault();
                const targetRow = e.target.closest("tr");
                if (targetRow && targetRow !== draggedRow) {
                    const rect = targetRow.getBoundingClientRect();
                    const next = (e.clientY - rect.top) > (rect.height / 2);
                    tableBody.insertBefore(draggedRow, next ? targetRow.nextSibling : targetRow);
                }
            });

            row.addEventListener("dragend", function () {
                draggedRow.classList.remove("dragging");
                draggedRow = null;
                updateSerialNumbers();
            });
        });

        function updateSerialNumbers() {
            tableBody.querySelectorAll("tr").forEach((row, index) => {
                row.querySelector("td:first-child").textContent = index + 1;
            });
            saveNewOrder();
        }

        // Function to collect the new order and send it to the backend
        async function saveNewOrder() {
            const orderedPromotions = Array.from(tableBody.querySelectorAll("tr")).map(row =>
                row.querySelector("a[data-id]").dataset.id
            );

            console.log("Ordered Promotions:", orderedPromotions); // Debugging line

            try {
                const response = await fetch('/admin/promotions/order', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ orderedPromotions })
                });

                if (response.ok) {
                    const result = await response.json();
                } else {
                    alert("Failed to save order.");
                }
            } catch (error) {
                console.error("Error:", error);
                alert("An error occurred while saving the order.");
            }
        }
    });

</script>

<script>
    $(document).ready(function () {
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // The button that triggered the modal
            var projectId = button.data('id');
            var name = button.data('name');
            var link = button.data('link');
            var image = button.data('image');
            var city = button.data('city');
            var startDate = button.data('startdate');
            var endDate = button.data('enddate');
            var status = button.data('status');

            var modal = $(this);
            modal.find('form').attr('action', '/admin/events/' + projectId);
            modal.find('#editCityName').val(name);
            modal.find('#editCitylink').val(link);
            modal.find('#editCity').val(city);
            modal.find('#editStatus').val(status);

            if (startDate) {
                var formattedStartDate = new Date(startDate).toISOString().split('T')[0];
                modal.find('#editCityStartDate').val(formattedStartDate);
            }
            if (endDate) {
                var formattedEndDate = new Date(endDate).toISOString().split('T')[0];
                modal.find('#editCityEndDate').val(formattedEndDate);
            }

            if (image) {
                modal.find('#editCityImagePreview').attr('src', '/path/to/images/' + image).show();
            } else {
                modal.find('#editCityImagePreview').hide();
            }
        });
    });
</script>

<script>
    // Script to disable past dates and validate start and end dates
    document.addEventListener("DOMContentLoaded", function () {
        const startDateInput = document.querySelector("input[name='startDate']");
        const endDateInput = document.querySelector("input[name='endDate']");

        // Disable past dates for start date
        const today = new Date();
        const formattedToday = today.toISOString().split("T")[0];
        startDateInput.setAttribute("min", formattedToday);
        endDateInput.setAttribute("min", formattedToday);

        // Adjust end date minimum based on selected start date
        startDateInput.addEventListener("change", function () {
            if (startDateInput.value) {
                endDateInput.setAttribute("min", startDateInput.value);
            } else {
                endDateInput.setAttribute("min", formattedToday);
            }
        });

        // Form validation
        window.validateForm = function () {
            const startDate = new Date(startDateInput.value);
            const endDate = new Date(endDateInput.value);

            if (startDate > endDate) {
                alert("The start date cannot be later than the end date.");
                return false;
            }

            return true;
        };
    });

</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle with Popper.js for modal functionality -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>

<script>
    // Script to disable past dates and validate start and end dates in Edit Modal
    document.addEventListener("DOMContentLoaded", function () {
        const editStartDateInput = document.querySelector("input[name='startDate']#editCityStartDate");
        const editEndDateInput = document.querySelector("input[name='endDate']#editCityEndDate");

        // Disable past dates for edit start date
        const today = new Date();
        const formattedToday = today.toISOString().split("T")[0];
        editStartDateInput.setAttribute("min", formattedToday);
        editEndDateInput.setAttribute("min", formattedToday);

        // Adjust end date minimum based on selected start date
        editStartDateInput.addEventListener("change", function () {
            if (editStartDateInput.value) {
                editEndDateInput.setAttribute("min", editStartDateInput.value);
            } else {
                editEndDateInput.setAttribute("min", formattedToday);
            }
        });

        // Form validation
        window.validateEditForm = function () {
            const startDate = new Date(editStartDateInput.value);
            const endDate = new Date(editEndDateInput.value);

            if (startDate > endDate) {
                alert("The start date cannot be later than the end date.");
                return false;
            }

            return true;
        };
    });
</script>

<script>
    // Improved Image Validation Script
    function validateImage(input) {
        const file = input.files[0];

        if (file) {
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            const maxFileSize = 4 * 1024 * 1024; // 4MB

            if (!allowedTypes.includes(file.type)) {
                alert('Only JPG and PNG files are allowed.');
                input.value = ''; // Clear the file input
                return;
            }

            if (file.size > maxFileSize) {
                alert('Image size should not exceed 4MB.');
                input.value = ''; // Clear the file input
                return;
            }

            // Validate image dimensions
            const img = new Image();
            img.onload = function () {
                const width = this.width;
                const height = this.height;

                if (width !== 656 || height !== 326) {
                    alert('Image dimensions must be 656x326 pixels.');
                    input.value = ''; // Clear the file input
                }
            };
            img.onerror = function () {
                alert('Invalid image file. Please select a valid image.');
                input.value = ''; // Clear the file input
            };

            img.src = URL.createObjectURL(file);
        }
    }

    // Add event listeners for Add Partner form
    const addImageInput = document.getElementById('image');
    if (addImageInput) {
        addImageInput.addEventListener('change', function () {
            validateImage(this);
        });
    }

    // Add event listeners for Edit Partner form
    const editImageInput = document.getElementById('editCityImage');
    if (editImageInput) {
        editImageInput.addEventListener('change', function () {
            validateImage(this);
        });
    }
</script>

</body>

<script>
    $(document).ready(function () {
        // Toast notifications based on success_msg and error
        const successMsg = '{{ success }}';
        const errorMsg = '{{ error }}';

        if (successMsg) {
            showToast('Success', successMsg, 'bg-success', 'fa-check-circle'); // Success icon
        }

        if (errorMsg) {
            showToast('Error', errorMsg, 'bg-danger', 'fa-times-circle'); // Error icon
        }

        function showToast(title, message, bgClass, iconClass) {
            const toastHTML = `
        <div class="toast ${bgClass} text-white" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000" style="width: 100%; max-width: 320px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden;">
            <div class="d-flex align-items-center" style="padding: 12px;">
                <i class="fa ${iconClass}" aria-hidden="true" style="font-size: 24px; margin-right: 12px;"></i>
                <div class="toast-body" style="flex-grow: 1; font-size: 16px; font-weight: 500; line-height: 1.5;">
                    ${message}
                </div>
                            <!-- Custom close button with icon -->
                <button type="button" class="custom-close-btn ms-2" data-bs-dismiss="toast" aria-label="Close">
                    <i class="fa fa-times" aria-hidden="true" style="font-size: 18px;"></i>
                </button>
            </div>
        </div>
                    `;
            $('#toast-container').append(toastHTML);
            $('.toast').toast('show');
        }


        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var cityId = button.data('id');
            var cityName = button.data('name');
            var cityImage = button.data('image');

            var modal = $(this);
            modal.find('#editCityName').val(cityName);
            modal.find('#updateCityForm').attr('action', '/superadmin/cities/update/' + cityId);
            modal.find('#editCityImage').val('');
        });

        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var projectId = button.data('id');
            var modal = $(this);
            modal.find('a.btn-danger').attr('href', '/superadmin/cities/' + projectId);
        });

        if (!$.fn.DataTable.isDataTable('#example2')) {
            $('#example2').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
            });
        }

        $('#summernote').summernote();
    });
</script>

<script>
    // Show the loader on page load
    document.onreadystatechange = function () {
        if (document.readyState !== "complete") {
            document.querySelector("body").style.visibility = "hidden";
            document.querySelector("#loader").style.visibility = "visible";
        } else {
            document.querySelector("#loader").style.display = "none";
            document.querySelector("body").style.visibility = "visible";
        }
    };
</script>

<script>
    function validateForm() {
        const name = document.getElementById('username').value;
        const link = document.getElementById('link').value;

        let isValid = true;

        // Validate name (30-40 characters)
        if (name.length < 30 || name.length > 40) {
            document.getElementById('nameError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('nameError').style.display = 'none';
        }

        return isValid; // Prevent form submission if validation fails
    }
</script>

<script>
    $(document).ready(function () {
        // Initialize table for #example2
        var table2 = $("#example2").addClass('table table-bordered table-striped').DataTable({
            "responsive": true,
            "ordering": true,
            "lengthChange": false,
            "autoWidth": false,
            "bPaginate": true,
            "bInfo": false,
            "searching": true,
            "pageLength": 10,
            order: [[0, 'asc']],
            "buttons": [
                {
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                'colvis'
            ]
        }).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');

        // Initialize table for #example1 with similar settings
        var table1 = $("#example1").addClass('table table-bordered table-striped').DataTable({
            "responsive": true,
            "ordering": true,
            "lengthChange": false,
            "autoWidth": false,
            "bPaginate": true,
            "bInfo": false,
            "searching": true,
            "pageLength": 10,
            order: [[0, 'asc']],
            "buttons": [
                {
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                'colvis'
            ]
        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    });
</script>




{{!--
<script src="/superAdmin/js/summernote-bs4.min.js"></script> --}}

</html>