@extends('layouts.dashboard')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <div class="ro-hero">
            <div class="ro-hero-grid">
                <div class="ro-hero-main">
                    <div class="ro-hero-avatar">
                        <i class="bi bi-person-lines-fill"></i>
                    </div>

                    <div>
                        <div class="ro-hero-hello">Selamat datang, {{ $namaUser }}</div>
                        <div class="ro-hero-title">Terus semangat mendata dan melayani anggota sampai ke tingkat paling dekat.</div>
                        <p class="ro-hero-quote">
                            “Kekuatan organisasi dibangun dari kerja nyata di lapangan. Layani anggota dengan teliti, cepat, dan penuh kepedulian.”
                        </p>
                        <span class="ro-hero-sign">
                            <i class="bi bi-stars"></i> Ketua Umum HNSI
                        </span>
                    </div>
                </div>

                <div class="ro-hero-side">
                    <span class="ro-role-pill">
                        <i class="bi bi-shield-check"></i> Ranting Operator
                    </span>
                    <div class="ro-mini-note">
                        Fokus pada pendataan anggota, keluarga, pelaporan, dan layanan kartu pada level terdekat.
                    </div>
                </div>
            </div>
        </div>

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

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

        <div class="ro-menu-section">
            <div class="ro-section-head">
                <h5 class="ro-section-title">Menu Utama</h5>
                <div class="ro-section-sub">Akses cepat ke modul kerja operator 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="ro-menu-link">
                        <div class="ro-menu-card">
                            <div class="ro-menu-body">
                                <span class="ro-menu-icon ro-icon-blue">
                                    <i class="bi bi-people-fill"></i>
                                </span>
                                <div class="ro-menu-content">
                                    <h6 class="ro-menu-title">Data Anggota</h6>
                                    <p class="ro-menu-desc">Kelola data anggota di tingkat ranting secara rapi, cepat, dan mudah dicari.</p>
                                </div>
                                <i class="bi bi-chevron-right ro-menu-arrow"></i>
                            </div>
                        </div>
                    </a>
                </div>

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

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

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

    </div>
</div>
@endsection