{{--
    Sélecteur Hôtel / Type de chambre / Arrangement en CARTES cliquables (UX jour J).
    Remplace les 3 <select> de cascade. Pilote 3 <input type="hidden"> avec les mêmes
    `name` qu'avant (hotel_id, room_type_id, room_arrangement_id) -> backend inchangé.

    Variables attendues :
      $hotels                        : collection d'hôtels (avec roomTypes.arrangements éventuellement)
      $selHotel / $selRoomType / $selArrangement (optionnels) : ids présélectionnés (édition/reprise)
      $priceDisplayId (optionnel)    : id de l'input d'affichage du montant (défaut: total_price2)

    Le calcul du prix (avec réductions enfant) est centralisé ici dans
    window.updateHebergementTotal(). Les vues (dates / occupants) l'appellent.
--}}
@php
    $selHotel = $selHotel ?? null;
    $selRoomType = $selRoomType ?? null;
    $selArrangement = $selArrangement ?? null;
    $priceDisplayId = $priceDisplayId ?? 'total_price2';
@endphp

<style>
    .rp-group { display: flex; flex-wrap: wrap; gap: 12px; }
    .rp-card {
        position: relative;
        border: 1.5px solid #dfe3eb; border-radius: 10px;
        padding: 12px 16px; padding-right: 34px; cursor: pointer;
        background: #f8f9fb; color: #344054;
        transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
        min-width: 150px; user-select: none;
        display: flex; flex-direction: column; gap: 3px;
    }
    .rp-card:hover { border-color: #5664d2; background: #fff; box-shadow: 0 2px 8px rgba(86,100,210,.12); }
    .rp-card .rp-title { font-weight: 600; font-size: 14px; line-height: 1.2; }
    .rp-card .rp-sub { font-size: 12px; color: #8a93a2; }

    /* État sélectionné : bleu plein, texte blanc, check en haut à droite */
    .rp-card.active {
        border-color: #5664d2; background: #5664d2; color: #fff;
        box-shadow: 0 4px 12px rgba(86,100,210,.30);
    }
    .rp-card.active .rp-sub { color: #e7e9fb; }
    .rp-card.active::after {
        content: "\F012C"; /* mdi-check */
        font-family: "Material Design Icons";
        position: absolute; top: 8px; right: 10px; font-size: 16px; line-height: 1; color: #fff;
    }

    .rp-empty { color: #98a2b3; font-style: italic; padding: 6px 2px; }

</style>

<input type="hidden" name="hotel_id" id="hotel_id" value="{{ $selHotel }}" required>
<input type="hidden" name="room_type_id" id="room_type_id" value="{{ $selRoomType }}" required>
<input type="hidden" name="room_arrangement_id" id="room_arrangement_id" value="{{ $selArrangement }}" required>
<input type="hidden" name="total_price_hebergement" id="total_price_hebergement" value="">{{-- montant calculé --}}

<div class="form-group mb-3">
    <label class="col-form-label">Hôtel :</label>
    <div class="rp-group" id="rp-hotels">
        @foreach ($hotels as $hotel)
            <div class="rp-card hotel-card {{ $selHotel == $hotel->id ? 'active' : '' }}"
                data-id="{{ $hotel->id }}">
                <span class="rp-title">{{ $hotel->name }}</span>
            </div>
        @endforeach
    </div>
</div>

<div class="form-group mb-3">
    <label class="col-form-label">Type de chambre :</label>
    <div class="rp-group" id="rp-room-types">
        <div class="rp-empty">Choisissez d'abord un hôtel</div>
    </div>
</div>

<div class="form-group mb-3">
    <label class="col-form-label">Arrangement :</label>
    <div class="rp-group" id="rp-arrangements">
        <div class="rp-empty">Choisissez d'abord un type de chambre</div>
    </div>
</div>

<script>
    // Ce partial est inclus dans le contenu (avant le chargement de jQuery via
    // vendor-scripts en defer). On diffère donc tout le code jQuery jusqu'à ce que
    // jQuery soit disponible (window.load survient après les scripts deferred).
    (function () {
        var selHotel = @json($selHotel);
        var selRoomType = @json($selRoomType);
        var selArrangement = @json($selArrangement);
        var priceDisplayId = @json($priceDisplayId);

        function start($) {
        var $hotelInput = $('#hotel_id');
        var $typeInput = $('#room_type_id');
        var $arrInput = $('#room_arrangement_id');
        var reductionRules = [];

        function nights() {
            return parseInt($('#number_of_nights').val()) || 0;
        }

        function getChildDiscountPercent(age) {
            var sorted = reductionRules.slice().sort(function (a, b) { return a.max_age - b.max_age; });
            for (var i = 0; i < sorted.length; i++) {
                if (age <= sorted[i].max_age) return sorted[i].discount_percent;
            }
            return null;
        }

        // Calcul centralisé : lit la carte arrangement active + les occupants du DOM.
        window.updateHebergementTotal = function () {
            var $arr = $('#rp-arrangements .rp-card.active');
            var priceAdult = parseFloat($arr.attr('data-price-adult'));
            var priceChild = parseFloat($arr.attr('data-price-child'));
            priceAdult = isNaN(priceAdult) ? 0 : priceAdult;
            priceChild = isNaN(priceChild) ? 0 : priceChild;

            var n = nights();
            var total = priceAdult * n;

            $('#occupants-container .occupant-row').each(function () {
                var isChild = $(this).find('.is-child-toggle').is(':checked');
                var ageVal = $(this).find('.occupant-age').val();
                var age = ageVal !== '' ? parseInt(ageVal) : null;
                if (isChild && age !== null && !isNaN(age)) {
                    var pct = getChildDiscountPercent(age);
                    total += (pct !== null ? priceChild * (1 - pct / 100) : priceChild) * n;
                }
            });

            total = Math.round(total);
            $('#total_price_hebergement').val(total);
            $('#' + priceDisplayId).val(total);
        };

        function renderTypes(roomTypes, preselect) {
            var $c = $('#rp-room-types').empty();
            if (!roomTypes.length) {
                $c.html('<div class="rp-empty">Aucun type disponible</div>');
                return;
            }
            roomTypes.forEach(function (rt) {
                var active = (preselect && rt.id == preselect) ? ' active' : '';
                $c.append(
                    '<div class="rp-card type-card' + active + '" data-id="' + rt.id + '" data-max="' + rt.max + '">' +
                    '<span class="rp-title">' + rt.type + '</span>' +
                    '</div>'
                );
            });
            // Un seul type et aucune présélection -> auto-sélection (cascade auto).
            autoSelectIfSingle($c, '.type-card', preselect);
        }

        function renderArrangements(arrangements, preselect) {
            var $c = $('#rp-arrangements').empty();
            if (!arrangements.length) {
                $c.html('<div class="rp-empty">Aucun arrangement disponible</div>');
                return;
            }
            arrangements.forEach(function (arr) {
                var active = (preselect && arr.id == preselect) ? ' active' : '';
                var price = (arr.price_adult !== null && arr.price_adult !== undefined) ? parseFloat(arr.price_adult) : null;
                $c.append(
                    '<div class="rp-card arrangement-card' + active + '" data-id="' + arr.id + '"' +
                    ' data-price-adult="' + (arr.price_adult ?? '') + '"' +
                    ' data-price-child="' + (arr.price_child ?? '') + '">' +
                    '<span class="rp-title">' + arr.arrangement_type + '</span>' +
                    (price !== null ? '<span class="rp-sub">' + price + ' TND / nuit</span>' : '') +
                    '</div>'
                );
            });
            // Un seul arrangement et aucune présélection -> auto-sélection.
            autoSelectIfSingle($c, '.arrangement-card', preselect);
        }

        // Auto-sélectionne l'unique carte d'un groupe si aucune n'est déjà active
        // et qu'aucune valeur n'était présélectionnée. Déclenche le handler (cascade).
        function autoSelectIfSingle($container, cardClass, preselect) {
            if (preselect) return;
            var $cards = $container.find(cardClass);
            if ($cards.length === 1 && !$cards.hasClass('active')) {
                $cards.first().trigger('click');
            }
        }

        function loadTypes(hotelId, preselectType, cb) {
            $('#rp-room-types').html('<div class="rp-empty">Chargement…</div>');
            $('#rp-arrangements').html('<div class="rp-empty">Choisissez d\'abord un type de chambre</div>');
            $.get('/hotels/' + hotelId + '/room-types', function (roomTypes) {
                renderTypes(roomTypes, preselectType);
                if (cb) cb();
            });
        }

        function loadArrangements(roomTypeId, preselectArr, cb) {
            $('#rp-arrangements').html('<div class="rp-empty">Chargement…</div>');
            $.get('/room-types/' + roomTypeId + '/arrangements', function (arrangements) {
                renderArrangements(arrangements, preselectArr);
                if (cb) cb();
            });
        }

        function loadReductionRules(hotelId) {
            reductionRules = [];
            $.get('/hotels/' + hotelId + '/child-reduction-rules', function (rules) {
                reductionRules = rules || [];
            });
        }

        // ── Sélection hôtel ──
        $('#rp-hotels').on('click', '.hotel-card', function () {
            $('#rp-hotels .hotel-card').removeClass('active');
            $(this).addClass('active');
            var hotelId = $(this).data('id');
            $hotelInput.val(hotelId);
            $typeInput.val('');
            $arrInput.val('');
            $('#total_price_hebergement').val('');
            $('#' + priceDisplayId).val('');
            loadReductionRules(hotelId);
            loadTypes(hotelId, null);
        });

        // ── Sélection type ──
        $('#rp-room-types').on('click', '.type-card', function () {
            $('#rp-room-types .type-card').removeClass('active');
            $(this).addClass('active');
            var typeId = $(this).data('id');
            $typeInput.val(typeId);
            $arrInput.val('');
            $('#total_price_hebergement').val('');
            $('#' + priceDisplayId).val('');
            loadArrangements(typeId, null);
        });

        // ── Sélection arrangement ──
        $('#rp-arrangements').on('click', '.arrangement-card', function () {
            $('#rp-arrangements .arrangement-card').removeClass('active');
            $(this).addClass('active');
            $arrInput.val($(this).data('id'));
            window.updateHebergementTotal();
        });

        // ── Initialisation ──
        if (selHotel) {
            // Édition / reprise : recharge la cascade sur les valeurs enregistrées.
            loadReductionRules(selHotel);
            loadTypes(selHotel, selRoomType, function () {
                if (selRoomType) {
                    loadArrangements(selRoomType, selArrangement, function () {
                        window.updateHebergementTotal();
                    });
                }
            });
        } else {
            // Ajout : si un seul hôtel, on l'auto-sélectionne (déclenche la cascade,
            // qui auto-sélectionnera à son tour un type/arrangement unique).
            autoSelectIfSingle($('#rp-hotels'), '.hotel-card', null);
        }
        } // fin start($)

        // Démarrage une fois jQuery disponible.
        function boot() {
            if (window.jQuery) {
                start(window.jQuery);
            } else {
                // jQuery pas encore chargé (scripts en defer) : on réessaie au load.
                window.addEventListener('load', function () {
                    if (window.jQuery) start(window.jQuery);
                });
            }
        }

        if (document.readyState === 'complete') {
            boot();
        } else {
            window.addEventListener('load', boot);
        }
    })();
</script>