{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX via CDN -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
    /* Styles personnalisés qui combinent AdminLTE et Tailwind */
    .calendar-container {
        @apply bg-white rounded-lg shadow p-4 m-4;
    }
    .calendar-header {
        @apply flex justify-between items-center mb-4;
    }
    .calendar-nav {
        @apply flex space-x-2;
    }
    .calendar-button {
        @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors;
    }
    .calendar-title {
        @apply text-xl font-bold text-gray-800;
    }
    .event-item {
        @apply flex items-center p-2 hover:bg-gray-50 rounded transition-colors;
    }
</style>
{% endblock %}

{% block content %}
<div class="calendar-container">
    <div class="calendar-header">
        <div class="calendar-nav">
            <button 
                class="calendar-button"
                hx-get="{% url 'admin:hr_leave_calendar' %}?month={{ prev_month }}"
                hx-target="#calendar-content"
                hx-trigger="click"
                hx-swap="innerHTML"
            >
                {% trans "Previous" %}
            </button>
            <button 
                class="calendar-button"
                hx-get="{% url 'admin:hr_leave_calendar' %}?month={{ next_month }}"
                hx-target="#calendar-content"
                hx-trigger="click"
                hx-swap="innerHTML"
            >
                {% trans "Next" %}
            </button>
        </div>
        <h2 class="calendar-title">{{ current_month_name }}</h2>
    </div>

    <div id="calendar-content" class="grid grid-cols-7 gap-2">
        <!-- En-têtes des jours -->
        {% for day in weekdays %}
        <div class="text-center font-semibold py-2 bg-gray-100">
            {{ day }}
        </div>
        {% endfor %}

        <!-- Jours du mois -->
        {% for week in calendar_data %}
        {% for day in week %}
        <div class="min-h-[100px] border p-2 {% if day.today %}bg-blue-50{% endif %}">
            <div class="text-right {% if day.current_month %}font-bold{% else %}text-gray-400{% endif %}">
                {{ day.number }}
            </div>
            {% if day.events %}
            <div class="mt-2">
                {% for event in day.events %}
                <div class="event-item" 
                     hx-get="{% url 'admin:hr_leave_detail' event.id %}"
                     hx-target="#event-details"
                     hx-trigger="click">
                    <span class="w-2 h-2 rounded-full {% if event.type == 'leave' %}bg-red-500{% else %}bg-green-500{% endif %} mr-2"></span>
                    <span class="text-sm truncate">{{ event.title }}</span>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {% endfor %}
    </div>

    <!-- Modal pour les détails d'un événement -->
    <div id="event-details" 
         class="fixed inset-0 bg-black bg-opacity-50 hidden"
         hx-on="htmx:afterSwap: this.classList.remove('hidden')">
    </div>
</div>
{% endblock %}

{% block extrajs %}
{{ block.super }}
<script src="{% static 'vendor/fullcalendar/main.min.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: []  // Les événements seront chargés via AJAX
    });
    calendar.render();
});
</script>
{% endblock %}