{% extends 'base.html.twig' %}
{% block title %}Panel propietario – HuertosCastellon.es{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}

<header class="page-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end flex-wrap gap-3">
            <div>
                <div class="section-header-sm" style="color:rgba(255,255,255,.65)">Administración</div>
                <h1><i class="bi bi-speedometer2 me-2" style="opacity:.8"></i>Panel del propietario</h1>
            </div>
            <a href="{{ path('app_propietario_parcelas') }}" style="background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.35); border-radius:50px; padding:.5rem 1.2rem; color:#fff; font-weight:700; font-size:.85rem; text-decoration:none; backdrop-filter:blur(4px); white-space:nowrap">
                <i class="bi bi-grid-3x3-gap me-1"></i>Gestionar parcelas
            </a>
        </div>
    </div>
</header>

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

    {# Stats #}
    <div class="row g-3 mb-4">
        {% for stat in [
            {num: totalParcelas, label: 'Total parcelas',   icon: 'bi-grid-3x3-gap', bg: '#f0faf4', color: '#1a3528'},
            {num: totalLibres,   label: 'Libres',           icon: 'bi-check-circle',  bg: '#e8f5e9', color: '#1b5e36'},
            {num: totalOcupadas, label: 'Ocupadas',         icon: 'bi-lock',          bg: '#f5f5f5', color: '#555'},
            {num: pendientes|length, label: 'Pendientes',   icon: 'bi-hourglass-split',bg: '#fff8f0',color: '#b35a00'}
        ] %}
        <div class="col-6 col-md-3">
            <div class="content-card p-4 text-center">
                <div style="width:44px; height:44px; background:{{ stat.bg }}; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:auto .auto .8rem; font-size:1.1rem; color:{{ stat.color }}">
                    <i class="bi {{ stat.icon }}"></i>
                </div>
                <div style="font-size:2rem; font-weight:800; color:{{ stat.color }}; line-height:1">{{ stat.num }}</div>
                <div class="text-muted small mt-1">{{ stat.label }}</div>
            </div>
        </div>
        {% endfor %}
    </div>

    {# Solicitudes pendientes #}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 style="font-size:1rem; font-weight:800; color:#1a3528; margin:0">
            Solicitudes pendientes
            {% if pendientes|length > 0 %}
            <span style="background:#fff3e0; color:#b35a00; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:50px; margin-left:.4rem">{{ pendientes|length }}</span>
            {% endif %}
        </h2>
    </div>

    {% if pendientes is empty %}
    <div class="content-card p-4 mb-4" style="background:#f0faf4; border:1px solid #c8e6d0">
        <div style="font-size:.9rem; color:#1b5e36"><i class="bi bi-check-circle-fill me-2"></i>No hay solicitudes pendientes. ¡Todo al día!</div>
    </div>
    {% else %}
    <div class="d-flex flex-column gap-3 mb-4">
        {% for reserva in pendientes %}
        <div class="content-card p-0 overflow-hidden" style="border-left:4px solid #f4a261">
            <div class="p-3 p-md-4">
                <div class="row align-items-center g-3">
                    <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>
                            <span style="background:#f8f5ed; color:#7a6a2a; font-size:.72rem; font-weight:700; padding:.15rem .55rem; border-radius:50px">{{ reserva.parcela.tamano }} m² · {{ reserva.parcela.precio }}€/mes</span>
                        </div>
                        <div class="d-flex flex-wrap gap-3 mb-1" style="font-size:.8rem; color:#6c8c78">
                            <span><i class="bi bi-person me-1"></i><strong style="color:#1a3528">{{ reserva.user.nombreCompleto }}</strong></span>
                            <span>{{ reserva.user.email }}</span>
                        </div>
                        <div class="d-flex flex-wrap gap-3" style="font-size:.78rem; color:#adb5bd">
                            <span><i class="bi bi-calendar-event me-1"></i>Solicitud: {{ reserva.fechaSolicitud|date('d/m/Y H:i') }}</span>
                            <span><i class="bi bi-calendar-check me-1"></i>Inicio deseado: {{ 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>
                    </div>
                    <div class="col-auto">
                        <a href="{{ path('app_propietario_reserva', {id: reserva.id}) }}" class="btn-primary-green" style="border-radius:50px; padding:.5rem 1.2rem; text-decoration:none; font-size:.85rem">
                            <i class="bi bi-pencil-square me-1"></i>Gestionar
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {# Historial #}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 style="font-size:1rem; font-weight:800; color:#1a3528; margin:0">Historial de reservas</h2>
    </div>

    {% if todasReservas is empty %}
    <p class="text-muted small">Todavía no hay reservas registradas.</p>
    {% else %}
    <div class="content-card p-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size:.85rem">
                <thead style="background:#f8fdf9; border-bottom:2px solid #e8f5ed">
                    <tr>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none">Parcela</th>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none">Usuario</th>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none">Solicitud</th>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none">Inicio</th>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none">Estado</th>
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for reserva in todasReservas %}
                    <tr style="border-bottom:1px solid #f0faf4">
                        <td style="padding:.75rem 1rem; border:none"><strong>P{{ reserva.parcela.numero }}</strong> <span class="text-muted">· {{ reserva.parcela.tamano }}m²</span></td>
                        <td style="padding:.75rem 1rem; border:none">
                            <div style="font-weight:600; color:#1a3528">{{ reserva.user.nombreCompleto }}</div>
                            <div class="text-muted" style="font-size:.78rem">{{ reserva.user.email }}</div>
                        </td>
                        <td style="padding:.75rem 1rem; border:none; color:#6c8c78">{{ reserva.fechaSolicitud|date('d/m/Y') }}</td>
                        <td style="padding:.75rem 1rem; border:none; color:#6c8c78">{{ reserva.fechaInicio|date('d/m/Y') }}</td>
                        <td style="padding:.75rem 1rem; border:none">
                            {% if reserva.estado.value == 'pendiente' %}
                            <span style="background:#fff3e0; color:#b35a00; font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:50px">Pendiente</span>
                            {% elseif reserva.estado.value == 'aceptada' %}
                            <span style="background:#e8f5e9; color:#1b5e36; font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:50px">Aceptada</span>
                            {% else %}
                            <span style="background:#f5f5f5; color:#666; font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:50px">Rechazada</span>
                            {% endif %}
                        </td>
                        <td style="padding:.75rem 1rem; border:none">
                            {% if reserva.estado.value == 'pendiente' %}
                            <a href="{{ path('app_propietario_reserva', {id: reserva.id}) }}" style="color:var(--verde-medio); font-size:.82rem; font-weight:600; text-decoration:none">
                                <i class="bi bi-pencil me-1"></i>Gestionar
                            </a>
                            {% elseif reserva.notificadoPorEmail %}
                            <span class="text-muted" style="font-size:.78rem"><i class="bi bi-envelope-check me-1" style="color:var(--verde-medio)"></i>Notificado</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}