@extends('layouts.admin-apoteker')

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

@section('content')
<div class="max-w-6xl mx-auto space-y-6">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">📊 Statistik Konseling</h1>

    {{-- Form Filter --}}
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="text-sm text-gray-700 dark:text-white">Apoteker</label>
            <select name="apoteker_id" class="w-56 rounded border-gray-300 dark:bg-gray-700 dark:text-white">
                <option value="">-- Semua Apoteker --</option>
                @foreach($apotekerOptions as $a)
                    <option value="{{ $a->id }}" {{ request('apoteker_id') == $a->id ? 'selected' : '' }}>
                        {{ $a->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="text-sm text-gray-700 dark:text-white">Pasien</label>
            <select name="pasien_id" class="w-56 rounded border-gray-300 dark:bg-gray-700 dark:text-white">
                <option value="">-- Semua Pasien --</option>
                @foreach($pasienOptions as $p)
                    <option value="{{ $p->id }}" {{ request('pasien_id') == $p->id ? 'selected' : '' }}>
                        {{ $p->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="text-sm text-gray-700 dark:text-white">Dari Bulan</label>
            <input type="month" name="from" value="{{ request('from') }}" class="rounded border-gray-300 dark:bg-gray-700 dark:text-white">
        </div>

        <div>
            <label class="text-sm text-gray-700 dark:text-white">Sampai Bulan</label>
            <input type="month" name="to" value="{{ request('to') }}" class="rounded border-gray-300 dark:bg-gray-700 dark:text-white">
        </div>

        <div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Terapkan</button>
            <a href="{{ route('web.apotek2.konseling.statistik') }}" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">🔄 Reset</a>
        </div>
    </form>

    {{-- Chart --}}
    <div class="overflow-x-auto">
        <canvas id="chart" height="100"></canvas>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($weekly->pluck('label')) !!},
            datasets: [{
                label: 'Jumlah Konseling',
                data: {!! json_encode($weekly->pluck('jumlah')) !!},
                backgroundColor: 'rgba(59, 130, 246, 0.6)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true },
                tooltip: { enabled: true }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { stepSize: 1 }
                },
                x: {
                    ticks: { autoSkip: false, maxRotation: 45, minRotation: 30 }
                }
            }
        }
    });
</script>
@endpush