{% include "facultyheader.html" %}
{% load custom_filters %}
  <!-- FullCalendar CSS -->
  <style>
    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }
    .fc-event-title-container{
    background-color: #ff9e26;
    padding: 2px 10px;
    border-radius: 10px;
    }
  </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-fluid page__container exam-module my-2">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <h4 class="mt-3 mb-4">Upcoming Lecture List</h4>
            </div>
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <!-- Debug: See JSON if needed -->
                  <!-- <pre>{{ lecture_json }}</pre> -->

                  <!-- Calendar Display -->
                  <div id="calendar"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- container-fluid -->
    </div> <!-- mdk-drawer-layout__content -->

    {% include "facultysidebar.html" %}
  </div> <!-- mdk-drawer-layout -->
</div> <!-- mdk-header-layout__content -->

{% include "facultyfooter.html" %}

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<!-- Embed lecture_json safely -->
<script id="event-data" type="application/json">
  {{ lecture_json|safe }}
</script>

<!-- <script>
    const eventsFromDjango = {{ lecture_json|safe }};
</script> -->

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');

    // Parse the embedded JSON safely
    const eventsFromDjango = JSON.parse(document.getElementById('event-data').textContent);
    // const eventsFromDjango = [
    //     {
    //         title: 'Test Lecture',
    //         start: '2025-04-15',
    //         description: 'This is a test event'
    //     }
    // ];
    // alert(eventsFromDjango);
    console.log("Events loaded from Django:", eventsFromDjango);
    console.log("Pretty JSON:", JSON.stringify(eventsFromDjango, null, 2));
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      events: eventsFromDjango,
      eventDidMount: function (info) {
        // Tooltip or description on hover
        if (info.event.extendedProps.description) {
          info.el.title = info.event.extendedProps.description;
        }
      }
    });

    calendar.render();
  });
</script>

</body>
</html>