{% 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;
    }
</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">{% if transactionType == "paymentgateway" %}
                Payin
                {% else %}
                {{ transactionType|lower|capitalize }}
                {% endif %} Sites Available Timings - {{siteName}}</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">{{transactionType}} Sites Available Timings</li>
                </ol>
            </nav>
        </div>
        <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>
        <!-- Start Tabs -->
        <div class="card custom-card">
            <div class="card-header">
                <h4 class="card-title">{% if transactionType == "paymentgateway" %}
                    Payin
                    {% else %}
                    {{ transactionType|lower|capitalize }}
                    {% endif %} Sites Available Timings Configuration - {{siteName}}</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>


                <!-- 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.sites_available_timings',transactionType=transactionType,siteId=siteId) }}" id="avtime" name="avtime">
                            <!-- <input type="hidden" id="siteId" name="siteId" value="{{siteId}}"> -->
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">
                            <input type="hidden" id="latitude" name="latitude">
                            <input type="hidden" id="longitude" 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" disabled>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>
                                <span id="otpCode_error" class="error"></span>
                            </div>

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

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


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


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



<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();
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                getLocationAndProceed(
                    function (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) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value);
                                    });
                                } else if (response.responseStatus === 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#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.");
                        }
                    );
                }
            });
        $('#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();
                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.');
                    }
                });
            }
        });

        // 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();
                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.');
                    }
                });
            }
        });

    });

});

        

</script>

{% endblock %}