{% 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 H:i A" }}
                        </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>
                        </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>
                                                    <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>
                                                {% 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>Topics</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="tbody">
                                                        {% if exam_topic_map %}
                                                        {% for exam_name, topics_list in exam_topic_map.items %}
                                                        <tr>
                                                            <td>{{ forloop.counter }}</td>
                                                            <td>{{ exam_name }}</td>
                                                            <td>
                                                                {% for topic in topics_list %}
                                                                <span class="badge bg-primary me-1 fw-normal">{{ topic }}</span>
                                                                {% endfor %}
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                        {% else %}
                                                        <tr>
                                                            <td colspan="3" class="text-center">No exam and topic expertise
                                                                assigned yet.</td>
                                                        </tr>
        
                                                        {% endif %}
                                                    </tbody>
                                                </table>
        
                                            </div>
                                        </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 -->



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

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



<!-- delete modal  -->

<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).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>