{% 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');
        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;
        }
    }
</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 }}
                {% endif %} Available Timings</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}} 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>
                {% 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 %}

                <!-- 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) }}">
                            
                            <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">
                                        <div class="col-md-3">
                                            <input type="time" name="from_time_{{ each_record.day }}[]"
                                                class="form-control" value="{{ each_timing.fromTime }}">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="time" name="to_time_{{ each_record.day }}[]"
                                                class="form-control" value="{{ each_timing.toTime }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger"
                                                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>

                            <!-- 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>

                    <!-- Override Dates Tab -->
                    <div class="tab-pane fade {% if redirectval == 'overrides_dates_list' %}show active{% endif %}"
                        id="overrideDates">
                        {% if 'add' in session.get('patternPermissions', []) %}
                            <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>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for each_record in overridesDatesList %}
                                <tr>
                                    <td>{{ loop.index }}</td>
                                    <td>{{ each_record.overrideDate }}</td>
                                    <td>{{ each_record.formattedTimingsList }}</td>
                                    <td>
                                        {% if 'edit' in session.get('patternPermissions', []) %}
                                        <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('patternPermissions', []) %}
                                             <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>
                    </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_override_date',transactionType=transactionType) }}">
                        
                        <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>
                            </div>
                            <div id="timingContainer"></div>
                            <button type="button" class="btn btn-secondary" id="addMoreTimings">+ Add Time</button>

                          
                        </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">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) }}">
               
                <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 }}">
                            </div>
                            <div class="col-md-3">
                                <input type="time" class="form-control" name="to_time[]" value="{{ timing.toTime }}">
                            </div>
                            <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>

                <!-- 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 }}">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 %}

{% endblock %}