@extends('restaurant.layouts.app')

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

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

    <style>
        /* Même présentation que « Mes courses » côté chauffeur : le restaurateur
           qui livre conduit, tout doit se lire d'un coup d'œil. */
        .delivery-alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; }
        .delivery-alert.is-success { border: 1px solid #b8e0c0; background: #eafaee; color: #1e7a35; }
        .delivery-alert.is-danger { border: 1px solid #f0b8b8; background: #fdeaea; color: #a12626; }

        .course-card {
            border: 1px solid #eee; border-left: 4px solid #C3AD66; border-radius: 14px;
            background: #fff; padding: 20px 22px; margin-bottom: 18px;
        }
        .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; background: #eafaee; color: #1e7a35; }
        .course-status.is-done { background: #eef0f2; color: #34495e; }
        .course-status.is-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; }

        .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-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; text-decoration: none; }
        .ride-btn:hover { background: #a8904a; color: #fff; }
        .ride-btn.is-secondary { background: #fff; color: #8a7233; border: 1px solid #C3AD66; }
        .ride-btn.is-secondary:hover { background: #fbf7ec; color: #8a7233; }
        .ride-done-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #1e7a35; }

        .ride-nav { margin-top: 18px; 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-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

        .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 { font-size: 13.5px; font-weight: 800; color: #111; }
        .ride-map-eta { font-size: 13px; font-weight: 700; color: #8a7233; }
        .ride-map { height: 340px; border-radius: 12px; overflow: hidden; background: #f4f2ec; }
        .ride-gps-status { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
        .ride-gps-status[data-level="ok"] { color: #1e7a35; }
        .ride-gps-status[data-level="warn"] { color: #8a7233; }
        .ride-gps-status[data-level="error"] { color: #a12626; }
        .map-pin-wrap { background: none; border: none; }
        .map-pin svg { display: block; width: 100%; height: 100%; overflow: visible; }

        .course-empty { color: #999; font-size: 14px; padding: 18px 0; }

        @media (max-width: 767px) {
            .course-card { padding: 16px 14px; }
            .course-line { flex-direction: column; gap: 2px; }
            .course-line span:first-child { flex: none; }
            .ride-btn { width: 100%; justify-content: center; }
            .ride-progress { flex-direction: column; align-items: stretch; }
            .ride-map { height: 260px; }
        }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <h3>{{ __('chauffeur.restaurant_deliveries') }}</h3>
            <p class="sm-lead">{{ __('chauffeur.restaurant_deliveries_intro') }}</p>

            @if (session('delivery_success'))
                <div class="delivery-alert is-success">{{ session('delivery_success') }}</div>
            @endif
            @if (session('delivery_error'))
                <div class="delivery-alert is-danger">{{ session('delivery_error') }}</div>
            @endif

            <h5 style="margin:24px 0 14px;">{{ __('chauffeur.restaurant_deliveries_current') }} ({{ $current->count() }})</h5>

            @forelse ($current as $booking)
                @include('restaurant.deliveries.card', ['booking' => $booking])
            @empty
                <p class="course-empty">{{ __('chauffeur.restaurant_deliveries_none') }}</p>
            @endforelse

            <h5 style="margin:30px 0 14px;">{{ __('chauffeur.bookings_history') }} ({{ $history->count() }})</h5>

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

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

    {{-- Carte de la livraison : le même état que celui du client, avec la
         position relevée par ce navigateur. --}}
    <script>
        (function () {
            const boxes = document.querySelectorAll('[data-ride-map]');
            if (! boxes.length || typeof L === 'undefined') return;

            const LABELS = {
                pickup: @json(__('chauffeur.restaurant_label')),
                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="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="46" cy="33" r="7" fill="#20211f"/></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"><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"/></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]');
                let map = null, layers = null, driver = null, stage = null;

                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;

                    if (! map) {
                        map = L.map(box, { zoomControl: false }).setView(points[0], 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')),
                        }).addTo(map);
                        layers = L.layerGroup().addTo(map);
                    }

                    layers.clearLayers();

                    if (course.route && course.route.length > 1) {
                        L.polyline(course.route, { color: '#111', weight: 7, opacity: .18 }).addTo(layers);
                        L.polyline(course.route, { color: '#C3AD66', weight: 4.5, opacity: .95 }).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);
                    }
                    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);
                        }
                    }

                    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(box.dataset.trackingUrl, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin', cache: 'no-store' })
                        .then(function (r) { return r.ok ? r.json() : null; })
                        .then(function (data) { render(data ? data.course : null); })
                        .catch(function () {});
                }

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

    {{-- Position du restaurateur pendant la livraison : c'est elle que suit
         le client, comme la position d'un chauffeur. --}}
    <script>
        (function () {
            const urls = Array.from(document.querySelectorAll('.track-broadcast')).map(function (el) { return el.dataset.positionUrl; });
            const statuses = document.querySelectorAll('[data-gps-status]');
            if (! urls.length) return;

            const TEXT = {
                waiting: @json(__('chauffeur.gps_status_waiting')),
                sent: @json(__('chauffeur.gps_status_sent')),
                denied: @json(__('chauffeur.gps_status_denied')),
                failed: @json(__('chauffeur.gps_status_send_failed')),
                unsupported: @json(__('chauffeur.gps_status_unsupported')),
            };

            function status(key, level, vars) {
                vars = vars || {};
                statuses.forEach(function (el) {
                    el.textContent = TEXT[key].replace(':time', vars.time || '').replace(':code', vars.code || '');
                    el.dataset.level = level;
                });
            }

            if (! navigator.geolocation) {
                status('unsupported', 'error');
                return;
            }

            const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            let lastSent = 0;

            status('waiting', 'warn');

            navigator.geolocation.watchPosition(function (position) {
                if (Date.now() - lastSent < 3000) return;
                lastSent = Date.now();

                urls.forEach(function (url) {
                    fetch(url, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
                        body: JSON.stringify({ latitude: position.coords.latitude, longitude: position.coords.longitude }),
                    })
                    .then(function (response) {
                        if (! response.ok) { status('failed', 'error', { code: response.status }); return; }
                        status('sent', 'ok', { time: new Date().toLocaleTimeString() });
                    })
                    .catch(function () { status('failed', 'error', { code: '—' }); });
                });
            }, function (error) {
                if (error.code === error.PERMISSION_DENIED) status('denied', 'error');
            }, { enableHighAccuracy: true, maximumAge: 0, timeout: 15000 });
        })();
    </script>
@endsection