{% extends 'base.html.twig' %}
{% block title %}Gestionar parcelas – 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">Parcelas</li>
        </ol></nav>
        <div class="d-flex justify-content-between align-items-end flex-wrap gap-3">
            <h1><i class="bi bi-grid-3x3-gap me-2" style="opacity:.8"></i>Gestionar parcelas</h1>
            <a href="{{ path('app_propietario_parcela_nueva') }}" 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-plus-lg me-1"></i>Nueva parcela
            </a>
        </div>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">
    <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>
                        {% for th in ['Nº', 'Tamaño', 'Precio', 'Posición en mapa', 'Estado', 'Reservas', 'Acciones'] %}
                        <th style="padding:.85rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4a6a55; border:none; white-space:nowrap">{{ th }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for parcela in parcelas %}
                    <tr style="border-bottom:1px solid #f0faf4">
                        <td style="padding:.75rem 1rem; border:none; font-weight:800; color:#1a3528; font-size:1rem">{{ parcela.numero }}</td>
                        <td style="padding:.75rem 1rem; border:none">
                            <div style="font-weight:600; color:#1a3528">{{ parcela.tamano }} m²</div>
                            <div class="text-muted" style="font-size:.75rem">{% if parcela.tamano <= 15 %}Pequeña{% elseif parcela.tamano <= 30 %}Mediana{% else %}Grande{% endif %}</div>
                        </td>
                        <td style="padding:.75rem 1rem; border:none; font-weight:700; color:var(--verde-oscuro)">{{ parcela.precio }}€<span class="text-muted fw-normal">/mes</span></td>
                        <td style="padding:.75rem 1rem; border:none; color:#6c8c78; font-size:.8rem">
                            Col {{ parcela.posX }}, Fila {{ parcela.posY }}
                            <div style="font-size:.72rem; color:#adb5bd">{{ parcela.ancho }}×{{ parcela.alto }} celdas</div>
                        </td>
                        <td style="padding:.75rem 1rem; border:none">
                            {% if parcela.estado.value == 'libre' %}
                            <span style="background:#e8f5e9; color:#1b5e36; font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:50px">Libre</span>
                            {% else %}
                            <span style="background:#f5f5f5; color:#555; font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:50px">Ocupada</span>
                            {% endif %}
                        </td>
                        <td style="padding:.75rem 1rem; border:none; text-align:center">
                            <span style="font-weight:700; color:#1a3528">{{ parcela.reservas|length }}</span>
                        </td>
                        <td style="padding:.75rem 1rem; border:none">
                            <div class="d-flex gap-1 flex-wrap">
                                <a href="{{ path('app_propietario_parcela_editar', {id: parcela.id}) }}"
                                   class="btn btn-sm btn-outline-primary" title="Editar" style="border-radius:6px">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a href="{{ path('app_propietario_parcela_imagenes', {id: parcela.id}) }}"
                                   class="btn btn-sm btn-outline-secondary" title="Imágenes" style="border-radius:6px">
                                    <i class="bi bi-images"></i>
                                    {% if parcela.imagenes|length > 0 %}
                                    <span class="badge bg-secondary ms-1" style="font-size:.6rem">{{ parcela.imagenes|length }}</span>
                                    {% endif %}
                                </a>
                                <form method="post" action="{{ path('app_propietario_parcela_toggle', {id: parcela.id}) }}"
                                      onsubmit="return confirm('¿Cambiar estado de la parcela?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle' ~ parcela.id) }}">
                                    <button type="submit" title="{{ parcela.isLibre() ? 'Marcar ocupada' : 'Marcar libre' }}"
                                            class="btn btn-sm {{ parcela.isLibre() ? 'btn-outline-secondary' : 'btn-outline-success' }}" style="border-radius:6px">
                                        <i class="bi {{ parcela.isLibre() ? 'bi-lock' : 'bi-unlock' }}"></i>
                                    </button>
                                </form>
                                {% if parcela.reservas|length == 0 %}
                                <form method="post" action="{{ path('app_propietario_parcela_eliminar', {id: parcela.id}) }}"
                                      onsubmit="return confirm('¿Eliminar la parcela {{ parcela.numero }}? Esta acción no se puede deshacer.')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('eliminar' ~ parcela.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar" style="border-radius:6px">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}