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

{% block body %}

<header class="page-header">
    <div class="container">
        <nav aria-label="breadcrumb"><ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_propietario_panel') }}">Panel</a></li>
            <li class="breadcrumb-item active">Gestionar solicitud</li>
        </ol></nav>
        <h1><i class="bi bi-pencil-square me-2" style="opacity:.8"></i>Gestionar solicitud de reserva</h1>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">
<div class="row justify-content-center g-4">

    {# Columna izquierda: datos #}
    <div class="col-md-5">

        <div class="content-card p-4 mb-3">
            <div class="section-header-sm mb-3">Solicitante</div>
            <div class="d-flex align-items-center gap-3 mb-3">
                <div style="width:48px; height:48px; background:var(--verde-palido); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:800; color:var(--verde-oscuro); flex-shrink:0">
                    {{ reserva.user.nombre|slice(0,1)|upper }}
                </div>
                <div>
                    <div style="font-weight:800; color:#1a3528">{{ reserva.user.nombreCompleto }}</div>
                    <div style="font-size:.82rem; color:#6c8c78">{{ reserva.user.email }}</div>
                </div>
            </div>
            {% if reserva.user.telefono %}
            <div style="font-size:.82rem; color:#6c8c78"><i class="bi bi-telephone me-1"></i>{{ reserva.user.telefono }}</div>
            {% endif %}
        </div>

        <div class="content-card p-4">
            <div class="section-header-sm mb-3">Parcela solicitada</div>
            <div style="font-size:1.8rem; font-weight:800; color:#1a3528; line-height:1; margin-bottom:.25rem">Parcela {{ reserva.parcela.numero }}</div>
            <div style="font-size:.8rem; color:var(--verde-medio); font-weight:700; margin-bottom:1rem">
                {% if reserva.parcela.tamano <= 15 %}Pequeña{% elseif reserva.parcela.tamano <= 30 %}Mediana{% else %}Grande{% endif %}
            </div>
            <div style="height:1px; background:#e8f5ed; margin-bottom:1rem"></div>
            {% for row in [
                {label: 'Superficie',      value: reserva.parcela.tamano ~ ' m²'},
                {label: 'Precio',          value: reserva.parcela.precio ~ '€/mes'},
                {label: 'Fecha solicitud', value: reserva.fechaSolicitud|date('d/m/Y')},
                {label: 'Inicio deseado',  value: reserva.fechaInicio|date('d/m/Y')}
            ] %}
            <div class="d-flex justify-content-between mb-2" style="font-size:.85rem">
                <span class="text-muted">{{ row.label }}</span>
                <span style="font-weight:700; color:#1a3528">{{ row.value }}</span>
            </div>
            {% endfor %}
            {% if reserva.fechaFin %}
            <div class="d-flex justify-content-between" style="font-size:.85rem">
                <span class="text-muted">Fin deseado</span>
                <span style="font-weight:700; color:#1a3528">{{ reserva.fechaFin|date('d/m/Y') }}</span>
            </div>
            {% endif %}
        </div>

    </div>

    {# Columna derecha: formulario decisión #}
    <div class="col-md-6">
        <div class="content-card p-4 p-md-5">
            <div class="section-header-sm mb-1">Tu decisión</div>
            <p class="text-muted small mb-4">El mensaje de observaciones llegará al usuario por email y en su área personal.</p>

            {{ form_start(form) }}

            <div class="mb-4">
                {{ form_label(form.observaciones) }}
                {{ form_widget(form.observaciones, {'attr': {'class': 'form-control', 'rows': 4, 'placeholder': 'Ej: Hemos aceptado tu solicitud. Tu parcela estará disponible desde el lunes…'}}) }}
                <div class="form-text">Opcional pero recomendado.</div>
            </div>

            <div style="height:1px; background:#e8f5ed; margin-bottom:1.5rem"></div>

            <div class="d-flex gap-3">
                {{ form_widget(form.aceptar, {'attr': {'class': 'btn flex-fill fw-bold', 'style': 'background:#e8f5e9; color:#1b5e36; border:2px solid #a5d6a7; border-radius:50px; padding:.65rem; font-size:.9rem; transition:background .15s', 'onmouseover': "this.style.background='#c8e6c9'", 'onmouseout': "this.style.background='#e8f5e9'"}}) }}
                {{ form_widget(form.rechazar, {'attr': {'class': 'btn flex-fill fw-bold', 'style': 'background:#fff5f5; color:#c0392b; border:2px solid #f5c6cb; border-radius:50px; padding:.65rem; font-size:.9rem; transition:background .15s', 'onmouseover': "this.style.background='#ffe0e0'", 'onmouseout': "this.style.background='#fff5f5'"}}) }}
            </div>

            {{ form_end(form) }}
        </div>
    </div>

</div>
</div>
{% endblock %}