{% extends 'super_admin_templates/base.html' %}

{% block content %}

<style>
    .custom-btn {
        font-size: 12px;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
    }

    .time-input-group {
        padding: 10px;
    }
    .centered {
        text-align: center;
    }
</style>

<script>
    // Generic function to add a time slot
    function addTimeSlot(containerId,from_time='',to_time='', namePrefix = '') {
        var container = document.getElementById(containerId);
        var index = container.children.length + 1; // Unique index for new row

        var timeSlotRow = document.createElement('div');
        timeSlotRow.classList.add('row', 'time-input-group');
        timeSlotRow.id = `${containerId}_row_${index}`;

        var fromCol = document.createElement('div');
        fromCol.classList.add('col-md-3');
        var fromInput = document.createElement('input');
        fromInput.type = 'time';
        fromInput.name = `from_time${namePrefix}`;
        fromInput.value = from_time;
        fromInput.classList.add('form-control');
        fromInput.required = true;
        fromCol.appendChild(fromInput);

        var toCol = document.createElement('div');
        toCol.classList.add('col-md-3');
        var toInput = document.createElement('input');
        toInput.type = 'time';
        toInput.name = `to_time${namePrefix}`;
        toInput.value= to_time;
        toInput.classList.add('form-control');
        toInput.required = true;
        toCol.appendChild(toInput);

        var removeCol = document.createElement('div');
        removeCol.classList.add('col-md-2');
        var removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.classList.add('btn', 'btn-danger');
        removeButton.textContent = 'Remove';
        removeButton.addEventListener('click', function () {
            container.removeChild(timeSlotRow);
        });
        removeCol.appendChild(removeButton);

        timeSlotRow.appendChild(fromCol);
        timeSlotRow.appendChild(toCol);
        timeSlotRow.appendChild(removeCol);

        container.appendChild(timeSlotRow);
    }

    function removeParamsField(containerId, removeAll=false) {
    if (removeAll){
        var container = document.getElementById(containerId);
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
    }
    else{
        var container = document.getElementById(containerId);
        if (container.children.length > 1) {
            container.removeChild(container.lastChild);
        }
    }
}
    // Add event listener for modal's Add More Time button
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('addMoreTimings').addEventListener('click', function () {
            addTimeSlot('addtimingContainer'); // Add rows dynamically in modal
        });
    });
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }

    
</script>
<script>
    function opendeleteModal(each_modal) {
        $('#verifyDiv').hide();
        $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        const deleteBaseURL = "{{ url_for('patterns_configuarations.delete_holiday_date', dateId='__ID__') }}";
        const formAction = deleteBaseURL.replace('__ID__', each_modal.id);

        // Set the form action
        document.querySelector('#overrideDeleteModal form').action = formAction;

        // Set the hidden ID field
        document.getElementById('defaultVerificationId').value = each_modal.id || '';

        // Show the modal
        const modal = new bootstrap.Modal(document.getElementById('overrideDeleteModal'));
        modal.show();
    }
</script>

<script>
    function openaddModal(each_modal) {
        $('#verifyaddDiv').hide();
        $('#updateaddGenerateBtn').text('Generate OTP').prop('disabled', false).show();

    }
</script>

<script>
    function openUpdateModal(holiday) {
        $('#verifyupdateDiv').hide();
        $('#updateGenerateupdateBtn').text('Generate OTP').prop('disabled', false).show();
        // Set the form action URL using the ID
        const updateHolidayDate = "{{ url_for('patterns_configuarations.update_holiday_date',dateId='__ID__') }}";
        const formAction = updateHolidayDate.replace('__ID__', holiday.id);
        document.getElementById('defaultVerificationIdu').value = holiday.id || '';
        document.getElementById('update_holiday_date').action = formAction;
        console.log( holiday.holidayDateTimings )
        resetFormDataNew('update_holiday_date');

        // Populate the form fields
        // document.getElementById('updateFrom_time').value = holiday.from_time || '';
        // document.getElementById('updateTo_time').value = holiday.to_time || '';
        // console.log(holiday.overrideDate)
        const holidayDateTimings = holiday.holidayDateTimings || [];


        function formatDateToLocal(dateString) {
            if (!dateString) return '';

            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
            const day = String(date.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        }
        removeParamsField("updateTimingContainer",true);

        holidayDateTimings.forEach(row => {
            addTimeSlot('updateTimingContainer',row.fromTime,row.toTime)

        });
        const formattedDate = formatDateToLocal(holiday.overrideDate);
        document.getElementById('updateOverrideDate').value = formattedDate;
        console.log(formattedDate)




        const modal = new bootstrap.Modal(document.getElementById('editOverrideModal'));
        modal.show();
    }

</script>


<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Merchant Profile</h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Holiday Dates</li>
                </ol>
            </nav>
        </div>

        <!-- Start Tabs -->
        <div class="card custom-card">
            <div class="card-header">
                <h4 class="card-title"> Holiday Dates</h4>
            </div>
            <div class="card-body">
                <!-- Navigation Tabs -->
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                <ul class=flashes>
                    {% for message in messages %}
                    <h2><b>
                            <center style="color:green">{{ message }}</center>
                        </b></h2>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endwith %}

                <div class="">
                    <div class="" id="overrideDates">
                        {% if 'add' in session.get('holidaydatesPermissions', []) %}
                        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                            data-bs-target="#addTaskModal"  onClick="resetFormDataNew('add_holiday_date');openaddModal({})">Add Holiday Date</button>
                        {% endif %}
        
                        <div class="mt-3"></div>
                        <table class="table text-nowrap" style="padding-bottom: 200px;">
                            <thead class="table-primary">
                                <tr>
                                    <th>S.No</th>
                                    <th>Override Date</th>
                                    <th>Timings</th>
                                    {% if 'edit' in session.get('holidaydatesPermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% elif 'delete' in session.get('holidaydatesPermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                 {% if holidaytimingsList %}
                                {% for each_record in holidaytimingsList %}
                                <tr>
                                    <td>{{ snoCount + loop.index }}</td>

                                    {% if each_record.holidayDate %}
                                    <td>{{ each_record.holidayDate }}</td>
                                    {% else %}
                                    <td class="centered">-</td>
                                    {% endif %}
                                    
                                    {% if each_record.holidayDateTimings %}
                                    <td>{% for t in each_record.holidayDateTimings %}
                                        {{ t.fromTime }} - {{ t.toTime }}<br>
                                        {% endfor %}
                                    </td>
                                    {% else %}
                                    <td class="centered">-</td>
                                    {% endif %}
                                    

                                    <td>
                                        {% if 'edit' in session.get('holidaydatesPermissions', []) %}
                                        <a href="javascript:void(0);" onclick='openUpdateModal({
                                                "id": "{{ each_record.id }}",
                                                "overrideDate": {{ each_record.holidayDate |  tojson }},
                                                "holidayDateTimings":{{each_record.holidayDateTimings}}
                                            })'  class="btn btn-icon btn-sm btn-info-transparent rounded-pill"> <i class="ri-edit-line"></i>
                                         
                                        </a>
                                        {% endif %}


                                        {% if 'delete' in session.get('holidaydatesPermissions', []) %}
                                       <!--  <a href="javascript:void(0);"
                                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"
                                            data-bs-toggle="modal"
                                            data-bs-target="#overrideDeleteModal{{ loop.index }}">
                                            <i class="ri-delete-bin-line"></i>
                                        </a> -->
                                          <a href="javascript:void(0);" onclick='opendeleteModal({
                                                      "id": "{{ each_record.id }}",        
                                                  })' class="btn btn-icon btn-sm btn-danger-transparent rounded-pill" title="Click to delete">
                                                <i class="ri-delete-bin-line"></i>
                                            </a>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                                {% else %}
                                    <tr ><td colspan="7" style="text-align: center;">No Data Found</td> </tr>
                                    {% endif %}
                            </tbody>
                        </table>
                        
                    </div>
                    <div class="col-sm-12 col-md-12 mt-3">
                        <nav aria-label="Page navigation" class="pagination-style-1">
                            <ul class="pagination mb-0">
                                {% if pagination %}
                                <div class="pagination">
                                    {{ pagination.links }}
                                </div>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>


       
        <div class="modal fade" id="overrideDeleteModal" tabindex="-1" role="dialog"
            aria-labelledby="overrideDeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="overrideDeleteModalLabel">OTP Verification</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" 
                            action=""
                            enctype="multipart/form-data" data-requires-location>
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" id="latitude_delete" name="latitude">
                            <input type="hidden" id="longitude_delete" name="longitude">
                            <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">

                            <div class="form-group mt-3">
                                <button type="button" class="btn btn-warning generateOtpBtn"
                                    data-index="deleteoverride"  id="updateGenerateBtn"  data-mail-type="Profile Setup">Generate OTP</button>
                                <input type="hidden" id="otpLogiddeleteoverride" name="otpLogid">
                            </div>

                            <div class="form-group mt-3 otp-section" data-index="deleteoverride"
                                style="display: none;" id="verifyDiv" >
                                <label for="otpCodedeleteoverride">Enter OTP*</label>
                                <input type="text" class="form-control otp-input"
                                    id="otpCodedeleteoverride" name="otpCode" placeholder="Enter OTP">
                                <div class="mt-2">
                                <button type="button" class="btn btn-primary verifyOtpBtn"
                                    data-index="deleteoverride">Verify OTP</button>
                                <button type="button" class="btn btn-secondary resendOtpBtn"
                                    data-index="deleteoverride" data-mail-type="Profile Setup">Resend OTP</button>
                                </div>
                                <div id="otpMessagedeleteoverride" class="text-danger mt-2"></div>
                            </div>

                            <!-- Submit Button -->
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary updateBtn"
                                    id="updateBtndeleteoverride" disabled>Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        



        <!-- Add Override Date Modal -->
        <div class="modal fade" id="addTaskModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Override Date and Timings</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="POST" action="{{ url_for('patterns_configuarations.add_holiday_date') }}"
                        id="add_holiday_date">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_add" name="latitude">
                        <input type="hidden" id="longitude_add" name="longitude">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="overrideDate" class="form-label">Override Date</label>
                                <input type="date" class="form-control" id="overrideDate" name="overrideDate" required>
                                <span id="overrideDate_error" class="error"></span>
                            </div>

                            <!-- Timings -->
                            <div id="addtimingContainer">

                                <div class="row time-input-group mb-2">
                                    <div class="col-md-3">
                                        <input type="time" class="form-control" name="from_time">
                                        <span id="from_time_error" class="error"></span>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="time" class="form-control" name="to_time">
                                        <span id="to_time" class="error"></span>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger"
                                            onclick="this.parentElement.parentElement.remove()">Remove</button>
                                    </div>
                                </div>
                            </div>


                            <div id="timingContainer"></div>
                            <button type="button" class="btn btn-secondary" id="addMoreTimings">+ Add Time</button>

                            <div class="form-group mt-3">
                                <button type="button" class="btn btn-warning generateOtpBtn"
                                    data-index="addoverride" data-mail-type="Profile Setup" id="updateaddGenerateBtn">Generate OTP</button>
                                <input type="hidden" id="otpLogidaddoverride" name="otpLogid">
                            </div>

                            <div class="form-group mt-3 otp-section" data-index="addoverride" style="display: none;" id="verifyaddDiv">
                                <label for="otpCodeaddoverride">Enter OTP*</label>
                                <input type="text" class="form-control otp-input" id="otpCodeaddoverride" name="otpCode"
                                    placeholder="Enter OTP">
                                <div class="mt-2">
                                    <button type="button" class="btn btn-primary verifyOtpBtn"
                                        data-index="addoverride">Verify OTP</button>
                                    <button type="button" class="btn btn-secondary resendOtpBtn"
                                        data-index="addoverride" data-mail-type="Profile Setup">Resend OTP</button>
                                </div>
                                <div id="otpMessageaddoverride" class="text-danger mt-2"></div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="modal-footer justify-content-between">
                            <span id="errorMessage" class="error"></span>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary form_submit" id="updateBtnaddoverride"
                                disabled>Save</button>
                        </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">Save</button>
                        </div> -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>








<div class="modal fade" id="editOverrideModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Override Date and Timings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="update_holiday_date">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" id="latitude_update" name="latitude">
                <input type="hidden" id="longitude_update" name="longitude">
                <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdu">
                <div class="modal-body">

                    <!-- Override Date -->
                    <div class="mb-3">
                        <label for="updateHolidayDate" class="form-label">Override Date</label>
                        <input type="date" class="form-control" id="updateOverrideDate" name="overrideDate" readonly>
                        <span id="overrideDate_edit_error" class="error"></span>
                    </div>

                    <!-- Timings -->
                    <div id="updateTimingContainer">

                        <!-- <div class="row time-input-group mb-2">
                            <div class="col-md-3">
                                <input type="time" class="form-control" name="from_time" id="updateFrom_time">
                                <span id="from_time_edit_error" class="error"></span>
                            </div>
                            <div class="col-md-3">
                                <input type="time" class="form-control" name="to_time" id="updateTo_time">
                                <span id="to_time_edit_error" class="error"></span>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger"
                                    onclick="this.parentElement.parentElement.remove()">Remove</button>
                            </div>
                        </div> -->
                    </div>

                    <!-- Add More Timings Button -->
                    <button type="button" class="btn btn-secondary mt-2"
                        onclick="addTimeSlot('updateTimingContainer')">+ Add Time</button>

                    <div class="form-group mt-3">
                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="u" data-mail-type="Profile Setup" id="updateGenerateupdateBtn">Generate
                            OTP</button>
                        <input type="hidden" id="otpLogidu" name="otpLogid">
                    </div>

                    <div class="form-group mt-3 otp-section" data-index="u" style="display: none;" id="verifyupdateDiv">
                        <label for="otpCodeu">Enter OTP*</label>
                        <input type="text" class="form-control otp-input" id="otpCodeu" name="otpCode"
                            placeholder="Enter OTP">
                        <div class="mt-2">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="u">Verify
                                OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="u" data-mail-type="Profile Setup">Resend OTP</button>
                        </div>
                        <div id="otpMessageu" class="text-danger mt-2"></div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="modal-footer justify-content-between">
                    <span id="edit_errorMessage" class="error"></span>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit" id="updateBtnu" disabled>Update</button>
                </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</button>
                </div> -->
            </form>
        </div>
    </div>
</div>


<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("form[data-requires-location]").forEach(function (form) {
        form.addEventListener("submit", function (event) {
            const latInput = form.querySelector("input[name='latitude']");
            const lngInput = form.querySelector("input[name='longitude']");

            if (latInput?.value && lngInput?.value) {
                return;
            }

            event.preventDefault();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        latInput.value = position.coords.latitude;
                        lngInput.value = position.coords.longitude;
                        form.submit();
                    },
                    function () {
                        alert("Location access is required to proceed. Please enable location services.");
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 10000,
                        maximumAge: 0
                    }
                );
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        });
    });
});
</script>
<script type="text/javascript">

    $(document).ready(function () {

        $('#add_holiday_date').validate({
            rules: {
                overrideDate: {
                    required: true,
                },
                from_time: {
                    required: true,
                },
                to_time: {
                    required: true,
                },
            },
            messages: {
                overrideDate: {
                    required: 'Override Date is required',
                },
                from_time: {
                    required: 'From Time is required',
                },
                to_time: {
                    required: 'To Time Date is required',
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (lat, lng) => {
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);

                        let formData = new FormData(form);
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();
                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_error").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            }
                        });
                    },
                    function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });
    });


    $(document).ready(function () {

        $('#update_holiday_date').validate({
            rules: {
                overrideDate: {
                    required: true,
                },
                from_time: {
                    required: true,
                },
                to_time: {
                    required: true,
                },
            },
            messages: {
                overrideDate: {
                    required: 'Override Date is required',
                },
                from_time: {
                    required: 'From Time is required',
                },
                to_time: {
                    required: 'To Time Date is required',
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (lat, lng) => {
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);

                        let formData = new FormData(form);
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();
                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_error").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#edit_errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            }
                        });
                    },
                    function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });
    });


</script>






{% endblock %}