@extends('admin.layout')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard Admin')

@section('content')

<div class="bg-white rounded-xl shadow-sm border border-gray-200">

    {{-- Header --}}
    <div class="px-6 py-5 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-semibold text-gray-900">Dashboard</h1>
                <p class="text-sm text-gray-500 mt-1">Selamat datang, {{ Auth::guard('admin')->user()->nama }}</p>
            </div>
            <div class="text-sm text-gray-500">
                <i class="fa-regular fa-calendar mr-2"></i>
                {{ now()->format('d F Y') }}
            </div>
        </div>
    </div>

    {{-- Stats Grid --}}
    <div class="p-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
            {{-- Total Santri --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-blue-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-blue-50 text-blue-600 rounded-lg">
                        <i class="fa-solid fa-users text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Total</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $totalSantri }}</div>
                <div class="text-sm font-medium text-gray-700">Santri Terdaftar</div>
            </div>

            {{-- Santri Putra --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-indigo-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-indigo-50 text-indigo-600 rounded-lg">
                        <i class="fa-solid fa-person text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Putra</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $putra }}</div>
                <div class="text-sm font-medium text-gray-700">Santri Putra</div>
            </div>

            {{-- Santri Putri --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-pink-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-pink-50 text-pink-600 rounded-lg">
                        <i class="fa-solid fa-person-dress text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Putri</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $putri }}</div>
                <div class="text-sm font-medium text-gray-700">Santri Putri</div>
            </div>

            {{-- Berita --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-blue-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-blue-50 text-blue-600 rounded-lg">
                        <i class="fa-solid fa-newspaper text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Konten</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $jumlahBerita }}</div>
                <div class="text-sm font-medium text-gray-700">Artikel Berita</div>
            </div>

            {{-- Karya Santri --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-emerald-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-emerald-50 text-emerald-600 rounded-lg">
                        <i class="fa-solid fa-palette text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Karya</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $jumlahKarya }}</div>
                <div class="text-sm font-medium text-gray-700">Karya Santri</div>
            </div>

            {{-- Program Unggulan --}}
            <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-amber-300 transition-colors">
                <div class="flex items-center justify-between mb-4">
                    <div class="p-3 bg-amber-50 text-amber-600 rounded-lg">
                        <i class="fa-solid fa-star text-lg"></i>
                    </div>
                    <span class="text-sm text-gray-500">Program</span>
                </div>
                <div class="text-3xl font-semibold text-gray-900 mb-1">{{ $jumlahProgram }}</div>
                <div class="text-sm font-medium text-gray-700">Program Unggulan</div>
            </div>
        </div>

        {{-- Charts Section --}}
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Statistik Pendaftaran</h3>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                
                {{-- Pendaftaran Per Bulan --}}
                <div class="bg-white border border-gray-200 rounded-lg p-5">
                    <div class="flex items-center justify-between mb-5">
                        <div>
                            <h4 class="font-medium text-gray-900">Pendaftaran Per Bulan</h4>
                            <p class="text-sm text-gray-500">Tren pendaftaran santri tahun ini</p>
                        </div>
                        <div class="flex items-center gap-2 text-sm">
                            <span class="flex items-center gap-1">
                                <span class="w-3 h-3 bg-blue-500 rounded"></span>
                                <span class="text-gray-600">Putra</span>
                            </span>
                            <span class="flex items-center gap-1">
                                <span class="w-3 h-3 bg-pink-500 rounded"></span>
                                <span class="text-gray-600">Putri</span>
                            </span>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="chartPendaftaran"></canvas>
                    </div>
                </div>

                {{-- Komposisi Santri --}}
                <div class="bg-white border border-gray-200 rounded-lg p-5">
                    <div class="flex items-center justify-between mb-5">
                        <div>
                            <h4 class="font-medium text-gray-900">Komposisi Santri</h4>
                            <p class="text-sm text-gray-500">Persebaran santri berdasarkan jenis kelamin</p>
                        </div>
                        <div class="text-sm text-gray-500">
                            Total: {{ $totalSantri }}
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="chartGender"></canvas>
                    </div>
                </div>

            </div>
        </div>

        {{-- Quick Stats --}}
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-5">
            <h4 class="font-medium text-gray-900 mb-4">Ringkasan Data</h4>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-semibold text-gray-900">{{ $totalSantri }}</div>
                    <div class="text-sm text-gray-500">Total Santri</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-semibold text-gray-900">{{ $putra }}</div>
                    <div class="text-sm text-gray-500">Santri Putra</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-semibold text-gray-900">{{ $putri }}</div>
                    <div class="text-sm text-gray-500">Santri Putri</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-semibold text-gray-900">{{ $jumlahBerita + $jumlahKarya + $jumlahProgram }}</div>
                    <div class="text-sm text-gray-500">Total Konten</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Chart Pendaftaran Per Bulan
    const ctx1 = document.getElementById('chartPendaftaran');
    new Chart(ctx1, {
        type: 'line',
        data: {
            labels: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
            datasets: [
                {
                    label: 'Putra',
                    data: @json($chartDataPutra),
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'Putri',
                    data: @json($chartDataPutri),
                    borderColor: '#ec4899',
                    backgroundColor: 'rgba(236, 72, 153, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        stepSize: 5
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                }
            }
        }
    });

    // Chart Komposisi Santri
    const ctx2 = document.getElementById('chartGender');
    new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ['Putra', 'Putri'],
            datasets: [{
                data: [{{ $putra }}, {{ $putri }}],
                backgroundColor: ['#6366f1', '#f472b6'],
                borderWidth: 0,
                spacing: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                }
            }
        }
    });
</script>

@endsection