{# ========================================
   FICHE BATEAU
   Détail d'un bateau — description, formules/tarifs, options, calendrier interactif de disponibilité
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Fiche {{ boat.nom }} - Nautiloc{% endblock %}

{% block content %}
<section class="mb-6">
    <p class="mb-2 inline-block rounded-full border-2 border-abyss-900 bg-sand-200 px-3 py-1 text-xs font-black uppercase tracking-wider">{{ boat.type_libelle }} · {{ boat.port_nom }} ({{ boat.port_ville }})</p>
    <h1 class="text-3xl font-black uppercase md:text-4xl">{{ boat.nom }}</h1>
    <p class="mt-2 text-lg font-semibold text-coral-600">{{ boat.slogan }}</p>
</section>

<section class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
    <div class="space-y-6">
        <article class="overflow-hidden rounded-2xl border-4 border-abyss-900 bg-white shadow-[6px_6px_0_0_#041824]">
            <img src="{{ boat.photo_url }}" alt="{{ boat.nom }}" class="h-72 w-full object-cover md:h-96">
        </article>

        <article class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
            <h2 class="text-xl font-black uppercase">Description</h2>
            <p class="mt-3 text-sm font-medium leading-relaxed">{{ boat.description }}</p>
            {% set longueur = 8 + ((boat.id_bateau % 8) * 0.5) %}
            {% set annee = 2017 + (boat.id_bateau % 8) %}
            <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Capacité : <span class="font-black">{{ boat.capacite }} pers.</span></div>
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Permis : <span class="font-black">{{ boat.permis_requis ? 'Requis' : 'Non requis' }}</span></div>
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Familial : <span class="font-black">{{ boat.familial ? 'Oui' : 'Non' }}</span></div>
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Skipper : <span class="font-black">{{ boat.skipper_disponible ? 'Disponible' : 'Non' }}</span></div>
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Longueur : <span class="font-black">{{ longueur|number_format(2, '.', ' ') }} m</span></div>
                <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">Année : <span class="font-black">{{ annee }}</span></div>
            </div>
        </article>

        {# ======== Tableau formules et tarifs ======== #}
        <article class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
            <h2 class="text-xl font-black uppercase">Formules & tarifs</h2>
            <div class="mt-4 overflow-auto">
                <table class="min-w-full border-collapse text-sm">
                    <thead>
                        <tr class="bg-sand-200">
                            <th class="border-2 border-abyss-900 px-3 py-2 text-left font-black uppercase">Formule</th>
                            <th class="border-2 border-abyss-900 px-3 py-2 text-left font-black uppercase">Durée</th>
                            <th class="border-2 border-abyss-900 px-3 py-2 text-left font-black uppercase">Prix</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in pricing %}
                            <tr>
                                <td class="border-2 border-abyss-900 px-3 py-2 font-semibold">{{ item.libelle }}</td>
                                <td class="border-2 border-abyss-900 px-3 py-2">{{ item.duree_heures }} h</td>
                                <td class="border-2 border-abyss-900 px-3 py-2 font-black">{{ item.prix|number_format(0, ',', ' ') }}€</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </article>
    </div>

    <aside class="space-y-6">
        <article class="rounded-2xl border-4 border-abyss-900 bg-abyss-900 p-5 text-sand-100 shadow-[6px_6px_0_0_#ff6b57]">
            <h2 class="text-lg font-black uppercase">Options disponibles</h2>
            <ul class="mt-3 space-y-2">
                {% for option in options %}
                    <li class="flex items-center justify-between rounded-md border border-sand-200/60 px-3 py-2 text-sm">
                        <span class="font-semibold">{{ option.libelle }}</span>
                        <span class="font-black">+{{ option.prix|number_format(0, ',', ' ') }}€</span>
                    </li>
                {% endfor %}
            </ul>
        </article>

        {# ======== Calendrier interactif de disponibilité — bitmask créneau ======== #}
        <article class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
            {% set selected_formule = selected_formule|default(pricing[0].id_formule|default(0)) %}
            {% set selected_mask = 0 %}
            {% for formule in pricing %}
                {% if selected_formule == formule.id_formule %}
                    {% set selected_mask = formule.masque_creneau|default(0) %}
                {% endif %}
            {% endfor %}
            {% set calendar_month = calendar_month|default('now'|date('Y-m')) %}
            {% set month_start = (calendar_month ~ '-01')|date('Y-m-d') %}
            {% set month_label = month_start|date('F Y') %}
            {% set first_weekday = month_start|date('N') %}
            {% set days_in_month = month_start|date('t') %}
            {% set prev_month = (month_start|date_modify('-1 month'))|date('Y-m') %}
            {% set next_month = (month_start|date_modify('+1 month'))|date('Y-m') %}
            <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                <h2 class="text-lg font-black uppercase">Calendrier interactif</h2>
                <form method="get" action="/bateaux/{{ boat.id_bateau }}" class="flex items-center gap-2 text-xs">
                    <input type="hidden" name="month" value="{{ calendar_month }}">
                    <label for="id_formule" class="font-black uppercase">Formule</label>
                    <select id="id_formule" name="id_formule" onchange="this.form.submit()" class="rounded border-2 border-abyss-900 bg-sand-100 px-2 py-1 font-semibold">
                        {% for formule in pricing %}
                            <option value="{{ formule.id_formule }}" {% if selected_formule == formule.id_formule %}selected{% endif %}>{{ formule.libelle }} ({{ formule.duree_heures }}h)</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
            <div class="mt-3 flex items-center justify-between text-xs font-black uppercase">
                <a href="/bateaux/{{ boat.id_bateau }}?id_formule={{ selected_formule }}&month={{ prev_month }}" class="rounded border-2 border-abyss-900 bg-sand-100 px-2 py-1">← Mois préc.</a>
                <span>{{ month_label }}</span>
                <a href="/bateaux/{{ boat.id_bateau }}?id_formule={{ selected_formule }}&month={{ next_month }}" class="rounded border-2 border-abyss-900 bg-sand-100 px-2 py-1">Mois suiv. →</a>
            </div>
            <div class="mt-2 grid grid-cols-7 gap-1 text-[11px] font-black uppercase text-center">
                {% for day_name in ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'] %}
                    <span class="rounded border border-abyss-900 bg-sand-100 px-1 py-1">{{ day_name }}</span>
                {% endfor %}
            </div>
            <div class="mt-1 grid grid-cols-7 gap-1 text-xs">
                {% for i in 1..(first_weekday - 1) %}
                    <span class="rounded border border-dashed border-sand-200 px-2 py-3"></span>
                {% endfor %}
                {% for day in 1..days_in_month %}
                    {% set date_item = calendar_month ~ '-' ~ '%02d'|format(day) %}
                    {% set day_mask = calendar_booked_masks[date_item]|default(0) %}
                    {% set is_conflict = selected_mask > 0 and ((day_mask b-and selected_mask) > 0) %}
                    {% set to_reservation = '/reservations/nouvelle/' ~ boat.id_bateau ~ '?date_depart=' ~ date_item ~ '&id_formule=' ~ selected_formule ~ '&nb_personnes=2' %}
                    {% if is_conflict %}
                        <span class="rounded border-2 border-abyss-900 bg-rose-100 px-2 py-3 text-center font-semibold">
                            <span class="block text-sm font-black">{{ day }}</span>
                            <span class="text-[10px]">Complet</span>
                        </span>
                    {% else %}
                        <a href="{{ to_reservation }}" class="rounded border-2 border-abyss-900 bg-emerald-100 px-2 py-3 text-center font-black transition hover:-translate-y-0.5 hover:bg-emerald-200">
                            <span class="block text-sm">{{ day }}</span>
                            <span class="text-[10px]">Libre</span>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="mt-3 flex gap-2 text-[11px] font-semibold">
                <span class="rounded border border-abyss-900 bg-emerald-100 px-2 py-1">Libre</span>
                <span class="rounded border border-abyss-900 bg-rose-100 px-2 py-1">Complet</span>
            </div>
        </article>

        <a href="/reservations/nouvelle/{{ boat.id_bateau }}" class="block rounded-xl border-4 border-abyss-900 bg-coral-500 px-4 py-4 text-center text-sm font-black uppercase text-white shadow-[6px_6px_0_0_#041824] transition hover:-translate-y-1">Continuer la réservation</a>
    </aside>
</section>
{% endblock %}