@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<div>
    <!-- Emergency Alert Banner (Hidden) -->
    <!--
    <div class="mb-8 bg-error-container text-on-error-container p-4 rounded-xl flex items-center justify-between pulse-red border border-error/20">
        <div class="flex items-center gap-4">
            <div class="w-10 h-10 bg-error rounded-full flex items-center justify-center text-on-error shrink-0">
                <span class="material-symbols-outlined">warning</span>
            </div>
            <div>
                <p class="font-headline-md text-headline-md font-bold leading-tight">🚨 DARURAT AKTIF: Mitra Budi — Jl. Kemang (5 menit lalu)</p>
                <p class="font-body-md text-body-md opacity-90">Sinyal SOS terdeteksi. Silakan hubungi aparat terdekat atau koordinasikan tim lapangan.</p>
            </div>
        </div>
        <button class="bg-error text-on-error px-6 py-2 rounded-lg font-bold hover:bg-opacity-90 transition-all active:scale-95 shadow-lg shrink-0">Tangani Sekarang</button>
    </div>
    -->

    <!-- KPI Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- KPI 1 -->
        <a href="{{ route('admin.pesanan-live') }}" class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant hover:shadow-lg hover:border-primary/50 transition-all block group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-primary-container/20 rounded-xl group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined text-primary">shopping_bag</span>
                </div>
            </div>
            <p class="text-on-surface-variant font-label-md text-label-md">Pesanan Hari Ini</p>
            <div class="flex items-center justify-between">
                <h3 class="font-headline-lg text-headline-lg text-on-surface">{{ $todayOrders }}</h3>
                <span class="material-symbols-outlined text-outline group-hover:text-primary group-hover:translate-x-1 transition-all">arrow_forward</span>
            </div>
        </a>

        <!-- KPI 2 -->
        <a href="{{ route('admin.manajemen-mitra', ['status' => 'pending']) }}" class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant hover:shadow-lg hover:border-primary/50 transition-all block group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-tertiary-container/20 rounded-xl group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined text-tertiary">verified_user</span>
                </div>
                @if($pendingKycCount > 0)
                <span class="text-xs font-bold text-error bg-error-container px-2 py-1 rounded">!! High Priority</span>
                @endif
            </div>
            <p class="text-on-surface-variant font-label-md text-label-md">Pending KYC</p>
            <div class="flex items-center justify-between">
                <h3 class="font-headline-lg text-headline-lg text-on-surface">{{ $pendingKycCount }}</h3>
                <span class="material-symbols-outlined text-outline group-hover:text-primary group-hover:translate-x-1 transition-all">arrow_forward</span>
            </div>
        </a>

        <!-- KPI 3 -->
        <a href="{{ route('admin.manajemen-mitra', ['status' => 'approved']) }}" class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant hover:shadow-lg hover:border-primary/50 transition-all block group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-[#E1F2E8] rounded-xl text-[#1E5128] group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person_pin_circle</span>
                </div>
                <div class="flex items-center gap-1">
                    <div class="w-2 h-2 bg-[#4CAF50] rounded-full animate-pulse"></div>
                    <span class="text-xs font-bold text-[#4CAF50]">Live</span>
                </div>
            </div>
            <p class="text-on-surface-variant font-label-md text-label-md">Mitra Aktif</p>
            <div class="flex items-center justify-between">
                <h3 class="font-headline-lg text-headline-lg text-on-surface">{{ $activeMitras }}</h3>
                <span class="material-symbols-outlined text-outline group-hover:text-primary group-hover:translate-x-1 transition-all">arrow_forward</span>
            </div>
        </a>

        <!-- KPI 4 -->
        <a href="{{ route('admin.keuangan') }}" class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant hover:shadow-lg hover:border-primary/50 transition-all block group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-[#F0E6FF] rounded-xl text-[#7E3AF2] group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined">payments</span>
                </div>
            </div>
            <p class="text-on-surface-variant font-label-md text-label-md">GMV Hari Ini</p>
            <div class="flex items-center justify-between">
                <h3 class="font-headline-lg text-headline-lg text-on-surface">Rp {{ number_format($todayGmv, 0, ',', '.') }}</h3>
                <span class="material-symbols-outlined text-outline group-hover:text-primary group-hover:translate-x-1 transition-all">arrow_forward</span>
            </div>
        </a>
    </div>

    <!-- Layout Content Main (Exact 70% / 30% Split) -->
    <div class="flex flex-col lg:flex-row gap-8">

        <!-- Left Charts & Table Column (70%) -->
        <div class="w-full lg:w-[70%] space-y-8">

            <!-- Charts Container -->
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                <!-- Line Chart -->
                <div class="md:col-span-3 bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant h-80 flex flex-col">
                    <div class="flex justify-between items-center mb-6">
                        <h4 class="font-headline-md text-headline-md text-on-surface">24h Order Trends</h4>
                    </div>
                    <div class="flex-1 w-full bg-surface-container-low rounded-xl relative overflow-hidden p-4">
                        <canvas id="trendChart"></canvas>
                    </div>
                </div>

                <!-- Donut Status Chart -->
                <div class="md:col-span-2 bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant h-80 flex flex-col">
                    <h4 class="font-headline-md text-headline-md text-on-surface mb-6">Order Status</h4>
                    <div class="flex-1 flex items-center justify-center relative min-h-0">
                        <div class="relative w-full h-full max-w-[160px] max-h-[160px]">
                            <canvas id="statusDonutChart"></canvas>
                        </div>
                        <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                            <p class="text-2xl font-bold mt-1">{{ $orderStatus['total'] }}</p>
                            <p class="text-[10px] uppercase font-bold text-on-surface-variant">Total</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-center gap-3 mt-4">
                        <div class="flex items-center gap-1.5">
                            <div class="w-2 h-2 rounded-full bg-primary"></div><span class="text-[10px] font-bold">On Process</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <div class="w-2 h-2 rounded-full bg-tertiary"></div><span class="text-[10px] font-bold">Waiting</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <div class="w-2 h-2 rounded-full bg-surface-variant"></div><span class="text-[10px] font-bold">Completed</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Orders Table (Exact Template) -->
            <div class="bg-surface-container-lowest rounded-2xl border border-outline-variant overflow-hidden">
                <div class="p-6 border-b border-outline-variant flex justify-between items-center">
                    <h4 class="font-headline-md text-headline-md text-on-surface"><b>Pesanan Terbaru</b></h4>
                    <a href="{{ route('admin.services.index') }}" class="text-primary font-bold text-sm hover:underline">Lihat Daftar Layanan</a>
                </div>
                <div class="overflow-x-auto pb-2">
                    <table class="w-full text-left text-[11px] whitespace-nowrap min-w-[800px]">
                        <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[10px] uppercase tracking-wider">
                            <tr>
                                <th class="px-4 py-3 w-24">Order Code</th>
                                <th class="px-4 py-3">Konsumen</th>
                                <th class="px-4 py-3">Mitra</th>
                                <th class="px-4 py-3 w-32">Layanan</th>
                                <th class="px-4 py-3 w-32">Status</th>
                                <th class="px-4 py-3 w-24">Waktu</th>
                                <th class="px-4 py-3 w-20 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-outline-variant">
                            @forelse($recentOrders as $order)
                            <tr class="hover:bg-surface-variant/20 transition-colors">
                                <td class="px-4 py-3 font-bold text-primary">#{{ $order->order_number }}</td>
                                <td class="px-4 py-3">{{ $order->user ? $order->user->name : 'N/A' }}</td>
                                <td class="px-4 py-3">{{ $order->mitra ? $order->mitra->name : 'Mencari...' }}</td>
                                <td class="px-4 py-3"><span class="px-2.5 py-1 bg-primary-container/20 text-primary rounded-full text-[10px] font-bold">{{ $order->service ? $order->service->name : 'Layanan' }}</span></td>
                                <td class="px-4 py-3">
                                    @if($order->status === 'searching')
                                    <span class="flex items-center gap-1 text-[#E8A838] font-bold text-[10px]">
                                        <div class="w-1.5 h-1.5 rounded-full bg-[#E8A838] animate-pulse"></div> Mencari
                                    </span>
                                    @elseif($order->status === 'in_progress')
                                    <span class="flex items-center gap-1 text-primary font-bold text-[10px]">
                                        <div class="w-1.5 h-1.5 rounded-full bg-primary"></div> Berlangsung
                                    </span>
                                    @elseif($order->status === 'completed')
                                    <span class="flex items-center gap-1 text-[#4CAF50] font-bold text-[10px]">
                                        <div class="w-1.5 h-1.5 rounded-full bg-[#4CAF50]"></div> Selesai
                                    </span>
                                    @elseif($order->status === 'cancelled')
                                    <span class="flex items-center gap-1 text-error font-bold text-[10px]">
                                        <div class="w-1.5 h-1.5 rounded-full bg-error"></div> Dibatalkan
                                    </span>
                                    @else
                                    <span class="flex items-center gap-1 text-primary font-bold text-[10px]">
                                        <div class="w-1.5 h-1.5 rounded-full bg-primary"></div> {{ ucfirst($order->status) }}
                                    </span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">{{ $order->created_at ? $order->created_at->format('H:i') : '-' }}</td>
                                <td class="px-4 py-3 text-center">
                                    <button class="p-2 text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined text-sm">more_vert</span></button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="px-5 py-3.5 text-center text-on-surface-variant">Belum ada pesanan terbaru.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <!-- Right KYC & Secondary Column (30%) -->
        <div class="w-full lg:w-[30%] space-y-6">

            <!-- KYC Antrian Widget (Exact Template) -->
            <div class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant flex flex-col">
                <div class="flex items-center justify-between mb-6">
                    <h4 class="font-headline-md text-headline-md text-on-surface">KYC Antrian</h4>
                    <span class="bg-error text-on-error px-2 py-0.5 rounded text-[10px] font-bold">{{ $pendingKycCount }} PENDING</span>
                </div>
                <div class="space-y-4">
                    @forelse($kycQueue as $mitra)
                    <a href="{{ route('admin.manajemen-mitra', ['status' => 'pending', 'search' => $mitra->email]) }}" class="p-4 bg-surface-container-low rounded-xl border border-outline-variant hover:border-primary hover:shadow-sm transition-all block group">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-lg group-hover:scale-105 transition-transform">
                                {{ strtoupper(substr($mitra->name, 0, 1)) }}
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-label-md text-label-md text-on-surface font-bold truncate">{{ $mitra->name }}</p>
                                <p class="text-[11px] text-on-surface-variant font-medium">Applied: {{ $mitra->created_at->diffForHumans() }}</p>
                            </div>
                            <span class="material-symbols-outlined text-outline group-hover:text-primary group-hover:translate-x-1 transition-all">arrow_forward</span>
                        </div>
                    </a>
                    @empty
                    <div class="p-4 text-center text-sm text-on-surface-variant">
                        Tidak ada antrian KYC.
                    </div>
                    @endforelse
                </div>
                <a href="{{ route('admin.manajemen-mitra', ['status' => 'pending']) }}" class="mt-6 w-full py-3 border border-primary text-primary font-bold rounded-xl hover:bg-primary hover:text-white transition-all flex items-center justify-center gap-2 text-sm shadow-sm active:scale-98">
                    <span>Tinjau Semua Antrian</span>
                    <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
                </a>
            </div>

            <!-- System Performance Quick Look (Exact Template) -->
            <div class="bg-surface-container-lowest p-6 rounded-2xl border border-outline-variant">
                <h4 class="font-label-md text-label-md text-on-surface mb-4 uppercase tracking-widest opacity-60">System Health</h4>
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-medium">App Latency</span>
                        <span class="text-xs font-bold text-[#4CAF50]">42ms</span>
                    </div>
                    <div class="w-full h-1 bg-surface-container-low rounded-full overflow-hidden">
                        <div class="h-full bg-[#4CAF50] w-[85%]"></div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-medium">Server Uptime</span>
                        <span class="text-xs font-bold text-[#4CAF50]">99.98%</span>
                    </div>
                    <div class="w-full h-1 bg-surface-container-low rounded-full overflow-hidden">
                        <div class="h-full bg-[#4CAF50] w-[99%]"></div>
                    </div>
                </div>
            </div>

            <!-- Advertising/Promo Card (Exact Template) -->
            <div class="relative bg-gradient-primary rounded-2xl p-6 text-on-primary overflow-hidden group">
                <div class="relative z-10">
                    <h5 class="font-headline-md text-headline-md font-bold mb-2">Ekspansi Wilayah</h5>
                    <p class="text-sm opacity-90 mb-4 leading-relaxed">Cek potensi pasar baru di area Tangerang Selatan berdasarkan request konsumen tertinggi.</p>
                    <button class="bg-tertiary text-on-tertiary px-4 py-2 rounded-lg text-xs font-bold hover:shadow-xl transition-all active:scale-95">Lihat Analitik</button>
                </div>
                <span class="material-symbols-outlined absolute -bottom-4 -right-4 text-8xl opacity-10 rotate-12 group-hover:rotate-0 transition-transform duration-500">map</span>
            </div>

        </div>

    </div>
    <!-- Chart.js & Dashboard Script -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const trendCtx = document.getElementById("trendChart");
            if (trendCtx && typeof Chart !== "undefined") {
                const ctx = trendCtx.getContext("2d");
                const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                gradient.addColorStop(0, "rgba(79, 55, 138, 0.35)");
                gradient.addColorStop(1, "rgba(79, 55, 138, 0.0)");
                
                new Chart(ctx, {
                    type: "line",
                    data: {
                        labels: {!! json_encode($chartLabels) !!},
                        datasets: [{
                            label: "Pesanan",
                            data: {!! json_encode($chartData) !!},
                            borderColor: "#4f378a",
                            borderWidth: 3,
                            backgroundColor: gradient,
                            fill: true,
                            tension: 0.4,
                            pointBackgroundColor: "#4f378a",
                            pointRadius: 4,
                            pointHoverRadius: 6
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                            y: { grid: { color: "#f2ecf4" }, ticks: { font: { size: 11 }, precision: 0 } }
                        }
                    }
                });
            }
            
            const donutCtx = document.getElementById("statusDonutChart");
            if (donutCtx && typeof Chart !== "undefined") {
                const ctx = donutCtx.getContext("2d");
                new Chart(ctx, {
                    type: "doughnut",
                    data: {
                        labels: ["On Process", "Waiting", "Completed"],
                        datasets: [{
                            data: [{{ $orderStatus['on_process'] }}, {{ $orderStatus['waiting'] }}, {{ $orderStatus['completed'] }}],
                            backgroundColor: ["#4f378a", "#c9a74d", "#e6e0e9"],
                            borderWidth: 0,
                            hoverOffset: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: "75%",
                        plugins: { legend: { display: false } }
                    }
                });
            }
        });
    </script>
@endsection