@extends('layouts.dashboard')

@php
    $orgName = setting('organisasi.nama', 'HNSI');
    $pageHeading = 'Dashboard DPC Pengurus - ' . $orgName;
@endphp

@section('title', $pageHeading)
@section('page-title', $pageHeading)
@section('pagetitle', $pageHeading)

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

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

    $urlKartu = null;

    if (\Illuminate\Support\Facades\Route::has('dpc_pengurus.pesanan_anggota.index')) {
        $urlKartu = route('dpc_pengurus.pesanan_anggota.index');
    } elseif (\Illuminate\Support\Facades\Route::has('dpc.pesanan_anggota.index')) {
        $urlKartu = route('dpc.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('superadmin.pesanan-kartu.index')) {
        $urlKartu = route('superadmin.pesanan-kartu.index');
    }
@endphp

<style>
    .dpcp-page{
        --dpcp-bg:#f4f7fb;
        --dpcp-surface:#ffffff;
        --dpcp-surface-2:#f8fafc;

        --dpcp-primary: {{ $themeSidebarStart }};
        --dpcp-primary-mid: {{ $themeSidebarMid }};
        --dpcp-primary-dark: {{ $themeSidebarEnd }};
        --dpcp-accent: {{ $themeAccent }};

        --dpcp-amber:#f59f00;
        --dpcp-text:#0f172a;
        --dpcp-muted:#64748b;
        --dpcp-border:rgba(15,23,42,.07);
        --dpcp-shadow:0 10px 30px rgba(15,23,42,.07);
        --dpcp-shadow-soft:0 8px 24px rgba(15,23,42,.05);
        color:var(--dpcp-text);
    }

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

    .dpcp-hero{
        position:relative;
        overflow:hidden;
        background:
            radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
            radial-gradient(circle at bottom left, color-mix(in srgb, var(--dpcp-accent) 16%, transparent), transparent 32%),
            linear-gradient(135deg, var(--dpcp-primary) 0%, var(--dpcp-primary-mid) 55%, var(--dpcp-primary-dark) 100%);
        color:#fff;
        border-radius:28px;
        padding:1.4rem 1.35rem;
        box-shadow:0 18px 36px color-mix(in srgb, var(--dpcp-primary) 18%, transparent);
        border:1px solid rgba(255,255,255,.12);
    }

    .dpcp-hero::after{
        content:"";
        position:absolute;
        right:-40px;
        bottom:-50px;
        width:180px;
        height:180px;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        filter:blur(4px);
    }

    .dpcp-hero-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:1.25fr .75fr;
        gap:1rem;
        align-items:center;
    }

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

    .dpcp-hero-avatar{
        width:68px;
        height:68px;
        min-width:68px;
        border-radius:20px;
        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.5rem;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    }

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

    .dpcp-hero-title{
        font-size:clamp(1.14rem, .76vw + 1rem, 1.68rem);
        font-weight:800;
        line-height:1.2;
        margin-bottom:.45rem;
        max-width:24ch;
    }

    .dpcp-hero-quote{
        font-size:clamp(.85rem, .18vw + .83rem, .95rem);
        line-height:1.6;
        margin-bottom:.35rem;
        color:rgba(255,255,255,.96);
        max-width:60ch;
    }

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

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

    .dpcp-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);
    }

    .dpcp-mini-note{
        font-size:clamp(.77rem, .14vw + .75rem, .84rem);
        color:rgba(255,255,255,.88);
        text-align:right;
        max-width:30ch;
        line-height:1.55;
    }

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

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

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

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

    .dpcp-stat-value{
        font-size:clamp(1.3rem, .9vw + 1.05rem, 1.9rem);
        font-weight:800;
        line-height:1;
        color:var(--dpcp-text);
    }

    .dpcp-stat-icon{
        width:52px;
        height:52px;
        border-radius:16px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        font-size:1.2rem;
    }

    .dpcp-stat-icon.blue{
        background:color-mix(in srgb, var(--dpcp-primary) 12%, white);
        color:var(--dpcp-primary);
    }

    .dpcp-stat-icon.cyan{
        background:color-mix(in srgb, var(--dpcp-accent) 16%, white);
        color:color-mix(in srgb, var(--dpcp-accent) 72%, black);
    }

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

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

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

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

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

    .dpcp-menu-card{
        position:relative;
        overflow:hidden;
        border:1px solid var(--dpcp-border);
        border-radius:20px;
        background:linear-gradient(180deg, #ffffff 0%, #f8fbff 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%;
    }

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

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

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

    .dpcp-menu-body{
        padding:1rem;
        display:flex;
        align-items:center;
        gap:.9rem;
        min-height:98px;
    }

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

    .dpcp-menu-content{
        min-width:0;
        flex:1;
    }

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

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

    .dpcp-menu-arrow{
        color:#94a3b8;
        font-size:1rem;
        flex-shrink:0;
    }

    .dpcp-icon-blue{ background:color-mix(in srgb, var(--dpcp-primary) 12%, white); color:var(--dpcp-primary); }
    .dpcp-icon-cyan{ background:color-mix(in srgb, var(--dpcp-accent) 16%, white); color:color-mix(in srgb, var(--dpcp-acmary) 12%, white); c
    .dpcp-icon-amber{ background:rgba(245,159,0,.16); color:#a16207; }

    .dpcp-menu-disabled{
        opacity:.78;
        background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    }

    .dpcp-menu-disabled .dpcp-menu-title,
    .dpcp-menu-disabled .dpcp-menu-desc{
        color:#6b7280;
    }

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

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

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

    @media (max-wmary) 12%, white); c     .dpcp-page{
            text-align:center;
        }

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

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

        .dpcp-hero-avatar{
            width:56px;
            height:56px;
            min-width:56px;
            border-radius:16px;
            font-size:1.2rem;
            margin-inline:auto;
        }

        .dpcp-hero-title{
            font-size:clamp(1.02rem, 3.7vw, 1.3rem);
            max-width:100%;
        }

        .dpcp-hero-quote{
            font-size:clamp(.82rem, 2.8vw, .92rem);
        }

        .dpcp-hero-side{
            align-items:center;
        }

        .dpcp-mini-note{
            text-align:center;
        }

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

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

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

        .dpcp-stat-value{
            font-size:clamp(1.18rem, 4.6vw, 1.5rem);
        }

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

        .dpcp-menu-section{
            padmary) 12%, white); c    border-radius:20px;
        }

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

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

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

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

        .dpcp-menu-title{
            font-size:clamp(.92rem, 3.3vw, 1rem);
        }

        .dpcp-menu-desc{
            font-size:clamp(.78rem, 2.8vw, .84rem);
        }

        .dpcp-menu-arrow{
            margin-inline:auto;
        }
    }

    @media (max-width: 575.98px){
        .dpcp-hero{
            padding:.95rem .9rem;
        }

        .dpcp-role-pill{
            width:100%;
            justify-content:center;
        }

        .dpcp-menu-section{
            padding:.85rem;
        }
    }
</style>

<div class="container-fluid px-0 dpcp-page">
    <div class="dpcp-shell">

        <div class="dpcp-hero">
            <div class="dpcp-hero-grid">
                <div class="dpcp-hero-main">
                    <div class="dpcp-hero-avatar">
                        <i class="bi bi-award"></i>
                    </div>

                    mary) 12%, white); c          <div class="dpcp-hero-hello">Selamat datang, {{ $namaUser }}</div>
                        <div class="dpcp-hero-title">Jaga kekompakan, ketertiban, dan semangat pelayanan di wilayah DPC {{ $orgName }}.</div>
                        <p class="dpcp-hero-quote">
                            “Kepemimpinan yang dekat dengan anggota akan menguatkan organisasi. Rawat kebersamaan, pantau dengan cermat, dan terus hadir melayani.”
                        </p>
                        <span class="dpcp-hero-sign">
                            <i class="bi bi-stars"></i> {{ $orgName }}
                        </span>
                    </div>
                </div>

                <div class="dpcp-hero-side">
                    <span class="dpcp-role-pillmary) 12%, white); c       <i class="bi bi-shield-check"></i> DPC Pengurus
                    </span>
                    <div class="dpcp-mini-note">
                        Pantau anggota, pelaporan, dan layanan kartu anggota dalam satu tampilan kerja yang rapi.
                    </div>
                </div>
            </div>
        </div>

        <div class="dpcp-stats">
            <div class="dpcp-stat-card">
                <div class="dpcp-stat-body">
                    <div>
                        <div class="dpcp-stat-label">Total Anggota</div>
                        <div class="dpcp-stat-value">{{ number_format((int) ($totalAnggota ?? 0), 0, ',', '.') }}</div>
                    </div>
                    <div class="dpcp-stat-icon blue">
                        <i class="bi bi-people-fill"></i>
                    </div>
                </div>
            </div>

            <div class="dpcp-stat-card">
                <div class="dpcp-stat-body">
                    <div>
                        <div class="dpcp-stat-label">Kecamatan</div>
                        <div class="dpcp-stat-value">{{ number_format((int) ($totalKecamatan ?? 0), 0, ',', '.') }}</div>
                    </div>
                    <div class="dpcp-stat-icon cyan">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="dpcp-menu-section">
            <div class="dpcp-section-head">
                <h5 class="dpcp-section-title">Menu Utama</h5>
                <div class="dpcp-section-sub">Akses cepat untuk pengelolaan wilayah DPC</div>
            </div>

            <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-xl-3">
                <div class="col d-flex">
                    <a href="{{ route('anggota.index') }}" class="dpcp-menu-link w-100">
                        <div class="dpcp-menu-card h-100">
                            <div class="dpcp-menu-body">
                                <span class="dpcp-menu-icon dpcp-icon-blue">
                                    <i class="bi bi-people-fill"></i>
                                </mary) 12%, white); c                  <div class="dpcp-menu-content">
                                    <h6 class="dpcp-menu-title">Data Anggota</h6>
                                    <p class="dpcp-menu-desc">Kelola data anggota wilayah secara tertib, cepat, dan mudah dipantau.</p>
                                </div>
                                <i class="bi bi-chevron-right dpcp-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col d-flex">
                    <a href="{{ route('pelaporan.index') }}" class="dpcp-menu-link w-100">
                        <div class="dpcp-menu-card h-100">
                            <div class="dpcp-menu-body">
                                <span class="dpcp-menu-icon dpcp-icon-cyan">
                                    <i class="bi bi-graph-up-arrow"></i>
                                </span>
                                <div class="dpcp-menu-content">
                                    <h6 class="dpcp-menu-title">Pelaporan</h6>
                                    <p class="dpcp-menu-desc">Lihat rekap, perkembangan, dan kebutuhan pelaporan organisasi daerah.</p>
                                </div>
                                <i class="bi bi-chevron-right dpcp-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col d-flex">
                    @if($urlKartu)
                        <a href="{{ $urlKartu }}" class="dpcp-menu-link w-100">
                            <div class="dpcp-menu-card h-100">
                                <div clamary) 12%, white); c
                                    <span class="dpcp-menu-icon dpcp-icon-amber">
                                        <i class="bi bi-credit-card-2-front-fill"></i>
                                    </span>
                                    <div class="dpcp-menu-content">
                                        <h6 class="dpcp-menu-title">Kartu Anggota</h6>
                                        <p class="dpcp-menu-desc">Pantau dan proses kebutuhan kartu anggota dengan alur yang lebih rapi.</p>
                                    </div>
                                    <i class="bi bi-chevron-right dpcp-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="dpcp-menu-card dpcp-menu-disabled h-100 w-100">
                            <div class="dpcp-menu-body">
                                <span class="dpcp-menu-icon dpcp-icon-amber">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </span>
                                <div class="dpcp-menu-content">
                                    <h6 class="dpcp-menu-title">Kartu Anggota</h6>
                                    <p class="dpcp-menu-desc">Menu belum tersedia untuk akun atau route yang aktif saat ini.</p>
                                </div>
                                <i class="bi bi-lock dpcp-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection