{% extends 'partials/base.html' %}
{% load static %}
{% load custom_filters %}
{% block content %}
<!-- Page Wrapper -->
<div class="page-wrapper cardhead">
    <div class="content">
        <!-- Page Header -->
        <div class="page-header">
            <div class="row">
                <div class="col">
                    <!-- <h3 class="page-title">Add Time Table</h3> -->
                </div>
            </div>
        </div>
        <!-- /Page Header -->


        <div class="row">
           

            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between flex-wrap pb-0">
                        <h5 class="card-title">Time Tables</h5>
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="d-flex align-items-center mb-3 me-2">
                                <label class="w-100">Select Month</label>
                                <select id="monthSelector" class="form-select">
                                    {% for month_number, month_name in months %}
                                        <option value="{{ month_number }}" {% if month_number == current_month %}selected{% endif %}>
                                            {{ month_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>                           
                        </div>


                    </div>
                    <div class="card-body">
                        <div id="loader" class="text-center my-5" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <div id="calendarGrid" class="row"></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <input type="hidden" id="teacherId" value="{{ teacher_id }}">
    <input type="hidden" id="selectedMonth" value="{{ current_month }}">
    <input type="hidden" id="selectedYear" value="{{ current_year }}">
    {% endblock content %}
    {% block javascript %}
    {{ block.super }}

    
    <script>
  
  
  function loadTeacherTimetable() {
    const teacherId = $("#teacherId").val();
    const month = $("#monthSelector").val();
    const year = $("#selectedYear").val();
    $("#loader").show();          
    $("#calendarGrid").hide();
    $.ajax({
        url: `/get-teacher-timetable/${teacherId}/?month=${month}&year=${year}`,
        method: "GET",
        success: function(response) {
            const timetable = response.timetable;
            const grid = $("#calendarGrid");
            grid.empty();

            for (const date in timetable) {
                const periods = timetable[date];
                const col = $("<div>").addClass("col-md-2 mb-3");
                const card = $("<div>").addClass("card h-100");
                const cardHeader = $("<div>").addClass("card-header bg-light text-center").html(`<strong>${date}</strong>`);
                const cardBody = $("<div>").addClass("card-body bg-soft-success");

                if (periods.length > 0) {
                    periods.forEach(period => {
                        const block = $(`
                            <div class="p-2 rounded" style="color:#464242">
                                <small>🕒 ${period.time_range}</small><br>
                                <strong>Course:</strong> ${period.subject}<br>
                                  <strong>Module:</strong> ${period.module}<br>
                                  <strong>Intake:</strong> ${period.intake}<br>

                                <strong>Class:</strong> ${period.class}
                                {% comment %} <a href="{% url 'studentmark' %}?intake=${period.intake_id}&course=${period.course_id}&module=${period.module_id}&class=${period.class_id}&date=${period.date}&lecture=${period.lecture_id}">take<a> {% endcomment %}
                            </div>
                        `);
                        cardBody.append(block);
                    });
                } else {
                    cardBody.html('<p class="text-muted text-center">No Lectures</p>');
                }

                card.append(cardHeader, cardBody);
                col.append(card);
                grid.append(col);
            }
            $("#loader").hide();         
            $("#calendarGrid").show();
        },
        error: function() {
            alert("Error loading timetable.");
            $("#loader").hide(); 
        }
    });
}

$(document).ready(function () {
    loadTeacherTimetable();

    $("#monthSelector").on("change", function () {
        loadTeacherTimetable();
    });
});

    </script>
    {% endblock %}