{% 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, 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', 'align-items-end', 'g-2');
        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.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.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 to toggle time inputs for specific days
    function toggleTimeInputs(day) {
        var checkbox = document.getElementById('checkbox_' + day);
        var timeInputsContainer = document.getElementById('time_inputs_' + day);

        if (checkbox.checked) {
            timeInputsContainer.style.display = 'block';
        } else {
            timeInputsContainer.style.display = 'none';
        }
    }
    function toggleDaysInput() {
        var checkbox = document.getElementById('is_enabled');
        var daysContainer = document.getElementById('daysDiv');

        console.log("vvvvvvvvvvv", checkbox)

        if (checkbox.checked) {
            daysContainer.style.display = 'block';
        } else {
            daysContainer.style.display = 'none';
        }
    }

    // Add event listener for modal's Add More Time button
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('addMoreTimings').addEventListener('click', function () {
            addTimeSlot('timingContainer'); // Add rows dynamically in modal
        });
    });
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }
    function clearAllTimings() {
        if (confirm("Are you sure you want to clear all timings and uncheck all days?")) {
            // Loop through each day's time inputs container
            const dayContainers = document.querySelectorAll('.time-inputs');

            dayContainers.forEach(container => {
                const containerId = container.id;  // e.g., time_inputs_Sunday
                const day = containerId.replace('time_inputs_', '');

                // Uncheck the corresponding day checkbox
                const checkbox = document.getElementById(`checkbox_${day}`);
                if (checkbox) {
                    checkbox.checked = false;
                }

                // Hide the time input container
                container.style.display = 'none';

                // Remove all time input groups
                const timeGroups = container.querySelectorAll('.time-input-group');
                timeGroups.forEach(group => group.remove());

                // Also clear dynamically added time slots, if any
                const dynamicList = document.getElementById(`time_inputs_${day}_list`);
                if (dynamicList) {
                    dynamicList.innerHTML = '';
                }
            });
        }
    }

</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">{% if transactionType == "paymentgateway" %}
                        Payin
                        {% else %}
                        {{ transactionType|lower|capitalize }}
                        {% endif %} Available Timings</li>
                </ol>
            </nav>
        </div>

        <!-- Start Tabs -->
        <div class="card custom-card">
            <div class="card-header">
                <h4 class="card-title">{% if transactionType == "paymentgateway" %}
                    Payin
                    {% else %}
                    {{ transactionType }}
                    {% endif %} Available Timings Configuration</h4>
            </div>
            <div class="card-body">
                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">

                        <a class="nav-link {% if redirectval == 'timingsList' %}active{% endif %}" data-bs-toggle="tab"
                            href="#payinTimings">{% if transactionType == "paymentgateway" %}
                            Payin
                            {% else %}
                            {{ transactionType }}
                            {% endif %} Timings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if redirectval == 'overrides_dates_list' %}active{% endif %}"
                            data-bs-toggle="tab" href="#overrideDates">Override Dates</a>
                    </li>
                </ul>
                <div class="flashes">

                    {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                    {% for category, message in messages %}
                    {% if category == "success" %}
                    <h2><b>
                            <center style="color:green">{{ message }}</center>
                        </b></h2>
                    {% elif category == "danger" %}
                    <h2><b>
                            <center style="color:red">{{ message }}</center>
                        </b></h2>
                    {% else %}
                    <h2><b>
                            <center style="color:orange">{{ message }}</center>
                        </b></h2>
                    {% endif %}
                    {% endfor %}
                    {% endif %}
                    {% endwith %}
                </div>

                <!-- Tab Content -->
                <div class="tab-content">
                    <!-- Payin Timings Tab -->
                    <div class="tab-pane fade {% if redirectval == 'timingsList' %}show active{% endif %}"
                        id="payinTimings">
                        <form method="POST"
                            action="{{ url_for('patterns_configuarations.available_timings',transactionType=transactionType) }}"
                            id="avtime" name="avtime">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">
                            <input type="hidden" id="latitude_timings" name="latitude">
                            <input type="hidden" id="longitude_timings" name="longitude">
                            <div class="mt-3">
                                <button type="button" class="btn btn-warning" onclick="clearAllTimings()">Reset
                                    Timings</button>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="is_enabled" name="is_enabled"
                                    value="True" {% if is_enabled %}checked{% endif %} onclick="toggleDaysInput()">
                                <label class="form-check-label" for="is_enabled">Enable {% if transactionType ==
                                    "paymentgateway" %}
                                    Payin
                                    {% else %}
                                    {{ transactionType }}
                                    {% endif %}
                                    Timings</label>
                            </div>

                            <div id="daysDiv" style="display: {% if is_enabled %}block{% else %}none{% endif %};">

                                {% for each_record in available_timings_data_list %}
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="checkbox_{{ each_record.day }}"
                                        name="{{ each_record.day }}_is_enabled" value="True" {% if
                                        each_record.is_enabled %}checked{% endif %}
                                        onclick="toggleTimeInputs('{{ each_record.day }}')">
                                    <label class="form-check-label" for="checkbox_{{ each_record.day }}">{{
                                        each_record.day
                                        }}</label>
                                </div>

                                <div class="form-group time-inputs" id="time_inputs_{{ each_record.day }}"
                                    style="display: {% if each_record.is_enabled %}block{% else %}none{% endif %};">


                                    {% for each_timing in each_record.timingsList %}
                                    <div class="row time-input-group align-items-end g-2">
                                        <div class="col-md-3">
                                            <label for="from_time_{{ each_record.day }}[]" class="form-label">Start
                                                Time</label>
                                            <input type="time" name="from_time_{{ each_record.day }}[]"
                                                class="form-control" value="{{ each_timing.fromTime }}"
                                                id="from_time_{{ each_record.day }}[]">
                                            <span id="from_time_{{ each_record.day }}[]_error" class="error"></span>

                                        </div>

                                        <div class="col-md-3">
                                            <label for="to_time_{{ each_record.day }}[]" class="form-label">End
                                                Time</label>
                                            <input type="time" name="to_time_{{ each_record.day }}[]"
                                                class="form-control" value="{{ each_timing.toTime }}"
                                                id="to_time_{{ each_record.day }}[]">
                                            <span id="to_time_{{ each_record.day }}[]_error" class="error"></span>
                                        </div>


                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger mt-4"
                                                onclick="this.parentElement.parentElement.remove()">Remove</button>
                                        </div>
                                    </div>
                                    {% endfor %}
                                    <div id="time_inputs_{{ each_record.day }}_list">

                                    </div>
                                    <button type="button" class="btn btn-primary custom-btn"
                                        onclick="addTimeSlot('time_inputs_{{ each_record.day }}_list', '_{{ each_record.day }}')">+
                                        Add Time</button>
                                </div>
                                {% endfor %}

                            </div>

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

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

                            <!-- Submit Button -->
                            <div class="modal-footer justify-content-between">
                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtnadd"
                                    disabled>Submit</button>
                            </div>

                            <!-- <button type="submit" class="btn btn-primary mt-4">Submit</button> -->
                        </form>
                    </div>

                    <!-- Override Dates Tab -->
                    <div class="tab-pane fade {% if redirectval == 'overrides_dates_list' %}show active{% endif %}"
                        id="overrideDates">
                        {% if 'add' in session.get('payinAvailableTimePermissions', []) %}
                        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                            data-bs-target="#addTaskModal">Add Override 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('payinAvailableTimePermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% elif 'delete' in session.get('payinAvailableTimePermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% endif %}
                                    
                                </tr>
                            </thead>
                            <tbody>
                                {% for each_record in overridesDatesList %}
                                <tr>
                                    <td>{{ loop.index }}</td>

                                    {% if each_record.overrideDate %}
                                    <td>{{ each_record.overrideDate }}</td>
                                    {% else %}
                                    <td class="centered">-</td>
                                    {% endif %}

                                    {% if each_record.formattedTimingsList %}
                                    <td>{{ each_record.formattedTimingsList }}</td>
                                    {% else %}
                                    <td class="centered">-</td>
                                    {% endif %}
                                    
                                    
                                    <td>
                                        {% if 'edit' in session.get('payinAvailableTimePermissions', []) %}
                                        <button class="btn btn-sm btn-info" data-bs-toggle="modal"
                                            data-bs-target="#editOverrideModal{{ loop.index }}">Edit</button>
                                        {% endif %}
                                        <!-- <a href="javascript:void(0);"
                                            onclick="confirmDelete('{{ url_for('patterns_configuarations.delete_override_date',overrideDate=each_record.overrideDate,transactionType=transactionType) }}')"><span
                                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                                    class="ri-delete-bin-line"></i></span></a>
                                        </a> -->
                                        {% if 'delete' in session.get('payinAvailableTimePermissions', []) %}
                                        <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>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% if not overridesDatesList %}
                        <h5 class="mt-2" style="text-align: center; font-size: medium;">No Data Found</h5>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>


        {% for each_record in overridesDatesList %}
        <div class="modal fade" id="overrideDeleteModal{{ loop.index }}" tabindex="-1" role="dialog"
            aria-labelledby="overrideDeleteModalLabel{{ loop.index }}" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="overrideDeleteModalLabel{{ loop.index }}">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="{{ url_for('patterns_configuarations.delete_override_date',overrideDate=each_record.overrideDate,transactionType=transactionType) }}"
                            enctype="multipart/form-data" data-requires-location>
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" id="latitude_delete{{ loop.index }}" name="latitude">
                            <input type="hidden" id="longitude_delete{{ loop.index }}" name="longitude">

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

                            <div class="form-group mt-3 otp-section" data-index="deleteoverride{{ loop.index }}"
                                style="display: none;">
                                <label for="otpCodedeleteoverride{{ loop.index }}">Enter OTP*</label>
                                <input type="text" class="form-control otp-input"
                                    id="otpCodedeleteoverride{{ loop.index }}" name="otpCode" placeholder="Enter OTP">
                                <div class="mt-2">
                                    <button type="button" class="btn btn-primary verifyOtpBtn"
                                        data-index="deleteoverride{{ loop.index }}">Verify OTP</button>
                                    <button type="button" class="btn btn-secondary resendOtpBtn"
                                        data-index="deleteoverride{{ loop.index }}" data-mail-type="Profile Setup">Resend OTP</button>
                                </div>
                                <div id="otpMessagedeleteoverride{{ loop.index }}" 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{{ loop.index }}" disabled>Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}



        <!-- 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_override_date',transactionType=transactionType) }}"
                        id="ovdata" name="ovdata">
                        <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"
                                    id="ovdate" name="ovdate" required>
                            </div>
                            <span id="ovdate_error" class="error"></span>

                            <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">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;">
                                <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">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary updateBtn" 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>





{% for each_record in overridesDatesList %}
<div class="modal fade" id="editOverrideModal{{ loop.index }}" 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 for {{ each_record.overrideDate }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST"
                action="{{ url_for('patterns_configuarations.update_override_date',transactionType=transactionType) }}"
                id="updateodt{{ loop.index }}" name="updateodt{{ loop.index }}">
                <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">
                <div class="modal-body">
                    <!-- Hidden Field for Override Index -->
                    <input type="hidden" id="updateOverrideIndex{{ loop.index }}" name="overrideIndex"
                        value="{{ loop.index0 }}">

                    <!-- Override Date -->
                    <div class="mb-3">
                        <label for="updateOverrideDate{{ loop.index }}" class="form-label">Override Date</label>
                        <input type="date" class="form-control" id="updateOverrideDate{{ loop.index }}"
                            name="overrideDate" value="{{ each_record.overrideDate }}" readonly>
                    </div>

                    <!-- Timings -->
                    <div id="updateTimingContainer{{ loop.index }}">
                        {% for timing in each_record.timingsList %}

                        <div class="row time-input-group mb-2">
                            <div class="col-md-3">
                                <input type="time" class="form-control" name="from_time[]" value="{{ timing.fromTime }}"
                                    id="totime" name="totime" id="fTime" name="fTime">
                            </div>
                            <span id="fTime_error" class="error"></span>
                            <div class="col-md-3">
                                <input type="time" class="form-control" name="to_time[]" value="{{ timing.toTime }}"
                                    id="tTime" name="tTime">
                            </div>
                            <span id="tTime_error" class="error"></span>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger"
                                    onclick="this.parentElement.parentElement.remove()">Remove</button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

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

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

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

                <!-- Submit Button -->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtnu{{ loop.index }}"
                        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>
{% endfor %}

<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">
    // Clear custom validation messages on input
    $('input, select').on('invalid', function () {
        this.setCustomValidity('');
    }).on('input change', function () {
        this.setCustomValidity('');
    });

    $(document).ready(function () {

        // Validation for dtime form
        $('#avtime').validate({
            errorElement: 'div',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {

                'from_time_Sunday[]': { required: true },
                'to_time_Sunday[]': { required: true },
                'from_time_Monday[]': { required: true },
                'to_time_Monday[]': { required: true },
                'from_time_Tuesday[]': { required: true },
                'to_time_Tuesday[]': { required: true },
                'from_time_Wednesday[]': { required: true },
                'to_time_Wednesday[]': { required: true },
                'from_time_Thursday[]': { required: true },
                'to_time_Thursday[]': { required: true },
                'from_time_Friday[]': { required: true },
                'to_time_Friday[]': { required: true },
                'from_time_Saturday[]': { required: true },
                'to_time_Saturday[]': { required: true }
            },
            messages: {
                'from_time_Sunday[]': { required: 'This field is required' },
                'to_time_Sunday[]': { required: 'This field is required' },
                'from_time_Monday[]': { required: 'This field is required' },
                'to_time_Monday[]': { required: 'This field is required' },
                'from_time_Tuesday[]': { required: 'This field is required' },
                'to_time_Tuesday[]': { required: 'This field is required' },
                'from_time_Wednesday[]': { required: 'This field is required' },
                'to_time_Wednesday[]': { required: 'This field is required' },
                'from_time_Thursday[]': { required: 'This field is required' },
                'to_time_Thursday[]': { required: 'This field is required' },
                'from_time_Friday[]': { required: 'This field is required' },
                'to_time_Friday[]': { required: 'This field is required' },
                'from_time_Saturday[]': { required: 'This field is required' },
                'to_time_Saturday[]': { required: 'This field is required' }
            },
            submitHandler: function (form, event) {
                event.preventDefault();
                getLocationAndProceed(
                    (lat, lng) => {
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);
                        let formData = new FormData(form);
                        $('.error').text('');
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                console.log('RESPONSE:', response);
                                if (response.responseStatus === 1 || response.responseStatus === 4) {
                                    form.reset();
                                    location.reload();
                                } else if (response.responseStatus === 0) {
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value);
                                    });
                                } else if (response.responseStatus === 2) {
                                    $('#errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            },
                            error: function () {
                                $('#errorMessage').text('Something went wrong. Please try again.');
                            }
                        });
                    },
                    function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }
            });

        // Validation for addoveridedate form
        $('#ovdata').validate({
            errorElement: 'div',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                'ovdate': { required: true },
                'from_time_Sunday[]': { required: true },
                'to_time_Sunday[]': { required: true },
                'from_time_Monday[]': { required: true },
                'to_time_Monday[]': { required: true },
                'from_time_Tuesday[]': { required: true },
                'to_time_Tuesday[]': { required: true },
                'from_time_Wednesday[]': { required: true },
                'to_time_Wednesday[]': { required: true },
                'from_time_Thursday[]': { required: true },
                'to_time_Thursday[]': { required: true },
                'from_time_Friday[]': { required: true },
                'to_time_Friday[]': { required: true },
                'from_time_Saturday[]': { required: true },
                'to_time_Saturday[]': { required: true }

            },
            messages: {
                'ovdate': { required: 'Please Select Default Profile' },
                'from_time_Sunday[]': { required: 'This field is required' },
                'to_time_Sunday[]': { required: 'This field is required' },
                'from_time_Monday[]': { required: 'This field is required' },
                'to_time_Monday[]': { required: 'This field is required' },
                'from_time_Tuesday[]': { required: 'This field is required' },
                'to_time_Tuesday[]': { required: 'This field is required' },
                'from_time_Wednesday[]': { required: 'This field is required' },
                'to_time_Wednesday[]': { required: 'This field is required' },
                'from_time_Thursday[]': { required: 'This field is required' },
                'to_time_Thursday[]': { required: 'This field is required' },
                'from_time_Friday[]': { required: 'This field is required' },
                'to_time_Friday[]': { required: 'This field is required' },
                'from_time_Saturday[]': { required: 'This field is required' },
                'to_time_Saturday[]': { required: 'This field is required' }

            },
        //     submitHandler: function (form, event) {
        //         event.preventDefault();
        //         getLocationAndProceed(
        //             (lat, lng) => {
        //                 $(form).find('input[name="latitude"]').val(lat);
        //                 $(form).find('input[name="longitude"]').val(lng);
        //                 let formData = new FormData(form);
        //                 $('.error').text('');
        //                 $.ajax({
        //                     url: form.action,
        //                     type: form.method,
        //                     data: formData,
        //                     processData: false,
        //                     contentType: false,
        //                     success: function (response) {
        //                         console.log('RESPONSE:', response);
        //                         if (response.responseStatus === 1 || response.responseStatus === 4) {
        //                             form.reset();
        //                             location.reload();
        //                         } else if (response.responseStatus === 0) {
        //                             $.each(response.result, function (key, value) {
        //                                 $('#' + key + "_error").text(value);
        //                             });
        //                         } else if (response.responseStatus === 2) {
        //                             $('#errorMessage').text(response.result);
        //                         } else {
        //                             location.reload();
        //                         }
        //                     },
        //                     error: function () {
        //                         $('#errorMessage').text('Something went wrong. Please try again.');
        //                     }
        //                 });
        //             },
        //             function () {
        //             $('.form_submit').prop('disabled', false);
        //             $('#newLoadingModel').hide();
        //             alert("Location access is required to proceed. Please enable it in your browser.");
        //         }   
        //     );
        // }
    });

        // Validation for updateoddate form

        // $('form[id^="updateodt"]').each(function () {
        //     $(this).validate({
        //         errorElement: 'div',
        //         errorClass: 'error',
        //         errorPlacement: function (error, element) {
        //             error.insertAfter(element);
        //         },
        //         ignore: ":hidden",
        //         rules: {
        //             fTime: { required: true },
        //             tTime: { required: true }
        //         },
        //         messages: {
        //             fTime: { required: 'This field is required' },
        //             tTime: { required: 'This field is required' }
        //         },
        //         submitHandler: function (form, event) {
        //             event.preventDefault();
        //             getLocationAndProceed(
        //             (lat, lng) => {
        //                 $(form).find('input[name="latitude"]').val(lat);
        //                 $(form).find('input[name="longitude"]').val(lng);
        //                 let formData = new FormData(form);
        //                 $('.error').text('');
        //                 $.ajax({
        //                     url: form.action,
        //                     type: form.method,
        //                     data: formData,
        //                     processData: false,
        //                     contentType: false,
        //                     success: function (response) {
        //                         console.log('RESPONSE:', response);
        //                         if (response.responseStatus === 1 || response.responseStatus === 4) {
        //                             form.reset();
        //                             window.location.reload();
        //                         } else if (response.responseStatus === 0) {
        //                             $.each(response.result, function (key, value) {
        //                                 $('#' + key + "_edit_error").text(value);
        //                             });
        //                         } else if (response.responseStatus === 2) {
        //                             $('#EditErrorMessage').text(response.result);
        //                         } else {
        //                             location.reload();
        //                         }
        //                     },
        //                     error: function () {
        //                         $('#EditErrorMessage').text('Something went wrong. Please try again.');
        //                     }
        //                 });
        //                 },
        //                 function () {
        //                     $('.form_submit').prop('disabled', false);
        //                     $('#newLoadingModel').hide();
        //                         alert("Location access is required to proceed. Please enable it in your browser.");
        //                     }
        //                 );
        //             }
        //         });

        //     });

        });

</script>

{% endblock %}