{% include "header.html" %}
<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">

                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">Faculty Details</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>

                                <li class="breadcrumb-item active" aria-current="page">Faculty</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn" data-toggle="modal" data-target="#Faculty-Module">Add
                                Details </button>
                        </div>
                    </div>
                </div>


            </div>



            <div class="container">
                <div class="card shadow p-4">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <strong>Name:</strong> {{ faculty.faculty_name }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Email:</strong> {{ faculty.email }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Contact:</strong> {{ faculty.contact }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Experience:</strong> {{ faculty.experience }} years
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Date of Birth:</strong> {{ faculty.date_of_birth|date:"d/m/Y" }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Status:</strong>
                            <span
                                class="badge {% if faculty.status == 'Active' %}bg-success{% else %}bg-danger{% endif %}">
                                {{ faculty.status }}
                            </span>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Joined Date</strong> {{ faculty.created_at|date:"d/m/Y" }}
                        </div>
                        <!-- <div class="col-md-12 mb-3">
                            <div class="d-md-flex gap-2">
                                <strong>Selected Exams:</strong>
                                {% if selected_exams %}
                                    <div>
                                        {% for exam in selected_exams %}
                                            <span class="badge bg-warning text-white ename me-1">{{ exam.exam_category_name }}</span>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <span class="text-muted">No exams selected</span>
                                {% endif %}

                            </div>
                           
                        </div> -->
                        <!-- <div class="col-md-12 mb-3">
                            <div class="d-md-flex gap-3">

                                <strong>Topic Expertise:</strong>
                                {% if topic_expertise %}
                                    <div>
                                        {% for topic in topic_expertise %}
                                            <span class="badge bg-primary text-white tname me-1">{{ topic.topic_name }}</span>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <span class="text-muted">No topic Assigned</span>
                                {% endif %}
                            </div>
                           
                        </div> -->

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



            <div class="container ">
                <div class="row">
                    <div class="col-12">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="time_slot-tab" data-bs-toggle="pill"
                                    data-bs-target="#time_slot" type="button" role="tab" aria-controls="time_slot"
                                    aria-selected="false">Available Time Slot </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="topic_experties-tab" data-bs-toggle="pill"
                                    data-bs-target="#topic_experties" type="button" role="tab"
                                    aria-controls="topic_experties" aria-selected="false">Topic Experties</button>
                            </li>
                            <li class="nav-item" role="presentation">
    <button class="nav-link" id="faculty_leaves-tab" data-bs-toggle="pill"
        data-bs-target="#faculty_leaves" type="button" role="tab"
        aria-controls="faculty_leaves" aria-selected="false">
        Faculty Leaves
    </button>
</li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">

                            <div class="tab-pane fade show active" id="time_slot" role="tabpanel"
                                aria-labelledby="time_slot-tab">
                                <div class="daycontainer">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row py-4">
                                                <div class="col-12 ">
                                                    <h6>Time Slot Available Details</h6>
                                                </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>

                                                        <button class="btn btn-success save-priority-btn"
                                                                data-day="{{ day }}">
                                                            Save All Priority
                                                        </button>
                                                    <table class="table mt-3">
                                                        <thead>
                                                            <tr>
                                                                <th>Priority</th>
                                                                <th>Start Time</th>
                                                                <th>End Time</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {% for slot in slots %}
                                                            <tr>

                                                                <td width="150">
                                                                    <input type="number"
                                                                        class="form-control priority-input"
                                                                        data-id="{{ slot.id }}"
                                                                        value="{{ slot.priority|default:0 }}"
                                                                        min="0">
                                                                </td>
                                                                <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>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="topic_experties" role="tabpanel"
                                aria-labelledby="topic_experties-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <div>
                                            <div class="table-responsive mt-3">
        
                                                <!-- <pre>{{ exam_topic_map|safe }}</pre> -->
        
                                                <table class="table align-middle">
                                                    <thead class="thead">
                                                        <tr>
                                                            <th>Sr. No</th>
                                                            <th>Exam</th>
                                                            <th>Topic Expertise</th>
                                                            <th width="140">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="tbody">
                                                        {% for detail in faculty_details %}
                                                        <tr id="faculty-detail-row-{{ detail.id }}">
                                                            <td>{{ forloop.counter }}</td>
                                                            <td>{{ detail.selected_exams.exam_category_name }}</td>
                                                            <td>
                                                                <span class="badge bg-primary me-1 fw-normal">
                                                                    {{ detail.topic_expertise.topic_name }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning edit-topic-expertise"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#editTopicExpertiseModal"
                                                                    data-id="{{ detail.id }}"
                                                                    data-exam-id="{{ detail.selected_exams_id }}"
                                                                    data-topic-id="{{ detail.topic_expertise_id }}">
                                                                    <i class="fas fa-edit"></i>
                                                                </button>

                                                                <button type="button"
                                                                    class="btn btn-sm btn-danger delete-topic-expertise"
                                                                    data-id="{{ detail.id }}">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        {% empty %}
                                                        <tr>
                                                            <td colspan="4" class="text-center text-muted">
                                                                No exam and topic expertise assigned yet.
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              

                            </div>
                            <div class="tab-pane fade" id="faculty_leaves" role="tabpanel"
    aria-labelledby="faculty_leaves-tab">

    <div class="card">
        <div class="card-body">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">Faculty Leave Details</h6>

                <button class="btn btn-primary" data-bs-toggle="modal"
                    data-bs-target="#addFacultyLeaveModal">
                    Add Leave
                </button>
            </div>

            <div class="table-responsive mt-3">
                <table class="table align-middle">
                    <thead class="thead">
                        <tr>
                            <th>Sr. No</th>
                            <th>From Date</th>
                            <th>To Date</th>
                            <th>Created At</th>
                            <th width="180">Action</th>
                        </tr>
                    </thead>

                    <tbody class="tbody">
                        {% if faculty_leaves %}
                            {% for leave in faculty_leaves %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ leave.from_date|date:"d/m/Y" }}</td>
                                <td>{{ leave.to_date|date:"d/m/Y" }}</td>
                                <td>{{ leave.created_at|date:"d/m/Y" }}</td>
                                <td>
                                    <button type="button"
                                        class="btn btn-sm btn-warning edit-leave-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editFacultyLeaveModal"
                                        data-id="{{ leave.id }}"
                                        data-from-date="{{ leave.from_date|date:'Y-m-d' }}"
                                        data-to-date="{{ leave.to_date|date:'Y-m-d' }}"
                                        data-url="{% url 'edit_faculty_leave' leave.id %}">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <a href="{% url 'delete_faculty_leave' leave.id %}"
                                        class="btn btn-sm btn-danger"
                                        onclick="return confirm('Are you sure you want to delete this leave?');">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="5" class="text-center text-muted">
                                    No faculty leaves added yet.
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>

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

            </div>

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

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

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

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

<div class="modal fade" id="addFacultyLeaveModal" tabindex="-1"
    aria-labelledby="addFacultyLeaveModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <form method="POST" action="{% url 'add_faculty_leave' faculty.id %}">
            {% csrf_token %}

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addFacultyLeaveModalLabel">
                        Add Faculty Leave
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">From Date</label>
                        <input type="date" name="from_date" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">To Date</label>
                        <input type="date" name="to_date" class="form-control" required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Save Leave
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="editFacultyLeaveModal" tabindex="-1"
    aria-labelledby="editFacultyLeaveModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <form method="POST" id="editFacultyLeaveForm">
            {% csrf_token %}

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editFacultyLeaveModalLabel">
                        Edit Faculty Leave
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">From Date</label>
                        <input type="date" name="from_date" id="edit_from_date"
                            class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">To Date</label>
                        <input type="date" name="to_date" id="edit_to_date"
                            class="form-control" required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Update Leave
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Faculty Module Modal -->
<div id="Faculty-Module" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <h4 class="modal-heading mb-4">Add Faculty Module</h4>
                    <form id="add_faculty_Details_form" method="post" enctype="multipart/form-data" class="modal-form">
                        {% csrf_token %}
                        <input type="hidden" id="faculty_id" name="id" value="{{ faculty.id }}">
                        <!-- Checkbox for Available Days -->
                        <!-- <div class="form-group mb-3">
                            <div class=" border-bottom-2  mb-4">
                                <label class="mb-2 form-label">Select Available Days</label>
                            </div>

                            <div class="d-flex flex-wrap gap-3">
                                {% for day in all_days %}
                                <div class="form-check">
                                    <input class="form-check-input larger-checkbox mt-0" type="checkbox"
                                        name="available_days" value="{{ day }}" id="day-{{ day }}">
                                    <label class="form-check-label fw-medium ms-2" for="day-{{ day }}">{{ day }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        </div> -->

                        <!-- Multi-select for Exams -->
                        <div class="form-group mb-3">
                            <label for="exam" class="mb-2 fw-bold">Select Exam</label>
                            <select id="exam" name="exam" class="form-control select2" multiple>
                                {% for exam in exams %}
                                <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Multi-select for Topics -->
                        <div class="form-group mb-3">
                            <label for="topics" class="mb-2 fw-bold">Select Topic Expertise</label>
                            <select id="topics" name="topics" class="form-control select2" multiple>
                                {% for topic in topics %}
                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div id="msg" class="mt-3 mb-4"></div>

                        <div class="form-group text-center">
                            <button class="btn btn-primary" type="submit">Add</button>
                            <button type="button" class="btn btn-danger ms-3" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->

<!-- Edit Topic Expertise Modal -->
<div class="modal fade" id="editTopicExpertiseModal" tabindex="-1"
    aria-labelledby="editTopicExpertiseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTopicExpertiseModalLabel">Edit Topic Expertise</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editFacultyDetailId">

                <div class="mb-3">
                    <label for="editFacultyExam" class="form-label fw-bold">Select Exam</label>
                    <select id="editFacultyExam" class="form-control select2-edit" style="width: 100%;">
                        <option value="">Select exam</option>
                        {% for exam in exams %}
                        <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <label for="editFacultyTopic" class="form-label fw-bold">Select Topic Expertise</label>
                    <select id="editFacultyTopic" class="form-control select2-edit" style="width: 100%;">
                        <option value="">Select topic</option>
                        {% for topic in topics %}
                        <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="updateTopicExpertise">Update</button>
            </div>
        </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="timeslotfaculty_id" name="id" value="{{ faculty.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>
    document.addEventListener("DOMContentLoaded", function () {
        const editButtons = document.querySelectorAll(".edit-leave-btn");
        const editForm = document.getElementById("editFacultyLeaveForm");
        const editFromDate = document.getElementById("edit_from_date");
        const editToDate = document.getElementById("edit_to_date");

        editButtons.forEach(function (button) {
            button.addEventListener("click", function () {
                const fromDate = this.getAttribute("data-from-date");
                const toDate = this.getAttribute("data-to-date");
                const url = this.getAttribute("data-url");

                editForm.setAttribute("action", url);
                editFromDate.value = fromDate;
                editToDate.value = toDate;
            });
        });
    });
</script>
<!-- delete modal  -->
<script>
    
$(document).on('click', '.save-priority-btn', function () {

    let tabPane = $(this).closest('.tab-pane');
    let priorities = [];

    tabPane.find('.priority-input').each(function () {
        priorities.push({
            id: $(this).data('id'),
            priority: $(this).val()
        });
    });

    $.ajax({
        url: '/admin/update-slot-priority',
        type: "POST",
        data: {
            priorities: JSON.stringify(priorities),
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function (response) {
            alert("Priority saved successfully");
        },
        error: function () {
            alert("Something went wrong");
        }
    });

});
</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 facultyId = $("#timeslotfaculty_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 = {
                faculty_id: facultyId,
                day: day,
                time_slots: timeSlots
            };

            $.ajax({
                url: "{% url 'add_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."
                    });
                }
            });
        });

        // Fetch topics dynamically based on selected exams
        $("#exam").change(function () {
            let selectedExams = $(this).val();
            let topicDropdown = $("#topics");

            if (selectedExams.length > 0) {
                $.ajax({
                    url: "{% url 'exam_topics' %}",
                    type: "GET",
                    data: { "exam_ids[]": selectedExams },

                    success: function (response) {
                        console.log("Topics fetched:", response);
                        topicDropdown.empty();
                        if (response.topics.length > 0) {
                            $.each(response.topics, function (index, topic) {
                                let optionText = topic.parent_id ? "— " + topic.topic_name : topic.topic_name;
                                topicDropdown.append($("<option></option>").val(topic.id).text(optionText));
                            });
                        } else {
                            topicDropdown.append("<option disabled>No topics available</option>");
                        }
                        topicDropdown.trigger("change");
                    },
                    error: function (xhr) {
                        console.log("AJAX Error:", xhr.responseText);
                        Swal.fire({ icon: "error", title: "Error!", text: "Failed to fetch topics." });
                    }
                });
            } else {
                topicDropdown.empty().trigger("change");
            }
        });

        // Submit Faculty Details Form
        $("#add_faculty_Details_form").submit(function (event) {
            event.preventDefault();

            let faculty_id = $("#faculty_id").val();
            let selected_exams = $("#exam").val();
            let selected_topics = $("#topics").val();

            // Collect time slots for each day
            // let time_slots = {};
            // available_days.forEach(function (day) {
            //     let slots = [];
            //     $("#slotContainer .slot-row").each(function () {
            //         let start_time = $(this).find(".start-time").val();
            //         let end_time = $(this).find(".end-time").val();
            //         if (start_time && end_time) {
            //             slots.push({ start_time: start_time, end_time: end_time });
            //         }
            //     });
            //     time_slots[day] = slots;
            // });

            let facultyData = {
                faculty_id: faculty_id,
                selected_exams: selected_exams,
                selected_topics: selected_topics,
                // time_slots: time_slots
            };

            console.log("Submitting Faculty Data:", facultyData);

            $.ajax({
                url: "{% url 'add_faculty_details' %}",
                type: "POST",
                data: JSON.stringify(facultyData),
                contentType: "application/json",
                processData: false,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", getCSRFToken()); // ✅ Secure CSRF Token Handling
                },
                success: function (response) {
                    Swal.fire({ icon: 'success', title: 'Success!', text: response.message, timer: 2000 });
                    $("#Faculty-Module").modal("hide");
                },
                error: function () {
                    Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!' });
                }
            });
        });

        // 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).ready(function () {
        // Select2 inside the edit modal needs dropdownParent.
        $('.select2-edit').select2({
            width: '100%',
            dropdownParent: $('#editTopicExpertiseModal')
        });
    });

    $(document).on("click", ".edit-topic-expertise", function () {
        const detailId = $(this).data("id");
        const examId = $(this).data("exam-id");
        const topicId = $(this).data("topic-id");

        $("#editFacultyDetailId").val(detailId);
        $("#editFacultyExam").val(String(examId)).trigger("change");
        $("#editFacultyTopic").val(String(topicId)).trigger("change");
    });

    $(document).on("click", "#updateTopicExpertise", function () {
        const detailId = $("#editFacultyDetailId").val();
        const examId = $("#editFacultyExam").val();
        const topicId = $("#editFacultyTopic").val();

        if (!detailId || !examId || !topicId) {
            Swal.fire({
                icon: "warning",
                title: "Required",
                text: "Please select both exam and topic expertise."
            });
            return;
        }

        $.ajax({
            url: `/admin/edit_faculty_details/${detailId}`,
            type: "POST",
            headers: {
                "X-CSRFToken": getCSRFToken()
            },
            data: JSON.stringify({
                exam_id: examId,
                topic_id: topicId
            }),
            contentType: "application/json",
            processData: false,
            success: function (response) {
                Swal.fire({
                    icon: "success",
                    title: "Updated!",
                    text: response.message,
                    timer: 1500
                }).then(() => location.reload());
            },
            error: function (xhr) {
                Swal.fire({
                    icon: "error",
                    title: "Unable to update",
                    text: xhr.responseJSON?.message || "Something went wrong."
                });
            }
        });
    });

    $(document).on("click", ".delete-topic-expertise", function () {
        const detailId = $(this).data("id");

        Swal.fire({
            title: "Are you sure?",
            text: "This topic expertise will be permanently deleted.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel",
            customClass: {
                confirmButton: "btn btn-danger m-2",
                cancelButton: "btn btn-secondary m-2"
            },
            buttonsStyling: false
        }).then((result) => {
            if (!result.isConfirmed) return;

            $.ajax({
                url: `/admin/delete_faculty_details/${detailId}`,
                type: "POST",
                headers: {
                    "X-CSRFToken": getCSRFToken()
                },
                contentType: "application/json",
                success: function (response) {
                    Swal.fire({
                        icon: "success",
                        title: "Deleted!",
                        text: response.message,
                        timer: 1500
                    });

                    $(`#faculty-detail-row-${detailId}`).fadeOut(300, function () {
                        $(this).remove();
                    });
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: "error",
                        title: "Unable to delete",
                        text: xhr.responseJSON?.message || "Something went wrong."
                    });
                }
            });
        });
    });
</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_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>