{% extends "adminlte/page.html" %}
{% load static %}
{% block page_title %}Calendar{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Calendar</li>
{% endblock %}
{% block content %}
<div class="row g-3">
  <!-- Sidebar: draggable events -->
  <div class="col-lg-3">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Draggable events</h3>
      </div>
      <div class="card-body">
        <p class="text-secondary small mb-3">
          Drag an event to the calendar to schedule it.
        </p>
        <div id="external-events">
          <div
            class="draggable-event badge text-bg-primary p-2 mb-2 d-block text-start"
            data-color="#0d6efd"
          >
            <i class="bi bi-grip-vertical me-1" aria-hidden="true"></i>
            Team standup
          </div>
          <div
            class="draggable-event badge text-bg-success p-2 mb-2 d-block text-start"
            data-color="#198754"
          >
            <i class="bi bi-grip-vertical me-1" aria-hidden="true"></i>
            Customer call
          </div>
          <div
            class="draggable-event badge text-bg-warning p-2 mb-2 d-block text-start"
            data-color="#ffc107"
          >
            <i class="bi bi-grip-vertical me-1" aria-hidden="true"></i>
            Design review
          </div>
          <div
            class="draggable-event badge text-bg-info p-2 mb-2 d-block text-start"
            data-color="#0dcaf0"
          >
            <i class="bi bi-grip-vertical me-1" aria-hidden="true"></i>
            1:1 with manager
          </div>
          <div
            class="draggable-event badge text-bg-danger p-2 d-block text-start"
            data-color="#dc3545"
          >
            <i class="bi bi-grip-vertical me-1" aria-hidden="true"></i>
            Release window
          </div>
        </div>
        <hr />
        <div class="form-check form-switch">
          <input
            class="form-check-input"
            type="checkbox"
            role="switch"
            id="remove-after-drop"
          />
          <label class="form-check-label small" for="remove-after-drop">
            Remove from list after dropping
          </label>
        </div>
      </div>
    </div>
  </div>
  <!-- Calendar -->
  <div class="col-lg-9">
    <div class="card">
      <div class="card-body">
        <div id="calendar"></div>
      </div>
      <div class="card-footer text-secondary small">
        Powered by
        <a href="https://fullcalendar.io/" target="_blank" rel="noopener"
          >FullCalendar 6</a
        >
        &mdash; MIT licensed, jQuery-free.
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<style>
  .fc-event {
    cursor: pointer;
  }
  .draggable-event {
    cursor: grab;
    user-select: none;
  }
</style>
<script>
  const isoDate = (d) => d.toISOString().slice(0, 10);

  document.addEventListener('DOMContentLoaded', () => {
    adminlteUse("fullcalendar").then(function () {
    const calendarEl = document.getElementById('calendar');
    const externalEl = document.getElementById('external-events');
    const removeAfterDrop = document.getElementById('remove-after-drop');

    new FullCalendar.Draggable(externalEl, {
      itemSelector: '.draggable-event',
      eventData: (el) => ({
        title: el.textContent.trim(),
        backgroundColor: el.dataset.color,
        borderColor: el.dataset.color,
      }),
    });

    const today = new Date();
    const offsetDay = (n) => {
      const d = new Date(today);
      d.setDate(today.getDate() + n);
      return isoDate(d);
    };

    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      headerToolbar: {
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
      },
      height: 700,
      editable: true,
      droppable: true,
      dayMaxEvents: 3,
      drop: (info) => {
        if (removeAfterDrop.checked) {
          info.draggedEl.remove();
        }
      },
      dateClick: (info) => {
        const title = prompt('Event title:');
        if (title) {
          calendar.addEvent({
            title: title,
            start: info.dateStr,
            allDay: info.allDay,
          });
        }
      },
      eventClick: (info) => {
        if (confirm(`Delete "${info.event.title}"?`)) {
          info.event.remove();
        }
      },
      events: [
        {
          title: 'Quarterly planning',
          start: offsetDay(-2),
          backgroundColor: '#0d6efd',
          borderColor: '#0d6efd',
        },
        {
          title: 'Onboarding session',
          start: offsetDay(1),
          backgroundColor: '#198754',
          borderColor: '#198754',
        },
        {
          title: 'Design review',
          start: offsetDay(3),
          end: offsetDay(4),
          backgroundColor: '#ffc107',
          borderColor: '#ffc107',
          textColor: '#000',
        },
        {
          title: 'Release v2.5',
          start: offsetDay(7),
          backgroundColor: '#dc3545',
          borderColor: '#dc3545',
        },
        {
          title: 'All-hands',
          start: offsetDay(10),
          backgroundColor: '#6f42c1',
          borderColor: '#6f42c1',
        },
      ],
    });

    calendar.render();
    });
  });
</script>
{% endblock %}