{{-- Choix du chauffeur Viki qui livrera le produit, parmi les plus proches
     de l'adresse du client. Partagé par la fiche produit classique et la
     fiche d'une création Sur Mesure ; à inclure dans le formulaire d'ajout
     au panier, qui transmet private_carrier_id. --}}
@if($product->productPrivateCarrierDelivery)
    {{-- Le transporteur est choisi ici, pas au panier : c'est un chauffeur
         précis, pas un simple mode de livraison générique. --}}
    <div class="sm-carrier-picker" id="sm-carrier-picker">
        <label>{{ __('surmesure.carrier_picker_title') }}</label>
        <span class="sm-hint">{{ __('surmesure.carrier_picker_hint') }}</span>

        <div class="sm-carrier-list" id="sm-carrier-list">
            <p class="sm-carrier-state">{{ __('surmesure.carrier_loading') }}</p>
        </div>

        <input type="hidden" name="private_carrier_id" id="sm-carrier-id">
    </div>

    <style>
        .sm-carrier-picker { margin: 22px 0; }
        .sm-carrier-picker > label { display: block; font-weight: 600; margin-bottom: 4px; color: #222; }
        .sm-carrier-picker .sm-hint { display: block; margin-bottom: 12px; font-size: 12px; color: #999; }

        .sm-carrier-state { font-size: 13px; color: #888; margin: 0; }

        .sm-carrier-list { display: grid; gap: 10px; }
        .sm-carrier-card {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 12px 16px; border: 1px solid #e6e0cf; border-radius: 12px;
            cursor: pointer; transition: border-color .15s ease, background .15s ease;
        }
        .sm-carrier-card:hover { border-color: #C3AD66; }
        .sm-carrier-card.is-selected { border-color: #C3AD66; background: #fbf7ec; }
        .sm-carrier-card-name { font-weight: 700; color: #111; font-size: 14px; }
        .sm-carrier-card-city { color: #888; font-size: 12px; margin-top: 2px; }
        .sm-carrier-card-distance { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #8a7233; }
    </style>

    <script>
        (function () {
            const list = document.getElementById('sm-carrier-list');
            const input = document.getElementById('sm-carrier-id');
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            function say(text) {
                list.innerHTML = '<p class="sm-carrier-state">' + text + '</p>';
            }

            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text ?? '';
                return div.innerHTML;
            }

            function select(card, chauffeurId) {
                list.querySelectorAll('.sm-carrier-card').forEach(function (el) {
                    el.classList.remove('is-selected');
                });
                card.classList.add('is-selected');
                input.value = chauffeurId;
            }

            fetch(@json(route('front.product.nearest-carriers', $product->id)), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({}),
            })
                .then(async function (response) {
                    const data = await response.json();
                    if (!response.ok) throw data;
                    return data;
                })
                .then(function (data) {
                    const chauffeurs = data.chauffeurs || [];

                    if (! chauffeurs.length) {
                        say(@json(__('surmesure.carrier_none_found')));
                        return;
                    }

                    list.innerHTML = '';

                    chauffeurs.forEach(function (c, index) {
                        const card = document.createElement('div');
                        card.className = 'sm-carrier-card';
                        card.setAttribute('role', 'button');
                        card.setAttribute('tabindex', '0');
                        card.innerHTML =
                            '<div>' +
                                '<div class="sm-carrier-card-name">' + (index + 1) + '. ' + escapeHtml(c.name) + '</div>' +
                                (c.city ? '<div class="sm-carrier-card-city">' + escapeHtml(c.city) + '</div>' : '') +
                            '</div>' +
                            '<span class="sm-carrier-card-distance">' +
                                @json(__('surmesure.carrier_distance', ['distance' => ':d'])).replace(':d', c.distance_km) +
                            '</span>';

                        card.addEventListener('click', function () { select(card, c.id); });
                        card.addEventListener('keydown', function (event) {
                            if (event.key !== 'Enter' && event.key !== ' ') return;
                            event.preventDefault();
                            select(card, c.id);
                        });

                        list.appendChild(card);

                        if (index === 0) select(card, c.id);
                    });
                })
                .catch(function (error) {
                    if (error && error.message) {
                        say(error.message);
                        return;
                    }

                    say(@json(__('surmesure.carrier_none_found')));
                });
        })();
    </script>
@endif