@extends('layouts.ekspedisi')

@section('title', 'Dashboard Ekspedisi')
@section('page-title', 'Dashboard')

@section('content')

{{-- Flash message --}}
@if(session('success'))
    <div class="mb-4 p-4 rounded-xl bg-green-100 text-green-700 flex items-center gap-2">
        <i class="bi bi-check-circle-fill"></i> {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="mb-4 p-4 rounded-xl bg-red-100 text-red-700 flex items-center gap-2">
        <i class="bi bi-exclamation-triangle-fill"></i> {{ session('error') }}
    </div>
@endif

{{-- Greeting --}}
<div class="flex flex-wrap justify-between items-center mb-6 gap-3">
    <div>
        <h2 class="text-2xl font-bold text-gray-800">
            Halo, {{ auth()->user()->name ?? 'Kurir' }} 👋
        </h2>
        <p class="text-gray-500 text-sm">Ringkasan pengiriman hari ini</p>
    </div>
    <div id="currentDate" class="text-sm bg-white px-4 py-2 rounded-lg shadow border text-gray-500"></div>
</div>

{{-- Stat Cards --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-5 mb-6">

    <div class="bg-white p-5 rounded-xl shadow border">
        <div class="flex items-center justify-between">
            <i class="bi bi-box-seam text-blue-500 text-xl"></i>
            <span class="text-xs text-gray-400">Masuk</span>
        </div>
        <h3 class="text-2xl font-bold mt-3 text-gray-800">{{ $pesananMasuk }}</h3>
        <p class="text-xs text-gray-500">Belum diambil kurir</p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow border">
        <div class="flex items-center justify-between">
            <i class="bi bi-truck text-orange-500 text-xl"></i>
            <span class="text-xs text-gray-400">Proses</span>
        </div>
        <h3 class="text-2xl font-bold mt-3 text-gray-800">{{ $dalamPengiriman }}</h3>
        <p class="text-xs text-gray-500">Sedang di jalan</p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow border">
        <div class="flex items-center justify-between">
            <i class="bi bi-check2-circle text-green-500 text-xl"></i>
            <span class="text-xs text-gray-400">Selesai</span>
        </div>
        <h3 class="text-2xl font-bold mt-3 text-gray-800">{{ $terkirim }}</h3>
        <p class="text-xs text-gray-500">Terkirim hari ini</p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow border">
        <div class="flex items-center justify-between">
            <i class="bi bi-exclamation-triangle text-red-500 text-xl"></i>
            <span class="text-xs text-gray-400">Error</span>
        </div>
        <h3 class="text-2xl font-bold mt-3 text-gray-800">{{ $bermasalah }}</h3>
        <p class="text-xs {{ $bermasalah > 0 ? 'text-red-500' : 'text-gray-500' }}">
            {{ $bermasalah > 0 ? 'Perlu ditindak' : 'Tidak ada masalah' }}
        </p>
    </div>

</div>

{{-- Progress --}}
@php
    $target = 20;
    $pct = $target > 0 ? min(100, round($terkirim / $target * 100)) : 0;
@endphp

<div class="bg-white p-6 rounded-xl shadow border mb-6">
    <div class="flex justify-between mb-3">
        <h3 class="font-semibold text-gray-700">Target Harian</h3>
        <span class="text-sm text-gray-500">Target: {{ $target }}</span>
    </div>

    <div class="mb-4">
        <div class="flex justify-between text-sm mb-1">
            <span>Terkirim</span>
            <span>{{ $terkirim }}/{{ $target }}</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $pct }}%"></div>
        </div>
    </div>

    <div>
        <div class="flex justify-between text-sm mb-1">
            <span>Progress</span>
            <span>{{ $pct }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-green-500 h-2 rounded-full" style="width: {{ $pct }}%"></div>
        </div>
    </div>
</div>

{{-- Grid Content --}}
<div class="grid md:grid-cols-3 gap-6">

    {{-- Tabel --}}
    <div class="md:col-span-2 bg-white rounded-xl shadow border">

        <div class="flex justify-between items-center p-4 border-b">
            <h3 class="font-semibold text-gray-700">Pesanan Perlu Diambil</h3>
        </div>

        @if($pesanans->isEmpty())
            <div class="p-6 text-center text-gray-500">
                Tidak ada pesanan
            </div>
        @else
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="p-3 text-left">ID</th>
                    <th>Penerima</th>
                    <th>Tujuan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($pesanans as $p)
                <tr class="border-t">
                    <td class="p-3 font-semibold text-blue-600">#{{ $p->id }}</td>
                    <td>{{ $p->user->name ?? '-' }}</td>
                    <td>{{ $p->kota ?? '-' }}</td>
                    <td>
                        <span class="px-2 py-1 rounded-full text-xs
                            {{ $p->status == 'diproses' ? 'bg-yellow-100 text-yellow-600' : '' }}
                            {{ $p->status == 'dikirim' ? 'bg-blue-100 text-blue-600' : '' }}
                            {{ $p->status == 'selesai' ? 'bg-green-100 text-green-600' : '' }}">
                            {{ $p->status }}
                        </span>
                    </td>
                    <td class="p-2">
                        @if($p->status === 'diproses')
                            <form method="POST" action="{{ route('ekspedisi.ambil', $p->id) }}">
                                @csrf
                                <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded-lg">
                                    Ambil
                                </button>
                            </form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif

    </div>

    {{-- Aktivitas --}}
    <div class="bg-white rounded-xl shadow border p-4">
        <h3 class="font-semibold text-gray-700 mb-3">Aktivitas</h3>

        @forelse($aktivitas as $a)
            <div class="border-b py-3 text-sm">
                <p class="text-gray-700">
                    Paket <b>#{{ $a->id }}</b> {{ $a->status }}
                </p>
                <span class="text-xs text-gray-400">
                    {{ $a->updated_at->format('H:i') }}
                </span>
            </div>
        @empty
            <p class="text-gray-500 text-sm">Belum ada aktivitas</p>
        @endforelse
    </div>

</div>

@endsection

@push('scripts')
<script>
    document.getElementById('currentDate').textContent =
        new Date().toLocaleDateString('id-ID', {
            weekday: 'long',
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        });
</script>
@endpush