@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <div class="space-y-8">
        {{-- 🔹 Identitas Sekolah --}}
        @if ($setting)
            <div
                class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6 mb-6 flex flex-col md:flex-row items-center gap-6">
                <div class="flex-shrink-0">
                    @if ($setting->logo)
                        <img src="{{ asset('storage/' . $setting->logo) }}" alt="Logo Sekolah"
                            class="w-24 h-24 rounded-full object-cover">
                    @endif
                </div>

                <div class="flex-1 text-gray-700 dark:text-gray-300">
                    <h2 class="text-2xl font-bold text-blue-700 dark:text-blue-400 mb-1">{{ $setting->nama_sekolah }}</h2>
                    <p class="text-sm text-gray-500">{{ $setting->alamat }}</p>
                    <div class="mt-3 grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
                        <p><strong>📚 Total Siswa:</strong> {{ $setting->total_siswa ?? '-' }}</p>
                        <p><strong>👩‍🏫 Total Guru:</strong> {{ $setting->total_guru ?? '-' }}</p>
                        <p><strong>🏫 Ruang Kelas:</strong> {{ $setting->ruang_kelas ?? '-' }}</p>
                        <p><strong>📅 Berdiri:</strong> {{ $setting->tahun_berdiri ?? '-' }}</p>
                        <p><strong>☎️ Telepon:</strong> {{ $setting->telepon ?? '-' }}</p>
                        <p><strong>📱 WhatsApp:</strong> {{ $setting->nomor_wa_cs ?? '-' }}</p>
                        <p><strong>📧 Email:</strong> {{ $setting->email ?? '-' }}</p>
                        <p><strong>🕒 Jam Operasional:</strong> {{ $setting->jam_operasional ?? '-' }}</p>
                    </div>
                </div>

                @if ($setting->flyer_image)
                    <div class="flex-shrink-0">
                        <img src="{{ asset('storage/' . $setting->flyer_image) }}" alt="Flyer"
                            class="w-40 rounded-xl shadow-md">
                    </div>
                @endif
            </div>
        @endif

        {{-- 🔹 Statistik Ringkasan --}}
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-6">

            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Total Berita</h3>
                <p class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ $totalBerita }}</p>
            </div>

            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Total Galeri</h3>
                <p class="text-3xl font-bold text-green-600 dark:text-green-400 mt-2">{{ $totalGaleri }}</p>
            </div>

            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Total Prestasi</h3>
                <p class="text-3xl font-bold text-yellow-500 dark:text-yellow-400 mt-2">{{ $totalPrestasi }}</p>
            </div>

            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Total Fasilitas</h3>
                <p class="text-3xl font-bold text-purple-500 dark:text-purple-400 mt-2">{{ $totalFasilitas }}</p>
            </div>

            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Struktur Organisasi</h3>
                <p class="text-3xl font-bold text-pink-500 dark:text-pink-400 mt-2">{{ $totalStruktur }}</p>
            </div>

            {{-- 🧰 Total Kompetensi Keahlian --}}
            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Kompetensi Keahlian</h3>
                <p class="text-3xl font-bold text-indigo-500 dark:text-indigo-400 mt-2">{{ $totalKompetensi }}</p>
            </div>

            {{-- 💬 Total Pesan Masuk --}}
            <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl text-center">
                <h3 class="text-sm text-gray-500 dark:text-gray-400">Pesan Masuk</h3>
                <p class="text-3xl font-bold text-red-500 dark:text-red-400 mt-2">{{ $totalPesan }}</p>
            </div>
        </div>


        {{-- 🔹 Grafik Pengunjung --}}
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Grafik Pengunjung (7 Hari Terakhir)</h3>
            @if ($pengunjung->isEmpty())
                <p class="text-gray-500 text-center">Belum ada data pengunjung.</p>
            @else
                <canvas id="visitorChart" height="100"></canvas>
            @endif
        </div>

        {{-- 🔹 Berita Populer --}}
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Berita Populer</h3>

            <div class="overflow-x-auto">
                <table class="min-w-full text-left border border-gray-200 dark:border-gray-700 rounded-lg">
                    <thead class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-200">
                        <tr>
                            <th class="p-3">Judul</th>
                            <th class="p-3">Views</th>
                            <th class="p-3">Tanggal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($beritaPopuler as $berita)
                            <tr
                                class="border-t text-white border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="p-3">{{ $berita->title }}</td>
                                <td class="p-3 text-blue-500 font-semibold">{{ $berita->views }}</td>
                                <td class="p-3">{{ $berita->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="p-3 text-center text-gray-500">Belum ada berita.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const ctx = document.getElementById('visitorChart').getContext('2d');
            const visitorChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {!! json_encode($pengunjung->keys()->map(fn($d) => \Carbon\Carbon::parse($d)->format('d M'))) !!},
                    datasets: [{
                        label: 'Jumlah Pengunjung',
                        data: {!! json_encode($pengunjung->values()) !!},
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59,130,246,0.2)',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 2,
                        pointRadius: 4
                    }]
                },
                options: {
                    scales: {
                        x: {
                            ticks: {
                                color: '#ffffff' // warna teks sumbu X
                            },
                            grid: {
                                color: 'rgba(255,255,255,0.2)' // opsional, warna grid X
                            }
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                color: '#ffffff' // warna teks sumbu Y
                            },
                            grid: {
                                color: 'rgba(255,255,255,0.2)' // opsional, warna grid Y
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: '#ffffff' // warna teks label legenda
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush