{% extends 'base.html.twig' %}
{% block title %}Reservar parcela {{ parcela.numero }} – HuertosCastellon.es{% 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_mapa') }}">Mapa de parcelas</a></li>
            <li class="breadcrumb-item active">Reservar parcela {{ parcela.numero }}</li>
        </ol></nav>
        <h1><i class="bi bi-calendar-plus me-2" style="opacity:.8"></i>Solicitar reserva</h1>
    </div>
</header>

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

    {# Resumen parcela #}
    <div class="col-md-4">
        <div class="content-card p-4 mb-3">
            <div class="section-header-sm mb-3">Parcela seleccionada</div>
            {% if parcela.imagenes|length > 0 %}
            <img src="{{ asset('uploads/parcelas/' ~ parcela.imagenes.first.nombreArchivo) }}"
                 style="width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:1rem"
                 alt="Parcela {{ parcela.numero }}">
            {% else %}
            <div style="height:100px; background:linear-gradient(135deg,var(--verde-palido),#c7edd0); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:1rem">🌿</div>
            {% endif %}

            <div style="font-size:1.5rem; font-weight:800; color:#1a3528">Parcela {{ parcela.numero }}</div>
            <div style="font-size:.8rem; color:var(--verde-medio); font-weight:700">
                {% if parcela.tamano <= 15 %}Pequeña{% elseif parcela.tamano <= 30 %}Mediana{% else %}Grande{% endif %}
            </div>

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

            <div class="d-flex justify-content-between mb-1" style="font-size:.85rem">
                <span class="text-muted">Superficie</span>
                <span style="font-weight:700; color:#1a3528">{{ parcela.tamano }} m²</span>
            </div>
            <div class="d-flex justify-content-between mb-1" style="font-size:.85rem">
                <span class="text-muted">Precio</span>
                <span style="font-weight:700; color:var(--verde-oscuro)">{{ parcela.precio }}€/mes</span>
            </div>
            <div class="d-flex justify-content-between" style="font-size:.85rem">
                <span class="text-muted">Estado</span>
                <span style="background:#e8f5e9; color:#1b5e36; font-weight:700; padding:.1rem .5rem; border-radius:50px; font-size:.75rem">Libre</span>
            </div>

            {% if parcela.descripcion %}
            <div style="height:1px; background:#e8f5ed; margin:1rem 0"></div>
            <p style="font-size:.8rem; color:#6c8c78; margin:0">{{ parcela.descripcion }}</p>
            {% endif %}
        </div>

        <div class="content-card p-3" style="background:#fffbf0; border:1px solid #ffe8a0">
            <div style="font-size:.78rem; color:#7a5a00">
                <i class="bi bi-info-circle-fill me-1" style="color:#f4a261"></i>
                Tu solicitud quedará <strong>pendiente de aprobación</strong>. Recibirás un email cuando el propietario la revise.
            </div>
        </div>
    </div>

    {# Formulario #}
    <div class="col-md-6">
        <div class="content-card p-4 p-md-5">
            <div class="section-header-sm mb-1">Fechas de uso</div>
            <p class="text-muted small mb-4">Indica cuándo quieres comenzar a usar la parcela.</p>

            {{ form_start(form) }}
            <div class="mb-3">
                {{ form_label(form.fechaInicio) }}
                {{ form_widget(form.fechaInicio, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.fechaInicio) }}
            </div>
            <div class="mb-4">
                {{ form_label(form.fechaFin) }}
                {{ form_widget(form.fechaFin, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.fechaFin) }}
                <div class="form-text">Opcional. Déjalo en blanco si no sabes cuándo terminarás.</div>
            </div>

            <button type="submit" class="btn-primary-green w-100" style="border-radius:50px; padding:.7rem; font-size:.95rem">
                <i class="bi bi-send me-1"></i>Enviar solicitud de reserva
            </button>
            {{ form_end(form) }}
        </div>
    </div>

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