{% extends 'base.html.twig' %}
{% block title %}Mi área – HuertosCastellon.es{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}

<header class="page-header">
    <div class="container">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3">
            <div>
                <div class="section-header-sm" style="color:rgba(255,255,255,.65)">Área personal</div>
                <h1>Hola, {{ app.user.nombre }} 👋</h1>
                <p style="opacity:.8; font-size:.9rem; margin:0">{{ app.user.email }}</p>
            </div>
            <a href="{{ path('app_mapa') }}" class="btn-primary-green" style="background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.4); border-radius:50px; padding:.55rem 1.3rem; white-space:nowrap; text-decoration:none; color:#fff; font-weight:700; font-size:.9rem; backdrop-filter:blur(4px)">
                <i class="bi bi-map me-1"></i>Ver parcelas
            </a>
        </div>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">

    {% if reservas is empty %}
    <div class="content-card p-5 text-center mt-2">
        <div style="font-size:3.5rem; opacity:.25; margin-bottom:1rem">🌱</div>
        <h2 style="font-size:1.1rem; font-weight:800; color:#1a3528">Todavía no tienes ninguna reserva</h2>
        <p class="text-muted small mt-1 mb-4">Explora el mapa interactivo y elige la parcela que más te guste.</p>
        <a href="{{ path('app_mapa') }}" class="btn-primary-green" style="border-radius:50px; padding:.6rem 1.6rem; text-decoration:none; display:inline-block">
            <i class="bi bi-map me-1"></i>Ver parcelas disponibles
        </a>
    </div>
    {% else %}

    <h2 style="font-size:1rem; font-weight:800; color:#1a3528; margin-bottom:1rem">
        Mis solicitudes de reserva
        <span style="background:#e8f5ed; color:var(--verde-medio); font-size:.75rem; padding:.2rem .6rem; border-radius:50px; margin-left:.4rem">{{ reservas|length }}</span>
    </h2>

    <div class="d-flex flex-column gap-3">
        {% for reserva in reservas %}
        <div class="content-card p-0 overflow-hidden">
            {# Franja de color según estado #}
            <div style="height:4px; background:{% if reserva.estado.value == 'aceptada' %}#40916c{% elseif reserva.estado.value == 'pendiente' %}#f4a261{% else %}#adb5bd{% endif %}"></div>
            <div class="p-3 p-md-4">
                <div class="row align-items-center g-3">
                    {# Badge estado #}
                    <div class="col-auto">
                        {% if reserva.estado.value == 'pendiente' %}
                        <div style="width:48px; height:48px; background:#fff8f0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem">⏳</div>
                        {% elseif reserva.estado.value == 'aceptada' %}
                        <div style="width:48px; height:48px; background:#f0faf4; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem">✅</div>
                        {% else %}
                        <div style="width:48px; height:48px; background:#f5f5f5; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem">❌</div>
                        {% endif %}
                    </div>
                    {# Datos #}
                    <div class="col">
                        <div class="d-flex align-items-center gap-2 flex-wrap mb-1">
                            <span style="font-size:1rem; font-weight:800; color:#1a3528">Parcela {{ reserva.parcela.numero }}</span>
                            {% if reserva.estado.value == 'pendiente' %}
                            <span style="background:#fff3e0; color:#b35a00; font-size:.7rem; font-weight:700; padding:.18rem .6rem; border-radius:50px">Pendiente de aprobación</span>
                            {% elseif reserva.estado.value == 'aceptada' %}
                            <span style="background:#e8f5e9; color:#1b5e36; font-size:.7rem; font-weight:700; padding:.18rem .6rem; border-radius:50px">Aceptada</span>
                            {% else %}
                            <span style="background:#f5f5f5; color:#666; font-size:.7rem; font-weight:700; padding:.18rem .6rem; border-radius:50px">Rechazada</span>
                            {% endif %}
                        </div>
                        <div class="d-flex flex-wrap gap-3" style="font-size:.8rem; color:#6c8c78">
                            <span><i class="bi bi-rulers me-1"></i>{{ reserva.parcela.tamano }} m²</span>
                            <span><i class="bi bi-tag me-1"></i>{{ reserva.parcela.precio }}€/mes</span>
                            <span><i class="bi bi-calendar-event me-1"></i>Solicitud: {{ reserva.fechaSolicitud|date('d/m/Y') }}</span>
                            <span><i class="bi bi-calendar-check me-1"></i>Inicio: {{ reserva.fechaInicio|date('d/m/Y') }}</span>
                            {% if reserva.fechaFin %}<span><i class="bi bi-calendar-x me-1"></i>Fin: {{ reserva.fechaFin|date('d/m/Y') }}</span>{% endif %}
                        </div>
                        {% if reserva.observaciones %}
                        <div class="mt-2 pt-2" style="border-top:1px solid #f0faf4">
                            <div style="font-size:.78rem; color:#4a6a55; background:#f8fdf9; border-radius:8px; padding:.5rem .8rem">
                                <i class="bi bi-chat-left-text me-1"></i>
                                <strong>Propietario:</strong> {{ reserva.observaciones }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {# Acción cancelar #}
                    {% if reserva.estado.value == 'pendiente' %}
                    <div class="col-auto">
                        <form method="post" action="{{ path('app_reserva_cancelar', {id: reserva.id}) }}"
                              onsubmit="return confirm('¿Cancelar esta solicitud?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('cancelar' ~ reserva.id) }}">
                            <button type="submit" class="btn-ghost-green" style="border-color:#fcc; color:#c0392b; background:#fff8f8; font-size:.8rem; padding:.38rem .8rem">
                                <i class="bi bi-x-lg me-1"></i>Cancelar
                            </button>
                        </form>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

</div>
{% endblock %}