@extends('layouts.dashboard')

@php
    $orgName = setting('organisasi.nama', 'HNSI');
@endphp

@section('title', 'Dashboard DPP - ' . $orgName)
@section('page-title', 'Dashboard DPP - ' . $orgName)
@section('pagetitle', 'Dashboard DPP - ' . $orgName)

@section('content')
@php
    $user = auth()->user();
    $namaUser = $user->nama_lengkap ?? ($user->namalengkap ?? 'Pengurus DPP');

    $themeSidebarStart = setting('theme.sidebar_start', '#0d6efd');
    $themeSidebarMid   = setting('theme.sidebar_mid', '#0b5ed7');
    $themeSidebarEnd   = setting('theme.sidebar_end', '#0a4275');
    $themeAccent       = setting('theme.accent', '#0dcaf0');

    $totalAnggotaView = $stats['totalAnggota'] ?? ($stats->totalAnggota ?? null);

    $urlAnggota = \Illuminate\Support\Facades\Route::has('anggota.index') ? route('anggota.index') : '#';
    $urlPelaporan = \Illuminate\Support\Facades\Route::has('pelaporan.index') ? route('pelaporan.index') : '#';

    $urlKartu = null;
    if (\Illuminate\Support\Facades\Route::has('dpp.pesanan_anggota.index')) {
        $urlKartu = route('dpp.pesanan_anggota.index');
    } elseif (\Illuminate\Support\Facades\Route::has('superadmin.pesanan_anggota.index')) {
        $urlKartu = route('superadmin.pesanan_anggota.index');
    } elseif (\Illuminate\Support\Facades\Route::has('kartu.index')) {
        $urlKartu = route('kartu.index');
    }
@endphp

<style>
    .role-dpp{
        --dpp-bg:#f6f8fc;
        --dpp-surface:#ffffff;
        --dpp-surface-2:#fafcff;

        --dpp-primary: {{ $themeSidebarStart }};
        --dpp-primary-2: {{ $themeSidebarMid }};
        --dpp-primary-3: {{ $themeSidebarEnd }};
        --dpp-accent: {{ $themeAccent }};

        --dpp-primary-soft:color-mix(in srgb, var(--dpp-primary-2) 12%, white);
        --dpp-primary-soft-2:color-mix(in srgb, var(--dpp-primary-2) 18%, white);
        --dpp-info-soft:color-mix(in srgb, var(--dpp-accent) 14%, white);
        --dpp-warn-soft:rgba(245,158,11,.14);
        --dpp-success-soft:rgba(16,185,129,.12);

        --dpp-text:#1f2937;
        --dpp-muted:#6b7280;
        --dpp-border:rgba(15,23,42,.07);
        --dpp-shadow:0 16px 36px color-mix(in srgb, var(--dpp-primary) 12%, transparent);
        --dpp-shadow-soft:0 8px 24px rgba(15,23,42,.05);
        color:var(--dpp-text);
    }

    .role-dpp .dpp-shell{
        display:flex;
        flex-direction:column;
        gap:1rem;
    }

    .role-dpp .dpp-hero{
        position:relative;
        overflow:hidden;
        background:
            radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 28%),
            radial-gradient(circle at bottom left, color-mix(in srgb, var(--dpp-accent) 16%, transparent), transparent 30%),
            linear-gradient(135deg, var(--dpp-primary) 0%, var(--dpp-primary-2) 52%, var(--dpp-primary-3) 100%);
        color:#fff;
        border-radius:28px;
        padding:1.4rem 1.35rem;
        box-shadow:var(--dpp-shadow);
        border:1px solid rgba(255,255,255,.12);
    }

    .role-dpp .dpp-hero::after{
        content:"";
        position:absolute;
        right:-45px;
        bottom:-55px;
        width:200px;
        height:200px;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        filter:blur(6px);
    }

    .role-dpp .dpp-hero-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:1rem;
        align-items:center;
    }

    .role-dpp .dpp-hero-main{
        display:flex;
        align-items:center;
        gap:1rem;
    }

    .role-dpp .dpp-avatar{
        width:72px;
        height:72px;
        min-width:72px;
        border-radius:22px;
        background:rgba(255,255,255,.16);
        border:1px solid rgba(255,255,255,.18);
        display:flex;
        align-items:center;
        justify-content:center;
        backdrop-filter:blur(10px);
        font-size:1.55rem;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    }

    .role-dpp .dpp-hello{
        font-size:clamp(.8rem, .18vw + .77rem, .9rem);
        font-weight:700;
        opacity:.92;
        margin-bottom:.25rem;
        letter-spacing:.02em;
    }

    .role-dpp .dpp-title{
        font-size:clamp(1.16rem, .8vw + 1rem, 1.72rem);
        font-weight:800;
        line-height:1.2;
        margin-bottom:.45rem;
        max-width:26ch;
    }

    .role-dpp .dpp-subtitle{
        font-size:clamp(.85rem, .18vw + .82rem, .95rem);
        line-height:1.65;
        color:rgba(255,255,255,.94);
        margin-bottom:.35rem;
        max-width:64ch;
    }

    .role-dpp .dpp-sign{
        font-size:clamp(.76rem, .14vw + .74rem, .84rem);
        opacity:.9;
        display:inline-flex;
        align-items:center;
        gap:.4rem;
    }

    .role-dpp .dpp-hero-side{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:.7rem;
    }

    .role-dpp .dpp-role-pill{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        padding:.65rem 1rem;
        border-radius:999px;
        background:rgba(255,255,255,.14);
        border:1px solid rgba(255,255,255,.18);
        color:#fff;
        font-size:clamp(.77rem, .14vw + .75rem, .84rem);
        font-weight:800;
        backdrop-filter:blur(10px);
    }

    .role-dpp .dpp-mini-note{
        font-size:clamp(.78rem, .14vw + .76rem, .84rem);
        color:rgba(255,255,255,.88);
        text-align:right;
        max-width:34ch;
        line-height:1.55;
    }

    .role-dpp .dpp-stats{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:1rem;
    }

    .role-dpp .dpp-stat-card{
        border:1px solid var(--dpp-border);
        border-radius:22px;
        background:linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
        box-shadow:var(--dpp-shadow-soft);
        overflow:hidden;
        height:100%;
    }

    .role-dpp .dpp-stat-body{
        padding:1rem 1.1rem;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:1rem;
    }

    .role-dpp .dpp-stat-label{
        font-size:clamp(.76rem, .16vw + .74rem, .84rem);
        color:var(--dpp-muted);
        margin-bottom:.3rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.04em;
    }

    .role-dpp .dpp-stat-value{
        font-size:clamp(1.34rem, .95vw + 1.08rem, 1.95rem);
        font-weight:800;
        line-height:1;
        color:var(--dpp-text);
    }

    .role-dpp .dpp-stat-note{
        font-size:clamp(.78rem, .14vw + .76rem, .84rem);
        color:var(--dpp-muted);
        margin-top:.3rem;
    }

    .role-dpp .dpp-stat-icon{
        width:54px;
        height:54px;
        border-radius:17px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        font-size:1.2rem;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
    }

    .role-dpp .icon-primary{
        background:var(--dpp-primary-soft);
        color:var(--dpp-primary-2);
    }

    .role-dpp .icon-info{
        background:var(--dpp-info-soft);
        color:color-mix(in srgb, var(--dpp-accent) 72%, black);
    }

    .role-dpp .dpp-menu-section{
        background:var(--dpp-surface);
        border:1px solid var(--dpp-border);
        border-radius:24px;
        box-shadow:var(--dpp-shadow-soft);
        padding:1rem;
    }

    .role-dpp .dpp-section-head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:.75rem;
        margin-bottom:.9rem;
        flex-wrap:wrap;
    }

    .role-dpp .dpp-section-title{
        margin:0;
        font-size:clamp(.84rem, .16vw + .82rem, .92rem);
        font-weight:800;
        letter-spacing:.05em;
        text-transform:uppercase;
        color:var(--dpp-muted);
    }

    .role-dpp .dpp-section-sub{
        font-size:clamp(.8rem, .14vw + .78rem, .86rem);
        color:var(--dpp-muted);
    }

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

    .role-dpp .dpp-menu-card{
        position:relative;
        overflow:hidden;
        border:1px solid var(--dpp-border);
        border-radius:22px;
        background:linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
        box-shadow:0 8px 20px rgba(15,23,42,.04);
        transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        height:100%;
    }

    .role-dpp .dpp-menu-card::before{
        content:"";
        position:absolute;
        inset:0 auto 0 0;
        width:4px;
        opacity:0;
        transition:opacity .18s ease;
        background:linear-gradient(180deg, var(--dpp-primary), var(--dpp-accent));
    }

    .role-dpp .dpp-menu-link:hover .dpp-menu-card{
        transform:translateY(-3px);
        box-shadow:0 18px 28px color-mix(in srgb, var(--dpp-primary) 10%, transparent);
        border-color:color-mix(in srgb, var(--dpp-primary-2) 18%, white);
    }

    .role-dpp .dpp-menu-link:hover .dpp-menu-card::before{
        opacity:1;
    }

    .role-dpp .dpp-menu-body{
        padding:1rem;
        display:flex;
        align-items:flex-start;
        gap:.9rem;
        min-height:176px;
    }

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

    .role-dpp .badge-role-primary{
        background:var(--dpp-primary-soft);
        color:var(--dpp-primary-2);
    }

    .role-dpp .badge-role-info{
        background:var(--dpp-info-soft);
        color:color-mix(in srgb, var(--dpp-accent) 72%, black);
    }

    .role-dpp .badge-role-warn{
        background:var(--dpp-warn-soft);
        color:#92400e;
    }

    .role-dpp .dpp-menu-content{
        min-width:0;
        flex:1;
        display:flex;
        flex-direction:column;
        height:100%;
    }

    .role-dpp .dpp-menu-title{
        font-size:clamp(.95rem, .2vw + .92rem, 1.04rem);
        font-weight:800;
        margin:0 0 .35rem 0;
        line-height:1.25;
        color:var(--dpp-text);
    }

    .role-dpp .dpp-menu-desc{
        margin:0 0 .55rem 0;
        color:var(--dpp-muted);
        font-size:clamp(.8rem, .14vw + .78rem, .86rem);
        line-height:1.5;
    }

    .role-dpp .dpp-menu-list{
        margin:0;
        padding-left:1rem;
        color:var(--dpp-muted);
        font-size:clamp(.78rem, .13vw + .76rem, .84rem);
        line-height:1.55;
    }

    .role-dpp .dpp-menu-list li + li{
        margin-top:.2rem;
    }

    .role-dpp .dpp-menu-action{
        margin-top:auto;
        color:var(--dpp-primary-2);
        font-size:clamp(.79rem, .13vw + .77rem, .85rem);
        font-weight:700;
    }

    .role-dpp .dpp-menu-arrow{
        color:#a1a1aa;
        font-size:1rem;
        flex-shrink:0;
    }

    .role-dpp .dpp-disabled{
        opacity:.78;
        background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    }

    .role-dpp .dpp-disabled .dpp-menu-title,
    .role-dpp .dpp-disabled .dpp-menu-desc,
    .role-dpp .dpp-disabled .dpp-menu-list,
    .role-dpp .dpp-disabled .dpp-menu-action{
        color:#6b7280;
    }

    @media (max-width: 991.98px){
        .role-dpp .dpp-hero-grid{
            grid-template-columns:1fr;
        }

        .role-dpp .dpp-hero-side{
            align-items:flex-start;
        }

        .role-dpp .dpp-mini-note{
            text-align:left;
            max-width:100%;
        }
    }

    @media (max-width: 767.98px){
        .role-dpp{
            text-align:center;
        }

        .role-dpp .dpp-hero{
            border-radius:22px;
            padding:1rem;
        }

        .role-dpp .dpp-hero-main{
            align-items:center;
            flex-direction:column;
            text-align:center;
        }

        .role-dpp .dpp-avatar{
            width:58px;
            height:58px;
            min-width:58px;
            border-radius:18px;
            font-size:1.25rem;
            margin-inline:auto;
        }

        .role-dpp .dpp-title{
            font-size:clamp(1.04rem, 3.8vw, 1.32rem);
            max-width:100%;
        }

        .role-dpp .dpp-subtitle{
            font-size:clamp(.82rem, 2.8vw, .9rem);
        }

        .role-dpp .dpp-hero-side{
            align-items:center;
        }

        .role-dpp .dpp-mini-note{
            text-align:center;
        }

        .role-dpp .dpp-stats{
            grid-template-columns:1fr;
        }

        .role-dpp .dpp-stat-card{
            border-radius:18px;
        }

        .role-dpp .dpp-stat-body{
            padding:.95rem;
            flex-direction:column;
            text-align:center;
        }

        .role-dpp .dpp-stat-value{
            font-size:clamp(1.18rem, 4.8vw, 1.5rem);
        }

        .role-dpp .dpp-stat-icon{
            width:46px;
            height:46px;
            border-radius:14px;
            font-size:1.05rem;
            margin-inline:auto;
        }

        .role-dpp .dpp-menu-section{
            padding:.9rem;
            border-radius:20px;
        }

        .role-dpp .dpp-section-head{
            justify-content:center;
            text-align:center;
        }

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

        .role-dpp .dpp-menu-body{
            min-height:auto;
            padding:.95rem;
            gap:.8rem;
            flex-direction:column;
            text-align:center;
            align-items:center;
        }

        .role-dpp .dpp-menu-icon{
            width:46px;
            height:46px;
            border-radius:14px;
            font-size:1.05rem;
            margin-inline:auto;
        }

        .role-dpp .dpp-menu-content{
            text-align:center;
        }

        .role-dpp .dpp-menu-title{
            font-size:clamp(.92rem, 3.4vw, 1rem);
        }

        .role-dpp .dpp-menu-desc,
        .role-dpp .dpp-menu-list{
            font-size:clamp(.78rem, 2.9vw, .84rem);
        }

        .role-dpp .dpp-menu-list{
            text-align:left;
            display:inline-block;
        }

        .role-dpp .dpp-menu-arrow{
            margin-inline:auto;
        }
    }
</style>

<div class="container-fluid role-dpp">
    <div class="dpp-shell">

        <div class="dpp-hero">
            <div class="dpp-hero-grid">
                <div class="dpp-hero-main">
                    <div class="dpp-avatar">
                        <i class="bi bi-building"></i>
                    </div>

                    <div>
                        <div class="dpp-hello">Selamat datang, {{ $namaUser }}</div>
                        <div class="dpp-title">Panel DPP untuk memonitor dan mengelola anggota lintas provinsi secara terpusat.</div>
                        <p class="dpp-subtitle">
                            Dashboard ini membantu pemantauan anggota, pelaporan, dan layanan kartu anggota dengan tampilan yang ringkas, rapi, dan mudah dibaca.
                        </p>
                        <span class="dpp-sign">
                            <i class="bi bi-stars"></i> HNSI 2026
                        </span>
                    </div>
                </div>

                <div class="dpp-hero-side">
                    <span class="dpp-role-pill">
                        <i class="bi bi-shield-check"></i> Role: DPP
                    </span>
                    <div class="dpp-mini-note">
                        Fokus pada ringkasan utama di atas, lalu lanjut ke menu kerja strategis di bawah.
                    </div>
                </div>
            </div>
        </div>

        <div class="dpp-stats">
            <div class="dpp-stat-card">
                <div class="dpp-stat-body">
                    <div>
                        <div class="dpp-stat-label">Total Anggota</div>
                        <div class="dpp-stat-value">{{ $totalAnggotaView ?? '-' }}</div>
                        <div class="dpp-stat-note">Dalam cakupan provinsi</div>
                    </div>
                    <div class="dpp-stat-icon icon-primary">
                        <i class="bi bi-people-fill"></i>
                    </div>
                </div>
            </div>

            <div class="dpp-stat-card">
                <div class="dpp-stat-body">
                    <div>
                        <div class="dpp-stat-label">Kab/Kota Terdata</div>
                        <div class="dpp-stat-value">{{ $totalKota ?? '-' }}</div>
                        <div class="dpp-stat-note">Wilayah kerja DPP</div>
                    </div>
                    <div class="dpp-stat-icon icon-info">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="dpp-menu-section">
            <div class="dpp-section-head">
                <h5 class="dpp-section-title">Menu Utama</h5>
                <div class="dpp-section-sub">Akses cepat ke modul inti pengelolaan DPP</div>
            </div>

            <div class="row g-3">
                <div class="col-12 col-md-4 d-flex">
                    @if($urlAnggota !== '#')
                        <a href="{{ $urlAnggota }}" class="dpp-menu-link w-100">
                            <div class="dpp-menu-card h-100">
                                <div class="dpp-menu-body">
                                    <span class="dpp-menu-icon badge-role-primary">
                                        <i class="bi bi-people-fill"></i>
                                    </span>

                                    <div class="dpp-menu-content">
                                        <h6 class="dpp-menu-title">Data Anggota</h6>
                                        <p class="dpp-menu-desc">
                                            Kelola data anggota di provinsi terkait dengan akses yang lebih rapi dan terarah.
                                        </p>
                                        <ul class="dpp-menu-listst">
                                            >Filter otomatis sesuai wilayah login DPP.</l/li>
                                            >Dapat difilter lagi per kabupaten dan kecamatan.</li>
                                        </ul>
                                        <div class="dpp-menu-action">Buka data anggota &raquo;</div>
                                    </div>

                                    <i class="bi bi-chevron-right dpp-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="dpp-menu-card dpp-disabled h-100 w-100">
                            <div class="dpp-menu-body">
                                <span class="dpp-menu-icon badge-role-primary">
                                    <i class="bi bi-people-fill"></i>
                                </span>

                                <div class="dpp-menu-content">
                                    <h6 class="dpp-menu-title">Data Anggota</h6>
                                    <p class="dpp-menu-desc">Menu belum aktif karena route anggota.index belum tersedia.</p>
                                    <div class="dpp-menu-action">Hubungi admin untuk mengaktifkan.</div>
                                </div>

                                <i class="bi bi-lock dpp-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="col-12 col-md-4 d-flex">
                    @if($urlPelaporan !== '#')
                        <a href="{{ $urlPelaporan }}" class="dpp-menu-link w-100">
                            <div class="dpp-menu-card h-100">
                                <div class="dpp-menu-body">
                                    <span class="dpp-menu-icon badge-role-info">
                                        <i class="bi bi-graph-up-arrow"></i>
                                    </span>

                                    <div class="dpp-menu-content">
                                        <h6 class="dpp-menu-title">Pelaporan</h6>
                                        <p class="dpp-menu-desc">
                                            Akses laporan keanggotaan dan distribusi anggota berdasarkan wilayah serta atribut lain.
                                        </p>
                                        <ul class="dpp-menu-listst">
                                            >Filter berdasarkan provinsi dan kabupaten.</l/li>
                                            >Rekap pekerjaan, pendidikan, dan fasilitas anggota.</li>
                                        </ul>
                                        <div class="dpp-menu-action">Buka menu pelaporan &raquo;</div>
                                    </div>

                                    <i class="bi bi-chevron-right dpp-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="dpp-menu-card dpp-disabled h-100 w-100">
                            <div class="dpp-menu-body">
                                <span class="dpp-menu-icon badge-role-info">
                                    <i class="bi bi-graph-up-arrow"></i>
                                </span>

                                <div class="dpp-menu-content">
                                    <h6 class="dpp-menu-title">Pelaporan</h6>
                                    <p class="dpp-menu-desc">Menu belum aktif karena route pelaporan.index belum tersedia.</p>
                                    <div class="dpp-menu-action">Hubungi admin untuk mengaktifkan.</div>
                                </div>

                                <i class="bi bi-lock dpp-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="col-12 col-md-4 d-flex">
                    @if($urlKartu)
                        <a href="{{ $urlKartu }}" class="dpp-menu-link w-100">
                            <div class="dpp-menu-card h-100">
                                <div class="dpp-menu-body">
                                    <span class="dpp-menu-icon badge-role-warn">
                                        <i class="bi bi-credit-card-2-front-fill"></i>
                                    </span>

                                    <div class="dpp-menu-content">
                                        <h6 class="dpp-menu-title">Kartu Anggota</h6>
                                        <p class="dpp-menu-desc">
                                            Kelola pemesanan dan pencetakan kartu anggota HNSI secara lebih terpusat.
                                        </p>
                                        <ul class="dpp-menu-listst">
                                            >Input permintaan berdasarkan NIK atau nomor anggota.</l/li>
                                            >Pantau status pembuatan dan kebutuhan pasfoto.</li>
                                        </ul>
                                        <div class="dpp-menu-action">Kelola kartu anggota &raquo;</div>
                                    </div>

                                    <i class="bi bi-chevron-right dpp-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="dpp-menu-card dpp-disabled h-100 w-100">
                            <div class="dpp-menu-body">
                                <span class="dpp-menu-icon badge-role-warn">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </span>

                                <div class="dpp-menu-content">
                                    <h6 class="dpp-menu-title">Kartu Anggota</h6>
                                    <p class="dpp-menu-desc">Menu kartu anggota belum tersedia untuk role ini atau route belum dibuat.</p>
                                    <div class="dpp-menu-action">Hubungi admin untuk mengaktifkan menu.</div>
                                </div>

                                <i class="bi bi-lock dpp-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection