@extends('layouts.dashboard')

@section('title', 'Dashboard Pelaporan')
@section('page-title', 'Dashboard Pelaporan - HNSI 2026')

@section('content')
    <div class="container-fluid">
        {{-- Live Statistics --}}
        <div class="row mb-4">
            <div class="col-12 col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm bg-primary text-white h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-people-fill fs-1 opacity-75 mb-2"></i>
                        <h3 class="mb-1">{{ number_format($stats['totalAnggota'] ?? 0) }}</h3>
                        <p class="mb-0 small">Anggota Aktif</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm bg-success text-white h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-person-badge fs-1 opacity-75 mb-2"></i>
                        <h3 class="mb-1">{{ number_format($stats['totalPengurus'] ?? 0) }}</h3>
                        <p class="mb-0 small">Pengurus</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm bg-info text-white h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-geo-alt fs-1 opacity-75 mb-2"></i>
                        <h3 class="mb-1">{{ number_format($stats['totalProvinsi'] ?? 0) }}</h3>
                        <p class="mb-0 small">Provinsi</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm bg-warning text-dark h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-shield-check fs-1 opacity-75 mb-2"></i>
                        <h3 class="mb-1">{{ number_format(($stats['persenBPJS'] ?? 0), 1) }}%</h3>
                        <p class="mb-0 small">BPJS Kesehatan</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Salam --}}
        <div class="mb-4">
            <h5 class="mb-1">Dashboard Pelaporan HNSI</h5>
            <p class="text-muted mb-0" style="font-size: 13px;">
                Akses semua laporan keanggotaan, demografi, dan statistik untuk internal dan dinas terkait.
            </p>
        </div>

        {{-- 1. MANAJEMEN INTERNAL KOPERASI --}}
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="mb-2 text-primary"><i class="bi bi-building-gear me-1"></i>Manajemen Internal </h6>
            </div>
        </div>
        <div class="row g-3 mb-4">
            {{-- Daftar Anggota Aktif ✅ LIVE --}}
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('pelaporan.daftar-anggota') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0 hover-lift">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-primary me-2"><i class="bi bi-people-fill"></i></span>
                                <h6 class="mb-0">Daftar Anggota Aktif</h6>
                            </div>
                            <p class="text-muted small mb-2">Semua anggota + status kartu</p>
                            <ul class="small text-muted mb-2 ps-3">
                                <li>Nama, NIK, tanggal lahir, kartu</li>
                            </ul>
                            <span class="mt-auto small text-primary fw-bold">✅ LIVE - Tabel + Excel/PDF &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Rekap Pengurus - Under Construction --}}
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.rekap-pengurus') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-success me-2"><i class="bi bi-person-check-fill"></i></span>
                                <h6 class="mb-0">Rekap Pengurus</h6>
                            </div>
                            <p class="text-muted small mb-2">Jumlah per jabatan</p>
                            <span class="mt-auto small text-success">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Anggota Baru --}}
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.anggota-baru') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-info me-2"><i class="bi bi-arrow-right-circle-fill"></i></span>
                                <h6 class="mb-0">Anggota Baru</h6>
                            </div>
                            <p class="text-muted small mb-2">Per bulan/tahun</p>
                            <span class="mt-auto small text-info">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Kontak Lengkap --}}
            {{-- <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.kontak-lengkap') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-warning text-dark me-2"><i class="bi bi-telephone-fill"></i></span>
                                <h6 class="mb-0">Kontak Lengkap</h6>
                            </div>
                            <p class="text-muted small mb-2">HP/email untuk broadcast</p>
                            <span class="mt-auto small text-warning">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div> --}}
        </div>

        {{-- 2. DEMOGRAFI & SOSIAL --}}
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="mb-2 text-success"><i class="bi bi-graph-up me-1"></i>Demografi & Sosial</h6>
            </div>
        </div>
        <div class="row g-3 mb-4">
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.demografi') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-success me-2"><i class="bi bi-person-lines-fill"></i></span>
                                <h6 class="mb-0">Demografi Anggota</h6>
                            </div>
                            <p class="text-muted small mb-2">L/P, usia, pendidikan</p>
                            <span class="mt-auto small text-success">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.distribusi-wilayah') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-primary me-2"><i class="bi bi-geo-alt-fill"></i></span>
                                <h6 class="mb-0">Distribusi Wilayah</h6>
                            </div>
                            <p class="text-muted small mb-2">Per prov/kab/kec</p>
                            <span class="mt-auto small text-primary">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.pekerjaan-ekonomi') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-warning text-dark me-2"><i class="bi bi-briefcase-fill"></i></span>
                                <h6 class="mb-0">Pekerjaan & Ekonomi</h6>
                            </div>
                            <p class="text-muted small mb-2">Status pekerjaan</p>
                            <span class="mt-auto small text-warning">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.agama-keluarga') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-secondary me-2"><i class="bi bi-heart-fill"></i></span>
                                <h6 class="mb-0">Agama & Keluarga</h6>
                            </div>
                            <p class="text-muted small mb-2">Profil sosial</p>
                            <span class="mt-auto small text-secondary">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- 3. DINAS PERIKANAN / KOPERASI ✅ LIVE --}}
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="mb-2 text-info"><i class="bi bi-award-fill me-1"></i>Dinas Perikanan / Koperasi</h6>
            </div>
        </div>
        <div class="row g-3 mb-4">
            {{-- Profil Nelayan ✅ LIVE --}}
            <div class="col-12 col-md-6 col-lg-4">
                <a href="{{ route('superadmin.pelaporan.profil-nelayan') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0 hover-lift bg-light">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-success me-2"><i class="bi bi-fish-fill"></i></span>
                                <h6 class="mb-0">Profil Nelayan</h6>
                            </div>
                            <p class="text-muted small mb-2">Nelayan aktif per wilayah</p>
                            <ul class="small text-muted mb-2 ps-3">
                                <li>Prov/Kab/Kec</li>
                                <li>Puskonera/Kopris</li>
                            </ul>
                            <span class="mt-auto small text-success fw-bold">✅ LIVE &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Kesejahteraan Nelayan ✅ LIVE --}}
            <div class="col-12 col-md-6 col-lg-4">
                <a href="{{ route('superadmin.pelaporan.kesejahteraan-nelayan') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0 hover-lift bg-light">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-success me-2"><i class="bi bi-house-heart"></i></span>
                                <h6 class="mb-0">Kesejahteraan Nelayan</h6>
                            </div>
                            <p class="text-muted small mb-2">Rumah, listrik, sanitasi</p>
                            <span class="mt-auto small text-success fw-bold">✅ LIVE &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Asuransi Kecelakaan ✅ LIVE --}}
            <div class="col-12 col-md-6 col-lg-4">
                <a href="{{ route('superadmin.pelaporan.asuransi-kecelakaan') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0 hover-lift bg-light">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-success me-2"><i class="bi bi-shield-check"></i></span>
                                <h6 class="mb-0">Asuransi & Kecelakaan</h6>
                            </div>
                            <p class="text-muted small mb-2">Riwayat + coverage</p>
                            <span class="mt-auto small text-success fw-bold">✅ LIVE &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- 4. KEUANGAN DASAR --}}
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="mb-2 text-warning"><i class="bi bi-currency-dollar me-1"></i>Keuangan Dasar</h6>
            </div>
        </div>
        <div class="row g-3 mb-4">
            {{-- <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.rekening-bank') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-warning text-dark me-2"><i class="bi bi-bank"></i></span>
                                <h6 class="mb-0">Rekening Bank</h6>
                            </div>
                            <p class="text-muted small mb-2">Data transfer bantuan</p>
                            <span class="mt-auto small text-warning">⏳ Soon &raquo;</span>
                        </div>
                    </div>
                </a>
            </div> --}}
            <div class="col-12 col-md-6 col-lg-3">
                <a href="{{ route('superadmin.pelaporan.bukti-pendaftaran') }}" class="text-decoration-none text-reset">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-secondary me-2"><i class="bi bi-file-earmark-check"></i></span>
                                <h6 class="mb-0">Bukti Pendaftaran</h6>
                            </div>
                            <p class="text-muted small mb-2">Status dokumen</p>
                            <span class="mt-auto small text-secondary">siap⏳ &raquo;</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <style>
        .hover-lift:hover {
            transform: translateY(-4px);
            transition: all 0.2s ease;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
        }
    </style>
@endsection