@extends('template.desktop.app')
@section('title', 'Update Status Order')

@push('styles')
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --os-primary: #dc2626;
            --os-primary-soft: #fef2f2;
            --os-bg: #f8f9fb;
            --os-surface: #fff;
            --os-border: #e5e7eb;
            --os-border-light: #f3f4f6;
            --os-text: #111827;
            --os-text-sec: #6b7280;
            --os-text-muted: #9ca3af;
            --os-radius: 12px;
            --os-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        .os-wrap {
            font-family: 'Inter', -apple-system, sans-serif;
            color: var(--os-text);
            -webkit-font-smoothing: antialiased;
        }

        /* Header */
        .os-header {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 30%, #b91c1c 60%, #dc2626 100%);
            border-radius: 16px;
            padding: 1.75rem 2rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .os-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .os-header h2 {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
        }

        .os-header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.82rem;
            margin: 4px 0 0;
        }

        .btn-check-status {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.55rem 1.25rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-check-status:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Stats */
        .os-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        @media(max-width:768px) {
            .os-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .os-stat {
            background: var(--os-surface);
            border: 1px solid var(--os-border);
            border-radius: var(--os-radius);
            padding: 1rem 1.15rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            transition: all 0.2s;
        }

        .os-stat:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
            transform: translateY(-2px);
        }

        .os-stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .os-stat-val {
            font-size: 1.3rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .os-stat-lbl {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--os-text-sec);
            margin-top: 1px;
        }

        /* Filters */
        .os-filters {
            background: var(--os-surface);
            border: 1px solid var(--os-border);
            border-radius: var(--os-radius);
            padding: 0.85rem 1.1rem;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .os-search {
            position: relative;
            flex: 1;
            min-width: 200px;
        }

        .os-search input {
            width: 100%;
            padding: 0.5rem 0.75rem 0.5rem 2.2rem;
            border: 1px solid var(--os-border);
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 500;
            background: var(--os-bg);
            outline: none;
            transition: all 0.15s;
        }

        .os-search input:focus {
            border-color: var(--os-primary);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
            background: #fff;
        }

        .os-search svg {
            position: absolute;
            left: 0.7rem;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            color: var(--os-text-muted);
            pointer-events: none;
        }

        .os-select {
            padding: 0.5rem 2rem 0.5rem 0.7rem;
            border: 1px solid var(--os-border);
            border-radius: 10px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--os-text);
            background: var(--os-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.5rem center/15px;
            appearance: none;
            outline: none;
            cursor: pointer;
            min-width: 130px;
        }

        .os-select:focus {
            border-color: var(--os-primary);
        }

        .os-date {
            padding: 0.5rem 0.7rem;
            border: 1px solid var(--os-border);
            border-radius: 10px;
            font-size: 0.78rem;
            background: var(--os-bg);
            outline: none;
            width: 140px;
        }

        .os-sep {
            width: 1px;
            height: 26px;
            background: var(--os-border);
            flex-shrink: 0;
        }

        /* Table */
        .os-table-card {
            background: var(--os-surface);
            border: 1px solid var(--os-border);
            border-radius: var(--os-radius);
            overflow: hidden;
        }

        .os-table {
            width: 100%;
            border-collapse: collapse;
        }

        .os-table thead th {
            background: #f9fafb;
            padding: 0.65rem 0.85rem;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--os-text-sec);
            border-bottom: 1px solid var(--os-border);
            white-space: nowrap;
        }

        .os-table tbody td {
            padding: 0.65rem 0.85rem;
            font-size: 0.8rem;
            color: var(--os-text);
            border-bottom: 1px solid var(--os-border-light);
            vertical-align: middle;
        }

        .os-table tbody tr:hover {
            background: #fafbff;
        }

        .os-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Badges */
        .os-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.62rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .os-badge-green {
            background: #dcfce7;
            color: #166534;
        }

        .os-badge-blue {
            background: #dbeafe;
            color: #1e40af;
        }

        .os-badge-yellow {
            background: #fef3c7;
            color: #92400e;
        }

        .os-badge-red {
            background: #fee2e2;
            color: #991b1b;
        }

        .os-badge-orange {
            background: #fff7ed;
            color: #9a3412;
        }

        .os-badge-purple {
            background: #ede9fe;
            color: #5b21b6;
        }

        .os-badge-gray {
            background: #f3f4f6;
            color: #6b7280;
        }

        /* Pagination */
        .os-paging {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.1rem;
            border-top: 1px solid var(--os-border-light);
            background: #fafbfc;
        }

        .os-paging .info {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--os-text-sec);
        }

        .os-pg-btns {
            display: flex;
            gap: 4px;
        }

        .os-pg-btn {
            min-width: 30px;
            height: 30px;
            border: 1px solid var(--os-border);
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--os-text-sec);
            background: var(--os-surface);
            cursor: pointer;
            transition: all 0.15s;
            padding: 0 5px;
        }

        .os-pg-btn:hover {
            background: var(--os-primary-soft);
            color: var(--os-primary);
            border-color: var(--os-primary);
        }

        .os-pg-btn.active {
            background: var(--os-primary);
            color: #fff;
            border-color: var(--os-primary);
        }

        .os-pg-btn:disabled {
            opacity: 0.3;
            cursor: default;
            pointer-events: none;
        }

        /* Result modal */
        .result-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(3px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .result-overlay.show {
            display: flex;
        }

        .result-box {
            background: #fff;
            border-radius: 16px;
            width: 700px;
            max-width: 95vw;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        @keyframes os-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .os-spinning {
            animation: os-spin 1s linear infinite;
        }
    </style>
@endpush

@section('content')
    <div class="os-wrap px-3 py-3 px-lg-4">

        {{-- Header --}}
        <header class="os-header">
            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <div
                        style="width:42px;height:42px;background:rgba(255,255,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;">
                        <i data-lucide="refresh-cw" style="width:20px;color:#fbbf24;"></i>
                    </div>
                    <div>
                        <h2>Update Status Order</h2>
                        <p>Cek dan perbarui status pengiriman dari Everpro — tanpa perubahan saldo</p>
                    </div>
                </div>
                <button class="btn-check-status" id="btn-check" onclick="window.__runCheck()">
                    <i data-lucide="zap" style="width:15px;height:15px;"></i> Check & Update Status
                </button>
            </div>
        </header>

        {{-- Stats --}}
        <div class="os-stats">
            <div class="os-stat">
                <div class="os-stat-icon" style="background:var(--os-primary-soft);color:var(--os-primary);"><i
                        data-lucide="package"></i></div>
                <div>
                    <div class="os-stat-val" id="s-total">0</div>
                    <div class="os-stat-lbl">Total Shipment</div>
                </div>
            </div>
            <div class="os-stat">
                <div class="os-stat-icon" style="background:#dbeafe;color:#2563eb;"><i data-lucide="loader"></i></div>
                <div>
                    <div class="os-stat-val" id="s-active">0</div>
                    <div class="os-stat-lbl">Aktif / Proses</div>
                </div>
            </div>
            <div class="os-stat">
                <div class="os-stat-icon" style="background:#dcfce7;color:#16a34a;"><i data-lucide="check-circle-2"></i>
                </div>
                <div>
                    <div class="os-stat-val" id="s-done">0</div>
                    <div class="os-stat-lbl">Selesai</div>
                </div>
            </div>
            <div class="os-stat">
                <div class="os-stat-icon" style="background:#fee2e2;color:#dc2626;"><i data-lucide="undo-2"></i></div>
                <div>
                    <div class="os-stat-val" id="s-ret">0</div>
                    <div class="os-stat-lbl">Retur</div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="os-filters">
            <div class="os-search">
                <i data-lucide="search"></i>
                <input type="text" id="f-search" placeholder="Cari AWB, Order No, nama penerima...">
            </div>
            <select id="f-status" class="os-select">
                <option value="">Semua Status</option>
                <option value="active">Aktif / Proses</option>
                <option value="completed">Completed</option>
                <option value="return">Return</option>
                <option value="IN TROUBLE">In Trouble</option>
                <option value="REPEAT DELIVERY">Repeat Delivery</option>
                <option value="REJECTED">Rejected</option>
            </select>
            <select id="f-cs" class="os-select">
                <option value="">Semua CS</option>
                @foreach ($customerServices as $cs)
                    <option value="{{ $cs->id }}">{{ $cs->name }}</option>
                @endforeach
            </select>
            <div class="os-sep"></div>
            <input type="date" id="f-start" class="os-date">
            <span style="color:var(--os-text-muted);font-size:0.75rem;font-weight:600;">s/d</span>
            <input type="date" id="f-end" class="os-date">
        </div>

        {{-- Table --}}
        <div class="os-table-card">
            <div class="table-responsive">
                <table class="os-table">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>AWB</th>
                            <th>Penerima</th>
                            <th>Kota</th>
                            <th>Kurir</th>
                            <th>CS</th>
                            <th>Status Pengiriman</th>
                            <th>Tanggal Order</th>
                        </tr>
                    </thead>
                    <tbody id="tbl-body">
                        <tr>
                            <td colspan="8" style="text-align:center;padding:3rem;color:var(--os-text-muted);">Memuat
                                data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="os-paging">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span class="info" id="pg-info">0 dari 0</span>
                </div>
                <div class="os-pg-btns" id="pg-btns"></div>
            </div>
        </div>
    </div>

    {{-- Result Modal --}}
    <div class="result-overlay" id="result-modal" onclick="if(event.target===this)this.classList.remove('show')">
        <div class="result-box">
            <div
                style="padding:18px 20px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;">
                <div style="font-size:0.95rem;font-weight:800;color:#111827;display:flex;align-items:center;gap:8px;">
                    <i data-lucide="zap" style="width:16px;height:16px;color:var(--os-primary);"></i> Hasil Update Status
                </div>
                <button onclick="document.getElementById('result-modal').classList.remove('show')"
                    style="width:28px;height:28px;border-radius:7px;background:#f3f4f6;border:none;cursor:pointer;font-size:14px;color:#9ca3af;display:flex;align-items:center;justify-content:center;">✕</button>
            </div>
            <div id="result-body" style="padding:20px; overflow-y:auto; max-height:calc(85vh - 70px);"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
            var curPage = 1;
            var fmt = function(n) {
                return Number(n || 0).toLocaleString('id-ID');
            };

            function load(page) {
                curPage = page || 1;
                var tbody = document.getElementById('tbl-body');
                tbody.innerHTML =
                    '<tr><td colspan="8" style="text-align:center;padding:2.5rem;color:var(--os-text-muted);"><div class="spinner-border spinner-border-sm text-secondary"></div> Memuat...</td></tr>';

                var p = new URLSearchParams({
                    page: curPage,
                    limit: 20,
                    search: document.getElementById('f-search').value,
                    shipment_status: document.getElementById('f-status').value,
                    customer_service_id: document.getElementById('f-cs').value,
                    start_date: document.getElementById('f-start').value,
                    end_date: document.getElementById('f-end').value,
                });
                // Clean empty
                for (var k of [...p.keys()]) {
                    if (!p.get(k)) p.delete(k);
                }

                fetch('{{ route('checking.order-status.data') }}?' + p)
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            tbody.innerHTML =
                                '<tr><td colspan="8" style="text-align:center;padding:2rem;color:#dc2626;">Error: ' +
                                (res.message || '') + '</td></tr>';
                            return;
                        }

                        // Stats
                        document.getElementById('s-total').textContent = fmt(res.stats.total);
                        document.getElementById('s-active').textContent = fmt(res.stats.active);
                        document.getElementById('s-done').textContent = fmt(res.stats.completed);
                        document.getElementById('s-ret').textContent = fmt(res.stats.return);

                        var data = res.data;
                        if (!data.data || data.data.length === 0) {
                            tbody.innerHTML =
                                '<tr><td colspan="8" style="text-align:center;padding:3rem;color:var(--os-text-muted);"><i data-lucide="inbox" style="width:40px;height:40px;margin:0 auto 8px;display:block;opacity:0.3;"></i>Tidak ada data</td></tr>';
                            lucide.createIcons();
                            return;
                        }

                        var html = '';
                        data.data.forEach(function(o) {
                            var ship = o.shipment;
                            var recv = o.receiver;
                            var cs = o.cs_bonus ? (o.cs_bonus.customer_service ? o.cs_bonus
                                .customer_service.name : '-') : '-';
                            var logName = o.logistic ? o.logistic.name : '-';
                            var statusName = ship ? ship.status_name : 'N/A';
                            var badge = statusBadge(statusName);
                            var dt = o.created_at ? new Date(o.created_at).toLocaleDateString('id-ID', {
                                day: '2-digit',
                                month: 'short',
                                year: 'numeric'
                            }) : '-';

                            html += '<tr>';
                            html += '<td><div style="font-weight:700;font-size:0.82rem;">#' + o.id +
                                '</div><div style="font-size:0.65rem;color:var(--os-text-muted);">' + (o
                                    .client_order_no || o.shipment_order_no || '-') + '</div></td>';
                            html +=
                                '<td><code style="font-size:0.7rem;background:#f3f4f6;padding:2px 6px;border-radius:4px;">' +
                                (o.awb_number || (ship ? ship.awb_number : '-') || '-') +
                                '</code></td>';
                            html += '<td style="font-weight:600;">' + (recv ? recv.name : '-') +
                            '</td>';
                            html += '<td style="font-size:0.75rem;color:var(--os-text-sec);">' + (recv ?
                                recv.city : '-') + '</td>';
                            html += '<td style="font-size:0.78rem;">' + logName + '</td>';
                            html += '<td><span class="os-badge os-badge-purple">' + cs + '</span></td>';
                            html += '<td>' + badge + '</td>';
                            html += '<td style="font-size:0.72rem;color:var(--os-text-muted);">' + dt +
                                '</td>';
                            html += '</tr>';
                        });
                        tbody.innerHTML = html;
                        lucide.createIcons();

                        // Pagination
                        document.getElementById('pg-info').textContent = (data.from || 0) + '–' + (data.to ||
                            0) + ' dari ' + data.total;
                        var pgHtml = '';
                        pgHtml += '<button class="os-pg-btn" onclick="window.__load(' + (data.current_page -
                            1) + ')"' + (data.current_page <= 1 ? ' disabled' : '') + '>&laquo;</button>';
                        for (var i = Math.max(1, data.current_page - 2); i <= Math.min(data.last_page, data
                                .current_page + 2); i++) {
                            pgHtml += '<button class="os-pg-btn' + (i === data.current_page ? ' active' : '') +
                                '" onclick="window.__load(' + i + ')">' + i + '</button>';
                        }
                        pgHtml += '<button class="os-pg-btn" onclick="window.__load(' + (data.current_page +
                            1) + ')"' + (data.current_page >= data.last_page ? ' disabled' : '') +
                            '>&raquo;</button>';
                        document.getElementById('pg-btns').innerHTML = pgHtml;
                    })
                    .catch(function(err) {
                        tbody.innerHTML =
                            '<tr><td colspan="8" style="text-align:center;padding:2rem;color:#dc2626;">Error: ' +
                            err.message + '</td></tr>';
                    });
            }

            function statusBadge(s) {
                if (!s) return '<span class="os-badge os-badge-gray">N/A</span>';
                var completed = ['COMPLETED', 'DELIVERED'];
                var returns = ['RETURN', 'RTS', 'RETURN TO SENDER', 'RETURNED', 'RETURNED TO SENDER',
                    'IN PROCESS RETURN'
                ];
                var trouble = ['IN TROUBLE', 'FORCE MAJEURE', 'LOST OR BROKEN'];

                if (completed.indexOf(s) >= 0) return '<span class="os-badge os-badge-green">' + s + '</span>';
                if (returns.indexOf(s) >= 0) return '<span class="os-badge os-badge-red">' + s + '</span>';
                if (trouble.indexOf(s) >= 0) return '<span class="os-badge os-badge-orange">' + s + '</span>';
                if (s === 'REPEAT DELIVERY') return '<span class="os-badge os-badge-yellow">' + s + '</span>';
                if (s === 'REJECTED') return '<span class="os-badge os-badge-red">' + s + '</span>';
                return '<span class="os-badge os-badge-blue">' + s + '</span>';
            }

            // Filters
            var timer;
            document.getElementById('f-search').addEventListener('input', function() {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    load(1);
                }, 400);
            });
            ['f-status', 'f-cs', 'f-start', 'f-end'].forEach(function(id) {
                document.getElementById(id).addEventListener('change', function() {
                    load(1);
                });
            });

            window.__load = load;

            // Check & Update
            window.__runCheck = function() {
                var btn = document.getElementById('btn-check');
                var orig = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML =
                    '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="os-spinning"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg> Checking...';

                var csrfToken = document.querySelector('meta[name="csrf-token"]');
                csrfToken = csrfToken ? csrfToken.getAttribute('content') : '';

                fetch('{{ route('checking.order-status.check') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        btn.disabled = false;
                        btn.innerHTML = orig;
                        lucide.createIcons();
                        showResult(res);
                        load(curPage);
                    })
                    .catch(function(err) {
                        btn.disabled = false;
                        btn.innerHTML = orig;
                        lucide.createIcons();
                        showResult({
                            success: false,
                            message: err.message
                        });
                    });
            };

            function showResult(res) {
                var body = document.getElementById('result-body');
                var h = '';

                if (!res.success) {
                    h += '<div style="background:#fef2f2;border-radius:10px;padding:14px;color:#991b1b;font-size:0.85rem;font-weight:600;">' +
                        (res.message || 'Error') + '</div>';
                } else {
                    var sm = res.summary || {};
                    // Summary cards
                    h +=
                    '<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;">';
                    h += '<div style="background:#f0fdf4;border-radius:10px;padding:10px;text-align:center;"><div style="font-size:1.1rem;font-weight:800;color:#16a34a;">' +
                        (sm.updated || 0) +
                        '</div><div style="font-size:0.6rem;font-weight:700;color:#4ade80;text-transform:uppercase;">Updated</div></div>';
                    h += '<div style="background:#f3f4f6;border-radius:10px;padding:10px;text-align:center;"><div style="font-size:1.1rem;font-weight:800;color:#6b7280;">' +
                        (sm.unchanged || 0) +
                        '</div><div style="font-size:0.6rem;font-weight:700;color:#9ca3af;text-transform:uppercase;">Unchanged</div></div>';
                    h += '<div style="background:#fef2f2;border-radius:10px;padding:10px;text-align:center;"><div style="font-size:1.1rem;font-weight:800;color:#dc2626;">' +
                        (sm.failed || 0) +
                        '</div><div style="font-size:0.6rem;font-weight:700;color:#f87171;text-transform:uppercase;">Failed</div></div>';
                    h += '<div style="background:#eff6ff;border-radius:10px;padding:10px;text-align:center;"><div style="font-size:1.1rem;font-weight:800;color:#2563eb;">' +
                        (sm.total || 0) +
                        '</div><div style="font-size:0.6rem;font-weight:700;color:#60a5fa;text-transform:uppercase;">Total</div></div>';
                    h += '</div>';

                    var det = res.details || {};
                    // Updated list
                    if (det.updated && det.updated.length > 0) {
                        h += '<div style="font-size:0.75rem;font-weight:700;color:#16a34a;margin-bottom:6px;">✓ Status Diperbarui (' +
                            det.updated.length + ')</div>';
                        h +=
                        '<div style="border:1px solid #dcfce7;border-radius:10px;overflow:hidden;margin-bottom:12px;">';
                        h += '<table style="width:100%;border-collapse:collapse;">';
                        h +=
                        '<thead><tr style="background:#f0fdf4;"><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">Order</th><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">AWB</th><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">Sebelumnya</th><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">Sekarang</th></tr></thead><tbody>';
                        det.updated.forEach(function(u) {
                            h += '<tr style="border-top:1px solid #f3f4f6;"><td style="padding:6px 10px;font-size:0.78rem;font-weight:700;">#' +
                                u.order_id +
                                '</td><td style="padding:6px 10px;font-size:0.72rem;color:#6b7280;">' + (u
                                    .awb || '-') +
                                '</td><td style="padding:6px 10px;"><span class="os-badge os-badge-yellow">' +
                                u.previous +
                                '</span></td><td style="padding:6px 10px;"><span class="os-badge os-badge-green">' +
                                u.current + '</span></td></tr>';
                        });
                        h += '</tbody></table></div>';
                    }

                    // Failed list
                    if (det.failed && det.failed.length > 0) {
                        h += '<div style="font-size:0.75rem;font-weight:700;color:#dc2626;margin-bottom:6px;">✗ Gagal (' +
                            det.failed.length + ')</div>';
                        h +=
                        '<div style="border:1px solid #fee2e2;border-radius:10px;overflow:hidden;margin-bottom:12px;">';
                        h += '<table style="width:100%;border-collapse:collapse;">';
                        h +=
                        '<thead><tr style="background:#fef2f2;"><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">Order</th><th style="padding:6px 10px;font-size:0.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;text-align:left;">Alasan</th></tr></thead><tbody>';
                        det.failed.forEach(function(f) {
                            h += '<tr style="border-top:1px solid #f3f4f6;"><td style="padding:6px 10px;font-size:0.78rem;font-weight:700;">#' +
                                f.order_id +
                                '</td><td style="padding:6px 10px;font-size:0.72rem;color:#991b1b;">' + (f
                                    .reason || '-') + '</td></tr>';
                        });
                        h += '</tbody></table></div>';
                    }

                    if (sm.updated === 0 && sm.failed === 0) {
                        h +=
                        '<div style="text-align:center;padding:16px;color:var(--os-text-muted);font-size:0.85rem;">Semua status sudah up-to-date ✓</div>';
                    }
                }

                body.innerHTML = h;
                document.getElementById('result-modal').classList.add('show');
            }

            // Init
            load(1);
        });
    </script>
@endpush