@extends('template.desktop.app')

@section('title', 'Order Bermasalah')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --p: #dc2626;
            --p-light: #fef2f2;
            --p-hover: #b91c1c;
            --surface: #ffffff;
            --surface-alt: #f8fafc;
            --border: #e2e8f0;
            --border-light: #f1f5f9;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
        }

        /* ─── Page Header ──────── */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 28px;
            gap: 16px;
            flex-wrap: wrap;
        }

        .page-header h4 {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0 0 4px;
        }

        .page-header p {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0;
        }

        .header-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-shrink: 0;
        }

        .btn-outline-custom {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 20px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text-secondary);
            transition: all 0.2s;
        }

        .btn-outline-custom:hover {
            border-color: #cbd5e1;
            background: var(--surface-alt);
            color: var(--text-primary);
        }

        .btn-primary-custom {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 22px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            background: var(--p);
            color: white;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
        }

        .btn-primary-custom:hover {
            background: var(--p-hover);
            box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
            transform: translateY(-1px);
        }

        .btn-primary-custom:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* ─── Breakdown Cards ──────── */
        .bd-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        @media (max-width: 992px) {
            .bd-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

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

        .bd-card {
            background: var(--surface);
            border-radius: 12px;
            padding: 16px;
            border: 1.5px solid var(--border-light);
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .bd-card:hover {
            border-color: var(--border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transform: translateY(-1px);
        }

        .bd-card.active {
            border-color: var(--p);
            box-shadow: 0 0 0 1px var(--p), 0 2px 12px rgba(220, 38, 38, 0.1);
        }

        .bd-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
        }

        .bd-card .bd-num {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .bd-card .bd-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .bd-card .bd-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .bd-trouble::after {
            background: #ef4444;
        }

        .bd-trouble .bd-dot {
            background: #ef4444;
        }

        .bd-majeure::after {
            background: #f59e0b;
        }

        .bd-majeure .bd-dot {
            background: #f59e0b;
        }

        .bd-rejected::after {
            background: #ec4899;
        }

        .bd-rejected .bd-dot {
            background: #ec4899;
        }

        .bd-lost::after {
            background: #8b5cf6;
        }

        .bd-lost .bd-dot {
            background: #8b5cf6;
        }

        .bd-repeat::after {
            background: #3b82f6;
        }

        .bd-repeat .bd-dot {
            background: #3b82f6;
        }

        /* ─── Filter Bar ──────── */
        .filter-bar {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border-light);
            padding: 10px 14px;
            margin-bottom: 16px;
        }

        .filter-bar input,
        .filter-bar select {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 7px 12px;
            font-size: 12px;
            background: var(--surface-alt);
            outline: none;
            transition: all 0.15s;
            color: var(--text-primary);
        }

        .filter-bar input:focus,
        .filter-bar select:focus {
            border-color: var(--p);
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
            background: var(--surface);
        }

        /* ─── Table ──────── */
        .data-table {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border-light);
            overflow: hidden;
        }

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

        .data-table thead th {
            background: var(--surface-alt);
            padding: 11px 14px;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
        }

        .data-table tbody tr {
            transition: background 0.1s;
        }

        .data-table tbody tr:hover {
            background: var(--p-light);
        }

        .data-table tbody td {
            padding: 11px 14px;
            font-size: 12.5px;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-light);
            vertical-align: middle;
        }

        /* ─── Badges ──────── */
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 10.5px;
            font-weight: 700;
            white-space: nowrap;
        }

        .pill-trouble {
            background: #fee2e2;
            color: #991b1b;
        }

        .pill-majeure {
            background: #fef3c7;
            color: #92400e;
        }

        .pill-rejected {
            background: #fce7f3;
            color: #9d174d;
        }

        .pill-lost {
            background: #ede9fe;
            color: #5b21b6;
        }

        .pill-repeat {
            background: #dbeafe;
            color: #1e40af;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 9px;
            border-radius: 6px;
            font-size: 10.5px;
            font-weight: 600;
        }

        .chip-actor {
            background: #f0f9ff;
            color: #0369a1;
        }

        .chip-pusat {
            background: #dbeafe;
            color: #1e40af;
        }

        .chip-distrib {
            background: #d1fae5;
            color: #065f46;
        }

        .chip-cs {
            background: #ede9fe;
            color: #5b21b6;
        }

        /* ─── Pagination ──────── */
        .pag-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-top: 1px solid var(--border-light);
        }

        .pg-btn {
            width: 30px;
            height: 30px;
            border: 1px solid var(--border);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--text-muted);
            background: var(--surface);
            cursor: pointer;
            transition: all 0.15s;
        }

        .pg-btn:hover {
            background: var(--surface-alt);
        }

        .pg-btn.active {
            background: var(--p);
            color: white;
            border-color: var(--p);
        }

        /* ─── Modal ──────── */
        .modal-result .modal-content {
            border: none;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        .modal-result .modal-header {
            background: linear-gradient(135deg, var(--p) 0%, var(--p-hover) 100%);
            padding: 20px 24px;
            border: none;
            color: white;
        }

        .modal-result .modal-header .btn-close {
            filter: invert(1);
            opacity: 0.8;
        }

        .modal-result .modal-header h5 {
            font-size: 15px;
            font-weight: 700;
            margin: 0;
        }

        .modal-result .modal-body {
            padding: 24px;
        }

        .result-stat {
            text-align: center;
            padding: 16px;
            border-radius: 10px;
            border: 1px solid var(--border-light);
        }

        .result-stat .rs-num {
            font-size: 1.6rem;
            font-weight: 800;
            line-height: 1;
        }

        .result-stat .rs-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .result-table th {
            background: var(--surface-alt);
            padding: 8px 12px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
        }

        .result-table td {
            padding: 8px 12px;
            font-size: 12px;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        .result-table tr:hover {
            background: var(--p-light);
        }

        .result-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
        }

        .result-badge-return {
            background: #fef2f2;
            color: #dc2626;
        }

        .result-badge-prob {
            background: #fef3c7;
            color: #92400e;
        }

        .result-section-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            margin: 20px 0 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-light);
        }

        /* ─── Empty ──────── */
        .empty-box {
            text-align: center;
            padding: 50px 20px;
        }

        .empty-box i {
            font-size: 2.5rem;
            color: #e2e8f0;
            margin-bottom: 12px;
        }

        .empty-box h6 {
            font-weight: 700;
            color: var(--text-muted);
            font-size: 14px;
        }

        .empty-box p {
            font-size: 12px;
            color: var(--text-muted);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-4 py-3">

        {{-- Header --}}
        <div class="page-header">
            <div>
                <h4><i class="fas fa-triangle-exclamation me-2" style="color:var(--p)"></i>Order Bermasalah</h4>
                <p>Monitoring order bermasalah & cek status otomatis via Everpro.</p>
            </div>
            <div class="header-actions">
                <a href="{{ route('checking.orders.problematic.logs') }}" class="btn-outline-custom">
                    <i class="fas fa-clock-rotate-left"></i> Riwayat Log
                </a>
                <button class="btn-primary-custom" id="btn-check-all" onclick="runCheck()">
                    <i class="fas fa-rotate"></i> Cek Semua Status
                </button>
            </div>
        </div>

        {{-- Breakdown --}}
        <div class="bd-grid">
            <div class="bd-card bd-trouble" data-status="IN TROUBLE" onclick="filterByStatus(this)">
                <div class="d-flex align-items-center gap-2 mb-2"><span class="bd-dot"></span><span class="bd-label"
                        style="margin:0">Paket Bermasalah</span></div>
                <div class="bd-num" id="bd-trouble">0</div>
            </div>
            <div class="bd-card bd-majeure" data-status="FORCE MAJEURE" onclick="filterByStatus(this)">
                <div class="d-flex align-items-center gap-2 mb-2"><span class="bd-dot"></span><span class="bd-label"
                        style="margin:0">Kendala Alam</span></div>
                <div class="bd-num" id="bd-majeure">0</div>
            </div>
            <div class="bd-card bd-rejected" data-status="REJECTED" onclick="filterByStatus(this)">
                <div class="d-flex align-items-center gap-2 mb-2"><span class="bd-dot"></span><span class="bd-label"
                        style="margin:0">Ditolak</span></div>
                <div class="bd-num" id="bd-rejected">0</div>
            </div>
            <div class="bd-card bd-lost" data-status="LOST OR BROKEN" onclick="filterByStatus(this)">
                <div class="d-flex align-items-center gap-2 mb-2"><span class="bd-dot"></span><span class="bd-label"
                        style="margin:0">Hilang / Rusak</span></div>
                <div class="bd-num" id="bd-lost">0</div>
            </div>
            <div class="bd-card bd-repeat" data-status="REPEAT DELIVERY" onclick="filterByStatus(this)">
                <div class="d-flex align-items-center gap-2 mb-2"><span class="bd-dot"></span><span class="bd-label"
                        style="margin:0">Dikirim Ulang</span></div>
                <div class="bd-num" id="bd-repeat">0</div>
            </div>
        </div>

        {{-- Filter --}}
        <div class="filter-bar">
            <div class="row g-2 align-items-center">
                <div class="col-md-4">
                    <div class="position-relative">
                        <i class="fas fa-search position-absolute"
                            style="left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:11px;"></i>
                        <input type="text" id="filter-search" placeholder="Cari AWB, order, atau penerima..."
                            style="padding-left:32px;" class="w-100">
                    </div>
                </div>
                <div class="col-md-2">
                    <select id="filter-cs" class="w-100">
                        <option value="">Semua CS</option>
                        @foreach ($customerServices as $cs)
                            <option value="{{ $cs->id }}">{{ $cs->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="filter-status" class="w-100">
                        <option value="">Semua Status</option>
                        <option value="IN TROUBLE">Paket Bermasalah</option>
                        <option value="FORCE MAJEURE">Kendala Alam</option>
                        <option value="REJECTED">Ditolak</option>
                        <option value="LOST OR BROKEN">Hilang / Rusak</option>
                        <option value="REPEAT DELIVERY">Dikirim Ulang</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="date" id="filter-start-date" class="w-100" title="Dari tanggal">
                </div>
                <div class="col-md-2">
                    <input type="date" id="filter-end-date" class="w-100" title="Sampai tanggal">
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="data-table">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>AWB / Resi</th>
                            <th>Penerima</th>
                            <th>Agen / Mitra</th>
                            <th>CS</th>
                            <th>Status</th>
                            <th>Kurir</th>
                            <th>Total</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                    <tbody id="prob-table-body">
                        <tr>
                            <td colspan="9">
                                <div class="text-center py-5 text-muted">
                                    <i class="fas fa-spinner fa-spin fa-2x mb-3 d-block"></i>
                                    <span class="small">Memuat data...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pag-wrap">
                <small class="text-muted" style="font-size:11px;" id="pagination-info">Menampilkan 0 dari 0</small>
                <div class="d-flex gap-1" id="pagination-container"></div>
            </div>
        </div>
    </div>

    {{-- Modal Hasil Pengecekan --}}
    <div class="modal fade modal-result" id="checkResultModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5><i class="fas fa-clipboard-check me-2"></i> Hasil Pengecekan Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="check-result-body"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            let currentPage = 1;
            let activeStatusFilter = '';

            const pillMap = {
                'IN TROUBLE': 'pill-trouble',
                'FORCE MAJEURE': 'pill-majeure',
                'REJECTED': 'pill-rejected',
                'LOST OR BROKEN': 'pill-lost',
                'REPEAT DELIVERY': 'pill-repeat',
            };

            const statusLabel = {
                'IN TROUBLE': 'Paket Bermasalah',
                'FORCE MAJEURE': 'Kendala Alam',
                'REJECTED': 'Ditolak',
                'LOST OR BROKEN': 'Hilang / Rusak',
                'REPEAT DELIVERY': 'Dikirim Ulang',
                'RETURNED': 'Retur Diterima',
                'RETURNED TO SENDER': 'Dikembalikan ke Pengirim',
                'COMPLETED': 'Selesai',
                'DELIVERED': 'Terkirim',
                'CANCELLED': 'Dibatalkan',
                'IN PROCESS': 'Sedang Diproses',
                'IN PROCESS RETURN': 'Proses Retur',
            };

            function t(s) {
                return statusLabel[s] || s;
            }

            const bdIds = {
                'IN TROUBLE': 'bd-trouble',
                'FORCE MAJEURE': 'bd-majeure',
                'REJECTED': 'bd-rejected',
                'LOST OR BROKEN': 'bd-lost',
                'REPEAT DELIVERY': 'bd-repeat',
            };

            const actorChip = {
                'pusat': {
                    label: 'Pusat',
                    cls: 'chip-pusat',
                    icon: 'fa-building'
                },
                'distributor': {
                    label: 'Distributor',
                    cls: 'chip-distrib',
                    icon: 'fa-truck-field'
                },
                'mitra': {
                    label: 'Mitra',
                    cls: 'chip-actor',
                    icon: 'fa-store'
                },
            };
            const actorMap = {
                'mitra_data': 'Mitra',
                'distributor_data': 'Distributor',
                'central_data': 'Pusat'
            };

            function actorBadge(actor, label) {
                const c = actorChip[actor?.type] || actorChip['mitra'];
                const name = actor?.name || '';
                const typeLabel = actorMap[label] || c.label;
                return `<span class="chip ${c.cls}"><i class="fas ${c.icon}"></i> ${typeLabel} ${name}</span>`;
            }

            // ─── LOAD ─────────────────────────
            function loadData(page = 1) {
                currentPage = page;
                const p = new URLSearchParams({
                    page,
                    limit: 15,
                    search: document.getElementById('filter-search').value,
                    customer_service_id: document.getElementById('filter-cs').value,
                    status: activeStatusFilter || document.getElementById('filter-status').value,
                    start_date: document.getElementById('filter-start-date').value,
                    end_date: document.getElementById('filter-end-date').value,
                });
                for (const [k, v] of [...p]) {
                    if (!v) p.delete(k);
                }

                fetch(`{{ route('checking.orders.problematic.data') }}?${p}`)
                    .then(r => r.json())
                    .then(res => {
                        if (!res.success) {
                            renderEmpty('Gagal memuat data');
                            return;
                        }

                        // Breakdown
                        const bd = res.breakdown;
                        for (const [s, id] of Object.entries(bdIds)) {
                            document.getElementById(id).textContent = bd[s] || 0;
                        }

                        const data = res.data;
                        if (!data.data || data.data.length === 0) {
                            renderEmpty('Tidak ada order bermasalah');
                            return;
                        }

                        let html = '';
                        data.data.forEach(o => {
                            const rcv = o.receiver;
                            const sh = o.shipment;
                            const lg = o.logistic;
                            const cs = o.cs_bonus?.customer_service;
                            const sn = sh?.status_name || '';
                            const pc = pillMap[sn] || 'pill-trouble';

                            html += `<tr>
                        <td>
                            <div class="fw-bold" style="color:var(--text-primary);font-size:13px;">#${o.id}</div>
                            <div style="font-size:10px;color:var(--text-muted);">${o.shipment_order_no || ''}</div>
                        </td>
                        <td><code style="font-size:11px;background:var(--surface-alt);padding:2px 7px;border-radius:4px;">${o.awb_number || ''}</code></td>
                        <td>
                            <div class="fw-semibold" style="font-size:12px;">${rcv?.name || ''}</div>
                            <div style="font-size:10px;color:var(--text-muted);">${rcv?.city || ''}${rcv?.district ? ', '+rcv.district : ''}</div>
                        </td>
                        <td>${actorBadge(o.actor, o.actor_label)}</td>
                        <td>${cs ? `<span class="chip chip-cs"><i class="fas fa-headset"></i> ${cs.name}</span>` : ''}</td>
                        <td><span class="pill ${pc}"><i class="fas fa-circle" style="font-size:5px;"></i> ${t(sn)}</span></td>
                        <td>
                            <div style="font-size:12px;font-weight:600;">${lg?.name || ''}</div>
                            <div style="font-size:10px;color:var(--text-muted);">${lg?.rate_name || ''}</div>
                        </td>
                        <td><div class="fw-bold" style="font-size:12px;">Rp ${fmt(o.total_payment || o.total || 0)}</div></td>
                        <td><span style="font-size:11px;color:var(--text-muted);">${fmtDate(o.created_at)}</span></td>
                    </tr>`;
                        });
                        document.getElementById('prob-table-body').innerHTML = html;
                        renderPag(data);
                    })
                    .catch(err => {
                        console.error(err);
                        renderEmpty('Error: ' + err.message);
                    });
            }

            function renderEmpty(msg) {
                document.getElementById('prob-table-body').innerHTML = `<tr><td colspan="9">
            <div class="empty-box"><i class="fas fa-inbox d-block"></i><h6>${msg}</h6>
            <p>Klik "Cek Semua Status" untuk memperbarui data dari Everpro.</p></div></td></tr>`;
            }

            function renderPag(d) {
                document.getElementById('pagination-info').textContent =
                    `Menampilkan ${d.from||0} – ${d.to||0} dari ${d.total}`;
                let h = '';
                if (d.last_page > 1) {
                    for (let i = 1; i <= d.last_page; i++) {
                        if (i === 1 || i === d.last_page || (i >= d.current_page - 2 && i <= d.current_page + 2))
                            h +=
                            `<button class="pg-btn ${i===d.current_page?'active':''}" onclick="window.__loadData(${i})">${i}</button>`;
                        else if (i === d.current_page - 3 || i === d.current_page + 3) h +=
                            `<span class="px-1" style="color:var(--text-muted);">…</span>`;
                    }
                }
                document.getElementById('pagination-container').innerHTML = h;
            }

            function fmtDate(s) {
                if (!s) return '';
                const d = new Date(s);
                return d.toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                });
            }

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

            // ─── FILTER ─────────────────────────
            window.filterByStatus = function(el) {
                const s = el.dataset.status,
                    was = el.classList.contains('active');
                document.querySelectorAll('.bd-card').forEach(c => c.classList.remove('active'));
                if (was) {
                    activeStatusFilter = '';
                    document.getElementById('filter-status').value = '';
                } else {
                    el.classList.add('active');
                    activeStatusFilter = s;
                    document.getElementById('filter-status').value = s;
                }
                loadData(1);
            };

            let dt;
            document.getElementById('filter-search').addEventListener('input', () => {
                clearTimeout(dt);
                dt = setTimeout(() => loadData(1), 400);
            });
            ['filter-cs', 'filter-status', 'filter-start-date', 'filter-end-date'].forEach(id => {
                document.getElementById(id).addEventListener('change', () => {
                    activeStatusFilter = document.getElementById('filter-status').value;
                    document.querySelectorAll('.bd-card').forEach(c => c.classList.toggle('active',
                        c.dataset.status === activeStatusFilter));
                    loadData(1);
                });
            });

            // ─── CEK SEMUA STATUS ─────────────────────────
            window.runCheck = function() {
                const btn = document.getElementById('btn-check-all');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengecek...';

                fetch(`{{ route('checking.orders.problematic.check') }}`)
                    .then(r => r.json())
                    .then(res => {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-rotate"></i> Cek Semua Status';

                        if (res.success) {
                            const s = res.summary;
                            const noChange = res.total_checked - (s.updated || 0) - (s.failed || 0);

                            let body =
                                `
                            <div class="row g-3 mb-4">
                                <div class="col-3">
                                    <div class="result-stat">
                                        <div class="rs-num" style="color:var(--text-primary)">${res.total_checked}</div>
                                        <div class="rs-label">Total Dicek</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="result-stat" style="border-color:#d1fae5;background:#f0fdf4;">
                                        <div class="rs-num" style="color:#16a34a">${s.updated || 0}</div>
                                        <div class="rs-label">Diperbarui</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="result-stat" style="border-color:#e0e7ff;background:#eef2ff;">
                                        <div class="rs-num" style="color:#4f46e5">${noChange}</div>
                                        <div class="rs-label">Tidak Berubah</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="result-stat" style="border-color:#fecaca;background:#fef2f2;">
                                        <div class="rs-num" style="color:#dc2626">${s.failed || 0}</div>
                                        <div class="rs-label">Gagal</div>
                                    </div>
                                </div>
                            </div>
                            <p style="font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:16px;">${res.message}</p>`;

                            // Updated table
                            if (res.details.updated && res.details.updated.length > 0) {
                                body +=
                                    `<div class="result-section-title" style="color:#16a34a;"><i class="fas fa-check-circle"></i> Berhasil Diperbarui (${s.updated})</div>`;
                                body +=
                                    `<div class="table-responsive"><table class="result-table">
                                    <thead><tr><th>Order</th><th>AWB</th><th>Status Lama</th><th>Status Baru</th><th>Tipe</th></tr></thead><tbody>`;
                                res.details.updated.forEach(u => {
                                    const badge = u.type === 'return' ? 'result-badge-return' :
                                        'result-badge-prob';
                                    const label = u.type === 'return' ? 'Retur' : 'Bermasalah';
                                    body += `<tr>
                                        <td class="fw-bold">#${u.order_id}</td>
                                        <td><code style="font-size:11px;">${u.awb_number || ''}</code></td>
                                        <td>${t(u.previous_status)}</td>
                                        <td class="fw-bold">${t(u.current_status)}</td>
                                        <td><span class="result-badge ${badge}">${label}</span></td>
                                    </tr>`;
                                });
                                body += '</tbody></table></div>';
                            }

                            // Failed table
                            if (res.details.failed && res.details.failed.length > 0) {
                                body +=
                                    `<div class="result-section-title" style="color:#dc2626;"><i class="fas fa-circle-xmark"></i> Gagal Dicek (${s.failed})</div>`;
                                body +=
                                    `<div class="table-responsive"><table class="result-table">
                                    <thead><tr><th>Order</th><th>Ref. No</th><th>AWB</th><th>Status</th><th>Alasan Gagal</th></tr></thead><tbody>`;
                                res.details.failed.forEach(f => {
                                    body += `<tr>
                                        <td class="fw-bold">#${f.order_id}</td>
                                        <td><code style="font-size:11px;">${f.shipment_order_no || ''}</code></td>
                                        <td><code style="font-size:11px;">${f.awb_number || ''}</code></td>
                                        <td>${f.status ? t(f.status) : ''}</td>
                                        <td style="color:#dc2626;font-size:12px;">${f.reason}</td>
                                    </tr>`;
                                });
                                body += '</tbody></table></div>';
                            }

                            document.getElementById('check-result-body').innerHTML = body;
                            new bootstrap.Modal(document.getElementById('checkResultModal')).show();
                            loadData(currentPage);
                        } else {
                            Swal.fire('Gagal', res.message, 'error');
                        }
                    })
                    .catch(err => {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-rotate"></i> Cek Semua Status';
                        Swal.fire('Terjadi Kesalahan', err.message, 'error');
                    });
            };

            window.__loadData = loadData;
            loadData(1);
        });
    </script>
@endpush