{% include "header.html" %}
{% load custom_filters %} {# Moved this to the top #}
<style>
    .larger-checkbox {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    .select2-container .select2-selection--multiple {
        min-height: 40px;
        border-radius: 6px;
    }

    .remove-slot {
        margin-top: 33px !important;
    }
    .tname{
        font-size: 16px;
    }
    .ename{
        font-size: 16px;
    }
</style>
<!-- Header Layout Content -->
<div class="mdk-header-layout__content">
    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container page__heading-container">
                <div class="page__heading">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#"><i class="material-icons icon-20pt">home</i></a>
                            </li>
                            <li class="breadcrumb-item">Batch Students</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="container ">
                <div class="card shadow p-4">
                    <div class="row border-bottom">
                        <div class="col-md-12">
                            <h3 class="my-3">Batch Details</h3>
                        </div>


                    </div>
                    <div class="row py-4">
                        <!-- Batch Name -->
                        <div class="col-md-4 mb-3">

                            <p class="fs-5"><strong>Batch Name:</strong> {{ batch.batch_name }}</p>

                        </div>

                        <!-- Exam Category -->
                        <div class="col-md-4 mb-3">
                            <p class="fs-5"> <strong>Exam Category:</strong> <span class="">
                                {{ batch.exam_category.exam_category_name }}</span> </p>
                        </div>

                        <!-- Status -->
                        <div class="col-md-4 mb-3">
                            <p class="fs-5"> <strong>Status:</strong>
                                <span
                                    class="badge fs-6 {% if batch.status == 'Active' %}bg-success{% else %}bg-danger{% endif %}">
                                    {{ batch.status }}
                                </span>
                            </p>

                        </div>

                        <!-- Merged Batches -->
                        <div class="col-md-12 mb-3">
                            <div class="d-flex gap-2 fs-5">
                                <strong>Merged Batches:</strong>
                                {% if batch.merged_batches.all %}
                                <div>
                                    {% for merged_batch in batch.merged_batches.all %}
                                    <span class="badge bg-primary fs-6 me-1">{{ merged_batch.batch_name }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <span class="text-muted">No merged batches</span>
                                {% endif %}
                            </div>

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


            <div class="container page__container exam-module">
                <div class="card card-form">
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="batch-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="batch-students-tab" data-bs-toggle="pill"
                                    data-bs-target="#batch-students" type="button" role="tab"
                                    aria-controls="batch-students" aria-selected="true">Student List</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="batch-topic-times-tab" data-bs-toggle="pill"
                                    data-bs-target="#batch-topic-times" type="button" role="tab"
                                    aria-controls="batch-topic-times" aria-selected="false">Batch Topic Timing</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="batch-weakly-tab" data-bs-toggle="pill"
                                    data-bs-target="#batch-weakly" type="button" role="tab" aria-controls="batch-weakly"
                                    aria-selected="false">Weakly Time Slot</button>
                            </li>
                             <li class="nav-item" role="presentation">
                                <button class="nav-link" id="monthly-lectures-tab" data-bs-toggle="pill"
                                    data-bs-target="#monthly-lectures" type="button" role="tab" aria-controls="monthly-lectures"
                                    aria-selected="false">Monthly Lectures</button>
                            </li>



                        </ul>

                        <div class="tab-content" id="batch-tabs-content">
                            <!-- Student List Tab -->
                            <div class="tab-pane fade show active" id="batch-students" role="tabpanel"
                                aria-labelledby="batch-students-tab">
                                <div class="table-responsive border-bottom">
                                    <table class="table table-stripped mb-0 thead-border-top-0">
                                        <thead class="table-heading">
                                            <tr>
                                                <th class="table-head">SR. No.</th>
                                                <th class="table-head">Name</th>
                                                <th class="table-head">Email</th>
                                                <th class="table-head">Mobile</th>
                                                <th class="table-head">WhatsApp</th>
                                                <th class="table-head">Added Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for student in student_list %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td><a
                                                        href="{{ SITE_URL }}/admin/student_profile/{{ student.student.id }}">
                                                        {{ student.student.first_name }} {{ student.student.last_name }}
                                                    </a>
                                                </td>
                                                <td>{{ student.student.email }}</td>
                                                <td>{{ student.student.mobile }}</td>
                                                <td>{{ student.student.whatsapp_number }}</td>
                                                <td>{{ student.student.created_at }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="6" class="text-center">No students found.</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Batch Topic Timing Tab -->
                            <div class="tab-pane fade" id="batch-topic-times" role="tabpanel"
                                aria-labelledby="batch-topic-times-tab">
                                <div class="table-responsive border-bottom">
                                    <form method="POST">
                                        {% csrf_token %}
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Exam Category</th>
                                                    <th>Section</th>
                                                    <th>Sub Section</th>
                                                    <th>Topic</th>
                                                    <!-- <th>No. of Lectures saved </th> -->
                                                    <th>No. of Lectures </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% if exam_syllabus %}
                                                {% for syllabus in exam_syllabus %}
                                                <tr>
                                                    <td>{{ forloop.counter }}</td>
                                                    <td>{{ syllabus.exam_category.exam_category_name }}</td>
                                                    <td>{{ syllabus.section.section_name }}</td>
                                                    <td>{{ syllabus.sub_section.sub_section_name }}</td>
                                                    <td>{{ syllabus.topic.topic_name }}</td>

                                                    <td>
                                                        <input type="number" name="lectures_{{ syllabus.topic.id }}"
       value="{{ syllabus.no_of_lectures }}"
       min="0" class="form-control">

                                                    </td>
                                                </tr>
                                                {% endfor %}
                                                {% else %}
                                                <tr>
                                                    <td colspan="6" class="text-center">No syllabus found for this
                                                        batch.</td>
                                                </tr>
                                                {% endif %}
                                            </tbody>


                                            <tfoot>
                                                <tr>
                                                    <td colspan="6" class="text-center">
                                                        <button type="submit" class="btn theme-btn btn-primary">Update
                                                            No. of lectures </button>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </form>
                                </div>
                            </div>


                            <div class="tab-pane fade" id="batch-weakly" role="tabpanel" aria-labelledby="batch-weakly">
                                <div class="container daycontainer">
                                    <div class="">

                                        <div class="">
                                            <div class="row py-4">
                                                <div class="col-12 ">
                                                    <h3>Time Slot Available Details</h3>
                                                </div>
                                            </div>
                                            <!-- Nav Tabs for Days of the Week -->
                                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                {% for day, slots in time_slots_list %}
                                                <li class="nav-item me-3" role="presentation">
                                                    <button
                                                        class="nav-link btn-outline-warning border {% if forloop.first %}active{% endif %}"
                                                        id="tab-{{ day }}" data-bs-toggle="pill"
                                                        data-bs-target="#content-{{ day }}" type="button" role="tab">
                                                        {{ day }}
                                                    </button>
                                                </li>
                                                {% endfor %}
                                            </ul>

                                            <!-- Tab Content for Time Slots -->
                                            <div class="tab-content" id="pills-tabContent">
                                                {% for day, slots in time_slots_list %}
                                                <div class="tab-pane fade text-end {% if forloop.first %}show active{% endif %}"
                                                    id="content-{{ day }}" role="tabpanel">
                                                    <button class="btn btn-primary add-slot-btn" data-day="{{ day }}"
                                                        data-bs-toggle="modal" data-bs-target="#addTimeSlotModal">
                                                        Add Time Slot
                                                    </button>
                                                    <div class="table-responsive text-center">
                                                        <table class="table mt-3">
                                                            <thead>
                                                                <tr>
                                                                    <th>Start Time</th>
                                                                    <th>End Time</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for slot in slots %}
                                                                <tr>
                                                                    <td>{{ slot.start_time }}</td>
                                                                    <td>{{ slot.end_time }}</td>
                                                                    <td>
                                                                        <button class="btn btn-danger delete-slot"
                                                                            data-id="{{ slot.id }}">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                                {% empty %}
                                                                <tr>
                                                                    <td colspan="3" class="text-center text-muted">No time
                                                                        slots available.</td>
                                                                </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                   
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                              <div class="tab-pane fade " id="monthly-lectures" role="tabpanel"
                                aria-labelledby="monthly-lectures-tab">
                                <div class="table-responsive border-bottom">
                                   <form id="monthlyLectureForm" method="post">
                                        {% csrf_token %}
                                        <table class="table table-stripped mb-0 thead-border-top-0">
                                            <thead class="table-heading">
                                                <tr>
                                                    <th class="table-head">SR. No.</th>
                                                    <th class="table-head">Month</th>
                                                    <!-- <th class="table-head">No. of Lectures</th> -->
                                                    <th class="table-head">No. of Lectures</th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
  {% for row in monthly_rows %}
    <tr>
      <td>{{ forloop.counter }}</td>
      <td>{{ row.month }}</td>
      <td>
        <input type="number" class="form-control" min="0" step="1"
               name="monthly_lectures_{{ row.month }}"
               value="{{ row.count }}">
      </td>
    </tr>
  {% empty %}
    <tr><td colspan="3">No months found.</td></tr>
  {% endfor %}
</tbody>

                                        </table>
                                       <div class="text-end">
                                         <button type="submit" class="btn btn-primary mt-3">Save Monthly Lectures</button>
                                       </div>
                                    </form>
                                    <div id="save-status" class="mt-2 text-success fw-bold"></div>

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

        </div>
        {% include "sidebar.html" %}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->

</div>
<!-- // END header-layout__content -->

</div>
<!-- // END header-layout -->

<div class="modal fade" id="addTimeSlotModal" tabindex="-1" aria-labelledby="addTimeSlotModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Time Slot for <span id="selectedDay"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="timeSlotForm">
                    {% csrf_token %}
                    <input type="hidden" id="timeslotbatch_id" name="id" value="{{ batch.id }}">
                    <input type="hidden" id="modalDay" name="day">
                    <div id="slotContainer">
                        <div class="row mb-3 slot-row align-items-center">
                            <div class="col-md-5">
                                <label class="col-form-label">Start Time</label>
                                <input type="time" class="form-control start-time" name="start_time[]" required>
                            </div>
                            <div class="col-md-5">
                                <label class="col-form-label">End Time</label>
                                <input type="time" class="form-control end-time" name="end_time[]" required>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">

                                <button type="button" class="btn btn-danger remove-slot">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>

                        </div>
                    </div>

                    <div class="my-4 text-center d-flex justify-content-center gap-4">
                        <div>
                            <button type="button" class="btn btn-success" id="addMoreSlot">Add More</button>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary">Save Slots</button>
                        </div>


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



{% include "footer.html" %}

<script>
    (function () {
        'use strict';
        let activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            let tabElement = document.querySelector(`button[data-bs-target="${activeTab}"]`);
            if (tabElement) tabElement.click();
        }

        document.querySelectorAll('button[data-bs-toggle="pill"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                localStorage.setItem('activeTab', e.target.getAttribute('data-bs-target'));
            });
        });
    })();
</script>


<script>
    $(document).ready(function () {
        // Initialize Select2 for dropdowns
        $('.select2').select2({ width: '100%', placeholder: "Select options", allowClear: true });

        let selectedDay = "";  // Store selected day globally

        // Add More Slots
        $("#addMoreSlot").click(function () {
            let newSlot = `
        <div class="row mb-3 slot-row align-items-center">
            <div class="col-md-5">
                <label class="col-form-label">Start Time</label>
                <input type="time" class="form-control start-time" name="start_time[]" required>
            </div>
            <div class="col-md-5">
                <label class="col-form-label">End Time</label>
                <input type="time" class="form-control end-time" name="end_time[]" required>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-slot">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>`;
            $("#slotContainer").append(newSlot);
        });

        // Remove Slot Row
        $(document).on("click", ".remove-slot", function () {
            $(this).closest(".slot-row").remove();
        });

        $(".add-slot-btn").click(function () {
            let selectedDay = $(this).data("day"); // Get day from button
            $("#selectedDay").text(selectedDay); // Update modal title
            $("#modalDay").val(selectedDay); // Set hidden input value
        });


        let container = $(".daycontainer"); // Scope to specific container
        let activeTabKey = "activeTab_" + container.attr("id"); // Unique key for this container

        // Retrieve the last selected tab from localStorage (only for this container)
        let activeTab = localStorage.getItem(activeTabKey);

        if (activeTab && container.find("#" + activeTab).length) {
            container.find(".nav-link").removeClass("active");
            container.find(".tab-pane").removeClass("show active");

            container.find("#" + activeTab).addClass("active");
            container.find("#content-" + activeTab.split("-")[1]).addClass("show active");
        }

        // Save selected tab on click (only for this container)
        container.find(".nav-link").on("click", function () {
            let tabId = $(this).attr("id");
            localStorage.setItem(activeTabKey, tabId);
        });

        // Handle Form Submission for Time Slots
        $("#timeSlotForm").submit(function (event) {
            event.preventDefault();

            let batchId = $("#timeslotbatch_id").val();
            let day = $("#modalDay").val();

            if (!day) {
                Swal.fire({
                    icon: "error",
                    title: "Error!",
                    text: "Please select a day before submitting."
                });
                return;
            }

            let timeSlots = [];
            $(".slot-row").each(function () {
                let startTime = $(this).find(".start-time").val();
                let endTime = $(this).find(".end-time").val();

                if (startTime && endTime) {
                    timeSlots.push({ start_time: startTime, end_time: endTime });
                }
            });

            if (timeSlots.length === 0) {
                Swal.fire({
                    icon: "error",
                    title: "Error!",
                    text: "Please add at least one time slot before submitting."
                });
                return;
            }

            let requestData = {
                batch_id: batchId,
                day: day,
                time_slots: timeSlots
            };

            $.ajax({
                url: "{% url 'add_batch_time_slot' %}",
                type: "POST",
                headers: {
                    "X-CSRFToken": getCSRFToken()
                },
                data: JSON.stringify(requestData),
                contentType: "application/json",
                processData: false,
                success: function (response) {
                    Swal.fire({
                        icon: "success",
                        title: "Success!",
                        text: "Time slots added successfully.",
                        timer: 2000
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function (xhr) {
                    console.log("AJAX Error:", xhr.responseText);
                    Swal.fire({
                        icon: "error",
                        title: "Error!",
                        text: "Failed to submit time slots."
                    });
                }
            });
        });


        // Submit batch Details Form

        // Function to Get CSRF Token from Cookie
        function getCSRFToken() {
            let csrfToken = null;
            document.cookie.split(';').forEach(function (cookie) {
                let parts = cookie.split('=');
                if (parts[0].trim() === 'csrftoken') {
                    csrfToken = parts[1];
                }
            });
            return csrfToken;
        }
    });

</script>

<script>
    $(document).on("click", ".delete-slot", function () {
        let slotId = $(this).data("id"); // Get slot ID from button

        Swal.fire({
            title: "Are you sure?",
            text: "This time slot will be permanently deleted!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel",

            customClass: {
                popup: 'custom-popup-class', // Add custom styling if needed
                confirmButton: 'btn btn-danger m-2', // Bootstrap styling
                cancelButton: 'btn btn-secondary m-2'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{% url 'delete_batch_slot' %}",  // Django URL for deleting slot
                    type: "POST",
                    headers: {
                        "X-CSRFToken": getCSRFToken()  // CSRF Token for security
                    },
                    data: JSON.stringify({ slot_id: slotId }),
                    contentType: "application/json",
                    processData: false,
                    success: function (response) {
                        Swal.fire({
                            icon: "success",
                            title: "Deleted!",
                            text: "Time slot deleted successfully.",
                            timer: 2000
                        });

                        // Remove the deleted row from the table
                        $(".delete-slot[data-id='" + slotId + "']").closest("tr").fadeOut(300, function () {
                            $(this).remove();
                        });
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: "error",
                            title: "Error!",
                            text: "Failed to delete the time slot."
                        });
                    }
                });
            }
        });
    });

    // Function to get CSRF token
    function getCSRFToken() {
        return $("input[name=csrfmiddlewaretoken]").val();
    }

</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        $("#monthlyLectureForm").on("submit", function (e) {
            e.preventDefault();

            $.ajax({
                url: "{% url 'save_monthly_lectures' batch.id %}",
                type: "POST",
                data: $(this).serialize(),
                headers: { "X-CSRFToken": "{{ csrf_token }}" },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Saved!',
                        text: 'Monthly lecture data saved successfully.',
                        confirmButtonColor: '#3085d6',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function (xhr, status, error) {
                    console.log("Error:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error saving data. Please try again.',
                        confirmButtonColor: '#d33'
                    });
                }
            });
        });
    });
</script>