@extends('template.desktop.app')

@section('title', 'Riwayat Log 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 {
            --log-primary: #dc2626;
        }

        /* ─── Summary Cards ──────── */
        .summary-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }

        .summary-pill {
            background: white;
            border-radius: 14px;
            padding: 16px 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            border: 1px solid #f1f5f9;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .summary-pill:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .summary-pill .sp-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: #1e293b;
            line-height: 1;
        }

        .summary-pill .sp-label {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #94a3b8;
            margin-top: 4px;
        }

        .summary-pill .sp-icon {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.8rem;
            color: #f1f5f9;
        }

        /* ─── Transition Flow ──────── */
        .transition-section {
            background: white;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            padding: 20px;
            margin-bottom: 20px;
        }

        .transition-section h6 {
            font-size: 13px;
            font-weight: 700;
            color: #334155;
            margin-bottom: 14px;
        }

        .flow-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .flow-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 8px 14px;
            transition: all 0.2s;
            cursor: default;
        }

        .flow-chip:hover {
            background: #fff7ed;
            border-color: #fed7aa;
        }

        .flow-chip .fc-from {
            background: #f1f5f9;
            color: #475569;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
        }

        .flow-chip .fc-arrow {
            color: #cbd5e1;
            font-size: 10px;
        }

        .flow-chip .fc-to {
            background: #fef2f2;
            color: #dc2626;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
        }

        .flow-chip .fc-count {
            background: var(--log-primary);
            color: white;
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 700;
            min-width: 24px;
            text-align: center;
        }

        /* ─── Filter ──────── */
        .filter-bar {
            background: white;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            padding: 12px 16px;
            margin-bottom: 16px;
        }

        .filter-bar input {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 9px 14px;
            font-size: 13px;
            background: #f8fafc;
            outline: none;
            transition: all 0.2s;
        }

        .filter-bar input:focus {
            border-color: var(--log-primary);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
            background: white;
        }

        /* ─── Table ──────── */
        .log-table-card {
            background: white;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }

        .log-table-card table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .log-table-card thead th {
            background: #fafafa;
            padding: 12px 16px;
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }

        .log-table-card tbody tr {
            transition: background 0.12s;
        }

        .log-table-card tbody tr:hover {
            background: #fef2f2;
        }

        .log-table-card tbody td {
            padding: 12px 16px;
            font-size: 13px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }

        /* ─── Status Pills in Table ──────── */
        .status-from {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            background: #f1f5f9;
            color: #475569;
        }

        .status-to {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            background: #fef2f2;
            color: #dc2626;
        }

        .status-arrow {
            color: #cbd5e1;
            margin: 0 4px;
            font-size: 10px;
        }

        .checked-by-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            background: #ede9fe;
            color: #5b21b6;
        }

        /* ─── Pagination ──────── */
        .pagination-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-top: 1px solid #f1f5f9;
        }

        .page-btn {
            width: 34px;
            height: 34px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: #64748b;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
        }

        .page-btn:hover {
            background: #f1f5f9;
        }

        .page-btn.active {
            background: var(--log-primary);
            color: white;
            border-color: var(--log-primary);
        }

        /* ─── Timeline dot ──────── */
        .td-time {
            position: relative;
            padding-left: 16px !important;
        }

        .td-time::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #cbd5e1;
        }

        .log-table-card tbody tr:first-child .td-time::before {
            background: var(--log-primary);
        }
    </style>
@endpush

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

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold text-dark mb-1">
                    <i class="fas fa-clock-rotate-left me-2" style="color:var(--log-primary)"></i>Riwayat Log Perubahan Status
                </h4>
                <p class="text-secondary small mb-0">Catatan setiap perubahan status order bermasalah dari pengecekan
                    Everpro.</p>
            </div>
            <a href="{{ route('checking.orders.problematic') }}"
                class="btn btn-sm btn-outline-dark rounded-pill px-4 fw-bold">
                <i class="fas fa-arrow-left me-1"></i> Kembali
            </a>
        </div>

        {{-- Summary Cards --}}
        <div class="summary-row" id="summary-row">
            <div class="summary-pill">
                <div class="sp-icon"><i class="fas fa-list-check"></i></div>
                <div class="sp-value" id="sm-total">0</div>
                <div class="sp-label">Total Log</div>
            </div>
            <div class="summary-pill">
                <div class="sp-icon"><i class="fas fa-bomb"></i></div>
                <div class="sp-value" id="sm-prev-count">0</div>
                <div class="sp-label">Status Asal</div>
            </div>
            <div class="summary-pill">
                <div class="sp-icon"><i class="fas fa-shuffle"></i></div>
                <div class="sp-value" id="sm-transition-count">0</div>
                <div class="sp-label">Pola Transisi</div>
            </div>
        </div>

        {{-- Transition Flow --}}
        <div class="transition-section">
            <h6><i class="fas fa-route me-1" style="color:var(--log-primary)"></i> Pola Transisi Status</h6>
            <div class="flow-grid" id="transition-cards">
                <span class="text-muted small">Memuat pola transisi...</span>
            </div>
        </div>

        {{-- Filter --}}
        <div class="filter-bar">
            <div class="position-relative" style="max-width:420px;">
                <i class="fas fa-search position-absolute"
                    style="left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px;"></i>
                <input type="text" id="filter-search-log" placeholder="Cari AWB atau nomor order..."
                    style="padding-left:36px;" class="w-100">
            </div>
        </div>

        {{-- Table --}}
        <div class="log-table-card">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th style="width:50px">#</th>
                            <th>Order</th>
                            <th>AWB / Resi</th>
                            <th>Penerima</th>
                            <th>Perubahan Status</th>
                            <th>Dicek Oleh</th>
                            <th>Catatan</th>
                            <th>Waktu</th>
                        </tr>
                    </thead>
                    <tbody id="log-table-body">
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="fas fa-spinner fa-spin fa-2x mb-3 d-block"></i> Memuat log...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pagination-wrapper">
                <small class="text-muted" id="pagination-info-log">Menampilkan 0 dari 0</small>
                <div class="d-flex gap-1" id="pagination-container-log"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentPage = 1;

            const statusLabelMap = {
                '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',
                'WAITING FOR DROP OFF': 'Menunggu Dikirim',
                'WAITING FOR PICK UP': 'Menunggu Pickup',
                'ONGOING TO RECEIVER': 'Sedang Dikirim',
                'WITH DELIVERY COURIER': 'Dibawa Kurir',
                'ARRIVED AT DESTINATION CITY': 'Sampai Kota Tujuan',
            };

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

            function loadLogs(page = 1) {
                currentPage = page;
                const params = new URLSearchParams({
                    page,
                    limit: 20,
                    search: document.getElementById('filter-search-log').value
                });
                for (const [k, v] of [...params]) {
                    if (!v) params.delete(k);
                }

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

                        // ── Summary
                        const total = res.total || 0;
                        const transitions = res.grouping?.by_transition || [];
                        const prevStatuses = res.grouping?.by_previous_status || [];
                        document.getElementById('sm-total').textContent = total;
                        document.getElementById('sm-prev-count').textContent = prevStatuses.length;
                        document.getElementById('sm-transition-count').textContent = transitions.length;

                        // ── Transition chips
                        if (transitions.length > 0) {
                            let chips = '';
                            transitions.forEach(tr => {
                                chips += `
                        <div class="flow-chip">
                            <span class="fc-from">${t(tr.from || '?')}</span>
                            <span class="fc-arrow"><i class="fas fa-arrow-right"></i></span>
                            <span class="fc-to">${t(tr.to)}</span>
                            <span class="fc-count">${tr.total}</span>
                        </div>`;
                            });
                            document.getElementById('transition-cards').innerHTML = chips;
                        } else {
                            document.getElementById('transition-cards').innerHTML =
                                '<span class="text-muted small">Belum ada data transisi.</span>';
                        }

                        // ── Table
                        const data = res.data;
                        if (!data.data || data.data.length === 0) {
                            document.getElementById('log-table-body').innerHTML = `
                        <tr><td colspan="8" class="text-center py-5">
                            <div style="padding:40px 0;">
                                <i class="fas fa-inbox fa-3x d-block mb-3" style="color:#e2e8f0"></i>
                                <h6 class="fw-bold text-muted">Belum Ada Log</h6>
                                <p class="small text-muted mb-0">Log akan muncul setelah pengecekan status order.</p>
                            </div>
                        </td></tr>`;
                            return;
                        }

                        let html = '';
                        data.data.forEach((log, i) => {
                            const receiver = log.order?.receiver;
                            html += `
                    <tr>
                        <td class="fw-bold text-muted" style="font-size:12px;">${data.from + i}</td>
                        <td>
                            <div class="fw-bold text-dark" style="font-size:13px;">#${log.order_id}</div>
                            <div class="text-muted" style="font-size:10px;">${log.shipment_order_no || ''}</div>
                        </td>
                        <td><code class="bg-light px-2 py-1 rounded" style="font-size:11px;">${log.awb_number || ''}</code></td>
                        <td>
                            <div class="fw-semibold" style="font-size:12px;">${receiver?.name || ''}</div>
                            <div class="text-muted" style="font-size:10px;">${receiver?.city || ''}</div>
                        </td>
                        <td>
                            <span class="status-from">${t(log.previous_status || '?')}</span>
                            <i class="fas fa-arrow-right status-arrow"></i>
                            <span class="status-to">${t(log.current_status)}</span>
                        </td>
                        <td>
                            ${log.checked_by ? `<span class="checked-by-badge"><i class="fas fa-user"></i> ${log.checked_by}</span>` : '<span class="text-muted small">Sistem</span>'}
                        </td>
                        <td><span class="text-muted" style="font-size:12px;">${log.notes || ''}</span></td>
                        <td class="td-time"><span class="text-muted" style="font-size:11px;">${formatDate(log.created_at)}</span></td>
                    </tr>`;
                        });
                        document.getElementById('log-table-body').innerHTML = html;

                        // ── Pagination
                        document.getElementById('pagination-info-log').textContent =
                            `Menampilkan ${data.from || 0} – ${data.to || 0} dari ${data.total}`;
                        let pHtml = '';
                        if (data.last_page > 1) {
                            for (let i = 1; i <= data.last_page; i++) {
                                if (i === 1 || i === data.last_page || (i >= data.current_page - 2 && i <= data
                                        .current_page + 2)) {
                                    pHtml +=
                                        `<button class="page-btn ${i === data.current_page ? 'active' : ''}" onclick="window.__loadLogs(${i})">${i}</button>`;
                                } else if (i === data.current_page - 3 || i === data.current_page + 3) {
                                    pHtml += `<span class="px-1 text-muted">...</span>`;
                                }
                            }
                        }
                        document.getElementById('pagination-container-log').innerHTML = pHtml;
                    })
                    .catch(err => console.error(err));
            }

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

            let debounceTimer;
            document.getElementById('filter-search-log').addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => loadLogs(1), 400);
            });

            window.__loadLogs = loadLogs;
            loadLogs(1);
        });
    </script>
@endpush