<x-app-layout>
    <x-slot name="header">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');
            .dash-header-title {
                font-family: 'DM Sans', sans-serif;
                font-weight: 800;
                font-size: 1.2rem;
                letter-spacing: -0.01em;
                color: #0a0a0a;
                text-transform: uppercase;
            }
        </style>
        <h2 class="dash-header-title">Daftar Pesanan</h2>
    </x-slot>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

        * {
            font-family: 'DM Sans', sans-serif;
        }

        .kurir-list-wrap { 
            font-family: 'DM Sans', sans-serif; 
            background: #f6f8fb; 
            min-height: 100vh; 
        }
        .kurir-list-inner { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 40px 32px; 
        }

        /* ── ALERT ── */
        .kurir-list-alert {
            padding: 16px 28px;
            margin-bottom: 32px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 16px;
            background: #fff;
            border-left: 4px solid;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        .kurir-list-alert-success { 
            border-left-color: #0a0a0a; 
            color: #0a0a0a; 
            background: #ffffff;
        }

        /* ── TABS (Rounded, Black background, White text for both) ── */
        .kurir-list-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 32px;
            background: transparent;
            padding: 0;
        }
        .kurir-list-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 28px;
            background: #0a0a0a;
            border-radius: 60px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: none;
            text-decoration: none;
            color: #ffffff;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .kurir-list-tab.active {
            background: #0a0a0a;
            color: #ffffff;
            opacity: 1;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .kurir-list-tab:hover:not(.active) {
            background: #2a2a2a;
            transform: translateY(-1px);
        }
        .kurir-list-tab-badge {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            color: #cccccc;
            background: rgba(255,255,255,0.2);
            padding: 2px 8px;
            border-radius: 40px;
        }
        .kurir-list-tab.active .kurir-list-tab-badge {
            color: #ffffff;
            background: rgba(255,255,255,0.25);
        }

        /* ── CARD ── */
        .kurir-list-card {
            background: #fff;
            border: 1px solid #eef2f6;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        }

        /* ── ORDER ROW ── */
        .kurir-list-row {
            padding: 24px 28px;
            border-bottom: 1px solid #f0f3f9;
            transition: background 0.2s;
        }
        .kurir-list-row:last-child { border-bottom: none; }
        .kurir-list-row:hover { background: #fafcff; }

        .kurir-list-row-inner {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }

        .kurir-list-order-number {
            font-family: 'DM Sans', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            color: #0a0a0a;
            text-decoration: none;
            border-bottom: 1.5px solid transparent;
            transition: border-color 0.2s;
        }
        .kurir-list-order-number:hover { 
            border-bottom-color: #0a0a0a; 
        }

        .kurir-list-date {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #6c7a91;
            margin-top: 6px;
        }

        .kurir-list-address {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: #4a5568;
            line-height: 1.6;
            margin-top: 12px;
        }
        .kurir-list-address strong {
            color: #0a0a0a;
            font-weight: 800;
        }

        /* ── BADGES ── */
        .kurir-list-badge {
            display: inline-block;
            padding: 6px 18px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            border-radius: 40px;
            margin-top: 12px;
        }
        .kurir-list-badge-assigned {
            background: #f1f5f9;
            color: #1e293b;
        }
        .kurir-list-badge-picked_up {
            background: #eef2ff;
            color: #1e40af;
        }
        .kurir-list-badge-delivered {
            background: #e6f7ec;
            color: #15803d;
        }

        .kurir-list-resi {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            color: #3b4b66;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            padding: 5px 14px;
            border-radius: 40px;
        }

        /* ── ACTION BUTTON (Rounded) ── */
        .kurir-list-detail-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: none;
            color: #0a0a0a;
            background: #f1f5f9;
            text-decoration: none;
            padding: 8px 20px;
            border-radius: 60px;
            transition: all 0.2s ease;
            flex-shrink: 0;
            border: 1px solid #e2e8f0;
        }
        .kurir-list-detail-btn:hover {
            background: #0a0a0a;
            color: #ffffff;
            border-color: #0a0a0a;
            transform: translateY(-1px);
        }

        /* ── EMPTY STATE ── */
        .kurir-list-empty {
            padding: 80px 32px;
            text-align: center;
        }
        .kurir-list-empty-title {
            font-family: 'DM Sans', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 8px;
        }
        .kurir-list-empty-desc {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: #94a3b8;
        }

        /* ── PAGINATION (Rounded) ── */
        .kurir-list-pagination {
            margin-top: 32px;
        }
        .kurir-list-pagination nav {
            display: flex;
            justify-content: center;
        }
        .kurir-list-pagination .pagination {
            display: flex;
            gap: 8px;
            list-style: none;
            padding: 0;
        }
        .kurir-list-pagination .page-item .page-link {
            font-family: 'DM Sans', sans-serif;
            font-weight: 600;
            padding: 8px 14px;
            border-radius: 60px;
            color: #0a0a0a;
            background: #fff;
            border: 1px solid #e2e8f0;
            text-decoration: none;
            transition: all 0.2s;
        }
        .kurir-list-pagination .page-item.active .page-link {
            background: #0a0a0a;
            color: #fff;
            border-color: #0a0a0a;
        }
        .kurir-list-pagination .page-item .page-link:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .kurir-list-inner {
                padding: 24px 16px;
            }
            .kurir-list-row {
                padding: 18px 20px;
            }
            .kurir-list-row-inner {
                flex-direction: column;
            }
            .kurir-list-detail-btn {
                align-self: flex-start;
            }
            .kurir-list-tabs {
                gap: 10px;
                flex-wrap: wrap;
            }
            .kurir-list-tab {
                padding: 8px 20px;
                font-size: 0.75rem;
            }
        }
    </style>

    <div class="kurir-list-wrap">
        <div class="kurir-list-inner">

            {{-- Alert --}}
            @if(session('success'))
                <div class="kurir-list-alert kurir-list-alert-success">{{ session('success') }}</div>
            @endif

            {{-- Tabs: both black background, white text, rounded --}}
            <div class="kurir-list-tabs">
                <a href="{{ route('kurir.orders.index', ['status'=>'aktif']) }}"
                   class="kurir-list-tab {{ $activeTab === 'aktif' ? 'active' : '' }}">
                    Aktif
                    @if($counts['aktif'] > 0)
                        <span class="kurir-list-tab-badge">{{ $counts['aktif'] }}</span>
                    @endif
                </a>
                <a href="{{ route('kurir.orders.index', ['status'=>'selesai']) }}"
                   class="kurir-list-tab {{ $activeTab === 'selesai' ? 'active' : '' }}">
                    Selesai
                    @if($counts['selesai'] > 0)
                        <span class="kurir-list-tab-badge">{{ $counts['selesai'] }}</span>
                    @endif
                </a>
            </div>

            {{-- List --}}
            <div class="kurir-list-card">
                @forelse($orders as $order)
                <div class="kurir-list-row">
                    <div class="kurir-list-row-inner">
                        <div style="flex: 1;">
                            <a href="{{ route('kurir.orders.show', $order->id) }}" class="kurir-list-order-number">
                                #{{ $order->order_number }}
                            </a>
                            <div class="kurir-list-date">{{ $order->created_at->format('d M Y, H:i') }} WIB</div>
                            <div class="kurir-list-address">
                                <strong>{{ $order->recipient_name }}</strong> · {{ $order->recipient_phone }}<br>
                                {{ $order->address_detail ?? $order->shipping_address }}<br>
                                {{ $order->village ?? '' }}, {{ $order->district ?? '-' }}, {{ $order->city ?? '-' }}, {{ $order->province ?? '-' }}
                            </div>
                            <div>
                                <span class="kurir-list-badge kurir-list-badge-{{ $order->courier_task_status }}">
                                    @if($order->courier_task_status === 'assigned') Perlu Diambil
                                    @elseif($order->courier_task_status === 'picked_up') Dalam Perjalanan
                                    @elseif($order->courier_task_status === 'delivered') Terkirim
                                    @endif
                                </span>
                                @if($order->tracking_number)
                                    <span class="kurir-list-resi">
                                        📦 {{ $order->tracking_number }}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div>
                            <a href="{{ route('kurir.orders.show', $order->id) }}" class="kurir-list-detail-btn">
                                Detail
                            </a>
                        </div>
                    </div>
                </div>
                @empty
                <div class="kurir-list-empty">
                    <div class="kurir-list-empty-title">
                        @if($activeTab === 'aktif') Tidak ada pesanan aktif
                        @else Belum ada pengiriman selesai
                        @endif
                    </div>
                    <div class="kurir-list-empty-desc">
                        @if($activeTab === 'aktif') Hubungi admin jika ada pesanan yang belum ditugaskan
                        @else Pesanan yang sudah selesai akan muncul di sini
                        @endif
                    </div>
                </div>
                @endforelse
            </div>

            {{-- Pagination --}}
            @if($orders->hasPages())
                <div class="kurir-list-pagination">
                    {{ $orders->links() }}
                </div>
            @endif

        </div>
    </div>
</x-app-layout>