{% extends 'school/base_school.html' %}
{% load custom_filters %}

{% block title %}Event Management | STD Lab{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
    <div>
        <h2 style="font-weight: 900; color: #0f172a;">Event Management</h2>
        <p style="color: #64748b; font-size: 0.9rem;">Manage school closures, exams and events.</p>
    </div>
    <a href="{% url 'holiday_add' %}" class="btn">
        <i class="fas fa-plus"></i> ADD EVENT
    </a>
</div>

<div style="display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;">
    <!-- Functional Calendar View -->
    <div class="card" style="padding: 30px; border-radius: 28px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
            <h3 style="font-weight: 800; color: #1e293b;">{{ month_name }} {{ current_year }}</h3>
            <div style="display: flex; gap: 10px;">
                <a href="{% url 'holiday_list' %}?month={{ prev_month }}&year={{ prev_year }}" class="btn" style="padding: 8px 15px; font-size: 0.7rem;">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <a href="{% url 'holiday_list' %}?month={{ next_month }}&year={{ next_year }}" class="btn" style="padding: 8px 15px; font-size: 0.7rem;">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center;">
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Sun</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Mon</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Tue</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Wed</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Thu</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #ef4444; padding-bottom: 10px;">Fri</div>
            <div style="font-weight: 900; font-size: 0.75rem; color: #94a3b8; padding-bottom: 10px;">Sat</div>

            {% for week in month_days %}
                {% for day in week %}
                    {% if day == 0 %}
                        <div style="aspect-ratio: 1;"></div>
                    {% else %}
                        {% with holiday=holiday_days|get_item:day %}
                        <a href="{% url 'holiday_add' %}?date={{ current_year }}-{{ current_month|stringformat:'02d' }}-{{ day|stringformat:'02d' }}" 
                           style="text-decoration: none; aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; border: 1px solid #f1f5f9; position: relative; transition: 0.2s;
                                  {% if holiday %}
                                      {% if holiday.day_type == 'WORKING_DAY' %}
                                          background: rgba(16, 185, 129, 0.08); color: #10b981; border-color: rgba(16, 185, 129, 0.2);
                                      {% else %}
                                          background: rgba(239, 68, 68, 0.05); color: #ef4444; border-color: rgba(239, 68, 68, 0.1);
                                      {% endif %}
                                  {% elif forloop.counter0 == 5 %}
                                      background: rgba(239, 68, 68, 0.05); color: #ef4444; border-color: rgba(239, 68, 68, 0.1);
                                  {% else %}
                                      background: #fff; color: #1e293b;
                                  {% endif %}
                                  "
                           onmouseover="this.style.transform='scale(1.05)'; this.style.borderColor='#3b82f6';"
                           onmouseout="this.style.transform='scale(1)'; this.style.borderColor='{% if holiday %}{% if holiday.day_type == 'WORKING_DAY' %}rgba(16, 185, 129, 0.2){% else %}rgba(239, 68, 68, 0.1){% endif %}{% elif forloop.counter0 == 5 %}rgba(239, 68, 68, 0.1){% else %}#f1f5f9{% endif %}';">
                            {{ day }}
                            {% if holiday %}
                                <div title="{{ holiday.note }} ({{ holiday.get_day_type_display }})" style="width: 4px; height: 4px; background: {% if holiday.day_type == 'WORKING_DAY' %}#10b981{% else %}#ef4444{% endif %}; border-radius: 50%; margin-top: 2px;"></div>
                                <div style="font-size: 0.5rem; text-transform: uppercase; margin-top: 1px; font-weight: 900; opacity: 0.7;">
                                    {% if holiday.day_type == 'WORKING_DAY' %}WD{% else %}HOL{% endif %}
                                </div>
                            {% endif %}
                        </a>
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>

    <!-- Event List -->
    <div class="card" style="padding: 30px; border-radius: 28px;">
        <h3 style="font-weight: 800; color: #1e293b; margin-bottom: 20px;">Upcoming Events</h3>
        <div style="max-height: 500px; overflow-y: auto; padding-right: 5px;">
            {% for h in holidays %}
            <div style="padding: 15px; border-radius: 15px; background: #fdfdfd; border: 1px solid #f1f5f9; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-weight: 900; color: #0f172a; font-size: 0.9rem;">{{ h.note }}</div>
                    <div style="display: flex; gap: 8px; align-items: center; margin-top: 4px;">
                        <span style="font-size: 0.72rem; color: #64748b; font-weight: 800;">{{ h.date }}</span>
                        {% if h.day_type == 'WORKING_DAY' %}
                            <span style="font-size: 0.65rem; background: rgba(16, 185, 129, 0.1); color: #059669; padding: 2px 8px; border-radius: 50px; font-weight: 800;">WORKING DAY</span>
                        {% else %}
                            <span style="font-size: 0.65rem; background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 2px 8px; border-radius: 50px; font-weight: 800;">HOLIDAY</span>
                        {% endif %}
                    </div>
                </div>
                <a href="{% url 'holiday_delete' h.pk %}" onclick="return confirm('Remove this event?')" style="color: #ef4444; opacity: 0.3; transition: 0.3s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
            {% empty %}
            <div style="text-align: center; padding: 40px; color: #94a3b8;">
                No events recorded.
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}