@extends('layouts.admin.master')

@section('content')
    <div class="member-dashboard">
        <section class="member-dashboard-hero">
            <div>
                <span class="member-dashboard-hero__eyebrow">Dashboard Member Detail</span>
                <h1>Dashboard Operasional Member</h1>
                <p>
                    Halaman utama member yang sekarang membaca data nyata dari master individu, keluarga, bantuan,
                    perumahan, dan pendidikan, sambil tetap jujur untuk blok sektor yang belum terintegrasi penuh.
                </p>
            </div>
            <div class="member-dashboard-hero__summary">
                @foreach ($summaryCards as $card)
                    <article>
                        <span>{{ $card['label'] }}</span>
                        <strong>{{ $card['value'] }}</strong>
                        <small>{{ $card['description'] }}</small>
                    </article>
                @endforeach
            </div>
        </section>

        @include('pages.admin.member.dashboard.partials.shortcut')
        @include('pages.admin.member.dashboard.partials.layanan_saya')
        @include('pages.admin.member.dashboard.partials.statistik_kependudukan')
        @include('pages.admin.member.dashboard.partials.demografi')
        @include('pages.admin.member.dashboard.partials.ekonomi_sosial')
        @include('pages.admin.member.dashboard.partials.perumahan')
        @include('pages.admin.member.dashboard.partials.pendidikan_pekerjaan')
        @include('pages.admin.member.dashboard.partials.kesehatan')
        @include('pages.admin.member.dashboard.partials.pengembangan')
    </div>

    <script>
        window.memberDashboardConfig = {
            initialWidgets: @json($initialWidgets),
            routes: {
                citizen: @json(route('member.dashboard.widgets.citizen')),
                summary: @json(route('member.dashboard.widgets.summary')),
                demografi: @json(route('member.dashboard.widgets.demografi')),
                ekonomi: @json(route('member.dashboard.widgets.ekonomi')),
                perumahan: @json(route('member.dashboard.widgets.perumahan')),
                pendidikan: @json(route('member.dashboard.widgets.pendidikan')),
                kesehatan: @json(route('member.dashboard.widgets.kesehatan')),
            },
            polling: {
                summary: 60000,
                heavy: 300000,
            }
        };
    </script>
@endsection

@section('stylesheet')
    <style>
        .member-dashboard {
            display: grid;
            gap: 1.5rem;
        }

        .member-dashboard-hero {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
            gap: 1.5rem;
            padding: 1.75rem;
            border-radius: 28px;
            background:
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.18), transparent 18%),
                radial-gradient(circle at 84% 18%, rgba(97, 205, 255, 0.24), transparent 22%),
                radial-gradient(circle at 78% 82%, rgba(170, 15, 37, 0.22), transparent 24%),
                linear-gradient(136deg, #06080d 0%, #29070c 24%, #7a0f1c 54%, #111821 78%, #0d5c88 100%);
            color: #f8fbff;
            box-shadow: 0 24px 50px rgba(9, 14, 24, 0.28);
        }

        .member-dashboard-hero__eyebrow,
        .member-dashboard-section__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #ffffff;
            font-weight: 700;
        }

        .member-dashboard-hero h1,
        .member-dashboard-section h2 {
            margin: 0.4rem 0 0.75rem;
            font-size: clamp(1.9rem, 4vw, 3rem);
            line-height: 1.05;
            color: inherit;
        }

        .member-dashboard-hero p {
            margin: 0;
            max-width: 60ch;
            line-height: 1.8;
            color: #ffffff;
        }

        .member-dashboard-hero__summary {
            display: grid;
            gap: 0.85rem;
        }

        .member-dashboard-hero__summary article,
        .member-stat-card,
        .member-dashboard-panel,
        .member-shortcut-card,
        .member-feature-card {
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }

        .member-dashboard-hero__summary article {
            padding: 1rem 1.1rem;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07));
            backdrop-filter: blur(10px);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .member-dashboard-hero__summary span,
        .member-stat-card span {
            display: block;
            font-size: 0.86rem;
            color: #ffffff;
        }

        .member-dashboard-hero__summary strong,
        .member-stat-card strong {
            display: block;
            margin: 0.25rem 0;
            font-size: 1.65rem;
            font-weight: 700;
        }

        .member-dashboard-hero__summary small,
        .member-stat-card small {
            display: block;
            color: #ffffff;
            line-height: 1.6;
        }

        .member-dashboard-section {
            display: grid;
            gap: 1rem;
        }

        .member-dashboard-section__header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: end;
        }

        .member-dashboard-section__header h2 {
            margin-bottom: 0;
            color: #0f2740;
            font-size: 1.65rem;
        }

        .member-dashboard-section__header p {
            max-width: 36rem;
            margin: 0;
            color: #5f7183;
            line-height: 1.7;
        }

        .member-shortcut-grid,
        .member-dashboard-panels,
        .member-feature-grid,
        .member-stat-grid {
            display: grid;
            gap: 1rem;
        }

        .member-shortcut-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .member-shortcut-card {
            display: grid;
            gap: 0.45rem;
            padding: 1.15rem;
            border-radius: 22px;
            background: #fff;
            text-decoration: none;
            color: #13263c;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }

        .member-shortcut-card:hover,
        .member-feature-card:hover {
            transform: translateY(-3px);
        }

        .member-shortcut-card__icon {
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            font-size: 1.35rem;
            background: rgba(13, 110, 253, 0.1);
        }

        .member-shortcut-card strong,
        .member-feature-card h3 {
            font-size: 1rem;
        }

        .member-shortcut-card small,
        .member-feature-card p,
        .member-widget-feedback,
        .member-widget-placeholder,
        .member-health-list__item p {
            color: #617487;
            line-height: 1.6;
        }

        .member-shortcut-card--success .member-shortcut-card__icon {
            background: rgba(25, 135, 84, 0.12);
            color: #198754;
        }

        .member-shortcut-card--warning .member-shortcut-card__icon {
            background: rgba(255, 193, 7, 0.16);
            color: #b78103;
        }

        .member-shortcut-card--secondary .member-shortcut-card__icon {
            background: rgba(108, 117, 125, 0.12);
            color: #6c757d;
        }

        .member-shortcut-card--danger .member-shortcut-card__icon {
            background: rgba(220, 53, 69, 0.12);
            color: #dc3545;
        }

        .member-stat-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .member-stat-card {
            padding: 1rem 1.1rem;
            border-radius: 20px;
            background: #fff;
        }

        .member-stat-card span,
        .member-stat-card small {
            color: #5f7183;
        }

        .member-stat-card strong {
            color: #13263c;
        }

        .member-dashboard-panels--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .member-dashboard-panel {
            padding: 1.2rem;
            border-radius: 24px;
            background: #fff;
        }

        .member-dashboard-panel__head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: start;
            margin-bottom: 1rem;
        }

        .member-dashboard-panel__head h3,
        .member-feature-card h3 {
            margin: 0;
            color: #13263c;
        }

        .member-dashboard-panel__head small,
        .member-widget-timestamp {
            color: #6e8194;
        }

        .member-widget-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .member-widget-badge.is-live {
            background: rgba(25, 135, 84, 0.12);
            color: #198754;
        }

        .member-chart-shell {
            position: relative;
            min-height: 320px;
        }

        .member-chart-shell--compact {
            min-height: 260px;
        }

        .member-widget-feedback,
        .member-widget-placeholder {
            min-height: 42px;
            display: flex;
            align-items: center;
        }

        .member-widget-placeholder,
        .member-health-list__item {
            padding: 1rem;
            border-radius: 18px;
            background: #f7fafc;
        }

        .member-dashboard-split {
            display: grid;
            grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1fr);
            gap: 1rem;
            align-items: start;
        }

        .member-dashboard-table {
            margin-bottom: 0;
        }

        .member-feature-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .member-feature-card {
            padding: 1.15rem;
            border-radius: 22px;
            background: #fff;
        }

        .member-inline-link {
            display: inline-flex;
            align-items: center;
            font-weight: 700;
            color: #c34b1a;
            text-decoration: none;
        }

        .member-inline-link.is-muted {
            color: #7d8a98;
            font-weight: 600;
        }

        .member-health-list {
            display: grid;
            gap: 0.85rem;
        }

        .member-detail-list,
        .member-quick-stat-grid {
            display: grid;
            gap: 0.85rem;
        }

        .member-detail-list__item,
        .member-quick-stat {
            padding: 0.95rem 1rem;
            border-radius: 18px;
            background: #f7fafc;
        }

        .member-detail-list__item {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: start;
        }

        .member-detail-list__item span,
        .member-quick-stat span {
            display: block;
            color: #6e8194;
            font-size: 0.82rem;
        }

        .member-detail-list__item strong,
        .member-quick-stat strong {
            color: #13263c;
        }

        .member-detail-list__item strong {
            text-align: right;
            max-width: 60%;
        }

        .member-inline-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .member-inline-actions a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: rgba(13, 110, 253, 0.08);
            color: #0d6efd;
            text-decoration: none;
            font-weight: 700;
        }

        .member-chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .member-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.65rem 0.9rem;
            border-radius: 999px;
            background: rgba(25, 135, 84, 0.12);
            color: #198754;
            font-weight: 600;
        }

        .member-chip.member-chip--empty {
            background: rgba(108, 117, 125, 0.12);
            color: #6c757d;
        }

        .member-quick-stat-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 1rem;
        }

        .member-quick-stat strong {
            display: block;
            margin-top: 0.15rem;
            font-size: 1.45rem;
        }

        .member-health-list__item {
            display: grid;
            gap: 0.35rem;
        }

        .member-health-list__item strong {
            color: #13263c;
        }

        .member-status-pill {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .member-status-pill--ready {
            background: rgba(25, 135, 84, 0.12);
            color: #198754;
        }

        .member-status-pill--loading {
            background: rgba(255, 193, 7, 0.14);
            color: #9a6b00;
        }

        .member-status-pill--empty {
            background: rgba(13, 110, 253, 0.12);
            color: #0d6efd;
        }

        .member-status-pill--pending,
        .member-status-pill--error {
            background: rgba(108, 117, 125, 0.12);
            color: #6c757d;
        }

        @media (max-width: 1399.98px) {
            .member-shortcut-grid,
            .member-feature-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 1199.98px) {
            .member-dashboard-hero,
            .member-dashboard-panels--two,
            .member-dashboard-split,
            .member-shortcut-grid,
            .member-feature-grid,
            .member-stat-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .member-dashboard-section__header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 767.98px) {
            .member-dashboard-hero,
            .member-dashboard-panels--two,
            .member-dashboard-split,
            .member-shortcut-grid,
            .member-feature-grid,
            .member-stat-grid,
            .member-quick-stat-grid {
                grid-template-columns: 1fr;
            }

            .member-dashboard-hero {
                padding: 1.25rem;
            }

            .member-dashboard-panel__head,
            .member-detail-list__item {
                flex-direction: column;
            }

            .member-detail-list__item strong {
                text-align: left;
                max-width: 100%;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <script src="{{ resource_loader('pages/admin/member/dashboard.js') }}"></script>
@endsection