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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Pustaka Nawasena</title>
    <link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="image/png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        :root {
            --primary-color: #0d47a1;
            --secondary-color: #ffb300;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: url('{{ asset("images/utama.jpg") }}') no-repeat center center fixed;
            background-size: cover;
            min-height: 100vh;
            backdrop-filter: blur(4px);
        }

        .glass {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(31, 38, 135, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            padding: 30px;
            transition: all 0.3s ease-in-out;
        }

        .glass:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
        }

        .navbar-custom {
            background: rgba(13, 71, 161, 0.9);
            backdrop-filter: blur(8px);
            border-bottom: 3px solid var(--secondary-color);
        }

        .navbar-custom .nav-link {
            color: #fff !important;
            font-weight: 500;
            padding: 15px 15px;
        }

        .navbar-custom .nav-link:hover {
            color: var(--secondary-color) !important;
        }

        .dashboard-title {
            font-weight: 800;
            color: var(--primary-color);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }

        .stat-box {
            border-left: 5px solid var(--primary-color);
            padding: 20px;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: 0.3s;
            height: 100%;
        }

        .stat-box:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .footer-custom {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            color: white;
        }

        .logo-circle {
            width: 48px;
            height: 48px;
            background-color: #f9f8f5ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-right: 10px;
        }

        .logo-circle img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .subtitle-small {
            font-size: 0.8rem;
            font-weight: 500;
            color: #555;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-custom sticky-top">
        <div class="container-fluid container-xl">
            <a class="navbar-brand fw-bold text-white fs-4 d-flex align-items-center"
                href="{{ route('admin.dashboard') }}">
                <div class="logo-circle">
                    <img src="{{ asset('images/kartu.png') }}" alt="Logo">
                </div>
                <div>
                    <div>PUSTAKA NAWASENA</div>
                    <div class="subtitle-small text-light opacity-75">Bakorwil III Malang</div>
                </div>
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="bi bi-list text-white fs-2"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('profile') }}">
                            <i class="bi bi-person-circle me-1"></i> Profil
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-sm btn-warning text-dark px-3 ms-lg-2 mt-2 mt-lg-0"
                            href="{{ route('logout') }}"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            <i class="bi bi-box-arrow-right"></i> Logout
                        </a>
                    </li>
                </ul>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
            </div>
        </div>
    </nav>

    <main class="py-5">
        <div class="container container-xl">
            <h2 class="dashboard-title mb-2 text-center display-6">
                <i class="bi bi-speedometer2 me-2"></i> Dashboard Administrasi
            </h2>
            <p class="text-center subtitle-small mb-5">Sistem Informasi Perpustakaan - Pustaka Nawasena | Bakorwil III
                Malang</p>
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="stat-box shadow-sm d-flex align-items-center justify-content-between"
                        style="border-left-color: #6f42c1;">
                        <div>
                            <h6 class="text-secondary fw-semibold mb-1">Buku Paling Sering Dipinjam</h6>
                            <h3 class="fw-bold text-purple">{{ $mostBorrowedBook->koleksi->title ?? 'Belum ada data' }}
                            </h3>
                            <p class="small text-success mb-0">
                                <i class="bi bi-arrow-up-right-circle-fill"></i> Dipinjam
                                {{ $mostBorrowedBook->total ?? 0 }} kali
                            </p>
                        </div>
                        <div>
                            @if($mostBorrowedBook->koleksi->cover ?? false)
                                <img src="{{ asset('storage/' . $mostBorrowedBook->koleksi->cover) }}" alt="Cover Buku"
                                    style="height:60px; border-radius:5px;">
                            @else
                                <i class="bi bi-book fs-1 text-purple"></i>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-4 mb-5">
                <div class="col-sm-6 col-lg-3">
                    <div class="stat-box shadow-sm">
                        <h6 class="text-secondary fw-semibold mb-1">Jumlah Koleksi</h6>
                        <h3 class="fw-bold text-primary">{{ number_format($totalBuku ?? 0) }}</h3>
                        <p class="text-success small mb-0"><i class="bi bi-arrow-up-right-circle-fill"></i> +5% dari
                            bulan lalu</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="stat-box shadow-sm" style="border-left-color: #17a2b8;">
                        <h6 class="text-secondary fw-semibold mb-1">Total Anggota</h6>
                        <h3 class="fw-bold text-info">{{ number_format($anggotaBulanIni ?? 0) }}</h3>
                        <p class="text-primary small mb-0"><i class="bi bi-person-fill"></i> Aktif bulan ini</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="stat-box shadow-sm" style="border-left-color: #ffc107;">
                        <h6 class="text-secondary fw-semibold mb-1">Peminjaman Aktif</h6>
                        <h3 class="fw-bold text-warning">{{ number_format($totalPeminjaman ?? 0) }}</h3>
                        <p class="text-danger small mb-0"><i class="bi bi-book-fill"></i> Transaksi berjalan</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="stat-box shadow-sm" style="border-left-color: #dc3545;">
                        <h6 class="text-secondary fw-semibold mb-1">Pengembalian</h6>
                        <h3 class="fw-bold text-danger">{{ number_format($totalPengembalian ?? 0) }}</h3>
                        <p class="text-success small mb-0"><i class="bi bi-arrow-repeat"></i> Minggu ini</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="glass mb-5">
                        <h5 class="fw-bold mb-4 text-primary">
                            <i class="bi bi-graph-up me-2"></i> Tren Minat Baca Pengguna
                        </h5>
                        <div style="max-height: 400px;">
                            <canvas id="chartMinat"></canvas>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-12">
                    <div class="glass mb-5">
                        <h5 class="fw-bold mb-4 text-primary">
                            <i class="bi bi-star-fill me-2"></i> Rating & Feedback Pengguna
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Pengguna</th>
                                        <th>Judul Buku</th>
                                        <th>Rating</th>
                                        <th>Feedback</th>
                                        <th>Tanggal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($ratings ?? [] as $index => $rating)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $rating->user->name ?? 'Anonim' }}</td>
                                            <td>{{ $rating->transaction->koleksi->title ?? '-' }}</td>
                                            <td>
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="bi bi-star-fill"
                                                        style="color: {{ $i <= $rating->rating ? '#FF6600' : '#ddd' }}"></i>
                                                @endfor
                                            </td>
                                            <td>{{ $rating->feedback ?? '-' }}</td>
                                            <td>{{ date('d M Y', strtotime($rating->created_at)) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">Belum ada rating atau feedback.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <h3 class="dashboard-title mb-4 text-center fs-4">
                <i class="bi bi-grid-fill me-2"></i> Menu Akses Cepat
            </h3>

            <div class="row g-4 mb-5">

                <div class="col-md-4">
                    <a href="{{ route('admin.statistik') }}" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-bar-chart-line fs-1" style="color: var(--primary-color);"></i>
                            <h5 class="mt-3 fw-bold text-dark">Statistik & Laporan</h5>
                            <p class="small text-muted mb-0">Lihat laporan rinci dan tren aktivitas pengguna.</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{ route('admin.koleksi.index') }}" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-journal-text fs-1 text-success"></i>
                            <h5 class="mt-3 fw-bold text-dark">Manajemen Koleksi</h5>
                            <p class="small text-muted mb-0">Tambah, ubah, atau kelola katalog buku & jurnal.</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{ route('admin.anggota.index') }}" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-people fs-1 text-info"></i>
                            <h5 class="mt-3 fw-bold text-dark">Manajemen Anggota</h5>
                            <p class="small text-muted mb-0">Atur data anggota & cetak kartu anggota.</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{ route('admin.peminjaman') }}" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-arrow-repeat fs-1 text-warning"></i>
                            <h5 class="mt-3 fw-bold text-dark">Manajemen Sirkulasi</h5>
                            <p class="small text-muted mb-0">Kelola peminjaman & pengembalian.</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{ route('admin.system') }}" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-gear fs-1 text-secondary"></i>
                            <h5 class="mt-3 fw-bold text-dark">Pengaturan Sistem</h5>
                            <p class="small text-muted mb-0">Konfigurasi akun & backup sistem.</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{ asset('pdf/ManualBook.pdf') }}" target="_blank" class="text-decoration-none">
                        <div class="glass text-center shadow h-100">
                            <i class="bi bi-book-half fs-1 text-primary"></i>
                            <h5 class="mt-3 fw-bold text-dark">Manual Book Sistem</h5>
                            <p class="small text-muted mb-0">Panduan lengkap penggunaan sistem.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        </div>
    </main>

    <footer class="footer-custom py-4 mt-auto">
        <div class="container container-xl text-center">
            <p class="mb-0 small">&copy; {{ date('Y') }} Pustaka Nawasena Bakorwil III Malang. Hak Cipta Dilindungi.</p>
            <p class="mb-0 small text-light mt-1">.</p>
        </div>
    </footer>

    <script>
        const ctx = document.getElementById('chartMinat').getContext('2d');
        const bulan = @json($bulanLabel ?? []);
        const dataTren = @json($chartDataFull ?? []);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: bulan,
                datasets: [{
                    label: 'Jumlah Transaksi Peminjaman',
                    data: dataTren,
                    borderColor: '#0d47a1',
                    backgroundColor: 'rgba(13, 71, 161, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 6,
                    pointBackgroundColor: 'white',
                    pointBorderWidth: 3,
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: true, position: 'bottom' },
                    tooltip: {
                        callbacks: {
                            label: (context) => context.dataset.label + ': ' + context.parsed.y + ' Transaksi'
                        }
                    }
                },
                scales: {
                    y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.05)' } },
                    x: { grid: { display: false } }
                }
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>