@extends('template.desktop.app')
@section('title', 'Pelacakan Pengiriman')

@push('styles')
    <link
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        :root {
            --brand: #dc2626;
            --brand-dark: #0f172a;
            --brand-accent: #ef4444;
            --text: #1e293b;
            --muted: #64748b;
            --bg: #f1f5f9;
            --card: #ffffff;
            --border: #e2e8f0;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
        }

        .font-outfit {
            font-family: 'Outfit', sans-serif;
        }

        /* ── Stat Cards ── */
        .stat-card {
            background: var(--card);
            border-radius: 16px;
            padding: 18px 20px;
            border: 1px solid var(--border);
            transition: all 0.25s;
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent);
            opacity: 0.7;
        }

        /* ── Tabs ── */
        .tab-btn {
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--muted);
            cursor: pointer;
            transition: all 0.2s;
        }

        .tab-btn:hover {
            border-color: var(--brand);
            color: var(--brand);
        }

        .tab-btn.active {
            background: var(--brand);
            color: #fff;
            border-color: var(--brand);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }

        /* ── Shipment Card ── */
        .ship-card {
            background: var(--card);
            border-radius: 14px;
            padding: 16px 18px;
            border: 1px solid var(--border);
            transition: all 0.2s;
            cursor: pointer;
        }

        .ship-card:hover {
            border-color: rgba(220, 38, 38, 0.35);
            box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.12);
            transform: translateX(3px);
        }

        /* ── Status Pills ── */
        .pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .pill-ok {
            background: #ecfdf5;
            color: #059669;
        }

        .pill-prog {
            background: #eff6ff;
            color: #2563eb;
        }

        .pill-ret {
            background: #fef2f2;
            color: #dc2626;
        }

        .pill-wait {
            background: #fffbeb;
            color: #d97706;
        }

        /* ── Search ── */
        .search-box {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px 14px 10px 42px;
            width: 100%;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .search-box:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        }

        /* ── Map ── */
        #shipment-map {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            z-index: 1;
            background: #e8edf5;
        }

        /* ── Scrollbar ── */
        .ship-list::-webkit-scrollbar {
            width: 4px;
        }

        .ship-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .ship-list::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        /* ── Leaflet popup ── */
        .leaflet-popup-content-wrapper {
            border-radius: 14px !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        }

        .leaflet-popup-content {
            margin: 0 !important;
            padding: 0 !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        /* ── Skeleton ── */
        .skel {
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shim 1.5s infinite;
            border-radius: 8px;
        }

        @keyframes shim {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        /* ── Dashboard Grid ── */
        .dash-grid {
            display: grid;
            grid-template-columns: 440px 1fr;
            gap: 20px;
            height: calc(100vh - 220px);
            min-height: 550px;
        }

        @media(max-width:1024px) {
            .dash-grid {
                grid-template-columns: 1fr;
                height: auto;
            }
        }

        /* ── Modal ── */
        .modal-bg {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .modal-bg.show {
            display: flex;
        }

        .modal-box {
            background: #fff;
            border-radius: 20px;
            width: 1000px;
            max-width: 95vw;
            max-height: 88vh;
            overflow: hidden;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
        }

        /* ── Info Label ── */
        .info-label {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 2px;
        }

        .info-value {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
            word-break: break-all;
        }
    </style>
@endpush

@section('content')
    <div style="padding:20px 0;">

        {{-- ── HEADER ── --}}
        <div
            style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:16px;">
            <div>
                <div
                    style="display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:#fff; border:1px solid var(--border); border-radius:100px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;">
                    <span style="width:7px;height:7px;background:var(--brand);border-radius:50%;"></span>
                    Live Dashboard
                </div>
                <h1 class="font-outfit"
                    style="font-size:32px; font-weight:800; color:var(--brand-dark); letter-spacing:-0.03em; line-height:1.1;">
                    Pelacakan <span style="color:var(--brand);">Pengiriman</span>
                </h1>
                <p style="font-size:14px; color:var(--muted); margin-top:6px; font-weight:500;">
                    Monitoring realtime pengiriman ke seluruh Indonesia
                </p>
            </div>
            <div style="display:flex; align-items:center; gap:12px;">
                <div style="background:#fff; padding:8px 14px; border-radius:12px; border:1px solid var(--border);">
                    <span
                        style="font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; display:block;">Update</span>
                    <span class="font-outfit"
                        style="font-size:14px; font-weight:700; color:var(--brand-dark);">{{ now()->format('d M Y • H:i') }}</span>
                </div>
                <a href="{{ request()->url() }}"
                    style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; border:1px solid var(--border); color:var(--muted);">
                    <i data-lucide="refresh-cw" style="width:18px; height:18px;"></i>
                </a>
            </div>
        </div>

        {{-- ── STAT CARDS ── --}}
        <div id="stats-row" style="display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:20px;">
            @foreach ([['label' => 'Total Pengiriman', 'icon' => 'package', 'id' => 'stat-total', 'accent' => '#dc2626'], ['label' => 'Dalam Proses', 'icon' => 'loader', 'id' => 'stat-progress', 'accent' => '#3b82f6'], ['label' => 'Selesai', 'icon' => 'check-circle', 'id' => 'stat-completed', 'accent' => '#10b981'], ['label' => 'Retur', 'icon' => 'undo-2', 'id' => 'stat-return', 'accent' => '#f43f5e']] as $s)
                <div class="stat-card" style="--accent:{{ $s['accent'] }}">
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                        <span
                            style="font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;">{{ $s['label'] }}</span>
                        <div
                            style="width:36px; height:36px; border-radius:10px; background:{{ $s['accent'] }}10; display:flex; align-items:center; justify-content:center; color:{{ $s['accent'] }};">
                            <i data-lucide="{{ $s['icon'] }}" style="width:18px; height:18px;"></i>
                        </div>
                    </div>
                    <div id="{{ $s['id'] }}" class="font-outfit"
                        style="font-size:28px; font-weight:800; color:var(--brand-dark);">
                        <div class="skel" style="height:32px; width:80px;"></div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ── MAIN GRID ── --}}
        <div class="dash-grid">
            {{-- LEFT: List --}}
            <div style="display:flex; flex-direction:column; gap:12px; min-height:0;">
                {{-- Search --}}
                <div style="position:relative;">
                    <i data-lucide="search"
                        style="position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted);"></i>
                    <input type="text" id="search-input" class="search-box" placeholder="Cari AWB, nama, kota..."
                        autocomplete="off">
                </div>

                {{-- Tabs --}}
                <div style="display:flex; gap:8px; flex-wrap:wrap;">
                    <button class="tab-btn active" data-status="all">Semua <span id="tab-all"
                            style="margin-left:4px; opacity:0.7;"></span></button>
                    <button class="tab-btn" data-status="in_progress">Proses <span id="tab-prog"></span></button>
                    <button class="tab-btn" data-status="completed">Selesai <span id="tab-done"></span></button>
                    <button class="tab-btn" data-status="return">Retur <span id="tab-ret"></span></button>
                </div>

                {{-- List --}}
                <div id="ship-list" class="ship-list"
                    style="flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px;">
                    @for ($i = 0; $i < 4; $i++)
                        <div class="ship-card">
                            <div class="skel" style="height:88px;"></div>
                        </div>
                    @endfor
                </div>

                {{-- Pagination --}}
                <div id="paging" style="display:flex; justify-content:space-between; align-items:center; padding:4px 0;">
                    <span id="page-info" style="font-size:13px; font-weight:600; color:var(--muted);"></span>
                    <div style="display:flex; gap:6px;">
                        <button id="btn-prev" class="tab-btn" style="padding:6px 14px; font-size:12px;"
                            onclick="goPage(-1)" disabled>← Prev</button>
                        <button id="btn-next" class="tab-btn" style="padding:6px 14px; font-size:12px;"
                            onclick="goPage(1)">Next →</button>
                    </div>
                </div>
            </div>

            {{-- RIGHT: Map --}}
            <div
                style="position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); min-height:400px;">
                <div id="shipment-map"></div>

                {{-- Legend --}}
                <div
                    style="position:absolute; bottom:14px; left:14px; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:12px 16px; border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,0.05);">
                    <div
                        style="font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;">
                        Volume Pengiriman</div>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <span style="font-size:11px; font-weight:600; color:var(--muted);">0</span>
                        <div
                            style="width:120px; height:10px; border-radius:5px; background:linear-gradient(90deg,#e3f2fd,#42a5f5,#1565c0,#1a237e);">
                        </div>
                        <span id="legend-max" style="font-size:11px; font-weight:600; color:var(--muted);">-</span>
                    </div>
                </div>

                {{-- Hover info --}}
                <div id="hover-box"
                    style="position:absolute; top:14px; left:14px; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1px solid var(--border); display:none; pointer-events:none;">
                    <div id="hover-name" style="font-size:14px; font-weight:800; color:var(--brand-dark);"></div>
                    <div id="hover-count" style="font-size:13px; font-weight:700; color:var(--brand);"></div>
                </div>

                {{-- Top Destinations --}}
                <div id="top-dest"
                    style="position:absolute; top:14px; right:14px; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:12px 16px; border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,0.05); max-width:260px;">
                    <div
                        style="font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;">
                        Top Destinasi</div>
                    <div id="dest-list"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── DETAIL MODAL ── --}}
    <div id="detail-modal" class="modal-bg" onclick="if(event.target===this)closeDetail()">
        <div class="modal-box" id="detail-content"></div>
    </div>
@endsection

@push('scripts')
    <script>
        const GEOJSON_URL =
            'https://raw.githubusercontent.com/superpikar/indonesia-geojson/master/indonesia-province-simple.json';

        let curPage = 1,
            curStatus = 'all',
            searchQ = '',
            map = null,
            geoLayer = null,
            provinceData = {},
            tracklineLayer = null;

        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
            initMap();
            loadSummary();
            loadShipments();
            loadMapData();
            loadTracklines();

            var t;
            document.getElementById('search-input').addEventListener('input', function(e) {
                clearTimeout(t);
                t = setTimeout(function() {
                    searchQ = e.target.value;
                    curPage = 1;
                    loadShipments();
                }, 400);
            });

            document.querySelectorAll('.tab-btn[data-status]').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.tab-btn[data-status]').forEach(function(b) {
                        b.classList.remove('active');
                    });
                    btn.classList.add('active');
                    curStatus = btn.dataset.status;
                    curPage = 1;
                    loadShipments();
                });
            });
        });

        function initMap() {
            map = L.map('shipment-map', {
                zoomControl: false,
                attributionControl: false
            }).setView([-2.5, 118], 5);
            L.control.zoom({
                position: 'topright'
            }).addTo(map);
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
                maxZoom: 18
            }).addTo(map);
        }

        function getColor(count, max) {
            if (!count || count === 0) return '#f0f4f8';
            var r = Math.min(count / max, 1);
            var stops = [
                [0, [227, 242, 253]],
                [0.15, [144, 202, 249]],
                [0.3, [66, 165, 245]],
                [0.5, [30, 136, 229]],
                [0.7, [21, 101, 192]],
                [0.85, [13, 71, 161]],
                [1, [26, 35, 126]]
            ];
            var lo = stops[0],
                hi = stops[stops.length - 1];
            for (var i = 0; i < stops.length - 1; i++) {
                if (r >= stops[i][0] && r <= stops[i + 1][0]) {
                    lo = stops[i];
                    hi = stops[i + 1];
                    break;
                }
            }
            var rng = hi[0] - lo[0] || 1,
                p = (r - lo[0]) / rng;
            return 'rgb(' + Math.round(lo[1][0] + (hi[1][0] - lo[1][0]) * p) + ',' + Math.round(lo[1][1] + (hi[1][1] - lo[1]
                [1]) * p) + ',' + Math.round(lo[1][2] + (hi[1][2] - lo[1][2]) * p) + ')';
        }

        function loadSummary() {
            fetch('{{ route('shipment-tracking.summary') }}')
                .then(function(r) {
                    return r.json();
                })
                .then(function(res) {
                    if (!res.success) return;
                    var d = res.data;
                    txt('stat-total', fmtN(d.total));
                    txt('stat-progress', fmtN(d.in_progress));
                    txt('stat-completed', fmtN(d.completed));
                    txt('stat-return', fmtN(d.returned));
                    txt('tab-all', '(' + d.total + ')');
                    txt('tab-prog', '(' + d.in_progress + ')');
                    txt('tab-done', '(' + d.completed + ')');
                    txt('tab-ret', '(' + d.returned + ')');
                });
        }

        function loadShipments() {
            var list = document.getElementById('ship-list');
            list.innerHTML = '<div class="ship-card"><div class="skel" style="height:88px;"></div></div>'.repeat(4);
            var p = new URLSearchParams({
                status: curStatus,
                page: curPage,
                search: searchQ
            });
            fetch('{{ route('shipment-tracking.data') }}?' + p)
                .then(function(r) {
                    return r.json();
                })
                .then(function(res) {
                    if (!res.success) return;
                    var items = res.data,
                        pg = res.pagination;
                    if (items.length === 0) {
                        list.innerHTML =
                            '<div style="text-align:center; padding:48px 16px; color:var(--muted);"><i data-lucide="package-x" style="width:48px; height:48px; margin:0 auto 12px; opacity:0.3;"></i><p style="font-weight:600; font-size:14px;">Tidak ada data</p></div>';
                        lucide.createIcons();
                        return;
                    }
                    list.innerHTML = items.map(function(item) {
                        return shipCard(item);
                    }).join('');
                    lucide.createIcons();
                    txt('page-info', 'Hal ' + pg.current_page + ' / ' + pg.last_page + ' (' + fmtN(pg.total) +
                        ' total)');
                    document.getElementById('btn-prev').disabled = pg.current_page <= 1;
                    document.getElementById('btn-next').disabled = pg.current_page >= pg.last_page;
                });
        }

        function shipCard(item) {
            var s = item.shipment,
                pc = pillClass(s.status);
            var csLabel = (item.cs && item.cs.name && item.cs.name !== '-') ? item.cs.name : '';
            var html = '<div class="ship-card" onclick=\'showDetail(' + JSON.stringify(item).replace(/'/g, "&#39;") +
                ')\'>';
            // Row 1: sender + status
            html +=
                '<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;">';
            html += '<div style="display:flex; align-items:center; gap:10px;">';
            html +=
                '<div style="width:36px; height:36px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center;"><i data-lucide="truck" style="width:18px; height:18px; color:var(--brand);"></i></div>';
            html += '<div>';
            html += '<div style="font-size:14px; font-weight:700; color:var(--brand-dark);">' + item.sender.name + '</div>';
            html += '<div style="font-size:12px; color:var(--muted); font-weight:500;">' + item.logistic.name + '</div>';
            html += '</div></div>';
            html += '<span class="pill ' + pc + '">' + sLabel(s.status) + '</span>';
            html += '</div>';
            // Row 2: route
            html += '<div style="display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px;">';
            html +=
                '<div style="flex:1;"><div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase;">Pengirim</div><div style="font-weight:600; color:var(--brand-dark);">' +
                item.sender.name + '</div><div style="font-size:12px; color:var(--muted);">' + item.sender.city +
                '</div></div>';
            html += '<div style="color:#cbd5e1;"><i data-lucide="arrow-right" style="width:16px; height:16px;"></i></div>';
            html +=
                '<div style="flex:1; text-align:right;"><div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase;">Penerima</div><div style="font-weight:600; color:var(--brand-dark);">' +
                item.receiver.name + '</div><div style="font-size:12px; color:var(--muted);">' + item.receiver.city +
                '</div></div>';
            html += '</div>';
            // Row 3: footer
            html +=
                '<div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f1f5f9; padding-top:8px; font-size:12px;">';
            html +=
                '<span style="color:var(--muted); font-weight:600;"><i data-lucide="package" style="width:13px; height:13px; display:inline; vertical-align:-2px;"></i> ' +
                item.total_types + ' jenis · ' + fmtN(item.total_items) + ' pcs</span>';
            if (csLabel) {
                html +=
                    '<span style="color:#dc2626; font-weight:700; font-size:11px; background:#fef2f2; padding:2px 8px; border-radius:5px;">CS: ' +
                    csLabel + '</span>';
            } else {
                html += '<span style="color:var(--muted); font-weight:600;">' + item.payment_method + '</span>';
            }
            html += '</div>';
            html += '</div>';
            return html;
        }

        // ── Map ──
        function loadMapData() {
            fetch('{{ route('shipment-tracking.map') }}')
                .then(function(r) {
                    return r.json();
                })
                .then(function(res) {
                    if (!res.success) return;
                    var sorted = res.data.sort(function(a, b) {
                        return b.receiver_count - a.receiver_count;
                    });
                    var maxC = sorted.length ? sorted[0].receiver_count : 1;
                    sorted.forEach(function(p) {
                        provinceData[p.name.toLowerCase().trim()] = p;
                    });
                    txt('legend-max', fmtN(maxC));

                    // Top destinations
                    var dl = document.getElementById('dest-list');
                    dl.innerHTML = sorted.slice(0, 7).map(function(p, i) {
                        return '<div style="display:flex; justify-content:space-between; align-items:center; padding:5px 0;' +
                            (i < 6 ? 'border-bottom:1px solid #f1f5f9;' : '') + '">' +
                            '<div style="display:flex; align-items:center; gap:6px;">' +
                            '<div style="width:8px; height:8px; border-radius:3px; background:' + getColor(p
                                .receiver_count, maxC) + ';"></div>' +
                            '<span style="font-size:13px; font-weight:600; color:var(--brand-dark);">' + p
                            .name + '</span></div>' +
                            '<span class="font-outfit" style="font-size:14px; font-weight:800; color:var(--brand);">' +
                            fmtN(p.receiver_count) + '</span></div>';
                    }).join('');

                    loadGeoJSON(maxC);
                });
        }

        var GEO_ALIASES = {
            'irian jaya timur': 'papua',
            'irian jaya tengah': 'papua',
            'irian jaya barat': 'papua barat',
            'probanten': 'banten',
            'di. aceh': 'aceh',
            'daerah istimewa yogyakarta': 'di yogyakarta',
            'nusatenggara barat': 'nusa tenggara barat',
            'kepulauan bangka belitung': 'bangka belitung',
        };

        function matchProv(name) {
            if (!name) return null;
            var k = name.toLowerCase().trim();
            if (provinceData[k]) return provinceData[k];
            var a = GEO_ALIASES[k];
            if (a && provinceData[a]) return provinceData[a];
            for (var key in provinceData) {
                if (k.indexOf(key) >= 0 || key.indexOf(k) >= 0) return provinceData[key];
            }
            var c = k.replace(/^(provinsi|prov\.?)\s*/i, '').trim();
            if (provinceData[c]) return provinceData[c];
            for (var key2 in provinceData) {
                if (c.indexOf(key2) >= 0 || key2.indexOf(c) >= 0) return provinceData[key2];
            }
            return null;
        }

        function loadGeoJSON(maxC) {
            fetch(GEOJSON_URL)
                .then(function(r) {
                    return r.json();
                })
                .then(function(geo) {
                    if (geoLayer) map.removeLayer(geoLayer);
                    geoLayer = L.geoJSON(geo, {
                        style: function(f) {
                            var nm = f.properties.Propinsi || f.properties.NAME_1 || f.properties.name ||
                                '';
                            var d = matchProv(nm);
                            var cnt = d ? d.receiver_count : 0;
                            return {
                                fillColor: getColor(cnt, maxC),
                                weight: 1.5,
                                opacity: 1,
                                color: '#fff',
                                fillOpacity: 0.85
                            };
                        },
                        onEachFeature: function(f, layer) {
                            var nm = f.properties.Propinsi || f.properties.NAME_1 || f.properties.name ||
                                '';
                            var d = matchProv(nm);
                            var cnt = d ? d.receiver_count : 0;

                            layer.on('mouseover', function() {
                                this.setStyle({
                                    weight: 3,
                                    color: '#1a237e',
                                    fillOpacity: 0.95
                                });
                                this.bringToFront();
                                document.getElementById('hover-name').textContent = nm;
                                document.getElementById('hover-count').textContent = cnt > 0 ? fmtN(
                                    cnt) + ' pengiriman' : 'Belum ada pengiriman';
                                document.getElementById('hover-box').style.display = 'block';
                            });
                            layer.on('mouseout', function() {
                                geoLayer.resetStyle(this);
                                document.getElementById('hover-box').style.display = 'none';
                            });

                            if (d && cnt > 0) {
                                var popup = '<div style="padding:14px; min-width:240px;">';
                                popup +=
                                    '<div style="font-size:16px; font-weight:800; color:#0f172a; margin-bottom:10px; border-bottom:2px solid #e2e8f0; padding-bottom:8px;">' +
                                    nm + '</div>';
                                popup +=
                                    '<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">';
                                popup +=
                                    '<div><div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase;">Total Order</div><div class="font-outfit" style="font-size:20px; font-weight:800; color:#dc2626;">' +
                                    fmtN(cnt) + '</div></div>';
                                popup +=
                                    '<div><div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase;">Pengirim</div><div class="font-outfit" style="font-size:20px; font-weight:800; color:#10b981;">' +
                                    fmtN(d.sender_count) + '</div></div>';
                                popup +=
                                    '<div><div style="font-size:10px; font-weight:700; color:#94a3b8;">Selesai</div><div style="font-size:16px; font-weight:800; color:#10b981;">' +
                                    fmtN(d.completed) + '</div></div>';
                                popup +=
                                    '<div><div style="font-size:10px; font-weight:700; color:#94a3b8;">Proses</div><div style="font-size:16px; font-weight:800; color:#3b82f6;">' +
                                    fmtN(d.in_progress) + '</div></div>';
                                popup +=
                                    '<div><div style="font-size:10px; font-weight:700; color:#94a3b8;">Retur</div><div style="font-size:16px; font-weight:800; color:#f43f5e;">' +
                                    fmtN(d.returned) + '</div></div>';
                                popup += '</div></div>';
                                layer.bindPopup(popup);
                            }
                        }
                    }).addTo(map);
                });
        }

        // ── Detail Modal ──
        function showDetail(item) {
            var s = item.shipment;
            var pc = pillClass(s.status);
            var csName = (item.cs && item.cs.name && item.cs.name !== '-') ? item.cs.name : '-';
            var awb = s.awb || item.awb_number || '-';
            var orderDate = item.order_date ? new Date(item.order_date).toLocaleDateString('id-ID', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            }) : '-';

            // Products
            var prodHtml = '';
            if (item.products_detail && item.products_detail.length > 0) {
                item.products_detail.forEach(function(p) {
                    prodHtml += '<tr style="border-bottom:1px solid #f1f5f9;">';
                    prodHtml += '<td style="padding:6px 0; font-size:13px; color:#1e293b;">' + p.name + '</td>';
                    prodHtml += '<td style="padding:6px 10px; font-size:13px; color:#64748b; text-align:center;">' +
                        p.qty + 'x</td>';
                    prodHtml +=
                        '<td style="padding:6px 0; font-size:13px; color:#0f172a; font-weight:600; text-align:right;">Rp ' +
                        fmtN(p.price) + '</td>';
                    prodHtml += '</tr>';
                });
            }

            var h = '';
            // Header
            h +=
                '<div style="padding:20px 24px 16px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center;">';
            h +=
                '<div><div class="font-outfit" style="font-size:20px; font-weight:800; color:#0f172a;">Detail Pengiriman</div>';
            h += '<div style="font-size:13px; color:#94a3b8; margin-top:2px;">' + orderDate + '</div></div>';
            h +=
                '<button onclick="closeDetail()" style="width:32px; height:32px; border-radius:8px; background:#f1f5f9; border:none; cursor:pointer; font-size:16px; color:#94a3b8; display:flex; align-items:center; justify-content:center;">✕</button>';
            h += '</div>';

            // 2-col body
            h += '<div style="display:grid; grid-template-columns:1fr 1fr;">';

            // LEFT
            h += '<div style="padding:20px 24px; overflow-y:auto; max-height:calc(88vh - 72px);">';
            // Status + CS
            h += '<div style="display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap;">';
            h += '<span class="pill ' + pc + '" style="font-size:12px; padding:5px 14px;">' + sLabel(s.status) + '</span>';
            h += '<span style="font-size:13px; color:#94a3b8; font-weight:500;">' + item.payment_method + '</span>';
            if (csName !== '-') {
                h += '<span style="font-size:11px; color:#dc2626; font-weight:700; background:#fef2f2; padding:3px 10px; border-radius:6px;">CS: ' +
                    csName + '</span>';
            }
            h += '</div>';

            // Route
            h += '<div style="background:#f8fafc; border-radius:12px; padding:14px 16px; margin-bottom:14px;">';
            h += '<div style="display:flex; align-items:flex-start;">';
            h += '<div style="flex:1;">';
            h += '<div class="info-label">Pengirim</div>';
            h += '<div style="font-size:15px; font-weight:700; color:#0f172a;">' + item.sender.name + '</div>';
            h += '<div style="font-size:13px; color:#64748b;">' + item.sender.city + ', ' + item.sender.province + '</div>';
            h += '<div style="font-size:12px; color:#dc2626; font-weight:600;">' + item.sender.type + '</div>';
            h += '</div>';
            h += '<div style="padding:8px 10px; color:#cbd5e1; font-size:18px;">→</div>';
            h += '<div style="flex:1; text-align:right;">';
            h += '<div class="info-label">Penerima</div>';
            h += '<div style="font-size:15px; font-weight:700; color:#0f172a;">' + item.receiver.name + '</div>';
            h += '<div style="font-size:13px; color:#64748b;">' + item.receiver.city + ', ' + item.receiver.province +
                '</div>';
            h += '</div></div></div>';

            // Info 2x2
            h += '<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;">';
            var flds = [
                ['AWB', awb],
                ['Ref. No', item.reference_no || '-'],
                ['Kurir', item.logistic.name + (item.logistic.rate && item.logistic.rate !== '-' ? ' · ' + item.logistic
                    .rate : '')],
                ['Ongkir', 'Rp ' + fmtN(s.cost)]
            ];
            for (var i = 0; i < flds.length; i++) {
                h += '<div style="background:#f8fafc; border-radius:10px; padding:10px 12px;">';
                h += '<div class="info-label">' + flds[i][0] + '</div>';
                h += '<div class="info-value">' + flds[i][1] + '</div>';
                h += '</div>';
            }
            h += '</div>';

            // Products
            if (prodHtml) {
                h += '<div style="margin-bottom:14px;">';
                h += '<div class="info-label" style="margin-bottom:6px;">Produk (' + item.total_types + ' jenis · ' + fmtN(
                    item.total_items) + ' pcs)</div>';
                h += '<table style="width:100%; border-collapse:collapse;">' + prodHtml + '</table>';
                h += '</div>';
            }

            // Total
            h += '<div style="border-top:2px solid #e2e8f0; padding-top:12px;">';
            h += '<div class="info-label">Total Pembayaran</div>';
            h += '<div class="font-outfit" style="font-size:24px; font-weight:800; color:#0f172a;">Rp ' + fmtN(item
                .total_payment) + '</div>';
            h += '</div>';
            h += '</div>'; // end left

            // RIGHT: Tracking
            h +=
                '<div style="padding:20px 24px; border-left:1px solid #f1f5f9; background:#fafbfc; overflow-y:auto; max-height:calc(88vh - 72px);">';
            h +=
                '<div style="font-size:12px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;">Tracking</div>';
            h += '<div id="tracking-tl">';
            h += '<div style="display:flex; flex-direction:column; gap:12px; padding:32px 0; align-items:center;">';
            h +=
                '<div class="skel" style="height:16px; width:70%;"></div><div class="skel" style="height:16px; width:85%;"></div><div class="skel" style="height:16px; width:55%;"></div>';
            h += '<div style="font-size:12px; color:#94a3b8; margin-top:4px;">Memuat tracking...</div>';
            h += '</div></div>';
            h += '</div>'; // end right

            h += '</div>'; // end grid

            document.getElementById('detail-content').innerHTML = h;
            document.getElementById('detail-modal').classList.add('show');
            loadTracking(awb);
        }

        function closeDetail() {
            document.getElementById('detail-modal').classList.remove('show');
        }

        @verbatim

        function loadTracking(awb) {
            if (!awb || awb === '-') {
                document.getElementById('tracking-tl').innerHTML =
                    '<div style="text-align:center; padding:24px; color:#94a3b8; font-size:13px;">AWB tidak tersedia</div>';
                return;
            }
            var tl = document.getElementById('tracking-tl');

            fetch('/shipment-tracking/track/' + awb)
                .then(function(r) {
                    return r.json();
                })
                .then(function(data) {
                    if (data.error) {
                        tl.innerHTML =
                            '<div style="padding:14px; background:#fef2f2; border-radius:10px; color:#dc2626; font-size:13px; font-weight:600;">' +
                            data.error + '</div>';
                        return;
                    }
                    var hist = data.tracking_history || [];
                    if (hist.length === 0) {
                        tl.innerHTML =
                            '<div style="text-align:center; padding:24px; color:#94a3b8; font-size:13px;">Belum ada riwayat</div>';
                        return;
                    }
                    hist.sort(function(a, b) {
                        return new Date(b.date) - new Date(a.date);
                    });

                    var clr = {
                        'CREATED': '#94a3b8',
                        'PICKED_UP': '#3b82f6',
                        'IN_TRANSIT': '#8b5cf6',
                        'IN PROCESS': '#8b5cf6',
                        'ON_DELIVERY': '#f59e0b',
                        'WITH DELIVERY COURIER': '#f59e0b',
                        'ONGOING TO RECEIVER': '#f59e0b',
                        'DELIVERED': '#10b981',
                        'COMPLETED': '#10b981',
                        'REPEAT DELIVERY': '#f97316',
                        'REJECTED': '#ef4444',
                        'ARRIVED AT DESTINATION CITY': '#8b5cf6',
                        'RETURNED': '#f43f5e',
                        'RETURN': '#f43f5e',
                        'IN PROCESS RETURN': '#f43f5e',
                        'CANCELLED': '#94a3b8'
                    };

                    var o = '';
                    for (var i = 0; i < hist.length; i++) {
                        var ev = hist[i];
                        var c = clr[ev.status] || '#94a3b8';
                        var first = (i === 0),
                            last = (i === hist.length - 1);
                        var dt = new Date(ev.date);
                        var ds = dt.toLocaleDateString('id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        });
                        var ts = dt.toLocaleTimeString('id-ID', {
                            hour: '2-digit',
                            minute: '2-digit'
                        });

                        // Row: [dot+line] [content]
                        o += '<div style="display:flex; gap:14px;">';
                        // Dot column
                        o +=
                            '<div style="display:flex; flex-direction:column; align-items:center; width:14px; flex-shrink:0;">';
                        if (first) {
                            o += '<div style="width:14px; height:14px; border-radius:50%; background:' + c +
                                '; box-shadow:0 0 0 4px ' + c + '22; flex-shrink:0;"></div>';
                        } else {
                            o += '<div style="width:10px; height:10px; border-radius:50%; border:2.5px solid ' + c +
                                '; background:#fff; flex-shrink:0; margin-top:2px;"></div>';
                        }
                        if (!last) {
                            o +=
                                '<div style="width:2px; flex:1; min-height:10px; background:#e2e8f0; margin:4px 0;"></div>';
                        }
                        o += '</div>';
                        // Content
                        o += '<div style="flex:1; min-width:0; padding-bottom:' + (last ? '0' : '16px') + ';">';
                        o += '<div style="display:inline-block; padding:2px 8px; border-radius:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; background:' +
                            c + '14; color:' + c + '; margin-bottom:4px;">' + (ev.status || '-') + '</div>';
                        o += '<div style="font-size:13px; font-weight:' + (first ? '600' : '500') + '; color:' + (
                                first ? '#0f172a' : '#475569') + '; line-height:1.4;">' + (ev.description || '-') +
                            '</div>';
                        o += '<div style="font-size:11px; color:#94a3b8; margin-top:3px;">' + ds + ', ' + ts + '</div>';
                        o += '</div></div>';
                    }
                    tl.innerHTML = o;
                })
                .catch(function(err) {
                    tl.innerHTML =
                        '<div style="padding:14px; background:#fef2f2; border-radius:10px; color:#dc2626; font-size:13px;">Gagal memuat: ' +
                        err.message + '</div>';
                });
        }
        @endverbatim

        // ── Tracklines ──
        function loadTracklines() {
            fetch('{{ route('shipment-tracking.tracklines') }}')
                .then(function(r) {
                    return r.json();
                })
                .then(function(res) {
                    if (!res.success || !res.data.length) return;
                    if (tracklineLayer) map.removeLayer(tracklineLayer);
                    tracklineLayer = L.layerGroup();
                    var maxC = Math.max.apply(null, res.data.map(function(t) {
                        return t.count;
                    }));
                    res.data.forEach(function(t) {
                        var from = [t.from.lat, t.from.lng],
                            to = [t.to.lat, t.to.lng];
                        var pts = genArc(from, to, 20);
                        var w = Math.max(1.5, Math.min(5, (t.count / maxC) * 5));
                        var op = Math.max(0.25, Math.min(0.7, (t.count / maxC) * 0.7));
                        var line = L.polyline(pts, {
                            color: '#dc2626',
                            weight: w,
                            opacity: op,
                            smoothFactor: 1
                        });
                        line.bindTooltip('<div style="font-size:13px;"><strong>' + t.from.name +
                            '</strong> → <strong>' + t.to.name +
                            '</strong><br><span style="color:#dc2626; font-weight:800;">' + fmtN(t.count) +
                            '</span> pengiriman</div>', {
                                sticky: true
                            });
                        tracklineLayer.addLayer(line);
                    });
                    tracklineLayer.addTo(map);
                });
        }

        function genArc(from, to, n) {
            var pts = [],
                dx = to[1] - from[1],
                dy = to[0] - from[0],
                dist = Math.sqrt(dx * dx + dy * dy),
                cv = Math.min(dist * 0.3, 5);
            for (var i = 0; i <= n; i++) {
                var t = i / n,
                    lat = from[0] + (to[0] - from[0]) * t,
                    lng = from[1] + (to[1] - from[1]) * t;
                var off = Math.sin(t * Math.PI) * cv,
                    ang = Math.atan2(dy, dx) + Math.PI / 2;
                pts.push([lat + off * Math.cos(ang) * 0.3, lng + off * Math.sin(ang) * 0.3]);
            }
            return pts;
        }

        // ── Utils ──
        function goPage(d) {
            curPage += d;
            loadShipments();
        }

        function fmtN(n) {
            return Number(n || 0).toLocaleString('id-ID');
        }

        function txt(id, v) {
            var el = document.getElementById(id);
            if (el) el.innerHTML = v;
        }

        function pillClass(s) {
            if (!s) return 'pill-wait';
            s = s.toUpperCase();
            if (s === 'COMPLETED') return 'pill-ok';
            if (['RETURN', 'RTS', 'RETURN TO SENDER', 'IN PROCESS RETURN'].indexOf(s) >= 0) return 'pill-ret';
            if (['WAITING FOR DELIVERY', 'APPROVED'].indexOf(s) >= 0) return 'pill-wait';
            return 'pill-prog';
        }

        function sLabel(s) {
            var m = {
                'COMPLETED': 'Selesai',
                'IN PROCESS': 'Dalam Proses',
                'WAITING FOR DELIVERY': 'Menunggu Kurir',
                'ONGOING TO RECEIVER': 'Menuju Penerima',
                'ARRIVED AT DESTINATION CITY': 'Tiba di Tujuan',
                'WITH DELIVERY COURIER': 'Bersama Kurir',
                'RETURN': 'Retur',
                'RTS': 'Retur',
                'RETURN TO SENDER': 'Retur',
                'IN PROCESS RETURN': 'Proses Retur',
                'APPROVED': 'Disetujui',
                'REPEAT DELIVERY': 'Kirim Ulang',
                'IN TROUBLE': 'Bermasalah',
                'CANCELLED': 'Dibatalkan',
                'REJECTED': 'Ditolak'
            };
            return (s && m[s.toUpperCase()]) || s || 'Tidak Diketahui';
        }
    </script>
@endpush