@extends('adminlte::page')

@section('title', 'Dashboard PPDB | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-4 pb-3">
        <div>
            <h1 class="text-dark font-weight-bold mb-1 font-poppins" style="font-size: 1.75rem;">Overview PPDB</h1>
            <p class="text-muted font-weight-medium mb-0" style="font-size: 0.95rem;">
                Pantau perkembangan penerimaan santri baru secara realtime.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <span class="bg-white px-4 py-2 rounded-pill shadow-sm text-purple font-weight-bold text-sm d-flex align-items-center">
                <i class="far fa-calendar-alt mr-2 text-purple"></i> {{ now()->isoFormat('dddd, D MMMM Y') }}
            </span>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    
    {{-- STATISTIC CARDS (COLORFUL STYLE) --}}
    <div class="row mb-4">
        {{-- Card 1: Total Pendaftar (Primary/Purple) --}}
        <div class="col-lg-3 col-6 mb-3 mb-lg-0">
            <div class="card apex-card border-0 shadow-sm h-100 overflow-hidden bg-white position-relative hover-lift border-left-purple">
                <div class="card-body p-4 position-relative z-index-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted text-uppercase font-weight-bold text-xs ls-1 mb-1">Total Pendaftar</p>
                            <h3 class="font-weight-bold text-dark mb-0 font-monospace">{{ $totalPendaftar ?? 0 }}</h3>
                            <a href="{{ route('admin.ppdb.pendaftar') }}" class="text-purple font-weight-bold text-xs mt-2 d-inline-block" style="text-decoration: none;">
                                Lihat Semua <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                        <div class="bg-light-purple text-purple rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
                {{-- Decorative Icon --}}
                <i class="fas fa-users position-absolute text-purple opacity-5" style="font-size: 5rem; right: -15px; bottom: -15px;"></i>
            </div>
        </div>

        {{-- Card 2: Perlu Verifikasi (Warning/Orange) --}}
        <div class="col-lg-3 col-6 mb-3 mb-lg-0">
            <div class="card apex-card border-0 shadow-sm h-100 overflow-hidden bg-white position-relative hover-lift border-left-warning">
                <div class="card-body p-4 position-relative z-index-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted text-uppercase font-weight-bold text-xs ls-1 mb-1">Verifikasi</p>
                            <h3 class="font-weight-bold text-dark mb-0 font-monospace">{{ $perluVerifikasi ?? 0 }}</h3>
                            <a href="{{ route('admin.ppdb.pendaftar', ['status_verifikasi' => 'pending']) }}" class="text-warning font-weight-bold text-xs mt-2 d-inline-block" style="text-decoration: none;">
                                Butuh Tindakan <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                        <div class="bg-light-warning text-warning rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                            <i class="fas fa-file-signature"></i>
                        </div>
                    </div>
                </div>
                <i class="fas fa-file-signature position-absolute text-warning opacity-5" style="font-size: 5rem; right: -15px; bottom: -15px;"></i>
            </div>
        </div>

        {{-- Card 3: Diterima (Success/Green) --}}
        <div class="col-lg-3 col-6 mb-3 mb-lg-0">
            <div class="card apex-card border-0 shadow-sm h-100 overflow-hidden bg-white position-relative hover-lift border-left-success">
                <div class="card-body p-4 position-relative z-index-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted text-uppercase font-weight-bold text-xs ls-1 mb-1">Diterima</p>
                            <h3 class="font-weight-bold text-dark mb-0 font-monospace">{{ $diterima ?? 0 }}</h3>
                            <a href="{{ route('admin.ppdb.pendaftar', ['status_kelulusan' => 'lulus']) }}" class="text-success font-weight-bold text-xs mt-2 d-inline-block" style="text-decoration: none;">
                                Lihat Data <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                        <div class="bg-light-success text-success rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                            <i class="fas fa-user-check"></i>
                        </div>
                    </div>
                </div>
                <i class="fas fa-user-check position-absolute text-success opacity-5" style="font-size: 5rem; right: -15px; bottom: -15px;"></i>
            </div>
        </div>

        {{-- Card 4: Sisa Kuota (Danger/Red if Low, else Info/Blue) --}}
        <div class="col-lg-3 col-6 mb-3 mb-lg-0">
            @php
                $sisaKuotaval = $sisaKuota ?? 0;
                $totKuotaVal = $totalKuota ?? 0;
                $persentaseTerisiVal = $persentaseTerisi ?? 0;
                $isLowQuota = (is_numeric($sisaKuotaval) && $sisaKuotaval < 50 && $totKuotaVal > 0);
            @endphp
            <div class="card apex-card border-0 shadow-sm h-100 overflow-hidden bg-white position-relative hover-lift {{ $isLowQuota ? 'border-left-danger' : 'border-left-info' }}">
                <div class="card-body p-4 position-relative z-index-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted text-uppercase font-weight-bold text-xs ls-1 mb-1">Sisa Kuota</p>
                            <h3 class="font-weight-bold {{ $isLowQuota ? 'text-danger' : 'text-dark' }} mb-0 font-monospace">{{ $sisaKuotaval }}</h3>
                            <small class="text-muted text-xs mt-2 d-block">Dari total {{ $totKuotaVal }} Kursi</small>
                        </div>
                        <div class="bg-light-{{ $isLowQuota ? 'danger' : 'info' }} text-{{ $isLowQuota ? 'danger' : 'info' }} rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 45px; height: 45px;">
                            <i class="fas fa-chair"></i>
                        </div>
                    </div>
                    <div class="progress mt-3 rounded-pill" style="height: 6px;">
                        <div class="progress-bar {{ $persentaseTerisiVal > 90 ? 'bg-danger' : 'bg-purple' }}" role="progressbar" style="width: {{ $persentaseTerisiVal }}%" aria-valuenow="{{ $persentaseTerisiVal }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <i class="fas fa-chair position-absolute {{ $isLowQuota ? 'text-danger' : 'text-info' }} opacity-5" style="font-size: 5rem; right: -15px; bottom: -15px;"></i>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- CHART SECTION --}}
        <div class="col-lg-8 mb-4">
            <div class="card apex-card border-0 shadow-lg h-100">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-center">
                    <h3 class="card-title font-weight-bold text-dark font-poppins">Tren Pendaftaran (7 Hari)</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body px-4">
                    <div style="height: 300px;">
                        <canvas id="dailyChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- INFO SIDEBAR (Gelombang & Kuota) --}}
        <div class="col-lg-4 mb-4">
            {{-- Card Gelombang Aktif --}}
            <div class="card apex-card border-0 shadow-lg bg-gradient-purple text-white mb-4 position-relative overflow-hidden">
                <div class="position-absolute opacity-10" style="top: -30px; right: -30px; width: 150px; height: 150px; background: white; border-radius: 50%;"></div>
                <div class="card-body p-4 text-center position-relative z-index-1">
                    @if(isset($gelombangAktif) && $gelombangAktif)
                        <span class="badge bg-white text-purple px-3 py-1 rounded-pill mb-3 text-xs font-weight-bold text-uppercase shadow-sm">Gelombang Aktif</span>
                        <h4 class="font-weight-bold mb-1">{{ $gelombangAktif->nama_gelombang }}</h4>
                        <p class="mb-4 opacity-75 small font-monospace">
                            {{ \Carbon\Carbon::parse($gelombangAktif->tgl_mulai)->format('d M') }} - {{ \Carbon\Carbon::parse($gelombangAktif->tgl_selesai)->format('d M Y') }}
                        </p>
                        
                        <div class="bg-white bg-opacity-20 rounded-xl p-3 d-inline-block backdrop-blur">
                            {{-- PEMBULATAN HARI AGAR TIDAK DESIMAL --}}
                            @php
                                $hariLagi = \Carbon\Carbon::now()->startOfDay()->diffInDays(\Carbon\Carbon::parse($gelombangAktif->tgl_selesai)->startOfDay(), false);
                                $hariLagiBulat = max(0, intval($hariLagi));
                            @endphp
                            <span class="d-block font-weight-bold h4 mb-0">{{ $hariLagiBulat }}</span>
                            <span class="d-block text-xs text-uppercase font-weight-bold opacity-75">Hari Lagi</span>
                        </div>
                    @else
                        <div class="py-4">
                            <i class="fas fa-lock fa-3x mb-3 opacity-50"></i>
                            <h5 class="font-weight-bold">Pendaftaran Ditutup</h5>
                            <a href="{{ route('admin.ppdb.gelombang.index') }}" class="btn btn-light rounded-pill px-4 mt-3 text-purple font-weight-bold shadow-sm hover-lift">Buka Gelombang</a>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Card Progress Kuota --}}
            <div class="card apex-card border-0 shadow-lg bg-white">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h3 class="card-title font-weight-bold text-dark font-poppins">Status Kuota</h3>
                </div>
                <div class="card-body text-center pt-2 pb-4">
                    <div class="position-relative d-inline-block my-3">
                        {{-- Circular Progress (CSS Conic Gradient) --}}
                        <div class="chart-circle" style="
                            width: 160px; height: 160px; border-radius: 50%; 
                            background: conic-gradient(#5B247A {{ ($persentaseTerisi ?? 0) * 3.6 }}deg, #F3F4F6 0deg);
                            display: flex; align-items: center; justify-content: center; margin: 0 auto;
                            box-shadow: 0 10px 20px rgba(91, 36, 122, 0.1);">
                            
                            <div style="width: 130px; height: 130px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                                <span class="h2 font-weight-bold text-purple mb-0 font-monospace">{{ $persentaseTerisi ?? 0 }}%</span>
                                <span class="text-muted text-xs font-weight-bold text-uppercase">Terisi</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-2 text-center border-top border-light pt-3">
                        <div class="col-6 border-right">
                            <h5 class="font-weight-bold mb-0 text-dark font-monospace">{{ $totalKuota ?? 0 }}</h5>
                            <small class="text-muted text-xs text-uppercase font-weight-bold">Target</small>
                        </div>
                        <div class="col-6">
                            <h5 class="font-weight-bold mb-0 text-success font-monospace">{{ $diterima ?? 0 }}</h5>
                            <small class="text-muted text-xs text-uppercase font-weight-bold">Terisi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- STATISTIK LEMBAGA --}}
    <div class="row">
        <div class="col-12">
            <div class="card apex-card border-0 shadow-lg mb-5">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h3 class="card-title font-weight-bold text-dark font-poppins">Distribusi Pendaftar per Lembaga</h3>
                </div>
                <div class="card-body px-4 py-4">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0">
                            <thead class="text-muted text-uppercase text-xs font-weight-bold bg-light rounded">
                                <tr>
                                    <th class="pl-3 py-3 rounded-left">Lembaga</th>
                                    <th class="py-3">Progress</th>
                                    <th class="text-right py-3">Jumlah</th>
                                    <th class="text-right pr-3 py-3 rounded-right">Persentase</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($statsLembaga) && count($statsLembaga) > 0)
                                    @foreach($statsLembaga as $stat)
                                        @php
                                            $totCand = $totalPendaftar ?? 1; // hindari division by zero
                                            if($totCand == 0) $totCand = 1;
                                            
                                            $percent = round(($stat->total / $totCand) * 100);
                                            $colors = ['bg-purple', 'bg-info', 'bg-success', 'bg-warning', 'bg-danger'];
                                            $color = $colors[$loop->index % count($colors)];
                                        @endphp
                                        <tr>
                                            <td class="pl-3 py-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="symbol symbol-35px mr-3">
                                                        <span class="symbol-label bg-light-purple text-purple font-weight-bold rounded-circle px-2 py-1 font-monospace shadow-sm">
                                                            {{ substr($stat->sekolah->nama_sekolah ?? 'UN', 0, 2) }}
                                                        </span>
                                                    </div>
                                                    <span class="text-dark font-weight-bold">{{ $stat->sekolah->nama_sekolah ?? 'Tidak Diketahui' }}</span>
                                                </div>
                                            </td>
                                            <td class="py-3" style="width: 40%;">
                                                <div class="progress rounded-pill" style="height: 6px;">
                                                    <div class="progress-bar {{ $color }}" role="progressbar" style="width: {{ $percent }}%"></div>
                                                </div>
                                            </td>
                                            <td class="text-right font-weight-bold py-3 font-monospace">{{ $stat->total }}</td>
                                            <td class="text-right pr-3 text-muted py-3 font-monospace">{{ $percent }}%</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr><td colspan="4" class="text-center text-muted py-4">Belum ada data distribusi lembaga.</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    /* TYPOGRAPHY */
    .font-poppins { font-family: 'Poppins', sans-serif !important; }
    .font-monospace { font-family: 'Consolas', monospace !important; }
    .ls-1 { letter-spacing: 0.5px; }

    /* COLORS & GRADIENTS */
    .text-purple { color: #5B247A !important; }
    .bg-purple { background-color: #5B247A !important; }
    .bg-light-purple { background-color: #F8F5FF !important; }
    .bg-gradient-purple { background: linear-gradient(135deg, #2E1451 0%, #5B247A 100%); }
    
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }

    .bg-light-info { background-color: #E0F2FE !important; }
    .text-info { color: #0284C7 !important; }

    /* BORDER ACCENTS FOR CARDS */
    .border-left-purple { border-left: 4px solid #5B247A !important; }
    .border-left-warning { border-left: 4px solid #FFA800 !important; }
    .border-left-success { border-left: 4px solid #50CD89 !important; }
    .border-left-danger { border-left: 4px solid #F64E60 !important; }
    .border-left-info { border-left: 4px solid #0284C7 !important; }

    /* COMPONENTS */
    .apex-card { border-radius: 20px; }
    .rounded-xl { border-radius: 15px !important; }
    .opacity-5 { opacity: 0.05; }
    .opacity-10 { opacity: 0.1; }
    .z-index-1 { z-index: 1; }
    
    /* HOVER EFFECTS */
    .hover-lift { transition: transform 0.2s, box-shadow 0.2s; }
    .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1)!important; }
    
    .backdrop-blur { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var ctx = document.getElementById('dailyChart');
        if (ctx) {
            ctx = ctx.getContext('2d');
            
            var labels = {!! isset($chartData) ? json_encode($chartData->pluck('date')) : '[]' !!};
            var dataPoints = {!! isset($chartData) ? json_encode($chartData->pluck('count')) : '[]' !!};

            if(labels.length === 0) {
                labels = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
                dataPoints = [0, 0, 0, 0, 0, 0, 0];
            }

            var gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(0, 'rgba(91, 36, 122, 0.2)'); 
            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

            var dailyChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Pendaftar Baru',
                        data: dataPoints,
                        borderColor: '#5B247A', 
                        backgroundColor: gradient,
                        
                        /* SETTING UNTUK KURVA MODERN (SMOOTH & CLEAN) */
                        tension: 0.4,                           // Membuat garis melengkung (smooth curve)
                        cubicInterpolationMode: 'monotone',     // Membuat lekukan lebih presisi & modern
                        borderWidth: 3,                         // Garis dibuat lebih tebal
                        pointRadius: 0,                         // Menyembunyikan titik (dot) pada grafik
                        pointHoverRadius: 6,                    // Titik baru akan muncul hanya saat kursor di-hover
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#5B247A',
                        pointBorderWidth: 2,
                        fill: true,
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false, // Tooltip muncul walau kursor tidak tepat di atas garis
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#2E1451', 
                            titleColor: '#fff', 
                            bodyColor: '#fff',
                            cornerRadius: 8, 
                            padding: 12
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false, drawBorder: false },
                            ticks: { color: '#9CA3AF' }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { borderDash: [5, 5], color: '#F3F4F6', drawBorder: false },
                            ticks: { stepSize: 1, color: '#9CA3AF' }
                        }
                    }
                }
            });
        }
    });
</script>
@stop