@extends('layouts.admin-apoteker')

@section('title', 'Dashboard Statistik')

@section('content')
<div class="container mx-auto py-6 space-y-6">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📊 Statistik Layanan</h1>
            <p class="text-sm text-gray-600 dark:text-gray-300">
                Data berdasarkan bulan dan tahun yang dipilih
            </p>
        </div>
            {{-- Tombol Export --}}
    <div class="flex gap-2 mb-6">
        <a href="{{ route('apotek.statistik.export.pdf', ['bulan' => $bulan, 'tahun' => $tahun]) }}"
           class="bg-red-600 text-white px-4 py-2 rounded shadow hover:bg-red-700">
            🧾 Export PDF
        </a>
        <a href="{{ route('apotek.statistik.export.excel', ['bulan' => $bulan, 'tahun' => $tahun]) }}"
           class="bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700">
            📊 Export Excel
        </a>
    </div>
    </div>

    {{-- Filter --}}
    <form method="GET" class="flex flex-wrap items-end gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-800 dark:text-white">Bulan</label>
            <select name="bulan"
                    class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-white shadow">
                @foreach(range(1,12) as $bln)
                    <option value="{{ sprintf('%02d', $bln) }}" {{ $bulan == sprintf('%02d', $bln) ? 'selected' : '' }}>
                        {{ \Carbon\Carbon::create()->month($bln)->translatedFormat('F') }}
                    </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-800 dark:text-white">Tahun</label>
            <select name="tahun"
                    class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-white shadow">
                @foreach(range(now()->year, now()->year - 5) as $th)
                    <option value="{{ $th }}" {{ $tahun == $th ? 'selected' : '' }}>{{ $th }}</option>
                @endforeach
            </select>
        </div>

        <div class="flex gap-2 mt-6">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
                🔍 Tampilkan
            </button>
            <a href="{{ route('apotek.statistik.index') }}"
               class="bg-gray-300 dark:bg-gray-600 text-black dark:text-white px-4 py-2 rounded shadow hover:bg-gray-400 dark:hover:bg-gray-500">
                ♻️ Reset
            </a>
        </div>
    </form>



    {{-- Statistik Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <x-statistik-card title="Skrining Resep" :value="$resep" icon="📝" route="skrining-resep.index" />
        <x-statistik-card title="PIO" :value="$pio" icon="📚" route="pio.index" />
        <x-statistik-card title="Konseling" :value="$konseling" icon="🗣️" route="web.apotek2.konseling.index" />
        <x-statistik-card title="Home Pharmacy" :value="$homePharmacy" icon="🏠" route="web.apotek2.home-pharmacy.index" />
        <x-statistik-card title="Farmasi Klinik" :value="$farklin" icon="🧬" route="patients.index" />
        <x-statistik-card title="Efek Samping Obat (MESO)" :value="$meso" icon="⚠️" route="monitorings.index" />
    </div>

    {{-- Grafik --}}
    <div class="mt-10 bg-white dark:bg-gray-800 p-6 rounded-xl shadow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-white mb-4">
            📈 Grafik Layanan Bulan {{ \Carbon\Carbon::createFromDate(null, (int) $bulan, 1)->translatedFormat('F') }} {{ $tahun }}
        </h2>
        <canvas id="chartBar" height="100"></canvas>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('chartBar').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                'Skrining Resep',
                'PIO',
                'Konseling',
                'Home Pharmacy',
                'Farmasi Klinik',
                'MESO'
            ],
            datasets: [{
                label: 'Jumlah',
                data: [{{ $resep }}, {{ $pio }}, {{ $konseling }}, {{ $homePharmacy }}, {{ $farklin }}, {{ $meso }}],
                backgroundColor: [
                    '#3b82f6',
                    '#10b981',
                    '#f59e0b',
                    '#8b5cf6',
                    '#ef4444',
                    '#f97316'
                ],
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>
@endpush