{{-- Mes courses : les réservations de chauffeur passées depuis la carte des
     transporteurs. Reprend le langage visuel de « Mes locations », les deux
     étant des demandes qui suivent le même cycle (attente → accord → paiement). --}}
<h2 class="title" style="font-size:24px;font-weight:700;margin-bottom:20px;">{{ __('messages.my_courses') }}</h2>

<style>
    .course-tab-card { border:1px solid #eee; border-radius:16px; padding:18px 20px; margin-bottom:16px; box-shadow:0 6px 22px rgba(0,0,0,0.04); }
    .course-tab-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
    .course-tab-icon {
        width:56px; height:56px; border-radius:12px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg, #C3AD66 0%, #a8904a 100%); color:#fff; font-size:22px;
    }
    .course-tab-info { display:flex; gap:14px; align-items:center; }
    .course-tab-title { font-size:17px; font-weight:700; margin:0 0 4px; }
    .course-tab-sub { color:#888; font-size:13.5px; margin:0; }
    .course-tab-badge { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:6px 12px; border-radius:20px; white-space:nowrap; }
    .cb-pending_chauffeur { background:#fef5e7; color:#b9770e; }
    .cb-chauffeur_accepted { background:#eef6ff; color:#2471a3; }
    .cb-paid { background:#eafaf0; color:#1e8449; }
    .cb-in_progress { background:#fbf4e2; color:#8a6d1f; }
    .cb-completed { background:#eef0f2; color:#34495e; }
    .cb-chauffeur_declined { background:#fdecea; color:#c0392b; }
    .cb-expired, .cb-cancelled { background:#f2f2f2; color:#777; }
    .course-tab-meta { display:flex; flex-wrap:wrap; gap:8px 26px; margin:14px 0 0; font-size:14.5px; color:#444; }
    .course-tab-meta b { color:#111; }
    .course-tab-pay { display:inline-flex; align-items:center; gap:9px; margin-top:14px; background:linear-gradient(120deg,#111,#333); color:#C3AD66; font-weight:700; padding:11px 24px; border-radius:10px; text-decoration:none; }
    .course-tab-pay:hover { color:#C3AD66; opacity:.92; }
    .course-tab-deadline { font-size:13px; color:#b9770e; margin-top:8px; }
    .course-tab-empty { text-align:center; padding:50px 20px; color:#888; }
    .course-tab-empty i { font-size:48px; color:#ddd; }
    .course-tab-contact { margin-top:14px; padding:14px 16px; border:1px solid #f0e6cc; border-radius:12px; background:#fffdf8; font-size:14px; color:#444; }
    .course-tab-contact b { color:#111; }
    .course-tab-find { display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; font-weight:600; color:#111; }
    /* Actions sous les coordonnées du chauffeur : l'appeler, ou rejoindre le suivi en direct. */
    .course-tab-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .course-tab-call, .course-tab-track { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; text-decoration:none; }
    .course-tab-call { background:#fff; color:#111; border:1px solid #111; }
    .course-tab-call i { color:#C3AD66; }
    .course-tab-call:hover { background:#fbf7ec; color:#111; }
    .course-tab-track { background:#111; color:#C3AD66; border:1px solid #111; }
    .course-tab-track:hover { color:#C3AD66; opacity:.92; }
    @media (max-width:767px) { .course-tab-call, .course-tab-track { width:100%; justify-content:center; } }
    /* Choix de navigation, une fois la course réellement commencée. */
    .course-tab-nav { margin-top:14px; padding:14px 16px; border:1px solid #f0e6cc; border-radius:12px; background:#fff; }
    .course-tab-nav.is-collapsed { padding:0; border:none; background:none; }
    .course-tab-nav .is-hidden { display:none !important; }
    .course-tab-nav-question { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:700; color:#111; }
    .course-tab-nav-question i { color:#C3AD66; }
    .course-tab-nav button.course-tab-call { cursor:pointer; font-family:inherit; }
    .course-tab-nav-reopen { display:inline-flex; align-items:center; gap:8px; border:none; background:none; padding:0; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:#8a7233; }
</style>

@if(session('booking_success'))
    <div class="rental-alert rental-alert-ok">{{ session('booking_success') }}</div>
@endif
@if(session('booking_error'))
    <div class="rental-alert rental-alert-ko">{{ session('booking_error') }}</div>
@endif

@forelse(($chauffeurBookings ?? []) as $booking)
    <div class="course-tab-card">
        <div class="course-tab-top">
            <div class="course-tab-info">
                <div class="course-tab-icon"><i class="fa-solid {{ $booking->isMealDelivery() ? 'fa-bag-shopping' : 'fa-car' }}"></i></div>
                <div>
                    <p class="course-tab-title">
                        {{ $booking->chauffeur?->company ?: trim(($booking->chauffeur?->first_name ?? '') . ' ' . ($booking->chauffeur?->last_name ?? '')) ?: '—' }}
                    </p>
                    <p class="course-tab-sub">
                        @if($booking->isMealDelivery())
                            {{ $booking->range_label ?: __('chauffeur.delivery_range_label') }}@if($booking->order) · {{ __('chauffeur.delivery_order_label') }} {{ $booking->order->order_number }}@endif ·
                        @endif
                        @if($booking->isImmediate())
                            {{ __('chauffeur.booking_mode_now') }}
                        @else
                            {{ $booking->scheduled_at?->translatedFormat('l j F Y — H\hi') }}
                        @endif
                        · {{ __('messages.requested_on') }} {{ $booking->created_at->format('d.m.Y') }}
                    </p>
                </div>
            </div>
            @php $displayStatus = $booking->displayStatus(); @endphp
            <span class="course-tab-badge cb-{{ $displayStatus }}">{{ __('chauffeur.booking_status_' . $displayStatus) }}</span>
        </div>

        <div class="course-tab-meta">
            <span><b>{{ $booking->isMealDelivery() ? __('chauffeur.delivery_pickup_restaurant') : __('chauffeur.booking_pickup') }}</b> {{ $booking->pickup_address }}</span>
            @if($booking->dropoff_address)
                <span><b>{{ __('chauffeur.booking_dropoff') }}</b> {{ $booking->dropoff_address }}</span>
            @endif
            @if($booking->estimated_km)
                <span><b>{{ __('messages.carriers_booking_distance') }}</b> {{ number_format((float) $booking->estimated_km, 1, ',', ' ') }} km</span>
            @endif
            @php
                // Livraison d'un plat : le client paie la commande entière.
                $courseAmount = $booking->isDishDelivery()
                    ? app(\App\Services\DishCarrierDeliveryService::class)->bookingAmountEur($booking)
                    : $booking->amountDue();
            @endphp
            @if($courseAmount)
                <span><b>{{ __('chauffeur.booking_amount') }}</b> {{ number_format($courseAmount, 2, ',', ' ') }} {{ $booking->currency }}</span>
            @endif
        </div>

        @if($booking->status === \App\Models\ChauffeurBooking::STATUS_ACCEPTED && !$booking->paymentWindowExpired())
            <a href="{{ $booking->isDishDelivery() ? route('cart.index') : route('chauffeur.booking.pay', $booking->token) }}" class="course-tab-pay">
                <i class="fa-solid fa-credit-card"></i> {{ __('messages.rental_pay_now') }}
            </a>
            @if($booking->payment_deadline)
                <p class="course-tab-deadline"><i class="fa-solid fa-hourglass-half"></i> {{ __('messages.rental_pay_before') }} {{ $booking->payment_deadline->format('d.m.Y H:i') }}</p>
            @endif
        @elseif($booking->status === \App\Models\ChauffeurBooking::STATUS_PENDING)
            <p class="course-tab-deadline">
                <i class="fa-solid fa-clock"></i> {{ __('messages.carriers_booking_awaiting_driver') }}
                @if($booking->chauffeur_deadline)
                    — {{ __('chauffeur.booking_answer_before', ['time' => $booking->chauffeur_deadline->translatedFormat('j M H:i')]) }}
                @endif
            </p>
        @elseif($booking->status === \App\Models\ChauffeurBooking::STATUS_DECLINED && ! $booking->isDishDelivery())
            <p class="course-tab-deadline" style="color:#c0392b;">
                <i class="fa-solid fa-circle-xmark"></i> {{ __('chauffeur.mail_booking_declined_intro') }}
            </p>
            <a href="{{ route('front.carte-transporteurs') }}" class="course-tab-find">
                <i class="fa-solid fa-magnifying-glass-location"></i> {{ __('chauffeur.mail_booking_declined_cta') }}
            </a>
        @endif

        {{-- Le téléphone du chauffeur est utile dès la demande, pas seulement
             une fois payée : le client peut avoir besoin de le joindre pour
             préciser un point de rendez-vous avant même sa réponse. --}}
        @if(in_array($booking->status, [
            \App\Models\ChauffeurBooking::STATUS_PENDING,
            \App\Models\ChauffeurBooking::STATUS_ACCEPTED,
            \App\Models\ChauffeurBooking::STATUS_PAID,
        ], true))
            <div class="course-tab-contact">
                <b>{{ __('chauffeur.booking_driver') }}</b>
                {{ $booking->chauffeur?->company ?: trim(($booking->chauffeur?->first_name ?? '') . ' ' . ($booking->chauffeur?->last_name ?? '')) }}
                @if($booking->chauffeur?->phone)
                    <br><b>{{ __('chauffeur.booking_phone') }}</b> {{ $booking->chauffeur->phone }}
                @endif
                @if($booking->chauffeur?->vehicle_model || $booking->chauffeur?->vehicle_plate)
                    <br><b>{{ __('chauffeur.booking_vehicle') }}</b> {{ trim(($booking->chauffeur->vehicle_model ?? '') . ' ' . ($booking->chauffeur->vehicle_plate ?? '')) }}
                @endif

                {{-- Appeler le chauffeur (sur un téléphone, le lien « tel: » ouvre
                     l'application d'appel), ou rejoindre directement le suivi en
                     direct de la course sur la carte des transporteurs. --}}
                @php
                    // Course terminée : plus de chauffeur à joindre ni de trajet à
                    // suivre, les deux boutons disparaissent.
                    $rideOver = (bool) $booking->completed_at;
                    $driverCallUrl = $rideOver ? null : phone_tel_uri($booking->chauffeur?->phone, $booking->chauffeur?->country);
                    $followOnMap = ! $rideOver && $booking->followableOnMap();
                @endphp

                @if($driverCallUrl || $followOnMap)
                    <div class="course-tab-actions">
                        @if($driverCallUrl)
                            <a href="{{ $driverCallUrl }}" class="course-tab-call">
                                <i class="fa-solid fa-phone"></i> {{ __('messages.carriers_track_call_driver') }}
                            </a>
                        @endif
                        @if($followOnMap)
                            <a href="{{ route('front.carte-transporteurs') }}#course-live" class="course-tab-track">
                                <i class="fa-solid fa-map-location-dot"></i> {{ __('messages.carriers_track_open_map') }}
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        @endif

        {{-- Navigation, une fois la course réellement commencée : suivre le trajet
             dans le GPS du téléphone, départ et arrivée préremplis, ou rester sur le
             site. Même choix que dans le panneau de suivi de la carte. --}}
        @php
            $navLinks = ($booking->isPaid() && $booking->started_at && ! $booking->completed_at)
                ? $booking->navigationLinks()
                : null;
        @endphp
        @if($navLinks)
            <div class="course-tab-nav" data-course-nav="{{ $booking->id }}">
                <div data-course-nav-choice>
                    <p class="course-tab-nav-question">
                        <i class="fa-solid fa-diamond-turn-right"></i> {{ __('messages.carriers_track_nav_question') }}
                    </p>
                    <div class="course-tab-actions">
                        <a href="{{ $navLinks['google'] }}" target="_blank" rel="noopener" class="course-tab-track">
                            <i class="fa-brands fa-google"></i> Google Maps
                        </a>
                        <a href="{{ $navLinks['waze'] }}" target="_blank" rel="noopener" class="course-tab-track">
                            <i class="fa-brands fa-waze"></i> Waze
                        </a>
                        <a href="{{ $navLinks['apple'] }}" target="_blank" rel="noopener" class="course-tab-track">
                            <i class="fa-brands fa-apple"></i> {{ __('messages.carriers_track_nav_apple') }}
                        </a>
                        <button type="button" class="course-tab-call" data-course-nav-stay>
                            <i class="fa-solid fa-mobile-screen"></i> {{ __('messages.carriers_track_nav_stay') }}
                        </button>
                    </div>
                </div>
                <button type="button" class="course-tab-nav-reopen is-hidden" data-course-nav-reopen>
                    <i class="fa-solid fa-diamond-turn-right"></i> {{ __('messages.carriers_track_nav_reopen') }}
                </button>
            </div>
        @endif

        {{-- Livraison par le restaurant : facturée avec la commande. --}}
        @if($booking->isPaid() && ! $booking->isRestaurantDelivery())
            <a href="{{ route('buyer.account.chauffeur.invoice.download', $booking->id) }}" target="_blank" class="course-tab-pay" style="background:#111;">
                <i class="fa-solid fa-file-invoice"></i> {{ __('chauffeur.invoice_download') }}
            </a>
        @endif
    </div>
@empty
    <div class="course-tab-card">
        <div class="course-tab-empty">
            <i class="fa-solid fa-car"></i>
            <p style="margin-top:14px;">{{ __('messages.carriers_booking_empty') }}</p>
        </div>
    </div>
@endforelse

<script>
    /**
     * Choix de navigation dans « Mes courses ». « Rester sur le site » est
     * mémorisé sous la même clé que dans le panneau de suivi de la carte : le
     * client retrouve le même choix d'une page à l'autre.
     */
    (function () {
        document.querySelectorAll('[data-course-nav]').forEach(function (bloc) {
            const cle = 'course-nav-choice-' + bloc.dataset.courseNav;
            const choix = bloc.querySelector('[data-course-nav-choice]');
            const rouvrir = bloc.querySelector('[data-course-nav-reopen]');

            function replier(replie) {
                bloc.classList.toggle('is-collapsed', replie);
                choix.classList.toggle('is-hidden', replie);
                rouvrir.classList.toggle('is-hidden', ! replie);
            }

            let replie = false;
            try { replie = localStorage.getItem(cle) === 'app'; } catch (e) {}
            replier(replie);

            bloc.querySelector('[data-course-nav-stay]').addEventListener('click', function () {
                try { localStorage.setItem(cle, 'app'); } catch (e) {}
                replier(true);
            });

            rouvrir.addEventListener('click', function () {
                try { localStorage.removeItem(cle); } catch (e) {}
                replier(false);
            });
        });
    })();
</script>