@extends('layouts.dashboard')

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

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

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

    $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_operator.pesanan_anggota.index')) {
        $urlKartu = route('dpc_operator.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>
    .dpc-page{
        --dpc-bg:#f4f7fb;
        --dpc-surface:#ffffff;
        --dpc-surface-2:#f8fafc;

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

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

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

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

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

    .dpc-hero-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:1.3fr .7fr;
        gap:1rem;
        align-items:center;
    }

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

    .dpc-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,.16);
        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,.10);
    }

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

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

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

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

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

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

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

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

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

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

    .dpc-stat-left{
        min-width:0;
    }

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

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

    .dpc-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;
    }

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

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

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

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

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

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

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

    .dpc-menu-card{
        position:relative;
        overflow:hidden;
        border:1px solid var(--dpc-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%;
    }

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

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

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

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

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

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

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

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

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

    .dpc-icon-blue{ background:color-mix(in srgb, var(--dpc-primary) 12%, white); color:var(--dpc-primary); }
    .dpc-icon-green{ background:rgba(25,135,84,.12); color:#198754; }
    .dpc-icon-cyan{ background:color-mix(in srgb, var(--dpc-accent) 16%, white); color:color-mix(in srgb, var(--dpc-accent) 72%, black); }
    .dpc-icon-amber{ background:rgba(245,159,0,.16); color:#a16207; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <div class="dpc-hero">
            <div class="dpc-hero-grid">
                <div class="dpc-hero-main">
                    <div class="dpc-hero-avatar">
                        <i class="bi bi-person-workspace"></i>
                    </div>

                    <div>
                        <div class="dpc-hero-hello">Selamat datang, {{ $namaUser }}</div>
                        <div class="dpc-hero-title">Terus bergerak melayani anggota hingga ke wilayah paling dekat di {{ $orgName }}.</div>
                        <p class="dpc-hero-quote">
                            “Pengabdian yang konsisten dari daerah adalah napas kekuatan organisasi. Layani anggota dengan cepat, tertib, dan penuh tanggung jawab.”
                        </p>
                        <span class="dpc-hero-sign">
                            <i class="bi bi-stars"></i> {{ $orgName }}
                        </span>
                    </div>
                </div>

                <div class="dpc-hero-side">
                    <span class="dpc-role-pill">
                        <i class="bi bi-shield-check"></i> DPC Operator
                    </span>
                    <div class="dpc-mini-note">
                        Kelola data anggota, keluarga, pelaporan, dan kebutuhan kartu anggota dari satu dashboard.
                    </div>
                </div>
            </div>
        </div>

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

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

        <div class="dpc-menu-section">
            <div class="dpc-section-head">
                <h5 class="dpc-section-title">Menu Utama</h5>
                <div class="dpc-section-sub">Akses cepat ke modul kerja operator DPC</div>
            </div>

            <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-xl-2">
                <div class="col d-flex">
                    <a href="{{ route('anggota.index') }}" class="dpc-menu-link w-100">
                        <div class="dpc-menu-card h-100">
                            <div class="dpc-menu-body">
                                <span class="dpc-menu-icon dpc-icon-blue">
                                    <i class="bi bi-people-fill"></i>
                                </span>
                                <div class="dpc-menu-content">
                                    <h6 class="dpc-menu-title">Data Anggota</h6>
                                    <p class="dpc-menu-desc">Kelola data anggota aktif, pencarian, pembaruan, dan validasi informasi dasar.</p>
                                </div>
                                <i class="bi bi-chevron-right dpc-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col d-flex">
                    <a href="{{ route('keluarga.index') }}" class="dpc-menu-link w-100">
                        <div class="dpc-menu-card h-100">
                            <div class="dpc-menu-body">
                                <span class="dpc-menu-icon dpc-icon-green">
                                    <i class="bi bi-people"></i>
                                </span>
                                <div class="dpc-menu-content">
                                    <h6 class="dpc-menu-title">Data Keluarga</h6>
                                    <p class="dpc-menu-desc">Lihat dan lengkapi data keluarga anggota sebagai bagian dari administrasi wilayah.</p>
                                </div>
                                <i class="bi bi-chevron-right dpc-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

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

                <div class="col d-flex">
                    @if($urlKartu)
                        <a href="{{ $urlKartu }}" class="dpc-menu-link w-100">
                            <div class="dpc-menu-card h-100">
                                <div class="dpc-menu-body">
                                    <span class="dpc-menu-icon dpc-icon-amber">
                                        <i class="bi bi-credit-card-2-front-fill"></i>
                                    </span>
                                    <div class="dpc-menu-content">
                                        <h6 class="dpc-menu-title">Kartu Anggota</h6>
                                        <p class="dpc-menu-desc">Proses pesanan, verifikasi, dan tindak lanjut kebutuhan kartu anggota.</p>
                                    </div>
                                    <i class="bi bi-chevron-right dpc-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="dpc-menu-card dpc-menu-disabled h-100 w-100">
                            <div class="dpc-menu-body">
                                <span class="dpc-menu-icon dpc-icon-amber">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </span>
                                <div class="dpc-menu-content">
                                    <h6 class="dpc-menu-title">Kartu Anggota</h6>
                                    <p class="dpc-menu-desc">Menu belum tersedia untuk akun atau route ini.</p>
                                </div>
                                <i class="bi bi-lock dpc-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection