<x-app-layout>
    <x-slot name="header">Manajemen Konsultasi</x-slot>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">

        {{-- ── Alert Messages ──────────────────────────────────────────── --}}
        @if(session('success'))
            <div class="flex items-center gap-3 p-4 rounded-xl bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-300">
                <i class="fas fa-check-circle text-green-500"></i>
                <span class="text-sm font-medium">{{ session('success') }}</span>
            </div>
        @endif
        @if(session('error'))
            <div class="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-300">
                <i class="fas fa-exclamation-circle text-red-500"></i>
                <span class="text-sm font-medium">{{ session('error') }}</span>
            </div>
        @endif

        {{-- ── Stats Cards ───────────────────────────────────────────────── --}}
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
            @php
                $cards = [
                    ['label' => 'Menunggu',     'key' => 'menunggu',       'icon' => 'clock',          'color' => 'amber'],
                    ['label' => 'Berlangsung',  'key' => 'berlangsung',    'icon' => 'stethoscope',    'color' => 'blue'],
                    ['label' => 'Selesai',      'key' => 'selesai_konsul', 'icon' => 'check-circle',   'color' => 'teal'],
                    ['label' => 'Perlu Bayar',  'key' => 'perlu_bayar',    'icon' => 'money-bill-wave','color' => 'orange'],
                    ['label' => 'Lunas Hari Ini','key' => 'lunas_hari_ini','icon' => 'receipt',        'color' => 'green'],
                ];
                $colorMap = [
                    'amber'  => 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-700 text-amber-600 dark:text-amber-400',
                    'blue'   => 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700 text-blue-600 dark:text-blue-400',
                    'teal'   => 'bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-700 text-teal-600 dark:text-teal-400',
                    'orange' => 'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-700 text-orange-600 dark:text-orange-400',
                    'green'  => 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700 text-green-600 dark:text-green-400',
                ];
            @endphp
            @foreach($cards as $c)
            <div class="kkd-card flex items-center gap-3 p-4" id="stat-{{ $c['key'] }}">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 {{ $colorMap[$c['color']] }} border">
                    <i class="fas fa-{{ $c['icon'] }} text-sm"></i>
                </div>
                <div>
                    <p class="stat-label">{{ $c['label'] }}</p>
                    <p class="stat-value text-2xl" id="val-{{ $c['key'] }}">{{ $stats[$c['key']] ?? 0 }}</p>
                </div>
            </div>
            @endforeach
        </div>

        {{-- ── Table Card ────────────────────────────────────────────────── --}}
        <div class="kkd-card">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-5">
                <div>
                    <h2 class="section-title">Daftar Konsultasi</h2>
                    <p class="section-subtitle mt-0.5">Kelola semua sesi konsultasi pasien</p>
                </div>
                <a href="{{ route('admin.konsultasi.create') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 text-white text-sm font-semibold rounded-lg shadow transition">
                    <i class="fas fa-plus"></i> Buat Konsultasi
                </a>
            </div>

            {{-- Filter Bar --}}
            <div class="flex flex-wrap gap-2 mb-4">
                <select id="filterStatus"
                        class="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-700 dark:text-slate-300 focus:ring-2 focus:ring-teal-400 outline-none">
                    <option value="">Semua Status</option>
                    <option value="MENUNGGU">Menunggu</option>
                    <option value="BERLANGSUNG">Berlangsung</option>
                    <option value="SELESAI_KONSUL">Selesai</option>
                    <option value="LUNAS">Lunas</option>
                    <option value="BATAL">Batal</option>
                </select>
                <select id="filterBerkas"
                        class="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-700 dark:text-slate-300 focus:ring-2 focus:ring-teal-400 outline-none">
                    <option value="">Semua Berkas</option>
                    <option value="1">Sudah Diserahkan</option>
                    <option value="0">Belum Diserahkan</option>
                </select>
            </div>

            <div class="overflow-x-auto">
                <table id="tabelKonsultasi" class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-200 dark:border-slate-700">
                            <th class="py-3 px-3 text-left text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">No. Konsultasi</th>
                            <th class="py-3 px-3 text-left text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Pasien</th>
                            <th class="py-3 px-3 text-left text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Dokter</th>
                            <th class="py-3 px-3 text-left text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Tanggal</th>
                            <th class="py-3 px-3 text-center text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
                            <th class="py-3 px-3 text-center text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Berkas</th>
                            <th class="py-3 px-3 text-center text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    $(document).ready(function () {
        const table = $('#tabelKonsultasi').DataTable({
            processing: true,
            serverSide: true,
            language: window.dtLangId,
            ajax: {
                url: '{{ route('admin.konsultasi.index') }}',
                data: function (d) {
                    d.status    = $('#filterStatus').val();
                    d.diserahkan = $('#filterBerkas').val();
                }
            },
            columns: [
                { data: 'nomor_konsultasi', name: 'nomor_konsultasi' },
                { data: 'pasien',          name: 'pasien' },
                { data: 'dokter',          name: 'dokter' },
                { data: 'tanggal',         name: 'created_at' },
                { data: 'status_badge',    name: 'status_konsultasi', orderable: false, className: 'text-center' },
                { data: 'berkas_badge',    name: 'diserahkan_ke_admin', orderable: false, className: 'text-center' },
                { data: 'aksi',            name: 'aksi', orderable: false, className: 'text-center' },
            ],
            order: [[3, 'desc']],
            pageLength: 25,
            drawCallback: function (settings) {
                // Update stat cards dari response
                const json = settings.json ?? {};
                if (json.stats) {
                    $.each(json.stats, function(k, v) {
                        $('#val-' + k).text(v);
                    });
                }
            }
        });

        $('#filterStatus, #filterBerkas').on('change', function () {
            table.ajax.reload();
        });
    });
    </script>
    @endpush
</x-app-layout>