@extends('layouts.admin')

@section('title', 'Manajemen Pesanan')

@section('content')
    <!-- Dashboard Stats Grid -->
    @php
        $totalOrders = $orders->count();
        $totalRevenue = $orders->where('payment_status', 'settlement')->sum('grand_total');
        $pendingOrders = $orders->where('status', 'menunggu_pembayaran')->count();
        $processingOrders = $orders->where('status', 'diproses')->count();
    @endphp
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        <!-- Stat Card: Total Orders -->
        <div class="glass-card pro-shadow p-8 rounded-[35px] transition-base hover:-translate-y-1 relative overflow-hidden group">
            <span class="text-slate-600 text-[10px] font-bold uppercase tracking-widest mb-4 block">Total Pesanan</span>
            <div class="flex items-end justify-between">
                <h3 class="text-4xl font-heading font-bold text-slate-800">{{ $totalOrders }}</h3>
                <div class="w-12 h-12 bg-blue-500/10 text-blue-500 rounded-xl flex items-center justify-center text-lg transition-base group-hover:bg-blue-50 group-hover:text-white">
                    <i class="fas fa-receipt"></i>
                </div>
            </div>
            <p class="text-[9px] text-slate-500 mt-4 uppercase tracking-widest">+ Semua status transaksi</p>
        </div>

        <!-- Stat Card: Revenue -->
        <div class="glass-card pro-shadow p-8 rounded-[35px] transition-base hover:-translate-y-1 relative overflow-hidden group">
            <span class="text-slate-600 text-[10px] font-bold uppercase tracking-widest mb-4 block">Pendapatan Lunas</span>
            <div class="flex items-end justify-between">
                <h3 class="text-2xl font-heading font-bold text-emerald-600">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</h3>
                <div class="w-12 h-12 bg-emerald-500/10 text-emerald-500 rounded-xl flex items-center justify-center text-lg transition-base group-hover:bg-emerald-50 group-hover:text-white">
                    <i class="fas fa-wallet"></i>
                </div>
            </div>
            <p class="text-[9px] text-slate-500 mt-4 uppercase tracking-widest">+ Pembayaran berstatus settlement</p>
        </div>

        <!-- Stat Card: Menunggu Pembayaran -->
        <div class="glass-card pro-shadow p-8 rounded-[35px] transition-base hover:-translate-y-1 relative overflow-hidden group">
            <span class="text-slate-600 text-[10px] font-bold uppercase tracking-widest mb-4 block">Menunggu Bayar</span>
            <div class="flex items-end justify-between">
                <h3 class="text-4xl font-heading font-bold text-amber-600">{{ $pendingOrders }}</h3>
                <div class="w-12 h-12 bg-amber-500/10 text-amber-500 rounded-xl flex items-center justify-center text-lg transition-base group-hover:bg-amber-500 group-hover:text-white">
                    <i class="fas fa-hourglass-half"></i>
                </div>
            </div>
            <p class="text-[9px] text-slate-500 mt-4 uppercase tracking-widest">+ Transaksi belum diselesaikan</p>
        </div>

        <!-- Stat Card: Diproses -->
        <div class="glass-card pro-shadow p-8 rounded-[35px] transition-base hover:-translate-y-1 relative overflow-hidden group">
            <span class="text-slate-600 text-[10px] font-bold uppercase tracking-widest mb-4 block">Perlu Diproses</span>
            <div class="flex items-end justify-between">
                <h3 class="text-4xl font-heading font-bold text-indigo-600">{{ $processingOrders }}</h3>
                <div class="w-12 h-12 bg-indigo-500/10 text-indigo-500 rounded-xl flex items-center justify-center text-lg transition-base group-hover:bg-indigo-50 group-hover:text-white">
                    <i class="fas fa-box-open"></i>
                </div>
            </div>
            <p class="text-[9px] text-slate-500 mt-4 uppercase tracking-widest">+ Perlu verifikasi & kirim resi</p>
        </div>
    </div>

    <!-- Orders Table Section -->
    <div class="glass-card pro-shadow rounded-[35px] overflow-hidden mb-12">
        <div class="p-10 border-b border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <h4 class="font-heading font-bold text-xl text-slate-800">Daftar Transaksi</h4>
                <p class="text-xs text-slate-500 mt-1">Kelola status pesanan, pembayaran, dan pengiriman resi logistik</p>
            </div>
            
            <!-- Search Input -->
            <div class="relative w-full md:w-80">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <i class="fas fa-search text-slate-400 text-sm"></i>
                </span>
                <input type="text" id="orderSearch" onkeyup="filterOrders()" placeholder="Cari nomor pesanan atau nama..." class="w-full pl-10 pr-4 py-2.5 rounded-full border border-slate-200 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition-all text-xs bg-slate-50/50">
            </div>
        </div>

        <style>
            /* Hide scrollbar for Chrome, Safari and Opera */
            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }
            /* Hide scrollbar for IE, Edge and Firefox */
            .no-scrollbar {
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
        </style>

        <!-- Status Filter Tabs -->
        <div class="px-6 md:px-10 py-5 bg-slate-50/50 border-b border-slate-100 flex flex-nowrap md:flex-wrap gap-2 overflow-x-auto no-scrollbar whitespace-nowrap" style="-webkit-overflow-scrolling: touch;">
            <button onclick="filterByStatus('all')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-amber-500 text-white shadow-md shadow-amber-500/10" data-status="all">
                Semua
            </button>
            <button onclick="filterByStatus('menunggu_pembayaran')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100" data-status="menunggu_pembayaran">
                Belum Bayar ({{ $orders->where('status', 'menunggu_pembayaran')->count() }})
            </button>
            <button onclick="filterByStatus('diproses')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100" data-status="diproses">
                Perlu Pengiriman ({{ $orders->where('status', 'diproses')->count() }})
            </button>
            <button onclick="filterByStatus('dikirim')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100" data-status="dikirim">
                Dikirim ({{ $orders->where('status', 'dikirim')->count() }})
            </button>
            <button onclick="filterByStatus('selesai')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100" data-status="selesai">
                Selesai ({{ $orders->where('status', 'selesai')->count() }})
            </button>
            <button onclick="filterByStatus('dibatalkan')" class="status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100" data-status="dibatalkan">
                Dibatalkan ({{ $orders->where('status', 'dibatalkan')->count() }})
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left" id="ordersTable">
                <thead class="bg-slate-50/50 text-[10px] uppercase tracking-[0.2em] text-slate-600">
                    <tr>
                        <th class="px-8 py-5 font-bold">No. Pesanan</th>
                        <th class="px-8 py-5 font-bold">Pelanggan</th>
                        <th class="px-8 py-5 font-bold">Tanggal</th>
                        <th class="px-8 py-5 font-bold">Pengiriman</th>
                        <th class="px-8 py-5 font-bold">Total Pembayaran</th>
                        <th class="px-8 py-5 font-bold">Pembayaran</th>
                        <th class="px-8 py-5 font-bold text-center">Status Pesanan</th>
                        <th class="px-8 py-5 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($orders as $order)
                        <tr class="hover:bg-slate-50/50 transition-base order-row" data-status="{{ $order->status }}">
                            <!-- Order Number -->
                            <td class="px-8 py-6 font-bold text-slate-800 text-sm font-heading order-number-col">
                                {{ $order->order_number }}
                            </td>
                            
                            <!-- Customer Info -->
                            <td class="px-8 py-6 customer-name-col">
                                <div class="text-sm font-semibold text-slate-800">{{ $order->recipient_name }}</div>
                                <div class="text-[10px] text-slate-400">{{ $order->recipient_phone }}</div>
                            </td>

                            <!-- Date -->
                            <td class="px-8 py-6 text-xs text-slate-600">
                                {{ $order->created_at->format('d M Y, H:i') }} WIB
                            </td>

                            <!-- Shipping Service -->
                            <td class="px-8 py-6 text-xs">
                                <span class="font-bold text-slate-700">{{ strtoupper($order->courier) }}</span>
                                <div class="text-[10px] text-slate-400 mt-0.5">{{ $order->shipping_service }}</div>
                            </td>

                            <!-- Total -->
                            <td class="px-8 py-6 font-bold text-sm text-slate-800 font-heading">
                                Rp {{ number_format($order->grand_total, 0, ',', '.') }}
                            </td>

                            <!-- Payment Status -->
                            <td class="px-8 py-6 text-xs">
                                @if ($order->payment_status === 'settlement')
                                    <span class="inline-flex items-center space-x-1 font-bold text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-100">
                                        <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
                                        <span>Lunas</span>
                                    </span>
                                @elseif ($order->payment_status === 'pending')
                                    <span class="inline-flex items-center space-x-1 font-bold text-amber-600 bg-amber-50 px-2.5 py-1 rounded-full border border-amber-100">
                                        <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-ping"></span>
                                        <span>Pending</span>
                                    </span>
                                @else
                                    <span class="inline-flex items-center space-x-1 font-bold text-red-600 bg-red-50 px-2.5 py-1 rounded-full border border-red-100">
                                        <span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
                                        <span>{{ strtoupper($order->payment_status) }}</span>
                                    </span>
                                @endif
                            </td>

                            <!-- Order Status -->
                            <td class="px-8 py-6 text-center">
                                @if($order->status === 'menunggu_pembayaran')
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-amber-100 text-amber-700 border border-amber-200">
                                        Menunggu Bayar
                                    </span>
                                @elseif($order->status === 'diproses')
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 border border-blue-200">
                                        Diproses
                                    </span>
                                @elseif($order->status === 'dikirim')
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-purple-100 text-purple-700 border border-purple-200">
                                        Dikirim
                                    </span>
                                @elseif($order->status === 'selesai')
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-emerald-100 text-emerald-700 border border-emerald-200">
                                        Selesai
                                    </span>
                                @elseif($order->status === 'dibatalkan')
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-red-100 text-red-700 border border-red-200">
                                        Dibatalkan
                                    </span>
                                @else
                                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full bg-slate-100 text-slate-700">
                                        {{ $order->status }}
                                    </span>
                                @endif
                            </td>

                            <!-- Actions -->
                            <td class="px-8 py-6 text-right">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="w-10 h-10 inline-flex items-center justify-center rounded-xl bg-slate-100 text-slate-500 hover:bg-amber-500 hover:text-white transition-all shadow-sm">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-8 py-20 text-center text-slate-400">
                                <div class="flex flex-col items-center opacity-30">
                                    <i class="fas fa-inbox text-5xl mb-4 text-slate-300"></i>
                                    <p class="text-[10px] uppercase tracking-widest font-bold">Belum ada pesanan masuk</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script>
        let activeStatus = 'all';

        function filterByStatus(status) {
            activeStatus = status;
            
            // Update active tab styling
            const buttons = document.getElementsByClassName("status-tab-btn");
            for (let i = 0; i < buttons.length; i++) {
                if (buttons[i].getAttribute("data-status") === status) {
                    buttons[i].className = "status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-amber-500 text-white shadow-md shadow-amber-500/10";
                } else {
                    buttons[i].className = "status-tab-btn flex-shrink-0 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-base bg-white text-slate-500 hover:bg-slate-100";
                }
            }
            
            // Trigger actual row filtering
            applyCombinedFilters();
        }

        function filterOrders() {
            applyCombinedFilters();
        }

        function applyCombinedFilters() {
            const searchInput = document.getElementById("orderSearch");
            const filterText = searchInput.value.toUpperCase();
            const table = document.getElementById("ordersTable");
            const rows = table.getElementsByClassName("order-row");

            for (let i = 0; i < rows.length; i++) {
                const orderNumCol = rows[i].getElementsByClassName("order-number-col")[0];
                const nameCol = rows[i].getElementsByClassName("customer-name-col")[0];
                const rowStatus = rows[i].getAttribute("data-status");

                let matchesSearch = false;
                let matchesStatus = false;

                // 1. Search text match
                if (orderNumCol || nameCol) {
                    const txtValueNum = orderNumCol.textContent || orderNumCol.innerText;
                    const txtValueName = nameCol.textContent || nameCol.innerText;
                    if (txtValueNum.toUpperCase().indexOf(filterText) > -1 || txtValueName.toUpperCase().indexOf(filterText) > -1) {
                        matchesSearch = true;
                    }
                } else {
                    matchesSearch = true; // Fallback
                }

                // 2. Status match
                if (activeStatus === 'all' || rowStatus === activeStatus) {
                    matchesStatus = true;
                }

                // Combined visibility
                if (matchesSearch && matchesStatus) {
                    rows[i].style.display = "";
                } else {
                    rows[i].style.display = "none";
                }
            }
        }
    </script>
@endsection