{% extends 'base.html.twig' %}

{% block title %}Planning des Disponibilités - {{ month }}/{{ year }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }

        .header-calendar {
            background-color: #3c8dbc;
            color: white;
            padding: 10px;
        }

        .day-cell {
            height: 90px;
            vertical-align: top;
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
            font-weight: bold;
            position: relative;
            cursor: pointer;
            background-color: #f9f9f9;
        }

        .day-cell:hover {
            background-color: #e0f0ff;
        }

        /* --- ÉTATS DU CALENDRIER --- */
        .available { background-color: #d4edda !important; } /* Vert */
        .unavailable { background-color: #e2e3e5 !important; color: #6c757d; } /* Gris */
        .stop_sale { background-color: #f8d7da !important; color: #721c24; border: 1px solid #f5c6cb; } /* Rouge clair */
        .promo { background-color: #d1ecf1 !important; border: 1px solid #bee5eb; } /* Bleu promo */
        .none { background-color: #ffffff; } /* Blanc */

        .day-number {
            display: block;
            font-size: 1.2em;
            margin-bottom: 5px;
        }

        /* --- LÉGENDE --- */
        .calendar-legend { margin: 20px 0; }
        .calendar-legend ul {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;
        }
        .calendar-legend li {
            width: 20%;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .legend-box {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 10px;
            border: 1px solid #ccc;
        }

        /* --- TOOLTIP LARGEUR ÉCRAN --- */
        .tooltip-content {
            display: none;
            position: absolute;
            background-color: #ffffff;
            color: #333;
            padding: 20px;
            border-radius: 4px;
            font-size: 13px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

            /* Largeur fluide */
            width: 90vw;
            max-width: 900px;
            left: 50%;
            transform: translateX(-50%);

            white-space: normal;
            z-index: 1000;
            border: 1px solid #bbb;
            text-align: left;
            line-height: 1.5;
            bottom: 105%; /* Affiche au-dessus de la cellule */
        }

        .day-cell:hover .tooltip-content {
            display: block;
        }

        .pension-section {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .pension-section:last-child { border-bottom: none; }

        .pension-name {
            font-weight: bold;
            font-size: 15px;
            color: #3c8dbc;
            margin-bottom: 10px;
            text-transform: uppercase;
            border-left: 4px solid #3c8dbc;
            padding-left: 10px;
        }

        .room-item {
            padding: 10px;
            background: #fcfcfc;
            border: 1px solid #efefef;
            margin-bottom: 5px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .room-item:hover { border-color: #3c8dbc; background: #fff; }

        .label { font-weight: bold; color: #555; }
        .value { color: #000; font-weight: 600; }
        .badge-promo { background-color: #e67e22; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; margin-left: 5px; font-weight: bold; }

        .reduction-info {
            margin-top: 5px;
            padding-top: 5px;
            border-top: 1px dashed #ddd;
            font-size: 11px;
            color: #27ae60;
        }

        @media (max-width: 768px) {
            .tooltip-content { width: 95vw; padding: 10px; }
            .calendar-legend li { width: 50%; }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid" style="padding: 20px;">
        <div class="calendar-legend">
            <h3>Planning des disponibilités : {{ month }}/{{ year }}</h3>
            <ul>
                <li><span class="legend-box available"></span> Disponible</li>
                <li><span class="legend-box unavailable"></span> Complet</li>
                <li><span class="legend-box stop_sale"></span> Stop sale</li>
                {# <li><span class="legend-box promo"></span> Promotion</li> #}
                <li><span class="legend-box none" style="border: 1px solid #999;"></span> Aucun contrat</li>
            </ul>
        </div>

        {% include 'calendar/_form.html.twig' with {"form": form, 'currentDate': currentDate} %}

        <table class="table-bordered">
            <thead>
            <tr>
                <th class="header-calendar">Lun</th>
                <th class="header-calendar">Mar</th>
                <th class="header-calendar">Mer</th>
                <th class="header-calendar">Jeu</th>
                <th class="header-calendar">Ven</th>
                <th class="header-calendar">Sam</th>
                <th class="header-calendar">Dim</th>
            </tr>
            </thead>
            <tbody>
            {% for week in calendar %}
                <tr>
                    {% for cell in week %}
                        {% if cell %}
                            {% set statusClass = cell.status %}

                            <td class="day-cell {{ statusClass }}">
                                <span class="day-number">{{ cell.day }}</span>

                                <div class="tooltip-content">
                                    {% if cell.status == 'stop_sale' %}
                                        <div class="text-danger" style="font-size: 16px;"><strong>🚫 VENTES FERMÉES (STOP SALE)</strong></div>
                                        <p>Cet établissement n'autorise pas de réservations pour cette date spécifique.</p>

                                    {% elseif cell.status == 'available' or cell.status == 'promo' %}
                                        {% set hasGlobalData = false %}

                                        {% for roomsPerPension in cell.rooms %}
                                            {% if roomsPerPension.rooms_per_pension is defined and roomsPerPension.rooms_per_pension|length > 0 %}
                                                {% set hasGlobalData = true %}
                                                <div class="pension-section">
                                                    <div class="pension-name">🍴 {{ roomsPerPension.pension_name|default('Pension') }}</div>

                                                    <div class="row">
                                                        {% for room in roomsPerPension.rooms_per_pension %}
                                                            <div class="col-md-4">
                                                                <div class="room-item">
                                                                    <strong>🛏️ {{ room.name }} ({{ room.code }})</strong>

                                                                    {# Détection des promos pour le badge et les détails #}
                                                                    {% set priceDetails = room.room_price_per_day[0].final_price_per_day.room ?? null %}
                                                                    {% set isEarly = priceDetails and priceDetails.early_booking_reduction %}
                                                                    {% set isPromo = priceDetails and priceDetails.promo_reduction %}

                                                                    {% if isEarly or isPromo %}
                                                                        <span class="badge-promo">PROMO</span>
                                                                    {% endif %}

                                                                    <br>
                                                                    <span class="label">Prix:</span> <span class="value">{{ room.final_price }} TND</span><br>
                                                                    <span class="label">Stock:</span> <span class="value">{{ room.stock_rooms }}</span>

                                                                    {# Affichage des détails de réduction si existants #}
                                                                    {% if isEarly or isPromo %}
                                                                        <div class="reduction-info">
                                                                            {% if isEarly %}
                                                                                <div>✨ Early Booking : -{{ priceDetails.early_booking_reduction }}</div>
                                                                            {% endif %}
                                                                            {% if isPromo %}
                                                                                <div>🎁 {{ priceDetails.promo_type ?? 'Promotion' }} : -{{ priceDetails.promo_reduction }}</div>
                                                                            {% endif %}
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}

                                        {% if not hasGlobalData %}
                                            <div class="text-muted">Aucune chambre disponible pour les critères sélectionnés.</div>
                                        {% endif %}

                                    {% elseif cell.status == 'unavailable' %}
                                        <div class="text-muted" style="font-size: 16px;"><strong>⌛ ÉTABLISSEMENT COMPLET</strong></div>
                                        <p>Il n'y a plus de chambres disponibles pour cette date.</p>

                                    {% else %}
                                        <div class="not-contract">⚠️ Aucun contrat actif ou tarif non renseigné pour cette période.</div>
                                    {% endif %}
                                </div>
                            </td>
                        {% else %}
                            <td class="day-cell none"></td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}