{% macro default(message = 'Êtes-vous sûr de supprimer ?') %}
    <div class="default-modal">
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">
                            <i class="text-red fa fa-warning"></i>
                            Note !!!
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h3>{{ message }}</h3>
                    </div>
                    <div class="modal-footer">
                        <button
                                type="button"
                                class="btn btn-secondary"
                                data-dismiss="modal">Non
                        </button>
                        <button
                                type="button"
                                id="modal-confirm"
                                class="btn btn-primary"
                                data-dismiss="modal">Oui
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro album(datas) %}
    <div class="default-modal">
        <div id="myAlbum" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="box-body">
                        <div class="bs-example" data-example-id="simple-carousel">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    {% for nb in 1..datas|length %}
                                        <li data-target="#carousel-example-generic" data-slide-to="{{ nb }}" class="{% if nb == 1 %} active {% endif %}"></li>
                                    {% endfor %}
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    {% for key, img in datas %}
                                        <div class="item {% if key == 0 %} active {% endif %}">
                                            <img src="{{ asset(img.document.path ~'/'~ img.document.filename) }}" data-holder-rendered="true">
                                        </div>
                                    {% endfor %}
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
{% macro show(data) %}
    <div class="default-modal">
        <div id="myModalShow_{{ data.id }}" class="modal fade bd-example-modal-lg">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="box-body">
                        {# SECTION 1 : COORDONNÉES CLIENT #}
                        <div style="border: 1px solid #d2d6de; border-radius: 5px; margin-bottom: 20px; overflow: hidden;">
                            <div style="background-color: #3c8dbc; color: white; padding: 10px; font-weight: bold;">
                                <i class="fa fa-user"></i> Coordonnées du client
                            </div>
                            <div style="padding: 15px; background-color: #f9f9f9;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Nom complet</label>
                                        <span style="font-size: 14px; font-weight: bold;">{{ data.civility ~ ' ' ~ data.firstName ~ ' ' ~ data.lastName }}</span>
                                    </div>
                                    <div class="col-md-4">
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Email</label>
                                        <a href="mailto:{{ data.email }}" style="font-weight: bold;">{{ data.email }}</a>
                                    </div>
                                    <div class="col-md-4">
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Téléphone</label>
                                        <span class="label label-info" style="font-size: 13px;">{{ data.phone }}</span>
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px;">
                                    <div class="col-md-4">
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Localisation</label>
                                        {{ data.address ?? 'aucun' }}<br>
                                        <small><b>{{ data.city ?? 'aucun' }}</b>, {{ data.country ?? 'aucun' }}</small>
                                    </div>
                                    <div class="col-md-4">
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Mode paiement</label>
                                        <span class="label label-default">{{ data.displayPaymentType }}</span>
                                        {% if data.paymentType == constant('App\\Entity\\Booking::TYPE_PAYMENT_TRANSFER') and data.transferOrderPath is not empty %}
                                            <div style="margin-top: 5px;">
                                                {% set publicPath = data.transferOrderPath|split('public/')|last %}
                                                <a
                                                    href="{{ asset(publicPath) }}"
                                                    target="_blank"
                                                    class="btn btn-xs btn-default"
                                                    title="Voir la preuve de virement">
                                                    <i class="fa fa-file-pdf-o text-red"></i> Voir justificatif
                                                </a>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4">
                                        {% set agency = displayAgencyCoordinate(data.agencyId) %}
                                        <label style="color: #777; display: block; font-size: 11px; text-transform: uppercase;">Agence</label>
                                        <i class="fa fa-map-marker text-red"></i> {{ agency.address ?? 'Pas d\'adresse agence' }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {# SECTION 1.5 : DEMANDES SPÉCIALES #}
                        {% if data.specialWishes is not empty or data.specialMessage is not empty %}
                            <div style="border: 1px solid #f39c12; border-radius: 5px; margin-bottom: 20px; overflow: hidden;">
                                <div style="background-color: #f39c12; color: white; padding: 10px; font-weight: bold;">
                                    <i class="fa fa-commenting-o"></i> Demandes du client
                                </div>
                                <div style="padding: 15px; background-color: #fff9f0;">
                                    {% if data.specialWishes is not empty %}
                                        <div style="margin-bottom: 10px;">
                                            <label style="color: #e67e22; display: block; font-size: 11px; text-transform: uppercase; font-weight: bold;">Souhaits particuliers :</label>
                                            <div style="font-style: italic; color: #444;">
                                                {{ data.specialWishes|nl2br }}
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if data.specialMessage is not empty %}
                                        <div style="border-top: 1px dashed #f3d19e; padding-top: 10px;">
                                            <label style="color: #e67e22; display: block; font-size: 11px; text-transform: uppercase; font-weight: bold;">Message d'accompagnement :</label>
                                            <div style="color: #555;">
                                                {{ data.specialMessage|nl2br }}
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}

                        {# SECTION 2 : DÉTAILS RÉSERVATION #}
                        <div style="border: 1px solid #d2d6de; border-radius: 5px; overflow: hidden;">
                            <div style="background-color: #00a65a; color: white; padding: 10px; font-weight: bold;">
                                <i class="fa fa-calendar-check-o"></i> Détails de la réservation
                            </div>
                            <div style="padding: 15px;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <p><b>Référence :</b> <span class="text-blue">#{{ data.bookingNumber }}</span></p>
                                        <p><b>Voucher :</b> {{ data.voucherNumber }}</p>
                                        <p><b>Statut :</b> <span class="label label-success">{{ displayBookingStatus(data.status) }}</span></p>
                                    </div>

                                    <div class="col-md-3" style="border-left: 1px solid #eee; border-right: 1px solid #eee;">
                                        <p><b>Hôtel :</b> <span class="text-red" style="font-size: 16px; font-weight: bold;">{{ data.hotelName }}</span></p>
                                        <p><b>Pension :</b> <span class="label label-warning">{{ data.pensionName }}</span></p>

                                        {# SECTION DES CHAMBRES #}
                                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
                                            <label style="font-size: 11px; text-transform: uppercase; color: #777; display: block;">Chambres :</label>
                                            {% for roomData in data.rooms %}
                                                {% for room in roomData.rooms %}
                                                    <div style="font-size: 13px; margin-bottom: 3px;">
                                                        <i class="fa fa-bed text-muted"></i> <b>{{ room.name }}</b>
                                                        <span class="pull-right text-muted">{{ room.price }} TND</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <span class="text-muted small">Aucune chambre détaillée</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <p><b>Dates du séjour :</b></p>
                                        <div style="display: flex; align-items: center; white-space: nowrap; font-weight: bold;">
                                            <i class="fa fa-calendar text-blue" style="margin-right: 8px;"></i>
                                                <span>{{ data.beginDate|date('d/m/Y') }}</span>
                                            <i class="fa fa-long-arrow-right text-muted" style="margin: 0 10px;"></i>
                                            <span>{{ data.endDate|date('d/m/Y') }}</span>
                                            <span class="badge bg-gray" style="margin-left: 12px; font-size: 0.9em;">
                                                {{ data.numberOfStay }} nuit(s)
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style>
                        /* Correction pour l'alignement des colonnes dans la modal */
                        .row { margin-left: 0; margin-right: 0; }
                        .text-blue { color: #3c8dbc; }
                        .text-red { color: #dd4b39; }
                    </style>
                    <div class="modal-body">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr style="background-color: #f4f4f4;">
                                <th scope="col">Date</th>
                                <th scope="col">Pension</th>
                                <th scope="col">Détails</th>
                                <th scope="col">Net</th>
                                <th scope="col">Promo</th>
                                <th scope="col">EB</th>
                                <th scope="col">Cm(%)</th>
                                <th scope="col">Brute</th>
                                <th scope="col">Suppléments</th>
                                <th scope="col">Total Jour</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% set finalPrice = 0 %}
                            {% set globalCommission = 0 %}
                            {% set roomCounter = 1 %}

                            {% for pensionGroup in data.detailsPrices %}
                                {% set globalCommission = globalCommission + (pensionGroup.total_commission ?? 0) %}
                                {% if pensionGroup.rooms_per_pension is defined %}
                                    {% for roomGroup in pensionGroup.rooms_per_pension %}

                                        {# ENTÊTE DE GROUPE PAR CHAMBRE #}
                                        <tr style="background-color: #e3f2fd; font-weight: bold;">
                                            <td colspan="10">
                                                <i class="fa fa-bed"></i> CHAMBRE {{ roomCounter }} : {{ roomGroup.name }}
                                                <span class="pull-right">Code: {{ roomGroup.code }}</span>
                                            </td>
                                        </tr>

                                        {# CALCULS DES JOURS POUR CETTE CHAMBRE PRÉCISE #}
                                        {% for day in roomGroup.room_price_per_day %}
                                            {% set dayDetail = day.final_price_per_day %}
                                            {% set roomPrice = dayDetail.room %}
                                            {% set dayTotal = roomPrice.brut_price %}

                                            <tr>
                                                <td style="padding-left: 20px;"><span class="label label-default">{{ day.date }}</span></td>
                                                <td><small>{{ pensionGroup.pension_name }}</small></td>
                                                <td><small>Tarif journalier</small></td>
                                                <td>{{ roomPrice.net_price|number_format(2, ',', ' ') }} TND</td>
                                                <td>
                                                    {% if roomPrice.promo_type %}
                                                        <small class="text-danger">-{{ roomPrice.promo_reduction }}{{ roomPrice.promo_type == 'percentage' ? '%' : 'TND' }}</small>
                                                    {% else %}
                                                        <small>-</small>
                                                    {% endif %}
                                                </td>
                                                <td><small>{{ roomPrice.early_booking_reduction ? roomPrice.early_booking_reduction ~ '%' : '-' }}</small></td>
                                                <td><small>{{ roomPrice.commission_price }}%</small></td>
                                                <td>{{ roomPrice.brut_price|number_format(2, ',', ' ') }} TND</td>
                                                {# SECTION SUPPLÉMENTS MISE À JOUR #}
                                                <td>
                                                    {% if dayDetail.supplements is not empty %}
                                                        {% for supp in dayDetail.supplements %}
                                                            {# On ajoute le brut au total du jour #}
                                                            {% set dayTotal = dayTotal + supp.brut_price %}
                                                            <div style="border-bottom: 1px dashed #eee; padding-bottom: 5px; margin-bottom: 5px; line-height: 1.2;">
                                                                <div style="font-weight: bold; color: #31708f; font-size: 0.9em;">
                                                                    <i class="fa fa-plus-circle"></i> {{ supp.name }}
                                                                </div>
                                                                <div style="font-size: 0.85em; color: #777; padding-left: 15px;">
                                                                    Net: {{ supp.net_price|number_format(2, ',', ' ') }} TND<br>

                                                                    Com: ({{(supp.brut_price - supp.net_price)|number_format(2, ',', ' ') }} TND)
                                                                </div>
                                                                <div style="font-weight: bold; font-size: 0.9em; padding-left: 15px;">
                                                                    Brut: {{ supp.brut_price|number_format(2, ',', ' ') }} TND
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    {% else %}
                                                        <small class="text-muted">Aucun</small>
                                                    {% endif %}
                                                </td>
                                                <td class="text-right" style="background-color: #f9f9f9;">
                                                    <strong>{{ dayTotal|number_format(2, ',', ' ') }} TND</strong>
                                                </td>
                                            </tr>

                                            {# ADULTE(S) DE BASE #}
                                            {% if roomPrice.adult is defined and roomPrice.adult is not empty and roomPrice.adult.brut_price > 0 %}
                                                <tr style="font-size: 0.85em; color: #666; border-bottom: 1px solid #f4f4f4;">
                                                    <td colspan="2" style="border-top: none;"></td>
                                                    <td style="padding-left: 30px;"><i class="fa fa-user-o text-muted"></i> Adulte(s) de base</td>
                                                    <td>{{ roomPrice.adult.net_price|number_format(2, ',', ' ') }} TND</td>
                                                    <td>-</td>
                                                    <td>-</td>
                                                    <td>{{ roomPrice.adult.commission_price }}{{ roomPrice.adult.percent ? '%' : 'TND' }}</td>
                                                    <td>{{ roomPrice.adult.brut_price|number_format(2, ',', ' ') }} TND</td>
                                                    <td colspan="2" style="border-top: none;"></td>
                                                </tr>
                                            {% endif %}

                                            {# LITS SUPPLÉMENTAIRES (EXTENDED BEDS) #}
                                            {% for i in 1..4 %}
                                                {% set bedKey = 'extendedBed' ~ i %}
                                                {% set bed = attribute(roomPrice, bedKey) %}
                                                {# On vérifie que le lit n'est pas un tableau vide et qu'il a un prix #}
                                                {% if bed is defined and bed is not empty and bed.brut_price is defined and bed.brut_price > 0 %}
                                                    <tr style="font-size: 0.85em; color: #666; border-bottom: 1px solid #f4f4f4;">
                                                        <td colspan="2" style="border-top: none;"></td>
                                                        <td style="padding-left: 30px;"><i class="fa fa-plus-square-o text-muted"></i> Lit supplémentaire {{ i }}</td>
                                                        <td>{{ bed.net_price|number_format(2, ',', ' ') }} TND</td>
                                                        <td>-</td>
                                                        <td>-</td>
                                                        <td>{{ bed.commission_price }}{{ bed.percent ? '%' : 'TND' }}</td>
                                                        <td>{{ bed.brut_price|number_format(2, ',', ' ') }} TND</td>
                                                        <td colspan="2" style="border-top: none;"></td>
                                                    </tr>
                                                {% endif %}
                                            {% endfor %}

                                            {# ENFANTS #}
                                            {% if roomPrice.childs is defined and roomPrice.childs is not empty %}
                                                {% for child in roomPrice.childs %}
                                                    <tr style="font-size: 0.85em; color: #666; border-bottom: 1px solid #f4f4f4;">
                                                        <td colspan="2" style="border-top: none;"></td>
                                                        <td style="padding-left: 30px;">
                                                            <i class="fa fa-child text-muted"></i>
                                                            Enfant {{ child.enfant }} ({{ child.age }} {{ child.age <= 1 ? 'an' : 'ans' }})
                                                            {% if child.label %}<br><small class="text-muted" style="margin-left: 18px;">{{ child.label }}</small>{% endif %}
                                                        </td>
                                                        <td>{{ child.net_price|number_format(2, ',', ' ') }} TND</td>
                                                        <td>
                                                            {% if child.reduction > 0 %}
                                                                <span class="text-danger">-{{ child.reduction }}{{ child.isPercent ? '%' : 'TND' }}</span>
                                                            {% else %}<small>-</small>{% endif %}
                                                        </td>
                                                        <td>-</td>
                                                        <td>{{ child.commission_price }}{{ child.commission_percent ? '%' : 'TND' }}</td>
                                                        <td>{{ child.brut_price|number_format(2, ',', ' ') }} TND</td>
                                                        <td colspan="2" style="border-top: none;"></td>
                                                    </tr>
                                                {% endfor %}
                                            {% endif %}
                                            {% set finalPrice = finalPrice + dayTotal %}
                                        {% endfor %}

                                        {% set roomCounter = roomCounter + 1 %}
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr style="background-color: #222; color: #fff;">
                                <td colspan="9" class="text-right"><strong>Montant total de la réservation (TTC) :</strong></td>
                                <td class="text-right" style="font-size: 1.3em;"><strong>{{ finalPrice|number_format(2, ',', ' ') }} TND</strong></td>
                            </tr>
                            <tr style="background-color: #222; color: #fff;">
                                <td colspan="9" class="text-right"><strong>Montant à reverser à l'Hôtel (Net) :</strong></td>
                                <td class="text-right" style="font-size: 1.3em;"><strong>{{ (finalPrice - globalCommission)|number_format(2, ',', ' ') }} TND</strong></td>
                            </tr>
                            <tr style="background-color: #222; color: #fff;">
                                <td colspan="9" class="text-right"><strong>Commission agence :</strong></td>
                                <td class="text-right" style="font-size: 1.3em;"><strong>{{ globalCommission|number_format(2, ',', ' ') }} TND</strong></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button
                                type="button"
                                id="modal-confirm"
                                class="btn btn-primary"
                                data-dismiss="modal">Fermé
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
{% macro album(datas) %}
    <div class="default-modal">
        <div id="myAlbum" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="box-body">
                        <div class="bs-example" data-example-id="simple-carousel">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    {% for nb in 1..datas|length %}
                                        <li data-target="#carousel-example-generic" data-slide-to="{{ nb }}" class="{% if nb == 1 %} active {% endif %}"></li>
                                    {% endfor %}
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    {% for key, img in datas %}
                                        <div class="item {% if key == 0 %} active {% endif %}">
                                            <img src="{{ asset(img.document.path ~'/'~ img.document.filename) }}" data-holder-rendered="true">
                                        </div>
                                    {% endfor %}
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
{% macro send_document(data) %}
    <div class="default-modal">
        <div id="myModalSendDocument_{{ data.id }}" class="modal fade bd-example-modal-lg">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">
                            <i class="text-primary fa fa-paper-plane"></i>
                            Envoi de documents (Réservation #{{ data.bookingNumber ?? data.id }})
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form id="formSendDocument_{{ data.id }}">
                            <div class="form-group">
                                <label for="email_{{ data.id }}">Adresse email du destinataire</label>
                                <input type="email"
                                       class="form-control"
                                       id="email_{{ data.id }}"
                                       placeholder="exemple@mail.com"
                                       value="{{ data.email ?? '' }}"
                                       required>
                            </div>
                            <hr>
                            <div class="form-group">
                                <label>Documents à joindre :</label>

                                <!-- Toujours disponible -->
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="docs[]" value="confirmation" checked>
                                        <i class="fa fa-file-text-o text-muted"></i> Confirmation de réservation
                                    </label>
                                </div>

                                <!-- Condition de blocage du Voucher -->
                                <div class="checkbox {% if data.status == 0 %}text-muted{% endif %}">
                                    <label>
                                        <input type="checkbox"
                                               name="docs[]"
                                               value="voucher"
                                                {% if data.status == 0 %}
                                        disabled
                                        {% else %}
                                            checked
                                                {% endif %}>

                                        {% if data.status == 0 %}
                                            <i class="fa fa-times text-red" title="Paiement requis"></i>
                                        {% else %}
                                            <i class="fa fa-ticket text-muted"></i>
                                        {% endif %}

                                        Voucher (Bon d'échange)

                                        {% if data.status == 0 %}
                                            <small class="text-red" style="display: block; margin-left: 20px;">
                                                <i class="fa fa-warning"></i> Impossible d'envoyer : réservation en attente.
                                            </small>
                                        {% endif %}
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button
                                type="button"
                                class="btn btn-default"
                                data-dismiss="modal">Annuler
                        </button>
                        <button
                                type="button"
                                id="modal-confirm-send-{{ data.id }}"
                                data-url="{{ path('app_booking_send_documents') }}"
                                class="btn btn-primary">
                            <i class="fa fa-send"></i> Envoyer les documents
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}