@extends('layouts.ekspedisi')

@section('title', 'Laporan')
@section('page-title', 'Laporan')

@section('content')

<!-- HEADER -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-800">Laporan Kinerja</h2>
        <p class="text-sm text-gray-500">Rekap pengiriman Anda per bulan</p>
    </div>
</div>

<!-- FILTER -->
<form method="GET" class="bg-white border border-gray-200 rounded-xl p-4 mb-6 flex flex-wrap items-center gap-3">

    <select name="bulan"
        class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-400 outline-none">
        @foreach(range(1,12) as $m)
        <option value="{{ $m }}" {{ $m == $bulan ? 'selected' : '' }}>
            {{ \Carbon\Carbon::create()->month($m)->translatedFormat('F') }}
        </option>
        @endforeach
    </select>

    <select name="tahun"
        class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-400 outline-none">
        @foreach(range(now()->year, now()->year - 3) as $y)
        <option value="{{ $y }}" {{ $y == $tahun ? 'selected' : '' }}>
            {{ $y }}
        </option>
        @endforeach
    </select>

    <button type="submit"
        class="bg-blue-500 hover:bg-blue-600 text-white text-sm px-4 py-2 rounded-lg flex items-center gap-2">
        <i class="bi bi-bar-chart-line"></i> Tampilkan
    </button>

</form>

<!-- STAT CARDS -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">

    <div class="bg-white border border-gray-200 rounded-xl p-5">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-9 h-9 flex items-center justify-center rounded-lg bg-green-100 text-green-600">
                <i class="bi bi-check2-circle"></i>
            </div>
            <span class="text-sm text-gray-500">Terkirim Bulan Ini</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">{{ $totalSelesai }}</p>
    </div>

    <div class="bg-white border border-gray-200 rounded-xl p-5">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-9 h-9 flex items-center justify-center rounded-lg bg-red-100 text-red-500">
                <i class="bi bi-exclamation-triangle"></i>
            </div>
            <span class="text-sm text-gray-500">Bermasalah</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">{{ $totalBermasalah }}</p>
    </div>

    <div class="bg-white border border-gray-200 rounded-xl p-5">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-9 h-9 flex items-center justify-center rounded-lg bg-blue-100 text-blue-500">
                <i class="bi bi-truck"></i>
            </div>
            <span class="text-sm text-gray-500">Sedang Dikirim</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">{{ $totalDikirim }}</p>
    </div>

</div>

<!-- CHART -->
<div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">

    <h3 class="text-sm font-semibold text-gray-700 mb-4">
        Pengiriman 7 Hari Terakhir
    </h3>

    @php $maxCount = $perHari->max('count') ?: 1; @endphp

    <div class="flex items-end gap-4 h-40">

        @foreach($perHari as $h)
        @php $pct = ($h['count'] / $maxCount) * 100; @endphp

        <div class="flex-1 flex flex-col items-center justify-end gap-1">

            <span class="text-xs font-semibold text-gray-700">
                {{ $h['count'] }}
            </span>

            <div class="w-full bg-blue-500 rounded-t-md transition-all"
                style="height: {{ max(5, $pct) }}%;">
            </div>

            <span class="text-[10px] text-gray-400 mt-1">
                {{ $h['tgl'] }}
            </span>

        </div>
        @endforeach

    </div>

</div>

<!-- PERFORMANCE -->
<div class="bg-white border border-gray-200 rounded-xl p-6">

    <h3 class="text-sm font-semibold text-gray-700 mb-5">
        Ringkasan Performa
    </h3>

    @php
        $total   = $totalSelesai + $totalBermasalah;
        $sukses  = $total > 0 ? round($totalSelesai / $total * 100) : 0;
        $gagal   = $total > 0 ? round($totalBermasalah / $total * 100) : 0;
    @endphp

    <!-- SUCCESS -->
    <div class="mb-5">
        <div class="flex justify-between text-sm mb-1">
            <span class="text-gray-500">Tingkat keberhasilan</span>
            <span class="font-semibold text-gray-700">{{ $sukses }}%</span>
        </div>
        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full bg-green-500 rounded-full transition-all"
                 style="width: {{ $sukses }}%"></div>
        </div>
    </div>

    <!-- FAILED -->
    <div>
        <div class="flex justify-between text-sm mb-1">
            <span class="text-gray-500">Tingkat masalah</span>
            <span class="font-semibold text-gray-700">{{ $gagal }}%</span>
        </div>
        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full bg-red-500 rounded-full transition-all"
                 style="width: {{ $gagal }}%"></div>
        </div>
    </div>

    @if($total == 0)
    <p class="text-xs text-gray-400 text-center mt-5">
        Belum ada data pengiriman pada periode ini.
    </p>
    @endif

</div>

@endsection