<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">

</head>


<body id="page-top">

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Dashboard - E-Surat Desa</title>

        <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

        <link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">
    </head>

    <body id="page-top">

        <div id="wrapper">
            @include('sidebar')

            <div id="content-wrapper" class="d-flex flex-column">
                <div id="content">

                    <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                        <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                            <i class="fa fa-bars"></i>
                        </button>

                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown no-arrow mx-1">
                            <li class="nav-item dropdown no-arrow mx-1">
                                <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="hilangkanBadge()">
                                    <i class="fas fa-bell fa-fw"></i>
                                    @if(isset($totalMenungguSurat) && $totalMenungguSurat > 0)
                                    <span id="badge-notif" class="badge badge-danger badge-counter">
                                        {{ $totalMenungguSurat > 9 ? '9+' : $totalMenungguSurat }}
                                    </span>
                                    @endif
                                </a>

                                <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown" style="width:360px !important;">
                                    <h6 class="dropdown-header bg-primary border-primary text-white">
                                        🔔 Notifikasi Masuk (Validasi & Surat)
                                    </h6>

                                    @if(isset($notifikasiTerbaru) && $notifikasiTerbaru->count() > 0)
                                    @foreach($notifikasiTerbaru as $notif)
                                    <a class="dropdown-item d-flex align-items-center border-bottom" href="{{ route($notif->rute) }}">
                                        <div class="mr-3">
                                            {{-- Ikon berubah warna sesuai jenis: Biru untuk Validasi, Kuning untuk Surat --}}
                                            <div class="icon-circle {{ $notif->rute == 'validasi.index' ? 'bg-info' : 'bg-warning' }}">
                                                <i class="fas {{ $notif->rute == 'validasi.index' ? 'fa-user-check' : 'fa-file-alt' }} text-white"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="small text-gray-500">
                                                {{ \Carbon\Carbon::parse($notif->created_at)->diffForHumans() }}
                                            </div>
                                            <span class="font-weight-bold">{{ $notif->name }}</span>
                                            @if($notif->rute == 'validasi.index')
                                            mengirim <span class="text-info">Data Validasi Baru</span>
                                            @else
                                            mengajukan <span class="text-primary">{{ $notif->tipe }}</span>
                                            @endif
                                        </div>
                                    </a>
                                    @endforeach
                                    @else
                                    <div class="dropdown-item text-center small text-gray-500 py-3">
                                        Tidak ada aktivitas baru
                                    </div>
                                    @endif

                                    <div class="dropdown-item text-center small text-gray-500 bg-light">
                                        Silakan cek menu masing-masing untuk detail
                                    </div>
                                </div>
                            </li>

                            <div class="topbar-divider d-none d-sm-block"></div>

                            <li class="nav-item d-flex align-items-center">
                                <a href="{{ route('profil') }}" class="d-flex align-items-center" style="text-decoration:none; gap:10px;">
                                    {{-- Gambar diletakkan sebelum Nama agar berada di sebelah kiri --}}
                                    <img src="{{ Auth::user()->foto ? asset('foto_profil/' . Auth::user()->foto) : 'https://bootdey.com/img/Content/avatar/avatar7.png' }}"
                                        class="rounded-circle"
                                        style="width:32px; height:32px; object-fit:cover; border: 1px solid #e3e6f0;"
                                        alt="Profil">

                                    {{-- Nama diletakkan setelah gambar --}}
                                    <span class="d-none d-lg-inline text-gray-600 small font-weight-bold">
                                        {{ Auth::user()->nama_lengkap ?? Auth::user()->username }}
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                    <div class="container-fluid">
                        <div class="d-sm-flex align-items-center justify-content-between mb-4">
                            <h1 class="h3 mb-0 text-gray-800">Dashboard Admin</h1>
                        </div>

                        <div class="row">
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card border-left-primary shadow h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Data KTP</div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalValidasi ?? 0 }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-id-card fa-2x text-gray-300"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card border-left-danger shadow h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">KTP Perlu Validasi</div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalKtpMenunggu ?? 0 }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-user-check fa-2x text-gray-300"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card border-left-info shadow h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Pengajuan Surat</div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalPengajuan ?? 0 }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-file-signature fa-2x text-gray-300"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card border-left-warning shadow h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Surat Perlu Verifikasi</div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalMenungguSurat ?? 0 }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-clock fa-2x text-gray-300"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xl-8 col-lg-7">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-primary">Grafik Aktivitas</h6>
                                    </div>
                                    <div class="card-body">
                                        <div style="height:320px;">
                                            <canvas id="myBarChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4 col-lg-5">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-primary">Persentase Status</h6>
                                    </div>
                                    <div class="card-body">
                                        <div style="height:300px">
                                            <canvas id="myPieChart"></canvas>
                                        </div>
                                        <div class="mt-4 text-center small">
                                            <span class="mr-2"><i class="fas fa-circle text-primary"></i> Data KTP</span>
                                            <span class="mr-2"><i class="fas fa-circle text-info"></i> Pengajuan</span>
                                            <span class="mr-2"><i class="fas fa-circle text-warning"></i> Menunggu</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    // 1. Fungsi Hilangkan Badge dengan Transisi Halus
    function hilangkanBadge() {
        const badge = document.getElementById('badge-notif');
        if (badge) {
            badge.style.transition = "opacity 0.5s ease";
            badge.style.opacity = "0";
            setTimeout(() => { 
                badge.style.display = 'none'; 
            }, 500);
        }
    }

    // 2. Gunakan jQuery NoConflict untuk menghindari bentrok dengan script lain
    (function($) {
        "use strict";

        $(document).ready(function() {
            // Paksa dropdown berfungsi jika klik biasa gagal
            $('#alertsDropdown').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                
                // Panggil fungsi hilangkan badge
                hilangkanBadge();

                // Toggle menu dropdown secara manual
                const $parent = $(this).parent();
                const $menu = $(this).next('.dropdown-menu');

                // Tutup dropdown lain yang mungkin sedang terbuka
                $('.nav-item.dropdown').not($parent).removeClass('show');
                $('.dropdown-menu').not($menu).removeClass('show');

                // Buka/Tutup menu yang diklik
                $parent.toggleClass('show');
                $menu.toggleClass('show');
            });

            // Tutup dropdown jika klik di luar elemen lonceng
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.nav-item.dropdown').length) {
                    $('.nav-item.dropdown, .dropdown-menu').removeClass('show');
                }
            });
        });
    })(jQuery);

        document.addEventListener('DOMContentLoaded', function() {
            const dataStatistik = {
                validasi: {{ $totalValidasi ?? 0 }},
                pengajuan: {{ $totalPengajuan ?? 0 }},
                menunggu: {{ $totalMenungguSurat ?? 0 }},
                ktp_pending: {{ $totalKtpMenunggu ?? 0 }}
            };

            // Bar Chart
            new Chart(document.getElementById('myBarChart'), {
                type: 'bar',
                data: {
                    labels: ['Total KTP', 'Pengajuan Surat', 'Surat Pending', 'KTP Pending'],
                    datasets: [{
                        label: 'Jumlah',
                        data: [dataStatistik.validasi, dataStatistik.pengajuan, dataStatistik.menunggu, dataStatistik.ktp_pending],
                        backgroundColor: ['#4e73df', '#36b9cc', '#f6c23e', '#e74a3b']
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false }
            });

            // Pie Chart
            new Chart(document.getElementById('myPieChart'), {
                type: 'doughnut',
                data: {
                    labels: ['KTP', 'Pengajuan', 'Pending'],
                    datasets: [{
                        data: [dataStatistik.validasi, dataStatistik.pengajuan, dataStatistik.menunggu],
                        backgroundColor: ['#4e73df', '#36b9cc', '#f6c23e']
                    }]
                },
                options: { maintainAspectRatio: false, cutout: '70%' }
            });
        });
    </script>
    </body>

    </html>

</body>

</html>