@extends('layouts.dashboard')

@section('title', 'Dashboard Superadmin')
@section('page-title', 'Superadmin')

@section('content')
@php
    $totalAnggotaView = $stats['totalAnggota'] ?? ($stats->totalAnggota ?? 0);
    $totalProvinsiView = $totalProvinsi ?? 0;

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

<style>
    .sa-page{
        --sa-primary: {{ $themeSidebarStart }};
        --sa-primary-mid: {{ $themeSidebarMid }};
        --sa-primary-dark: {{ $themeSidebarEnd }};
        --sa-accent: {{ $themeAccent }};

        --sa-bg:#f8fafc;
        --sa-surface:rgba(255,255,255,.88);
        --sa-surface-strong:#ffffff;
        --sa-text:#0f172a;
        --sa-muted:#64748b;
        --sa-border:rgba(15,23,42,.06);
        --sa-border-strong:rgba(148,163,184,.18);

        --sa-shadow-sm:0 10px 24px rgba(15,23,42,.06);
        --sa-shadow-md:0 18px 40px rgba(15,23,42,.10);
    }

    .sa-page{
        color:var(--sa-text);
        position:relative;
        z-index:1;
    }

    .sa-hero{
        position:relative;
        overflow:hidden;
        background:
            radial-gradient(900px 320px at 0% 0%, color-mix(in srgb, var(--sa-accent) 24%, transparent), transparent 60%),
            linear-gradient(135deg, var(--sa-primary) 0%, var(--sa-primary-mid) 55%, var(--sa-primary-dark) 100%);
        color:#fff;
        border-radius:24px;
        padding:1.25rem 1.25rem;
        box-shadow:0 18px 40px color-mix(in srgb, var(--sa-primary) 20%, transparent);
        margin-bottom:1.1rem;
        border:1px solid rgba(255,255,255,.12);
    }

    .sa-hero::after{
        content:"";
        position:absolute;
        width:220px;
        height:220px;
        right:-60px;
        top:-70px;
        border-radius:50%;
        background:color-mix(in srgb, #ffffff 10%, transparent);
        opacity:.35;
        pointer-events:none;
    }

    .sa-hero-grid{
        display:grid;
        grid-template-columns:minmax(0, 1.35fr) minmax(220px, .9fr);
        gap:1rem;
        align-items:center;
    }

    .sa-hero-badge{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
        padding:.42rem .8rem;
        border-radius:999px;
        background:rgba(255,255,255,.14);
        border:1px solid rgba(255,255,255,.18);
        font-size:clamp(.76rem, .20vw + .74rem, .84rem);
        font-weight:800;
        margin-bottom:.8rem;
    }

    .sa-hero-title{
        font-size:clamp(1.2rem, .7vw + 1.08rem, 1.7rem);
        font-weight:800;
        margin-bottom:.35rem;
        line-height:1.15;
    }

    .sa-hero-sub{
        font-size:clamp(.86rem, .22vw + .82rem, .97rem);
        opacity:.94;
        margin-bottom:0;
        line-height:1.7;
        max-width:66ch;
    }

    .sa-hero-stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.8rem;
    }

    .sa-mini-stat{
        background:rgba(255,255,255,.12);
        border:1px solid rgba(255,255,255,.16);
        border-radius:18px;
        padding:.9rem .95rem;
        backdrop-filter:blur(8px);
        box-shadow:0 10px 24px rgba(2,8,23,.10);
    }

    .sa-mini-label{
        font-size:clamp(.72rem, .16vw + .70rem, .8rem);
        color:rgba(255,255,255,.82);
        margin-bottom:.2rem;
    }

    .sa-mini-value{
        font-size:clamp(1.05rem, .6vw + .96rem, 1.45rem);
        font-weight:800;
        color:#fff;
        line-height:1.1;
    }

    .sa-stat-card{
        border:1px solid rgba(255,255,255,.38);
        border-radius:20px;
        box-shadow:var(--sa-shadow-sm);
        background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
        height:100%;
        overflow:hidden;
    }

    .sa-stat-body{
        padding:1rem 1.05rem;
    }

    .sa-stat-label{
        font-size:clamp(.78rem, .18vw + .75rem, .86rem);
        color:var(--sa-muted);
        margin-bottom:.2rem;
        font-weight:600;
    }

    .sa-stat-value{
        font-size:clamp(1.35rem, .8vw + 1.1rem, 1.95rem);
        font-weight:800;
        line-height:1.05;
        color:var(--sa-text);
    }

    .sa-section-title{
        font-size:clamp(.8rem, .18vw + .77rem, .88rem);
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--sa-muted);
        margin:1rem 0 .85rem;
        padding-left:.15rem;
    }

    .sa-menu-link{
        text-decoration:none;
        color:inherit;
        display:block;
        height:100%;
        position:relative;
        z-index:1;
    }

    .sa-menu-card{
        position:relative;
        border:1px solid var(--sa-border-strong);
        border-radius:22px;
        background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
        box-shadow:var(--sa-shadow-sm);
        transition:border-color .18s ease, box-shadow .18s ease;
        height:100%;
        overflow:hidden;
        transform:none;
    }

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

    .sa-menu-link:hover .sa-menu-card{
        box-shadow:var(--sa-shadow-md);
        border-color:color-mix(in srgb, var(--sa-primary) 18%, white);
        transform:none;
    }

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

    .sa-menu-body{
        padding:1.05rem 1.05rem;
        display:flex;
        align-items:center;
        gap:.95rem;
        min-height:96px;
    }

    .sa-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,.35);
    }

    .sa-menu-content{
        min-width:0;
    }

    .sa-menu-title{
        font-size:clamp(.96rem, .22vw + .93rem, 1.05rem);
        font-weight:800;
        margin:0;
        color:var(--sa-text);
        line-height:1.25;
    }

    .sa-menu-desc{
        margin:.25rem 0 0;
        font-size:clamp(.8rem, .16vw + .78rem, .88rem);
        color:var(--sa-muted);
        line-height:1.5;
    }

    .sa-menu-arrow{
        margin-left:auto;
        color:#94a3b8;
        font-size:1rem;
        transition:color .18s ease;
    }

    .sa-menu-link:hover .sa-menu-arrow{
        transform:none;
        color:var(--sa-primary);
    }

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

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

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

    .sa-icon-purple{
        background:rgba(111,66,193,.14);
        color:#6f42c1;
    }

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

    .sa-icon-red{
        background:rgba(220,53,69,.14);
        color:#b02a37;
    }

    @media (max-width: 991.98px){
        .sa-hero{
            border-radius:22px;
            padding:1.1rem;
        }

        .sa-hero-grid{
            grid-template-columns:1fr;
        }

        .sa-hero-sub{
            max-width:none;
        }
    }

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

        .sa-hero{
            border-radius:20px;
            padding:1rem;
        }

        .sa-hero::after{
            width:180px;
            height:180px;
            right:-55px;
            top:-60px;
        }

        .sa-hero-grid{
            grid-template-columns:1fr;
            gap:.9rem;
        }

        .sa-hero-main{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
        }

        .sa-hero-badge{
            margin-inline:auto;
            justify-content:center;
        }

        .sa-hero-title{
            font-size:clamp(1.05rem, 3.8vw, 1.35rem);
            text-align:center;
        }

        .sa-hero-sub{
            font-size:clamp(.82rem, 2.8vw, .94rem);
            text-align:center;
        }

        .sa-hero-stats{
            grid-template-columns:1fr 1fr;
            gap:.7rem;
        }

        .sa-mini-stat{
            text-align:center;
            padding:.85rem .8rem;
        }

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

        .sa-stat-body{
            padding:.9rem .9rem;
            text-align:center;
        }

        .sa-stat-value{
            font-size:clamp(1.15rem, 4.5vw, 1.55rem);
        }

        .sa-section-title{
            text-align:center;
            padding-left:0;
        }

        .sa-menu-body{
            min-height:auto;
            padding:1rem .95rem;
            gap:.75rem;
            flex-direction:column;
            justify-content:center;
            text-align:center;
        }

        .sa-menu-icon{
            width:50px;
            height:50px;
            border-radius:15px;
            margin-inline:auto;
        }

        .sa-menu-content{
            width:100%;
            text-align:center;
        }

        .sa-menu-title,
        .sa-menu-desc{
            text-align:center;
        }

        .sa-menu-arrow{
            margin-left:0;
            font-size:.95rem;
        }

        .sa-menu-link:hover .sa-menu-arrow{
            transform:none;
        }
    }

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

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

        .sa-mini-value{
            font-size:clamp(1rem, 4vw, 1.25rem);
        }

        .sa-stat-value{
            font-size:clamp(1.08rem, 5vw, 1.4rem);
        }

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

        .sa-menu-body{
            padding:.95rem .9rem;
        }

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

        .sa-menu-desc{
            font-size:clamp(.78rem, 3vw, .85rem);
        }
    }
</style>

<div class="container-fluid px-0 sa-page">
    <div class="sa-hero">
        <div class="sa-hero-grid">
            <div class="sa-hero-main">
                <div class="sa-hero-badge">
                    <i class="bi bi-stars"></i>
                    Pusat kendali sistem
                </div>
                <div class="sa-hero-title">Dashboard Superadmin</div>
                <p class="sa-hero-sub mb-0">
                    Akses cepat ke menu utama untuk mengelola data anggota, pelaporan, master data, dan kontrol sistem secara lebih terstruktur.
                </p>
            </div>

            <div class="sa-hero-stats">
                <div class="sa-mini-stat">
                    <div class="sa-mini-label">Total Anggota</div>
                    <div class="sa-mini-value">{{ number_format((int) $totalAnggotaView, 0, ',', '.') }}</div>
                </div>
                <div class="sa-mini-stat">
                    <div class="sa-mini-label">Provinsi Aktif</div>
                    <div class="sa-mini-value">{{ number_format((int) $totalProvinsiView, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-6">
            <div class="card sa-stat-card">
                <div class="sa-stat-body">
                    <div class="sa-stat-label">Total Anggota</div>
                    <div class="sa-stat-value">{{ number_format((int) $totalAnggotaView, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-6">
            <div class="card sa-stat-card">
                <div class="sa-stat-body">
                    <div class="sa-stat-label">Provinsi Aktif</div>
                    <div class="sa-stat-value">{{ number_format((int) $totalProvinsiView, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="sa-section-title">Menu Utama</div>

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

        <div class="col">
            <a href="{{ route('pelaporan.index') }}" class="sa-menu-link">
                <div class="sa-menu-card">
                    <div class="sa-menu-body">
                        <span class="sa-menu-icon sa-icon-cyan">
                            <i class="bi bi-graph-up-arrow"></i>
                        </span>
                        <div class="sa-menu-content">
                            <h6 class="sa-menu-title">Pelaporan</h6>
                            <p class="sa-menu-desc">Lihat ringkasan, statistik, dan keluaran laporan sistem.</p>
                        </div>
                        <i class="bi bi-chevron-right sa-menu-arrow"></i>
                    </div>
                </div>
            </a>
        </div>

        <div class="col">
            <a href="{{ route('keluarga.index') }}" class="sa-menu-link">
                <div class="sa-menu-card">
                    <div class="sa-menu-body">
                        <span class="sa-menu-icon sa-icon-green">
                            <i class="bi bi-people"></i>
                        </span>
                        <div class="sa-menu-content">
                            <h6 class="sa-menu-title">Data Keluarga</h6>
                            <p class="sa-menu-desc">Kelola relasi keluarga anggota dan informasi pendukung.</p>
                        </div>
                        <i class="bi bi-chevron-right sa-menu-arrow"></i>
                    </div>
                </div>
            </a>
        </div>

        <div class="col">
            <a href="{{ route('master.jenis-usaha.index') }}" class="sa-menu-link">
                <div class="sa-menu-card">
                    <div class="sa-menu-body">
                        <span class="sa-menu-icon sa-icon-purple">
                            <i class="bi bi-basket-fill"></i>
                        </span>
                        <div class="sa-menu-content">
                            <h6 class="sa-menu-title">Master Jenis Usaha</h6>
                            <p class="sa-menu-desc">Atur referensi jenis usaha untuk kebutuhan pendataan anggota.</p>
                        </div>
                        <i class="bi bi-chevron-right sa-menu-arrow"></i>
                    </div>
                </div>
            </a>
        </div>

        <div class="col">
            <a href="{{ route('master.status-pekerjaan.index') }}" class="sa-menu-link">
                <div class="sa-menu-card">
                    <div class="sa-menu-body">
                        <span class="sa-menu-icon sa-icon-amber">
                            <i class="bi bi-briefcase-fill"></i>
                        </span>
                        <div class="sa-menu-content">
                            <h6 class="sa-menu-title">Master Status Pekerjaan</h6>
                            <p class="sa-menu-desc">Kelola pilihan status pekerjaan untuk konsistensi data.</p>
                        </div>
                        <i class="bi bi-chevron-right sa-menu-arrow"></i>
                    </div>
                </div>
            </a>
        </div>

        <div class="col">
            <a href="{{ route('sampah.index') }}" class="sa-menu-link">
                <div class="sa-menu-card">
                    <div class="sa-menu-body">
                        <span class="sa-menu-icon sa-icon-red">
                            <i class="bi bi-trash-fill"></i>
                        </span>
                        <div class="sa-menu-content">
                            <h6 class="sa-menu-title">Sampah Data</h6>
                            <p class="sa-menu-desc">Tinjau, pulihkan, atau hapus permanen data yang tidak aktif.</p>
                        </div>
                        <i class="bi bi-chevron-right sa-menu-arrow"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
@endsection