@section('page-title', 'Beranda')
<x-app-layout>

    {{-- CEK STATUS BANNED --}}
    @if (Auth::user()->is_banned)
        <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center mb-4" role="alert">
            <div class="display-1 text-danger me-4">
                <i class="bi bi-shield-lock-fill"></i>
            </div>
            <div>
                <h4 class="alert-heading fw-bold">AKUN ANDA DIBEKUKAN SEMENTARA!</h4>
                <p class="mb-1">
                    Sistem mendeteksi adanya <strong>keterlambatan pengembalian buku</strong> atau <strong>tunggakan
                        denda</strong> yang belum diselesaikan.
                </p>
                <hr>
                <p class="mb-0 small">
                    <i class="bi bi-info-circle me-1"></i>
                    Fitur peminjaman buku dinonaktifkan. Silakan segera kembalikan buku ke perpustakaan atau hubungi
                    petugas untuk mengaktifkan kembali akun Anda.
                </p>
            </div>
        </div>
    @endif

    {{-- HERO SECTION --}}
    <div class="card border-0 shadow-sm rounded-4 my-4 p-4 position-relative" style="background-color: #CEDEFF;">
        <div class="row">
            <div class="col-12 col-md-8 p-4 p-md-5" style="z-index: 2;">
                <h2 class="fw-bold text-dark mb-2">{{ $greeting }}, {{ $user->nama_lengkap }}!</h2>
                <p class="fs-5 mb-0" style="color: #696E82;">Siap memulai harimu dengan bacaan baru?</p>
            </div>
        </div>

        <div class="position-absolute d-none d-md-block"
            style="top: -35px; right: 40px; width: 30%; max-width: 300px; z-index: 1;">
            <img src="{{ asset('images/assets/vector-dashboard.svg') }}" alt="Ilustrasi Beranda" class="img-fluid">
        </div>
    </div>

    {{-- Statistic Card --}}
    <div class="row g-4 mb-4">
        @foreach ($stats as $stat)
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card rounded-4 border-0 h-100 text-white bg-{{ $stat['color'] }}">
                    <div class="card-body p-4">
                        <div class="icon-circle bg-white bg-opacity-25 mb-3">
                            <i class="bi {{ $stat['icon'] }} fs-3"></i>
                        </div>
                        <div>
                            <h3 class="fw-bold mb-1">{{ $stat['value'] }}</h3>
                            <p class="text-white-75 mb-0 text-uppercase small">{{ $stat['label'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Chart Statistic --}}
    <div class="row g-4 mb-4">
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex align-items-center">
                        <div class="chart-icon me-3">
                            <i class="bi bi-bar-chart-fill text-primary"></i>
                        </div>
                        <h6 class="m-0 fw-bold text-dark">Statistik Bulanan</h6>
                    </div>
                </div>
                <div class="card-body p-4">
                    <canvas id="barChart" style="max-height: 300px;" data-stats='@json($statistikBulanan ?? [' labels' => [], 'data' => []])'>
                    </canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex align-items-center">
                        <div class="chart-icon me-3">
                            <i class="bi bi-pie-chart-fill text-primary"></i>
                        </div>
                        <h6 class="m-0 fw-bold text-dark">Progress Membaca</h6>
                    </div>
                </div>
                <div class="card-body text-center d-flex justify-content-center align-items-center p-4">
                    <div class="chart-container" style="position: relative; height: 200px; width: 200px;">
                        <canvas id="donutChart" data-progress='@json($progressMembaca ?? [' selesai' => 0, 'sisa' => 0])'>
                        </canvas>
                    </div>
                </div>
                <div class="text-center py-3">
                    <div class="d-flex justify-content-center gap-4">
                        <span class="badge bg-primary-soft text-primary px-3 py-2">
                            <i class="bi bi-circle-fill me-1"></i> Telah Dibaca
                        </span>
                        <span class="badge bg-light text-secondary px-3 py-2">
                            <i class="bi bi-circle-fill me-1"></i> Belum Dibaca
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section Pemberitahuan dan Pengumuman --}}
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
                    <div class="d-flex align-items-center">
                        <div class="notification-icon me-3">
                            <i class="bi bi-megaphone-fill text-warning"></i>
                        </div>
                        <h6 class="m-0 fw-bold text-dark">Pengumuman</h6>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
                        data-bs-toggle="modal" data-bs-target="#pengumumanModal">
                        Lihat Semua
                    </button>
                </div>
                <div class="card-body p-4">
                    @forelse(collect($pengumuman)->take(2) as $item)
                        <div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
                            role="alert">
                            <div class="alert-icon me-3 mt-1">
                                <i class="{{ $item['icon'] }} fs-5"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold mb-1">{{ $item['title'] }}!</div>
                                <div class="small">{{ $item['content'] }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-4">
                            <i class="bi bi-inbox text-muted mb-3" style="font-size: 3rem;"></i>
                            <p class="text-muted mb-0">Tidak ada pengumuman baru.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
                    <div class="d-flex align-items-center">
                        <div class="notification-icon me-3">
                            <i class="bi bi-bell-fill text-info"></i>
                        </div>
                        <h6 class="m-0 fw-bold text-dark">Pemberitahuan</h6>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
                        data-bs-toggle="modal" data-bs-target="#pemberitahuanModal">
                        Lihat Semua
                    </button>
                </div>
                <div class="card-body p-0">
                    @forelse(collect($pemberitahuan)->take(3) as $item)
                        <div
                            class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
                            <div class="d-flex align-items-start flex-grow-1">
                                <div class="notification-icon me-3 mt-1">
                                    <i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
                                    <div class="text-muted small">{{ $item['content'] }}</div>
                                </div>
                            </div>
                            <span
                                class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
                                {{ $item['badge'] }}
                            </span>
                        </div>
                        @if (!$loop->last)
                            <hr class="my-0 mx-4">
                        @endif
                    @empty
                        <div class="text-center py-4">
                            <i class="bi bi-bell-slash text-muted mb-3" style="font-size: 3rem;"></i>
                            <p class="text-muted mb-0 px-4">Tidak ada pemberitahuan baru.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Section Buku Pinjam Offline --}}
    <div class="card border-0 shadow-sm mb-4" x-data="{ expanded: {{ count($bukuPinjamOffline) <= 2 ? 'true' : 'false' }} }">
        <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold text-dark">
                <i class="bi bi-book-half text-danger me-2"></i>Buku Pinjam Offline
            </h6>
            @if (count($bukuPinjamOffline) > 2)
                <div>
                    <button type="button"
                        :class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' :
                            'btn btn-sm btn-outline-primary rounded-pill px-3'"
                        @click="expanded = !expanded">
                        <span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <div class="row g-4">
                @forelse($bukuPinjamOffline as $buku)
                    <div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 3" x-transition>
                        <x-book-card :buku="$buku">
                            @if($buku['sisa_hari'] < 0)
                                <div class="d-flex align-items-center text-danger bg-danger-subtle rounded-2 px-2 py-1">
                                    <i class="bi bi-exclamation-circle-fill me-2 shadow-md"></i>
                                    <span class="fw-bold small">Terlambat: {{ abs($buku['sisa_hari']) }} hari</span>
                                </div>
                            @else
                                <div class="d-flex align-items-center text-primary bg-primary-subtle rounded-2 px-2 py-1">
                                    <i class="bi bi-clock-fill me-2 shadow-md"></i>
                                    <span class="fw-bold small">Sisa: {{ $buku['sisa_hari'] }} hari</span>
                                </div>
                            @endif
                        </x-book-card>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
                            <p class="text-muted mb-0">Tidak ada buku yang sedang dipinjam secara offline.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Section Baca Buku Online --}}
    <div class="card border-0 shadow-sm" x-data="{ expanded: {{ count($bacaBukuOnline) <= 3 ? 'true' : 'false' }} }">
        <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold text-dark">
                <i class="bi bi-globe text-success me-2"></i>Baca Buku Online
            </h6>
            @if (count($bacaBukuOnline) > 3)
                <div>
                    <button type="button"
                        :class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' :
                            'btn btn-sm btn-outline-primary rounded-pill px-3'"
                        @click="expanded = !expanded">
                        <span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <div class="row g-4">
                @forelse($bacaBukuOnline as $buku)
                    <div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 3" x-transition>
                        <x-book-card :buku="$buku">
                            <div class="progress-wrapper">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small text-dark">Progress</span> <span
                                        class="small fw-bold text-primary">{{ $buku['progress'] }}%</span>
                                </div>
                                <div class="progress bg-white" style="height: 8px;">
                                    <div class="progress-bar bg-primary rounded-pill"
                                        style="width: {{ $buku['progress'] }}%" role="progressbar"></div>
                                </div>
                            </div>
                        </x-book-card>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
                            <p class="text-muted mb-0">Tidak ada buku yang sedang dibaca secara online.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Section Rekomendasi Pembelajaran (Role Guru) --}}
    @if (Auth::user()->role == 'guru')
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
                <h6 class="m-0 fw-bold text-dark">
                    <i class="bi bi-lightbulb-fill text-success me-2"></i>Rekomendasi Pembelajaran
                </h6>
                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
                    data-bs-toggle="modal" data-bs-target="#rekomendasiModal">
                    Lihat Semua
                </button>
            </div>
            <div class="card-body">
                @forelse(collect($rekomendasiPembelajaran)->take(3) as $item)
                    <a href="{{ route('rekomendasi.show', $item['id']) }}"
                        class="d-flex gap-3 text-decoration-none text-dark mb-3">
                        <img src="{{ $item['thumbnail'] }}" class="rounded"
                            style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
                            <span class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
                        </div>
                    </a>
                    @if (!$loop->last)
                        <hr class="my-3">
                    @endif
                @empty
                    <p class="text-muted text-center">Belum ada rekomendasi.</p>
                @endforelse
            </div>
        </div>
    @endif

    <div class="modal fade" id="pengumumanModal" tabindex="-1" aria-labelledby="pengumumanModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark" id="pengumumanModalLabel">
                        <i class="bi bi-megaphone-fill text-warning me-2"></i>Semua Pengumuman
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4">
                    @foreach ($pengumuman as $item)
                        <div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
                            role="alert">
                            <div class="alert-icon me-3 mt-1">
                                <i class="{{ $item['icon'] }} fs-5"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold mb-1">{{ $item['title'] }}!</div>
                                <div class="small">{{ $item['content'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="pemberitahuanModal" tabindex="-1" aria-labelledby="pemberitahuanModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark" id="pemberitahuanModalLabel">
                        <i class="bi bi-bell-fill text-info me-2"></i>Semua Pemberitahuan
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="list-group list-group-flush">
                        @foreach ($pemberitahuan as $item)
                            <div
                                class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
                                <div class="d-flex align-items-start flex-grow-1">
                                    <div class="notification-icon me-3 mt-1">
                                        <i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
                                        <div class="text-muted small">{{ $item['content'] }}</div>
                                    </div>
                                </div>
                                <span
                                    class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
                                    {{ $item['badge'] }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rekomendasiModal" tabindex="-1" aria-labelledby="rekomendasiModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark" id="rekomendasiModalLabel">
                        <i class="bi bi-lightbulb-fill text-success me-2"></i>Semua Rekomendasi Pembelajaran
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4">
                    <div class="list-group list-group-flush">
                        @foreach ($rekomendasiPembelajaran as $item)
                            <a href="{{ route('rekomendasi.show', $item['id']) }}"
                                class="list-group-item list-group-item-action d-flex gap-3 px-0 py-3">
                                <img src="{{ $item['thumbnail'] }}" class="rounded"
                                    style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
                                <div class="flex-grow-1">
                                    <h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
                                    <span
                                        class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const statistikData = JSON.parse(document.getElementById('barChart').getAttribute('data-stats'));
            const progressData = JSON.parse(document.getElementById('donutChart').getAttribute('data-progress'));
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('js/dashboard-charts.js') }}"></script>
</x-app-layout>