{{-- resources/views/admin/dashboard.blade.php --}}
@extends('admin.layouts.app')

@section('header')
    <div class="bg-header text-white p-4 rounded-lg shadow-md flex justify-between items-center">
        <h1 class="text-2xl font-medium">Dashboard Admin</h1>
    </div>
@endsection

@section('content')
    <div class="mt-6 px-6">
        {{-- Filter Section --}}
        <form method="GET" action="{{ route('admin.dashboard') }}" class="flex flex-col md:flex-row items-center gap-4 mb-6">
            <select name="user_id"
                class="form-select border-gray-300 rounded-md p-2 focus:ring-blue-300 focus:border-blue-300">
                <option value="">-- Semua Pengguna --</option>
                @foreach ($users as $user)
                    <option value="{{ $user->id }}" {{ $selectedUser == $user->id ? 'selected' : '' }}>
                        {{ $user->name }}</option>
                @endforeach
            </select>

            <select name="jurusan_id"
                class="form-select border-gray-300 rounded-md p-2 focus:ring-blue-300 focus:border-blue-300">
                <option value="">-- Semua Jurusan --</option>
                @foreach ($jurusanList as $jurusan)
                    <option value="{{ $jurusan->id }}" {{ $selectedJurusan == $jurusan->id ? 'selected' : '' }}>
                        {{ $jurusan->nama }}</option>
                @endforeach
            </select>

            <select name="kecerdasan_id"
                class="form-select border-gray-300 rounded-md p-2 focus:ring-blue-300 focus:border-blue-300">
                <option value="">-- Semua Kecerdasan --</option>
                @foreach ($kecerdasanList as $kecer)
                    <option value="{{ $kecer->id }}"
                        {{ isset($selectedKecerdasan) && $selectedKecerdasan == $kecer->id ? 'selected' : '' }}>
                        {{ $kecer->nama }}</option>
                @endforeach
            </select>

            <button type="submit"
                class="bg-blue text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Filter</button>
        </form>

        {{-- Summary Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white p-4 rounded-lg shadow flex items-center">
                <div class="text-blue-500 mr-4">
                    <i class="bi bi-journal-medical text-3xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Total Diagnosa (7 hari)</p>
                    <p class="text-2xl font-semibold">{{ array_sum($diagCounts->toArray()) }}</p>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow flex items-center">
                <div class="text-orange-500 mr-4">
                    <i class="bi bi-bar-chart-fill text-3xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Total AHP (7 hari)</p>
                    <p class="text-2xl font-semibold">{{ array_sum($ahpCounts->toArray()) }}</p>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow flex items-center">
                <div class="text-green-500 mr-4">
                    <i class="bi bi-people-fill text-3xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Pengguna Terdaftar</p>
                    <p class="text-2xl font-semibold">{{ $users->count() }}</p>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow flex items-center">
                <div class="text-purple-500 mr-4">
                    <i class="bi bi-lightbulb-fill text-3xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Jumlah Kecerdasan</p>
                    <p class="text-2xl font-semibold">{{ $kecerdasanList->count() }}</p>
                </div>
            </div>
        </div>

        {{-- Chart Section --}}
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-lg font-medium mb-4">Grafik Diagnosa & AHP (7 Hari Terakhir)</h3>
            <canvas id="diagnosaAhpChart" height="100"></canvas>
        </div>

        <div class="bg-white p-6 rounded-lg shadow">
            <h3 class="text-lg font-medium mb-4">Grafik Perbandingan Diagnosa dan AHP</h3>
            <canvas id="compareLineChart" height="100"></canvas>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const ctx = document.getElementById('diagnosaAhpChart')?.getContext('2d');
            if (ctx) {
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: @json($labels),
                        datasets: [{
                                label: 'Diagnosa',
                                data: @json($diagCounts),
                                borderColor: '#2563EB',
                                backgroundColor: 'rgba(37, 99, 235, 0.2)',
                                tension: 0.3,
                                fill: true
                            },
                            {
                                label: 'AHP',
                                data: @json($ahpCounts),
                                borderColor: '#F97316',
                                backgroundColor: 'rgba(249, 115, 22, 0.2)',
                                tension: 0.3,
                                fill: true
                            }
                        ]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                precision: 0
                            }
                        }
                    }
                });
            }

            const ctx2 = document.getElementById('compareLineChart')?.getContext('2d');
            if (ctx2) {
                new Chart(ctx2, {
                    type: 'bar',
                    data: {
                        labels: @json($labels),
                        datasets: [{
                                label: 'Diagnosa',
                                data: @json($diagCounts),
                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            },
                            {
                                label: 'AHP',
                                data: @json($ahpCounts),
                                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                precision: 0
                            }
                        }
                    }
                });
            }
        });
    </script>
@endpush