@extends('chauffeur.layouts.app')

@section('title', __('chauffeur.bookings'))

@section('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">

    <style>
        /* Carte de la course en cours. Le chauffeur conduit : le tracé doit
           être lisible d'un coup d'œil, pas exploré à la main. */
        .ride-map-block { margin-top: 18px; }

        .ride-map-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
        }
        .ride-map-title {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 13.5px; font-weight: 800; color: #111;
        }
        .ride-map-title i { color: #C3AD66; }
        .ride-map-eta { font-size: 13px; font-weight: 700; color: #8a7233; }

        /* État de la localisation du chauffeur, sous sa carte. */
        .ride-gps-status { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
        .ride-gps-status:empty { display: none; }
        .ride-gps-status[data-level="ok"] { color: #1e7a35; }
        .ride-gps-status[data-level="warn"] { color: #8a7233; }
        .ride-gps-status[data-level="error"] { color: #a12626; }

        .ride-map {
            height: 340px; border-radius: 12px; overflow: hidden;
            background: #f4f2ec;
        }
        @media (max-width: 767px) { .ride-map { height: 260px; } }

        .map-pin-wrap { background: none; border: none; }
        .map-pin { position: relative; display: block; }
        .map-pin svg { display: block; width: 100%; height: 100%; overflow: visible; }

        .sm-back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 9px 18px; border-radius: 10px;
            background: #111; color: #C3AD66;
            font-weight: 600; font-size: 14px; text-decoration: none;
            transition: transform .15s ease, background .15s ease;
        }
        .sm-back-btn:hover { background: #000; transform: translateX(-2px); color: #C3AD66; }

        .chauffeur-alert {
            padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
            border: 1px solid #f0d9a8; background: #fdf7e8; color: #8a6d1f;
        }
        .chauffeur-alert.is-danger { border-color: #f0b8b8; background: #fdeaea; color: #a12626; }
        .chauffeur-alert.is-success { border-color: #b8e0c0; background: #eafaee; color: #1e7a35; }

        .course-card {
            border: 1px solid #eee; border-left: 4px solid #C3AD66; border-radius: 14px;
            background: #fff; padding: 20px 22px; margin-bottom: 18px;
        }
        .course-card.is-urgent { border-left-color: #c0392b; }

        .course-head {
            display: flex; flex-wrap: wrap; align-items: baseline;
            justify-content: space-between; gap: 10px; margin-bottom: 14px;
        }
        .course-when { font-size: 17px; font-weight: 700; color: #111; }
        .course-ref { font-size: 12px; color: #999; }

        .course-status {
            display: inline-block; padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        }
        .status-pending_chauffeur { background: #fdf3dc; color: #8a6d1f; }
        .status-chauffeur_accepted { background: #e6f0fb; color: #1c5a9e; }
        .status-chauffeur_declined { background: #f3f3f3; color: #777; }
        .status-paid { background: #eafaee; color: #1e7a35; }
        .status-expired, .status-cancelled { background: #fdeaea; color: #a12626; }

        .course-lines { display: grid; gap: 6px; margin-bottom: 14px; }
        .course-line { display: flex; gap: 12px; font-size: 14px; color: #444; }
        .course-line span:first-child {
            flex: 0 0 170px; color: #999; font-size: 12px;
            text-transform: uppercase; letter-spacing: .03em; padding-top: 2px;
        }
        .course-line strong { color: #111; font-weight: 600; }

        .course-actions {
            display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
            border-top: 1px solid #f0f0f0; padding-top: 16px;
        }
        .course-field { display: flex; flex-direction: column; gap: 5px; }
        .course-field label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .03em; }
        .course-field input, .course-field textarea {
            border: 1px solid #ddd; border-radius: 10px; padding: 9px 12px;
            font-size: 14px; min-width: 170px; background: #fff;
        }
        .course-field textarea { min-width: 260px; min-height: 42px; resize: vertical; }
        .course-btn {
            border: none; border-radius: 10px; padding: 11px 22px;
            font-size: 14px; font-weight: 700; cursor: pointer;
        }
        .course-btn.accept { background: #C3AD66; color: #fff; }
        .course-btn.accept:hover { background: #a8904a; }
        .course-btn.decline { background: #f3f3f3; color: #a12626; }
        .course-btn.decline:hover { background: #fdeaea; }

        .course-empty { color: #999; font-size: 14px; padding: 18px 0; }
        .course-deadline { font-size: 12px; color: #c0392b; font-weight: 600; }

        /* Suivi du trajet réel : les étapes déjà faites, puis la prochaine à
           valider — jamais plus d'un bouton à la fois. */
        .ride-progress {
            display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
            margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0;
        }
        .ride-step-done {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 12.5px; color: #1e7a35; font-weight: 600;
        }
        .ride-step-done i { font-size: 11px; }
        .ride-arrow { color: #ccc; font-size: 12px; }
        .ride-btn {
            display: inline-flex; align-items: center; gap: 8px;
            border: none; border-radius: 10px; padding: 11px 20px;
            background: #C3AD66; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
        }
        .ride-btn:hover { background: #a8904a; }
        .ride-btn[disabled] { opacity: .5; cursor: not-allowed; }
        .ride-btn[disabled]:hover { background: #C3AD66; }

        /* Course acceptée en attente du paiement du client. */
        .ride-await-payment { margin-top: 16px; padding: 14px 16px; border: 1px solid #f0d9a8; border-radius: 12px; background: #fdf7e8; }
        .ride-await-payment .ride-progress { margin-top: 10px; padding-top: 0; border-top: none; }
        .ride-await-text { margin: 0; font-size: 14px; font-weight: 700; color: #8a6d1f; }
        .ride-await-note { margin: 8px 0 0; font-size: 12.5px; color: #8a6d1f; }

        /* Facture de commission : même bouton, en second rôle. La facture de
           course reste l'action principale, celle-ci l'accompagne. */
        .ride-btn.is-secondary {
            background: #fff; color: #8a7233;
            border: 1px solid #C3AD66;
        }
        .ride-btn.is-secondary:hover { background: #fbf7ec; color: #8a7233; }

        /* Bouton d'appel sous les coordonnées du client. */
        .course-call { margin-top: 12px; }

        /* Choix de navigation, une fois la course commencée. */
        .ride-nav { margin-top: 18px; }
        .ride-nav .is-hidden { display: none !important; }
        .ride-nav-choice {
            padding: 16px 18px; border: 1px solid #f0e6cc; border-radius: 12px; background: #fffdf8;
        }
        .ride-nav-question {
            display: flex; align-items: center; gap: 8px;
            margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #111;
        }
        .ride-nav-question i { color: #C3AD66; }
        .ride-nav-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
        .ride-nav-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #8a7233; }
        .ride-nav-reopen {
            display: inline-flex; align-items: center; gap: 8px;
            border: none; background: none; padding: 0; cursor: pointer;
            font-size: 13.5px; font-weight: 700; color: #8a7233;
        }
        .ride-done-label {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 13.5px; font-weight: 700; color: #1e7a35;
        }

        /* Sur mobile, la mise en page pensée pour un écran large se retourne
           contre elle-même : la colonne de libellés figée à 170 px ne laisse
           qu'un ruban à l'adresse, et les champs à largeur minimale (jusqu'à
           260 px pour le message) débordent de la carte. Tout est donc empilé
           en pleine largeur. */
        @media (max-width: 767px) {
            .course-card { padding: 16px 14px; border-radius: 12px; }
            .course-when { font-size: 16px; }

            /* Libellé au-dessus de la valeur : l'adresse retrouve toute la
               largeur disponible. */
            .course-line { flex-direction: column; gap: 2px; }
            .course-line span:first-child { flex: none; padding-top: 0; }
            .course-line strong { overflow-wrap: anywhere; }

            .course-actions { flex-direction: column; align-items: stretch; gap: 14px; }
            .course-field { width: 100%; }
            .course-field input,
            .course-field textarea {
                width: 100%; min-width: 0;
                /* iOS agrandit la page dès qu'un champ fait moins de 16 px. */
                font-size: 16px;
            }

            /* Cibles tactiles : un bouton pleine largeur se vise sans effort. */
            .course-btn { width: 100%; }
            .ride-btn { width: 100%; justify-content: center; }

            /* Les étapes s'empilent : les chevrons, dessinés pour une file
               horizontale, n'ont plus rien à relier. */
            .ride-progress { flex-direction: column; align-items: stretch; gap: 8px; }
            .ride-arrow { display: none; }
        }
    </style>
@endsection

@section('content')
    <div class="transection">
        <div class="title-right-actioin-btn-wrapper-product-list">
            <h3 class="title">{{ __('chauffeur.bookings') }}</h3>
            <div class="button-wrapper">
                <a href="{{ route('chauffeur.dashboard') }}" class="sm-back-btn">
                    <span style="font-size:18px;line-height:1;">&larr;</span> {{ __('chauffeur.dashboard') }}
                </a>
            </div>
        </div>

        @if (session('booking_success'))
            <div class="chauffeur-alert is-success">{{ session('booking_success') }}</div>
        @endif
        @if (session('booking_error'))
            <div class="chauffeur-alert is-danger">{{ session('booking_error') }}</div>
        @endif

        {{-- Demandes en attente : les seules sur lesquelles le chauffeur agit. --}}
        <div class="chart-and-account-balance-area mt--30">
            <div class="single-chart-area-card" style="width:100%;">
                <div class="head">
                    <h5 class="title">{{ __('chauffeur.bookings_pending') }} ({{ $pending->count() }})</h5>
                </div>

                @forelse ($pending as $booking)
                    <div class="course-card {{ $booking->isImmediate() ? 'is-urgent' : '' }}">
                        @include('chauffeur.partials.booking-summary', ['booking' => $booking])

                        @if ($booking->isDishDelivery())
                        {{-- Livraison de plat : prix déjà payé par l'acheteur, rien à chiffrer. --}}
                        <form method="POST" action="{{ route('chauffeur.bookings.accept', $booking) }}" class="course-actions">
                            @csrf
                            <div class="course-field">
                                <label for="msg-{{ $booking->id }}">{{ __('chauffeur.booking_reply_message') }}</label>
                                <textarea name="chauffeur_message" id="msg-{{ $booking->id }}" rows="1"></textarea>
                            </div>
                            <button type="submit" class="course-btn accept">{{ __('chauffeur.delivery_accept') }}</button>
                        </form>
                        @else
                        <form method="POST" action="{{ route('chauffeur.bookings.accept', $booking) }}" class="course-actions">
                            @csrf
                            <div class="course-field">
                                <label for="amount-{{ $booking->id }}">{{ __('chauffeur.booking_set_amount') }}</label>
                                <input type="number" step="0.01" min="1" name="total_amount"
                                       id="amount-{{ $booking->id }}"
                                       value="{{ $booking->estimated_amount ? number_format((float) $booking->estimated_amount, 2, '.', '') : '' }}"
                                       required>
                            </div>
                            <div class="course-field">
                                <label for="msg-{{ $booking->id }}">{{ __('chauffeur.booking_reply_message') }}</label>
                                <textarea name="chauffeur_message" id="msg-{{ $booking->id }}" rows="1"></textarea>
                            </div>
                            <button type="submit" class="course-btn accept">{{ __('chauffeur.booking_accept') }}</button>
                        </form>
                        @endif

                        <form method="POST" action="{{ route('chauffeur.bookings.decline', $booking) }}" style="margin-top:12px;">
                            @csrf
                            <button type="submit" class="course-btn decline">{{ __('chauffeur.booking_decline') }}</button>
                        </form>
                    </div>
                @empty
                    <p class="course-empty">{{ __('chauffeur.bookings_none_pending') }}</p>
                @endforelse
            </div>
        </div>

        {{-- Historique : acceptées, payées, refusées ou périmées. --}}
        <div class="chart-and-account-balance-area mt--30">
            <div class="single-chart-area-card" style="width:100%;">
                <div class="head">
                    <h5 class="title">{{ __('chauffeur.bookings_history') }} ({{ $history->count() }})</h5>
                </div>

                @forelse ($history as $booking)
                    <div class="course-card">
                        @include('chauffeur.partials.booking-summary', ['booking' => $booking])
                    </div>
                @empty
                    <p class="course-empty">{{ __('chauffeur.bookings_none_history') }}</p>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    {{-- Temps réel : une course en attente du paiement du client est relue en
         boucle ; dès qu'elle est payée (ou tombée), la page se recharge et le
         chauffeur retrouve ses étapes, sa carte et son GPS. Les nouvelles
         demandes apparaissent de la même façon. --}}
    <script>
        (function () {
            const waiting = Array.from(document.querySelectorAll('[data-await-payment]'));

            waiting.forEach(function (bloc) {
                const timer = setInterval(function () {
                    fetch(bloc.dataset.awaitPayment, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin', cache: 'no-store' })
                        .then(function (r) { return r.ok ? r.json() : null; })
                        .then(function (data) {
                            const course = data && data.course;
                            if (course && course.status !== 'chauffeur_accepted') {
                                clearInterval(timer);
                                window.location.reload();
                            }
                        })
                        .catch(function () {});
                }, 5000);
            });

            // Nouvelles demandes : le compteur « en attente » est comparé à l'état serveur.
            const pendingCount = {{ $pending->count() }};
            const STATE_URL = @json(route('chauffeur.bookings.pending-count'));
            setInterval(function () {
                if (document.hidden) return;
                fetch(STATE_URL, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin', cache: 'no-store' })
                    .then(function (r) { return r.ok ? r.json() : null; })
                    .then(function (data) {
                        const busyForm = document.activeElement && document.activeElement.closest && document.activeElement.closest('form');
                        if (data && data.pending !== pendingCount && ! busyForm) window.location.reload();
                    })
                    .catch(function () {});
            }, 8000);
        })();
    </script>
    <script>
        /**
         * Carte de suivi du chauffeur.
         *
         * Elle lit le même état que celle du client — approche jusqu'au point
         * de départ, puis itinéraire de la course — et y place la position
         * relevée par ce navigateur. Le chauffeur voit donc le trajet qu'il
         * doit suivre, et vérifie du même coup ce que son client observe.
         */
        (function () {
            const boxes = document.querySelectorAll('[data-ride-map]');
            if (! boxes.length || typeof L === 'undefined') return;

            const LABELS = {
                pickup: @json(__('messages.carriers_track_pickup')),
                dropoff: @json(__('messages.carriers_track_dropoff')),
                you: @json(__('chauffeur.track_driver_label')),
                eta: @json(__('messages.carriers_track_eta')),
                remaining: @json(__('messages.carriers_track_remaining')),
                waiting: @json(__('messages.carriers_track_waiting_position')),
            };

            const CAR_SVG =
                '<svg viewBox="0 0 64 44" xmlns="http://www.w3.org/2000/svg">' +
                    '<ellipse cx="32" cy="39" rx="25" ry="4.5" fill="#000" opacity=".28"/>' +
                    '<path d="M19 20.5C23 13.5 27 11 33.5 11h6.5c4.5 0 7.5 2.5 10 8.5z" fill="#a08a45"/>' +
                    '<path d="M22.5 19.5c3.2-5 6-6.6 10.5-6.6h1.2v6.6z" fill="#8fb2c9"/>' +
                    '<path d="M36.5 12.9h3.3c3.4 0 5.6 1.7 7.6 6.6H36.5z" fill="#8fb2c9"/>' +
                    '<path d="M5 30.5c0-4.6 1.2-6.8 4.2-7.7l10-2.6 30-1 5.6 2.6c3 1.4 4.2 3.9 4.2 8.2v1.4c0 1.5-1 2.6-2.5 2.6h-44C11 34 5 32.9 5 31.4z" fill="#C3AD66"/>' +
                    '<circle cx="19" cy="33" r="7" fill="#20211f"/><circle cx="19" cy="33" r="3.4" fill="#ccc"/>' +
                    '<circle cx="46" cy="33" r="7" fill="#20211f"/><circle cx="46" cy="33" r="3.4" fill="#ccc"/>' +
                '</svg>';

            const PIN_SVG =
                '<svg viewBox="0 0 32 44" xmlns="http://www.w3.org/2000/svg">' +
                    '<path d="M16 0C7.2 0 0 7.2 0 16c0 12 16 28 16 28s16-16 16-28c0-8.8-7.2-16-16-16z" fill="#111"/>' +
                    '<circle cx="16" cy="16" r="7" fill="#C3AD66"/>' +
                '</svg>';

            const FLAG_SVG =
                '<svg viewBox="0 0 32 44" xmlns="http://www.w3.org/2000/svg">' +
                    '<ellipse cx="9" cy="41.5" rx="7" ry="2.4" fill="#000" opacity=".28"/>' +
                    '<rect x="7.2" y="4" width="3.2" height="37" rx="1.6" fill="#1c1c1c"/>' +
                    '<path d="M10.4 5h18.4v14H10.4z" fill="#fff" stroke="#1c1c1c" stroke-width="1.2"/>' +
                    '<circle cx="8.8" cy="4" r="2.6" fill="#C3AD66"/>' +
                '</svg>';

            function pinIcon(svg, size, anchorBottom) {
                return L.divIcon({
                    className: 'map-pin-wrap',
                    html: '<div class="map-pin" style="width:' + size[0] + 'px;height:' + size[1] + 'px">' + svg + '</div>',
                    iconSize: size,
                    iconAnchor: [size[0] / 2, anchorBottom ? size[1] : size[1] / 2],
                });
            }

            boxes.forEach(function (box) {
                const etaLabel = box.closest('.ride-map-block').querySelector('[data-ride-eta]');
                const url = box.dataset.trackingUrl;

                let map = null;
                let layers = null;
                let driver = null;
                let stage = null;

                function ensureMap(center) {
                    if (map) return;

                    map = L.map(box, { zoomControl: false }).setView(center, 13);
                    L.control.zoom({ position: 'bottomright' }).addTo(map);
                    L.tileLayer(@json(config('map.tiles')), {
                        maxZoom: {{ (int) config('map.max_zoom') }},
                        attribution: @json(config('map.attribution')),
                        detectRetina: {{ config('map.retina') ? 'true' : 'false' }},
                    }).addTo(map);
                    layers = L.layerGroup().addTo(map);
                }

                function render(course) {
                    if (! course) return;

                    const points = [];
                    if (course.pickup) points.push([course.pickup.lat, course.pickup.lng]);
                    if (course.dropoff) points.push([course.dropoff.lat, course.dropoff.lng]);
                    if (course.driver) points.push([course.driver.lat, course.driver.lng]);

                    if (! points.length) return;

                    ensureMap(points[0]);
                    layers.clearLayers();

                    if (course.route && course.route.length > 1) {
                        L.polyline(course.route, { color: '#111', weight: 7, opacity: .18, lineCap: 'round' }).addTo(layers);
                        L.polyline(course.route, { color: '#C3AD66', weight: 4.5, opacity: .95, lineCap: 'round' }).addTo(layers);
                    }

                    if (course.pickup) {
                        L.marker([course.pickup.lat, course.pickup.lng], { icon: pinIcon(PIN_SVG, [26, 36], true) })
                            .addTo(layers)
                            .bindPopup(LABELS.pickup + (course.pickup.address ? ' — ' + course.pickup.address : ''));
                    }

                    if (course.dropoff) {
                        L.marker([course.dropoff.lat, course.dropoff.lng], { icon: pinIcon(FLAG_SVG, [26, 36], true) })
                            .addTo(layers)
                            .bindPopup(LABELS.dropoff + (course.dropoff.address ? ' — ' + course.dropoff.address : ''));
                    }

                    if (course.driver) {
                        const at = [course.driver.lat, course.driver.lng];

                        if (! driver) {
                            driver = L.marker(at, { icon: pinIcon(CAR_SVG, [50, 34], false), zIndexOffset: 1200 })
                                .addTo(map).bindPopup(LABELS.you);
                        } else {
                            driver.setLatLng(at);
                        }
                    }

                    // Recadrage au changement d'étape seulement : au volant, une
                    // carte qui se recentre sans arrêt est illisible.
                    if (stage !== course.stage) {
                        map.fitBounds(L.latLngBounds(
                            (course.route && course.route.length > 1) ? course.route : points
                        ), { padding: [40, 40], maxZoom: 15 });
                        stage = course.stage;
                    }

                    const parts = [];
                    if (course.eta_min !== null && course.eta_min !== undefined) {
                        parts.push(LABELS.eta.replace(':min', course.eta_min));
                    }
                    if (course.remaining_km !== null && course.remaining_km !== undefined) {
                        parts.push(LABELS.remaining.replace(':km', String(course.remaining_km).replace('.', ',')));
                    }

                    if (etaLabel) etaLabel.textContent = parts.length ? parts.join(' · ') : (course.driver ? '' : LABELS.waiting);
                }

                function poll() {
                    fetch(url, {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                        credentials: 'same-origin',
                        cache: 'no-store',
                    })
                    .then(function (response) { return response.ok ? response.json() : null; })
                    .then(function (data) { render(data ? data.course : null); })
                    .catch(function () {});
                }

                poll();
                setInterval(poll, 3000);
            });
        })();
    </script>

    <script>
        /**
         * Choix de navigation, mémorisé par course dans ce navigateur :
         * « rester dans l'application » replie le choix pour laisser la carte,
         * et un lien permet de rouvrir le GPS du téléphone à tout moment.
         */
        (function () {
            document.querySelectorAll('[data-ride-nav]').forEach(function (bloc) {
                const cle = 'ride-nav-choice-' + bloc.dataset.rideNav;
                const choix = bloc.querySelector('[data-ride-nav-choice]');
                const rouvrir = bloc.querySelector('[data-ride-nav-reopen]');

                function replier(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-ride-nav-stay]').addEventListener('click', function () {
                    try { localStorage.setItem(cle, 'app'); } catch (e) {}
                    replier(true);

                    const carte = bloc.closest('.course-card')?.querySelector('[data-ride-map]');
                    if (carte) carte.scrollIntoView({ behavior: 'smooth', block: 'center' });
                });

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