@extends('layouts.dashboard')

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

@section('content')

@php
    $user = auth()->user();

    $namaUser = $user->nama_lengkap ?? ($user->namalengkap ?? 'Joudie');
    $roleUser = $user->role ?? ($user->nama_role ?? ($user->level ?? '-'));

    $urlAnggota   = route('anggota.index');
    $urlKeluarga  = route('keluarga.index');
    $urlPelaporan = route('pelaporan.index');
    $urlSetting   = route('setting.index');
    $urlBackup    = route('backup.index');

    $urlAgama       = route('master.agama.index');
    $urlJabatan     = route('master.jabatan.index');
    $urlJenisUsaha  = route('master.jenis-usaha.index');
    $urlPendidikan  = route('master.pendidikan.index');
    $urlStatusKerja = route('master.status-pekerjaan.index');

    $hasSampah = \Illuminate\Support\Facades\Route::has('sampah.index');
    $urlSampah = $hasSampah ? route('sampah.index') : null;

    $hasJoudieKartu     = \Illuminate\Support\Facades\Route::has('joudie.pesanan_anggota.index');
    $hasSuperadminAlias = \Illuminate\Support\Facades\Route::has('superadmin.pesanan_anggota.index');
    $hasSuperadminAsli  = \Illuminate\Support\Facades\Route::has('superadmin.pesanan-kartu.index');

    $urlKartu = null;
    $kartuRouteDipakai = null;

    if ($hasJoudieKartu) {
        $urlKartu = route('joudie.pesanan_anggota.index');
        $kartuRouteDipakai = 'joudie.pesanan_anggota.index';
    } elseif ($hasSuperadminAlias) {
        $urlKartu = route('superadmin.pesanan_anggota.index');
        $kartuRouteDipakai = 'superadmin.pesanan_anggota.index';
    } elseif ($hasSuperadminAsli) {
        $urlKartu = route('superadmin.pesanan-kartu.index');
        $kartuRouteDipakai = 'superadmin.pesanan-kartu.index';
    }

    $DEBUG = false;
@endphp

<style>
    .j-dashboard{
        --jd-primary:#0d6efd;
        --jd-primary-dark:#0b5ed7;
        --jd-cyan:#0dcaf0;
        --jd-green:#198754;
        --jd-red:#dc3545;
        --jd-yellow:#f59f00;
        --jd-purple:#6f42c1;
        --jd-dark:#0f172a;
        --jd-muted:#64748b;
        --jd-border:rgba(15, 23, 42, 0.08);
        --jd-bg:#f8fafc;
        --jd-card:#ffffff;
    }

    .j-dashboard{
        color: var(--jd-dark);
    }

    .jd-hero{
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 55%, #0dcaf0 100%);
        color: #fff;
        border-radius: 22px;
        padding: 1.25rem 1.1rem;
        box-shadow: 0 14px 34px rgba(13, 110, 253, .18);
        margin-bottom: 1rem;
    }

    .jd-hero::after{
        content:'';
        position:absolute;
        right:-40px;
        top:-40px;
        width:160px;
        height:160px;
        border-radius:50%;
        background: rgba(255,255,255,.10);
    }

    .jd-hero::before{
        content:'';
        position:absolute;
        right:60px;
        bottom:-50px;
        width:140px;
        height:140px;
        border-radius:50%;
        background: rgba(255,255,255,.08);
    }

    .jd-hero-content{
        position: relative;
        z-index: 2;
    }

    .jd-hero-kicker{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        background: rgba(255,255,255,.14);
        color:#fff;
        border:1px solid rgba(255,255,255,.18);
        border-radius:999px;
        padding:.35rem .75rem;
        font-size:.75rem;
        font-weight:600;
        margin-bottom:.75rem;
        backdrop-filter: blur(4px);
    }

    .jd-hero-title{
        font-size: clamp(1.2rem, 1rem + 1.1vw, 1.85rem);
        font-weight:800;
        line-height:1.2;
        margin-bottom:.35rem;
    }

    .jd-hero-sub{
        margin:0;
        font-size:.92rem;
        opacity:.95;
        max-width:720px;
    }

    .jd-stat-card{
        border:1px solid rgba(255,255,255,.6);
        border-radius:18px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        height:100%;
    }

    .jd-stat-body{
        padding: .95rem 1rem;
    }

    .jd-stat-label{
        font-size:.78rem;
        color: var(--jd-muted);
        margin-bottom:.2rem;
        font-weight:600;
    }

    .jd-stat-value{
        font-size:1.35rem;
        font-weight:800;
        color: var(--jd-dark);
        line-height:1.1;
    }

    .jd-section-title{
        font-size:.82rem;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
        color: var(--jd-muted);
        margin: .25rem 0 .8rem;
        padding-left:.2rem;
    }

    .jd-menu-link{
        text-decoration:none;
        color:inherit;
        display:block;
        height:100%;
    }

    .jd-menu-card{
        border:1px solid var(--jd-border);
        border-radius:20px;
        background: var(--jd-card);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        height:100%;
    }

    .jd-menu-link:hover .jd-menu-card{
        transform: translateY(-3px);
        box-shadow: 0 18px 34px rgba(13, 110, 253, 0.10);
        border-color: rgba(13, 110, 253, 0.18);
    }

    .jd-menu-body{
        padding: 1rem;
        min-height: 160px;
        display:flex;
        flex-direction:column;
    }

    .jd-menu-top{
        display:flex;
        align-items:flex-start;
        gap:.85rem;
        margin-bottom:.8rem;
    }

    .jd-menu-icon{
        width:50px;
        height:50px;
        border-radius:15px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:1.15rem;
        flex-shrink:0;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .jd-icon-blue{ background: rgba(13,110,253,.12); color:#0d6efd; }
    .jd-icon-green{ background: rgba(25,135,84,.12); color:#198754; }
    .jd-icon-gray{ background: rgba(108,117,125,.12); color:#6c757d; }
    .jd-icon-yellow{ background: rgba(245,159,0,.16); color:#a16207; }
    .jd-icon-cyan{ background: rgba(13,202,240,.14); color:#0b7285; }
    .jd-icon-red{ background: rgba(220,53,69,.12); color:#dc3545; }
    .jd-icon-dark{ background: rgba(15,23,42,.10); color:#0f172a; }
    .jd-icon-purple{ background: rgba(111,66,193,.14); color:#6f42c1; }

    .jd-menu-title{
        font-size:1rem;
        font-weight:800;
        margin:0;
        color: var(--jd-dark);
        line-height:1.25;
    }

    .jd-menu-desc{
        font-size:.86rem;
        color: var(--jd-muted);
        line-height:1.55;
        margin-bottom:1rem;
    }

    .jd-menu-action{
        margin-top:auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:.84rem;
        font-weight:700;
    }

    .jd-menu-arrow{
        color:#94a3b8;
        font-size:1rem;
    }

    .jd-disabled{
        opacity:.72;
    }

    .jd-chip{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        border-radius:999px;
        padding:.28rem .65rem;
        font-size:.72rem;
        font-weight:700;
        background:#eef4ff;
        color:#0d6efd;
    }

    @media (max-width: 767.98px){
        .j-dashboard{
            padding-bottom: .25rem;
        }

        .jd-hero{
            border-radius:18px;
            padding:1rem .95rem;
            margin-bottom:.9rem;
        }

        .jd-hero-kicker{
            font-size:.7rem;
            padding:.3rem .65rem;
            margin-bottom:.65rem;
        }

        .jd-hero-title{
            font-size:1.12rem;
        }

        .jd-hero-sub{
            font-size:.83rem;
        }

        .jd-stat-body{
            padding:.85rem .9rem;
        }

        .jd-stat-value{
            font-size:1.15rem;
        }

        .jd-menu-card{
            border-radius:18px;
        }

        .jd-menu-body{
            min-height:auto;
            padding:.95rem;
        }

        .jd-menu-top{
            gap:.75rem;
            margin-bottom:.7rem;
        }

        .jd-menu-icon{
            width:46px;
            height:46px;
            border-radius:13px;
            font-size:1.05rem;
        }

        .jd-menu-title{
            font-size:.94rem;
        }

        .jd-menu-desc{
            font-size:.82rem;
            margin-bottom:.85rem;
        }

        .jd-menu-action{
            font-size:.8rem;
        }
    }
</style>

<div class="container-fluid px-0 j-dashboard">

    @if($DEBUG)
        <div class="alert alert-warning py-2 mb-3">
            <div class="fw-semibold">DEBUG: JOUDIE DASHBOARD LOADED</div>
            <div class="small">
                User: {{ $namaUser }} |
                Role: {{ $roleUser }}
            </div>
            <div class="small mt-1">
                has(joudie.pesanan_anggota.index): {{ $hasJoudieKartu ? 'YES' : 'NO' }} |
                has(superadmin.pesanan_anggota.index): {{ $hasSuperadminAlias ? 'YES' : 'NO' }} |
                has(superadmin.pesanan-kartu.index): {{ $hasSuperadminAsli ? 'YES' : 'NO' }}
            </div>
            <div class="small mt-1">
                has(sampah.index): {{ $hasSampah ? 'YES' : 'NO' }} |
                Route dipakai: {{ $kartuRouteDipakai ?? '-' }} |
                URL kartu: {{ $urlKartu ?? '-' }}
            </div>
        </div>
    @endif

    <div class="jd-hero">
        <div class="jd-hero-content">
            <div class="jd-hero-kicker">
                <i class="bi bi-stars"></i>
                Panel Joudie
            </div>
            <div class="jd-hero-title">Selamat datang, {{ $namaUser }}</div>
            <p class="jd-hero-sub">
                Panel kendali HNSI 2026 untuk mengelola anggota, keluarga, master data, pelaporan, kartu anggota, sampah data, dan pengaturan sistem dengan akses cepat yang nyaman di desktop maupun Android.
            </p>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-6 col-md-3">
            <div class="jd-stat-card">
                <div class="jd-stat-body">
                    <div class="jd-stat-label">Total Anggota</div>
                    <div class="jd-stat-value">{{ $totalAnggota ?? '-' }}</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="jd-stat-card">
                <div class="jd-stat-body">
                    <div class="jd-stat-label">Provinsi Aktif</div>
                    <div class="jd-stat-value">{{ $totalProvinsi ?? '-' }}</div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="jd-stat-card">
                <div class="jd-stat-body">
                    <div class="jd-stat-label">Role Login</div>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <span class="jd-chip"><i class="bi bi-person-badge"></i> {{ $roleUser }}</span>
                        <span class="text-muted small">Akses cepat semua menu utama tersedia dari dashboard ini.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="jd-section-title">Menu Utama</div>

    <div class="row g-3">

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlAnggota }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-blue">
                                <i class="bi bi-people-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Data Anggota</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Kelola data anggota HNSI, tambah data baru, edit, hapus, dan filter sesuai kebutuhan wilayah.
                        </div>
                        <div class="jd-menu-action text-primary">
                            <span>Buka data anggota</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlKeluarga }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-green">
                                <i class="bi bi-people"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Data Keluarga</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Kelola data keluarga anggota untuk melengkapi profil sosial dan struktur rumah tangga anggota.
                        </div>
                        <div class="jd-menu-action text-success">
                            <span>Kelola data keluarga</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        
        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlAgama }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-gray">
                                <i class="bi bi-book"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Master Agama</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Lihat daftar agama yang digunakan sebagai referensi pada data anggota dan data keluarga.
                        </div>
                        <div class="jd-menu-action text-secondary">
                            <span>Lihat master agama</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlJabatan }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-yellow">
                                <i class="bi bi-award-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Master Jabatan</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Atur daftar jabatan struktural organisasi untuk semua tingkat kepengurusan.
                        </div>
                        <div class="jd-menu-action" style="color:#a16207;">
                            <span>Kelola master jabatan</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlJenisUsaha }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-cyan">
                                <i class="bi bi-basket-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Master Jenis Usaha</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Kelola jenis usaha dan mata pencaharian utama anggota sebagai referensi data ekonomi.
                        </div>
                        <div class="jd-menu-action" style="color:#0b7285;">
                            <span>Kelola jenis usaha</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlPendidikan }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-blue">
                                <i class="bi bi-mortarboard-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Master Pendidikan</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Lihat dan kelola referensi jenjang pendidikan yang dipakai dalam data anggota.
                        </div>
                        <div class="jd-menu-action text-primary">
                            <span>Lihat master pendidikan</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlStatusKerja }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-red">
                                <i class="bi bi-briefcase-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Master Status Pekerjaan</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Atur kategori status pekerjaan untuk klasifikasi sosial dan ekonomi anggota.
                        </div>
                        <div class="jd-menu-action text-danger">
                            <span>Kelola status pekerjaan</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlPelaporan }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-purple">
                                <i class="bi bi-graph-up-arrow"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Pelaporan</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Akses laporan keanggotaan, distribusi wilayah, pertumbuhan, dan indikator lainnya.
                        </div>
                        <div class="jd-menu-action" style="color:#6f42c1;">
                            <span>Buka menu pelaporan</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlSetting }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-dark">
                                <i class="bi bi-gear-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Setting</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Akses pengaturan sistem, parameter aplikasi, dan konfigurasi yang diperlukan.
                        </div>
                        <div class="jd-menu-action" style="color:#0f172a;">
                            <span>Masuk ke pengaturan</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlBackup }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-gray">
                                <i class="bi bi-hdd-network-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Backup</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Kelola backup basis data dan arsip penting untuk menjaga keamanan data keanggotaan.
                        </div>
                        <div class="jd-menu-action text-secondary">
                            <span>Kelola backup sistem</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-xl-4">
            @if($urlKartu)
                <a href="{{ $urlKartu }}" class="jd-menu-link">
                    <div class="jd-menu-card">
                        <div class="jd-menu-body">
                            <div class="jd-menu-top">
                                <span class="jd-menu-icon jd-icon-yellow">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </span>
                                <div>
                                    <h6 class="jd-menu-title">Kartu Anggota</h6>
                                </div>
                            </div>
                            <div class="jd-menu-desc">
                                Kelola pemesanan, proses, dan pencetakan kartu anggota HNSI secara terpusat.
                            </div>
                            <div class="jd-menu-action" style="color:#a16207;">
                                <span>Kelola kartu anggota</span>
                                <i class="bi bi-chevron-right jd-menu-arrow"></i>
                            </div>
                        </div>
                    </div>
                </a>
            @else
                <div class="jd-menu-card jd-disabled">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-yellow">
                                <i class="bi bi-credit-card-2-front-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Kartu Anggota</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Route menu kartu anggota belum tersedia. Aktifkan route terlebih dahulu agar menu bisa digunakan.
                        </div>
                        <div class="jd-menu-action text-muted">
                            <span>Belum tersedia</span>
                            <i class="bi bi-dash-circle jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        @if($urlSampah)
        <div class="col-12 col-md-6 col-xl-4">
            <a href="{{ $urlSampah }}" class="jd-menu-link">
                <div class="jd-menu-card">
                    <div class="jd-menu-body">
                        <div class="jd-menu-top">
                            <span class="jd-menu-icon jd-icon-red">
                                <i class="bi bi-trash-fill"></i>
                            </span>
                            <div>
                                <h6 class="jd-menu-title">Sampah Data</h6>
                            </div>
                        </div>
                        <div class="jd-menu-desc">
                            Lihat data anggota yang sudah dihapus, lakukan restore, atau hapus permanen bila diperlukan.
                        </div>
                        <div class="jd-menu-action text-danger">
                            <span>Buka menu sampah</span>
                            <i class="bi bi-chevron-right jd-menu-arrow"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @endif

    </div>
</div>
@endsection