@extends('layouts.dashboard')

@section('title', 'Dashboard Ranting Pengurus')
@section('page-title', 'Dashboard Ranting Pengurus')
@section('pagetitle', 'Dashboard Ranting Pengurus')

@section('content')
@php
    $namaUser = auth()->user()->nama_lengkap ?? auth()->user()->name ?? 'Ranting 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('ranting.pesanan_anggota.index')) {
        $urlKartu = route('ranting.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>
    .rp-page{
        --rp-bg:#f4f7fb;
        --rp-surface:#ffffff;
        --rp-surface-2:#f8fafc;

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

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

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

    .rp-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(--rp-accent) 16%, transparent), transparent 34%),
            linear-gradient(135deg, var(--rp-primary) 0%, var(--rp-primary-mid) 55%, var(--rp-primary-dark) 100%);
        color:#fff;
        border-radius:28px;
        padding:1.45rem 1.4rem;
        box-shadow:0 20px 40px color-mix(in srgb, var(--rp-primary) 20%, transparent);
        border:1px solid rgba(255,255,255,.12);
    }

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

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

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

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

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

    .rp-hero-title{
        font-size:clamp(1.15rem, .75vw + 1rem, 1.7rem);
        font-weight:800;
        line-height:1.18;
        margin-bottom:.45rem;
        max-width:25ch;
    }

    .rp-hero-quote{
        font-size:clamp(.86rem, .2vw + .82rem, .96rem);
        line-height:1.7;
        margin-bottom:.38rem;
        color:rgba(255,255,255,.96);
        max-width:62ch;
    }

    .rp-hero-sign{
        font-size:clamp(.76rem, .16vw + .74rem, .84rem);
        opacity:.92;
        display:inline-flex;
        align-items:center;
        gap:.42rem;
    }

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

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

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

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

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

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

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

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

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

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

    .rp-stat-icon.green{
        background:rgba(25,135,84,.12);
        color:#198754;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .rp-icon-green{
        background:rgba(25,135,84,.12);
        color:#198754;
    }

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

    .rp-icon-amber{
        background:rgba(245,159,0,.16);
        color:#a16207;
    }

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

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

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

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

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

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

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

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

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

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

        .rp-hero-quote{
            font-size:clamp(.82rem, 2.8vw, .92rem);
            text-align:center;
        }

        .rp-hero-side{
            align-items:center;
            text-align:center;
        }

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

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

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

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

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

        .rp-stat-icon{
            width:48px;
            height:48px;
            border-radius:14px;
            font-size:1.06rem;
            margin-inline:auto;
        }

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

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

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

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

        .rp-menu-icon{
            width:48px;
            height:48px;
            border-radius:14px;
            font-size:1.06rem;
            margin-inline:auto;
        }

        .rp-menu-content{
            text-align:center;
        }

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

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

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

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

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

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

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

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

                    <div>
                        <div class="rp-hero-hello">Selamat datang, {{ $namaUser }}</div>
                        <div class="rp-hero-title">Rawat kebersamaan dan jaga pelayanan anggota di tingkat ranting.</div>
                        <p class="rp-hero-quote">
                            “Organisasi yang kuat lahir dari perhatian pada anggota di akar rumput. Pantau dengan baik, bergerak dengan hati, dan jaga amanah bersama.”
                        </p>
                        <span class="rp-hero-sign">
                            <i class="bi bi-stars"></i> Ketua Umum HNSI
                        </span>
                    </div>
                </div>

                <div class="rp-hero-side">
                    <span class="rp-role-pill">
                        <i class="bi bi-shield-check"></i> Ranting Pengurus
                    </span>
                    <div class="rp-mini-note">
                        Fokus pada pembinaan anggota, data keluarga, pelaporan, dan layanan kartu di tingkat ranting.
                    </div>
                </div>
            </div>
        </div>

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

            <div class="rp-stat-card">
                <div class="rp-stat-body">
                    <div>
                        <div class="rp-stat-label">Desa/Kelurahan</div>
                        <div class="rp-stat-value">{{ number_format((int) ($totalDesa ?? 0), 0, ',', '.') }}</div>
                    </div>
                    <div class="rp-stat-icon green">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="rp-menu-section">
            <div class="rp-section-head">
                <h5 class="rp-section-title">Menu Utama</h5>
                <div class="rp-section-sub">Akses cepat ke modul kerja pengurus ranting</div>
            </div>

            <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-xl-2">
                <div class="col">
                    <a href="{{ route('anggota.index') }}" class="rp-menu-link">
                        <div class="rp-menu-card">
                            <div class="rp-menu-body">
                                <span class="rp-menu-icon rp-icon-blue">
                                    <i class="bi bi-people-fill"></i>
                                </span>
                                <div class="rp-menu-content">
                                    <h6 class="rp-menu-title">Data Anggota</h6>
                                    <p class="rp-menu-desc">Kelola dan pantau data anggota ranting secara lebih rapi dan mudah diakses.</p>
                                </div>
                                <i class="bi bi-chevron-right rp-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{{ route('keluarga.index') }}" class="rp-menu-link">
                        <div class="rp-menu-card">
                            <div class="rp-menu-body">
                                <span class="rp-menu-icon rp-icon-green">
                                    <i class="bi bi-people"></i>
                                </span>
                                <div class="rp-menu-content">
                                    <h6 class="rp-menu-title">Data Keluarga</h6>
                                    <p class="rp-menu-desc">Lengkapi dan cek data keluarga anggota untuk pembinaan dan administrasi wilayah.</p>
                                </div>
                                <i class="bi bi-chevron-right rp-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{{ route('pelaporan.index') }}" class="rp-menu-link">
                        <div class="rp-menu-card">
                            <div class="rp-menu-body">
                                <span class="rp-menu-icon rp-icon-cyan">
                                    <i class="bi bi-graph-up-arrow"></i>
                                </span>
                                <div class="rp-menu-content">
                                    <h6 class="rp-menu-title">Pelaporan</h6>
                                    <p class="rp-menu-desc">Lihat rekap dan perkembangan data anggota untuk kebutuhan pelaporan ranting.</p>
                                </div>
                                <i class="bi bi-chevron-right rp-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col">
                    @if($urlKartu)
                        <a href="{{ $urlKartu }}" class="rp-menu-link">
                            <div class="rp-menu-card">
                                <div class="rp-menu-body">
                                    <span class="rp-menu-icon rp-icon-amber">
                                        <i class="bi bi-credit-card-2-front-fill"></i>
                                    </span>
                                    <div class="rp-menu-content">
                                        <h6 class="rp-menu-title">Kartu Anggota</h6>
                                        <p class="rp-menu-desc">Pantau kebutuhan kartu anggota dengan alur kerja yang lebih jelas dan tertib.</p>
                                    </div>
                                    <i class="bi bi-chevron-right rp-menu-arrow"></i>
                                </div>
                            </div>
                        </a>
                    @else
                        <div class="rp-menu-card rp-menu-disabled">
                            <div class="rp-menu-body">
                                <span class="rp-menu-icon rp-icon-amber">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </span>
                                <div class="rp-menu-content">
                                    <h6 class="rp-menu-title">Kartu Anggota</h6>
                                    <p class="rp-menu-desc">Menu belum tersedia untuk akun atau route yang aktif saat ini.</p>
                                </div>
                                <i class="bi bi-lock rp-menu-arrow"></i>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection