{% extends "base.html" %}
{% load static %}

{% block title %}Weekly Planner - New Style{% endblock %}

{% block content %}
<div class="planner-grid">
    <!-- Row 1: Mon, Tue, Wed -->
    <div class="planner-row planner-row-3">
        {% for day in weekly_days|slice:":3" %}
            <div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
                <div class="outfit-display">
                    {% if day.schedule.outfit %}
                        <img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
                    {% else %}
                        <span>NO FIT</span>
                    {% endif %}
                </div>
                <div class="day-footer">
                    <p class="day-label">{{ day.day_name|slice:":3" }}</p>
                    <p class="date-label">{{ day.date|date:"d M" }}</p>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Row 2: Thu, Fri -->
    <div class="planner-row planner-row-2">
        {% for day in weekly_days|slice:"3:5" %}
            <div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
                <div class="outfit-display">
                    {% if day.schedule.outfit %}
                        <img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
                    {% else %}
                        <span>NO FIT</span>
                    {% endif %}
                </div>
                <div class="day-footer">
                    <p class="day-label">{{ day.day_name|slice:":3" }}</p>
                    <p class="date-label">{{ day.date|date:"d M" }}</p>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Row 3: Sat, Sun -->
    <div class="planner-row planner-row-2">
        {% for day in weekly_days|slice:"5:7" %}
            <div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
                <div class="outfit-display">
                    {% if day.schedule.outfit %}
                        <img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
                    {% else %}
                        <span>NO FIT</span>
                    {% endif %}
                </div>
                <div class="day-footer">
                    <p class="day-label">{{ day.day_name|slice:":3" }}</p>
                    <p class="date-label">{{ day.date|date:"d M" }}</p>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="line-separator"></div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-2">
        <i class="bi bi-clock-history text-muted"></i>
        <span class="small fw-bold">{{ total_items }} ITEMS LOADED</span>
    </div>
    <div class="d-flex gap-3">
        <i class="bi bi-brightness-high {% if current_season == 'Summer' %}text-accent{% else %}text-muted{% endif %}"></i>
        <i class="bi bi-flower1 {% if current_season == 'Spring' %}text-accent{% else %}text-muted{% endif %}"></i>
        <i class="bi bi-tree {% if current_season == 'Autumn' %}text-accent{% else %}text-muted{% endif %}"></i>
        <i class="bi bi-snow {% if current_season == 'Winter' %}text-accent{% else %}text-muted{% endif %}"></i>
    </div>
</div>

<!-- Schedule Modal -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title font-montserrat" id="modalDayTitle">SCHEDULE FIT</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{% url 'schedule_outfit' %}" method="POST">
                {% csrf_token %}
                <div class="modal-body">
                    <input type="hidden" name="date" id="modalDateInput">
                    <p class="text-muted small mb-3">Select an outfit for <span id="modalDayName" class="text-white fw-bold"></span></p>
                    
                    <div class="list-group bg-transparent">
                        <label class="list-group-item bg-transparent border-secondary text-white d-flex align-items-center gap-3 py-3">
                            <input class="form-check-input bg-dark border-secondary" type="radio" name="outfit_id" value="" checked>
                            <span class="small">CLEAR SCHEDULE</span>
                        </label>
                        {% for outfit in user.outfits.all %}
                            <label class="list-group-item bg-transparent border-secondary text-white d-flex align-items-center gap-3 py-3">
                                <input class="form-check-input bg-dark border-secondary" type="radio" name="outfit_id" value="{{ outfit.id }}">
                                <div class="d-flex flex-column">
                                    <span class="fw-bold small">{{ outfit.name|upper }}</span>
                                    <span class="text-muted" style="font-size: 0.6rem;">{{ outfit.items.count }} ITEMS</span>
                                </div>
                            </label>
                        {% empty %}
                            <div class="py-4 text-center text-muted">
                                <p class="small mb-2">No outfits saved yet.</p>
                                <a href="{% url 'new_fit' %}" class="btn-custom py-1 px-3">Build One</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn-custom" data-bs-dismiss="modal">CANCEL</button>
                    <button type="submit" class="btn-accent">SCHEDULE</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const scheduleModal = document.getElementById('scheduleModal');
    if (scheduleModal) {
        scheduleModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const date = button.getAttribute('data-date');
            const dayName = button.getAttribute('data-day');
            
            const modalDateInput = scheduleModal.querySelector('#modalDateInput');
            const modalDayName = scheduleModal.querySelector('#modalDayName');
            
            modalDateInput.value = date;
            modalDayName.textContent = dayName;
        });
    }
</script>
{% endblock %}
