{% 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">Weekly 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="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h4 class="mb-1">Lecture Students</h4>
                                        <p class="text-muted mb-0">Students assigned to this batch with lecture access.</p>
                                    </div>
                                    {% if user.is_superuser or role_permissions.batches.edit %}
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#bulkAssignStudentsModal">
                                        <i class="fas fa-user-plus me-2"></i>Assign Multiple Students
                                    </button>
                                    {% endif %}
                                </div>
                                <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">Course</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.course.course_name|default:"-" }}</td>
                                                <td>{{ student.student.email }}</td>
                                                <td>{{ student.student.mobile }}</td>
                                                <td>{{ student.student.whatsapp_number }}</td>
                                                <td>{{ student.student.created_at|date:"d/m/Y" }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="7" 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="bulkAssignStudentsModal" tabindex="-1"
    aria-labelledby="bulkAssignStudentsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkAssignStudentsModalLabel">
                    Assign Students to {{ batch.batch_name }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="bulkAssignStudentsForm" method="post"
                action="{% url 'bulk_assign_batch_students' batch.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="bulk-course-id" class="form-label">Course</label>
                        <select id="bulk-course-id" name="course_id" class="form-control" required>
                            <option value="">Select Course</option>
                            {% for course in all_courses %}
                            <option value="{{ course.id }}">{{ course.course_name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-2 d-flex justify-content-between align-items-center">
                        <label for="bulk-student-ids" class="form-label mb-0">Students</label>
                        <button type="button" id="select-all-batch-students"
                            class="btn btn-sm btn-outline-primary" disabled>Select All</button>
                    </div>
                    <select id="bulk-student-ids" name="student_ids" class="form-control"
                        multiple required disabled></select>
                    <small id="bulk-student-help" class="form-text text-muted">
                        Select a course to load enrolled students who are not already in this batch.
                    </small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="bulk-assign-submit" class="btn btn-primary">
                        Assign for Lectures
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<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 () {
        const courseSelect = $('#bulk-course-id');
        const studentSelect = $('#bulk-student-ids');
        const selectAllButton = $('#select-all-batch-students');
        const helpText = $('#bulk-student-help');

        studentSelect.select2({
            width: '100%',
            placeholder: 'Select students',
            dropdownParent: $('#bulkAssignStudentsModal')
        });

        courseSelect.on('change', function () {
            const courseId = $(this).val();
            studentSelect.empty().prop('disabled', true).trigger('change');
            selectAllButton.prop('disabled', true);

            if (!courseId) {
                helpText.text('Select a course to load enrolled students who are not already in this batch.');
                return;
            }

            helpText.text('Loading students...');

            $.ajax({
                url: "{% url 'get_course_students_for_batch' %}",
                type: 'GET',
                data: {
                    course_id: courseId,
                    batch_id: '{{ batch.id }}'
                },
                success: function (response) {
                    const students = response.students || [];

                    students.forEach(function (student) {
                        const details = [student.email, student.mobile].filter(Boolean).join(' | ');
                        const label = details ? `${student.name} (${details})` : student.name;
                        studentSelect.append(new Option(label, student.id, false, false));
                    });

                    studentSelect.prop('disabled', students.length === 0).trigger('change');
                    selectAllButton.prop('disabled', students.length === 0);
                    helpText.text(
                        students.length
                            ? `${students.length} eligible student(s) found.`
                            : 'No unassigned enrolled students were found for this course.'
                    );
                },
                error: function (xhr) {
                    helpText.text(xhr.responseJSON?.msg || 'Unable to load students.');
                }
            });
        });

        selectAllButton.on('click', function () {
            const allStudentIds = studentSelect.find('option').map(function () {
                return this.value;
            }).get();
            studentSelect.val(allStudentIds).trigger('change');
        });

        $('#bulkAssignStudentsForm').on('submit', function (event) {
            event.preventDefault();

            if (!courseSelect.val() || !studentSelect.val()?.length) {
                Swal.fire('Missing information', 'Select a course and at least one student.', 'warning');
                return;
            }

            const form = $(this);
            const submitButton = $('#bulk-assign-submit');
            submitButton.prop('disabled', true).text('Assigning...');

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form.serialize(),
                success: function (response) {
                    Swal.fire('Assigned', response.msg, 'success').then(function () {
                        window.location.reload();
                    });
                },
                error: function (xhr) {
                    Swal.fire('Unable to assign', xhr.responseJSON?.msg || 'Please try again.', 'error');
                },
                complete: function () {
                    submitButton.prop('disabled', false).text('Assign for Lectures');
                }
            });
        });
    });
</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>