@extends('layouts.dashboard')

@php
    $orgName = setting('organisasi.nama', 'HNSI');
    $pageHeading = 'Dashboard Anggota - Profil Saya - ' . $orgName;
@endphp

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

@section('content')
@php
    $auth = auth()->user();

    $anggotaId = $auth->anggota_id ?? ($auth->anggotaid ?? null);

    $anggota = null;
    if (!empty($anggotaId)) {
        $anggota = \App\Models\Anggota::query()->find($anggotaId);
    }

    $editUrl = null;
    if (!empty($anggotaId) && \Illuminate\Support\Facades\Route::has('anggota.edit')) {
        $editUrl = route('anggota.edit', ['anggotum' => $anggotaId]);
    }

    $themeStart  = setting('theme.sidebar_start', '#198754');
    $themeMid    = setting('theme.sidebar_mid', '#157347');
    $themeEnd    = setting('theme.sidebar_end', '#0f5132');
    $themeAccent = setting('theme.accent', '#20c997');

    $val = fn($x, $default='-') => (isset($x) && $x !== '' ? $x : $default);

    $tglTampil = '-';
    if ($anggota?->tanggal_lahir) {
        try {
            $tglTampil = $anggota->tanggal_lahir->format('d-m-Y');
        } catch (\Throwable $e) {
            $tglTampil = '-';
        }
    }

    $jk = match($anggota?->jenis_kelamin) {
        'L' => 'Laki-laki',
        'P' => 'Perempuan',
        default => '-'
    };

    $statusOrg = match($anggota?->status_organisasi) {
        'P' => 'Pengurus',
        'A' => 'Anggota',
        'S' => 'Simpatisan',
        default => '-'
    };

    $statusRumah = match($anggota?->status_rumah) {
        'M' => 'Milik sendiri',
        'S' => 'Sewa',
        'N' => 'Menumpang',
        default => '-'
    };

    $tanahPekarangan = match($anggota?->status_tanah_pekarangan) {
        'M' => 'Memiliki',
        'B' => 'Belum memiliki',
        default => '-'
    };

    $aksesListrik = match($anggota?->akses_listrik) {
        'A' => 'Ada',
        'T' => 'Tidak',
        default => '-'
    };

    $aksesAir = match($anggota?->akses_air_bersih) {
        'A' => 'Ada',
        'T' => 'Tidak',
        default => '-'
    };

    $bpjsKes = match($anggota?->bpjs_kesehatan) {
        'Y' => 'Peserta',
        'T' => 'Tidak',
        default => '-'
    };

    $bpjsKet = match($anggota?->bpjs_ketenagakerjaan) {
        'Y' => 'Peserta',
        'T' => 'Tidak',
        default => '-'
    };

    $koperasi = match((string) ($anggota?->keanggotaan_koperasi)) {
        '1' => 'Puskonera',
        '2' => 'Kopris',
        '3' => 'Lainnya',
        default => '-'
    };

    $kusuka = match($anggota?->kartu_kusuka) {
        'Y' => 'Memiliki',
        'T' => 'Belum memiliki',
        default => '-'
    };

    $alamatLengkap = trim(collect([
        $anggota?->detail_alamat,
        $anggota?->nama_desa,
        $anggota?->nama_kecamatan,
        $anggota?->nama_kota,
        $anggota?->nama_provinsi,
    ])->filter()->implode(', '));
@endphp

<style>
    .member-dashboard{
        --md-bg:#f4f7fb;
        --md-surface:#ffffff;
        --md-surface-2:#f8fafc;
        --md-text:#1f2937;
        --md-muted:#6b7280;
        --md-border:rgba(15,23,42,.08);
        --md-shadow:0 10px 30px rgba(15,23,42,.08);
        --md-shadow-soft:0 6px 18px rgba(15,23,42,.05);

        --md-primary:{{ $themeStart }};
        --md-primary-mid:{{ $themeMid }};
        --md-primary-dark:{{ $themeEnd }};
        --md-accent:{{ $themeAccent }};

        --md-primary-soft:color-mix(in srgb, {{ $themeStart }} 10%, white);
        --md-primary-soft-2:color-mix(in srgb, {{ $themeStart }} 18%, white);
        --md-info-soft:color-mix(in srgb, {{ $themeAccent }} 10%, white);

        --md-radius:22px;
        --md-radius-sm:14px;
        color:var(--md-text);
        padding-bottom:5.5rem;
    }

    .member-dashboard .page-shell{
        display:flex;
        flex-direction:column;
        gap:1rem;
    }

    .member-dashboard .hero-card{
        position:relative;
        overflow:hidden;
        border:1px solid var(--md-border);
        border-radius:28px;
        background:
            radial-gradient(circle at top right, color-mix(in srgb, var(--md-accent) 18%, transparent), transparent 30%),
            radial-gradient(circle at bottom left, color-mix(in srgb, var(--md-primary) 12%, transparent), transparent 28%),
            linear-gradient(135deg, #ffffff 0%, #f7fbf8 45%, #f4f8ff 100%);
        box-shadow:var(--md-shadow);
        padding:1rem;
    }

    .member-dashboard .hero-card::after{
        content:"";
        position:absolute;
        inset:auto -60px -60px auto;
        width:180px;
        height:180px;
        border-radius:50%;
        background:color-mix(in srgb, var(--md-primary) 10%, transparent);
        filter:blur(6px);
    }

    .member-dashboard .hero-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:1fr;
        gap:1rem;
    }

    .member-dashboard .hero-left{
        display:flex;
        gap:.9rem;
        align-items:center;
    }

    .member-dashboard .avatar-box{
        width:60px;
        height:60px;
        min-width:60px;
        border-radius:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(135deg, var(--md-primary), var(--md-accent));
        color:#fff;
        box-shadow:0 12px 24px color-mix(in srgb, var(--md-primary) 22%, transparent);
        font-size:1.3rem;
    }

    .member-dashboard .hero-title{
        margin:0;
        font-size:clamp(1.05rem, 3.8vw, 1.4rem);
        font-weight:800;
        line-height:1.2;
    }

    .member-dashboard .hero-subtitle{
        margin:.35rem 0 0 0;
        color:var(--md-muted);
        font-size:clamp(.84rem, 2.8vw, .95rem);
        line-height:1.55;
    }

    .member-dashboard .hero-right{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:.7rem;
    }

    .member-dashboard .role-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:.45rem;
        padding:.7rem 1rem;
        border-radius:999px;
        background:linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
        color:#fff;
        font-size:.82rem;
        font-weight:800;
        letter-spacing:.02em;
        box-shadow:0 10px 20px color-mix(in srgb, var(--md-primary) 18%, transparent);
    }

    .member-dashboard .hero-meta{
        display:flex;
        flex-wrap:wrap;
        gap:.5rem;
    }

    .member-dashboard .meta-pill{
        padding:.55rem .85rem;
        border-radius:999px;
        background:rgba(255,255,255,.78);
        border:1px solid rgba(255,255,255,.85);
        backdrop-filter:blur(8px);
        color:var(--md-muted);
        font-size:.78rem;
        font-weight:700;
    }

    .member-dashboard .dashboard-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:1rem;
    }

    .member-dashboard .content-card{
        background:var(--md-surface);
        border:1px solid var(--md-border);
        border-radius:var(--md-radius);
        box-shadow:var(--md-shadow-soft);
        overflow:hidden;
    }

    .member-dashboard .card-head{
        padding:1rem;
        border-bottom:1px solid var(--md-border);
        background:linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:.75rem;
        flex-wrap:wrap;
    }

    .member-dashboard .head-group{
        display:flex;
        align-items:flex-start;
        gap:.85rem;
        width:100%;
    }

    .member-dashboard .icon-wrap{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:14px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:var(--md-primary-soft);
        color:var(--md-primary);
        font-size:1.1rem;
    }

    .member-dashboard .card-title{
        margin:0;
        font-size:1rem;
        font-weight:800;
    }

    .member-dashboard .card-note{
        margin:.15rem 0 0 0;
        color:var(--md-muted);
        font-size:.84rem;
        line-height:1.5;
    }

    .member-dashboard .card-body{
        padding:1rem;
    }

    .member-dashboard .info-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:.75rem;
    }

    .member-dashboard .info-item{
        border:1px solid var(--md-border);
        background:var(--md-surface-2);
        border-radius:16px;
        padding:.9rem .95rem;
        height:100%;
    }

    .member-dashboard .info-label{
        display:block;
        color:var(--md-muted);
        font-size:.74rem;
        font-weight:700;
        margin-bottom:.3rem;
        text-transform:uppercase;
        letter-spacing:.04em;
    }

    .member-dashboard .info-value{
        color:var(--md-text);
        font-size:.94rem;
        font-weight:700;
        line-height:1.45;
        word-break:break-word;
    }

    .member-dashboard .section-divider{
        margin:1rem 0;
        border:0;
        border-top:1px dashed rgba(15,23,42,.12);
    }

    .member-dashboard .address-box,
    .member-dashboard .note-box{
        border:1px solid var(--md-border);
        border-radius:18px;
        background:linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
        padding:1rem;
    }

    .member-dashboard .address-box .title-mini,
    .member-dashboard .note-box .title-mini{
        display:flex;
        align-items:center;
        gap:.5rem;
        margin-bottom:.55rem;
        font-size:.86rem;
        font-weight:800;
        color:var(--md-text);
    }

    .member-dashboard .address-text,
    .member-dashboard .note-text{
        font-size:.92rem;
        line-height:1.65;
        color:var(--md-muted);
    }

    .member-dashboard .card-foot{
        padding:.9rem 1rem;
        border-top:1px solid var(--md-border);
        background:#fbfcfd;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
        flex-wrap:wrap;
    }

    .member-dashboard .muted-small{
        color:var(--md-muted);
        font-size:.82rem;
    }

    .member-dashboard .btn-soft-success{
        border:1px solid color-mix(in srgb, var(--md-primary) 18%, white);
        background:var(--md-primary-soft);
        color:var(--md-primary-dark);
        font-weight:800;
        border-radius:12px;
        padding:.68rem 1rem;
    }

    .member-dashboard .btn-soft-success:hover{
        background:var(--md-primary-soft-2);
        color:var(--md-primary-dark);
    }

    .member-dashboard .btn-main{
        border-radius:14px;
        padding:.78rem 1rem;
        font-weight:800;
        box-shadow:0 10px 20px color-mix(in srgb, var(--md-primary) 15%, transparent);
    }

    .member-dashboard .status-chip{
        display:inline-flex;
        align-items:center;
        gap:.4rem;
        padding:.44rem .76rem;
        border-radius:999px;
        background:var(--md-primary-soft);
        color:var(--md-primary-dark);
        border:1px solid color-mix(in srgb, var(--md-primary) 16%, white);
        font-size:.78rem;
        font-weight:800;
    }

    .member-dashboard .warn-box{
        border:1px solid rgba(255,193,7,.35);
        background:linear-gradient(180deg, rgba(255,248,225,.95), rgba(255,252,244,1));
        color:#8a6d1f;
        border-radius:16px;
        padding:.95rem 1rem;
        font-size:.92rem;
        line-height:1.55;
    }

    .member-dashboard .stack-list{
        display:grid;
        gap:.75rem;
    }

    .member-dashboard .stack-item{
        border:1px solid var(--md-border);
        border-radius:16px;
        padding:.9rem 1rem;
        background:var(--md-surface-2);
        display:flex;
        flex-direction:column;
        gap:.35rem;
    }

    .member-dashboard .stack-item .left{
        color:var(--md-muted);
        font-size:.8rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.04em;
    }

    .member-dashboard .stack-item .right{
        color:var(--md-text);
        font-size:.94rem;
        font-weight:700;
        line-height:1.5;
    }

    .member-dashboard .quick-strip{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:.75rem;
    }

    .member-dashboard .quick-card{
        border:1px solid var(--md-border);
        border-radius:18px;
        background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        padding:.9rem;
        box-shadow:var(--md-shadow-soft);
    }

    .member-dashboard .quick-label{
        font-size:.74rem;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--md-muted);
        font-weight:700;
        margin-bottom:.28rem;
    }

    .member-dashboard .quick-value{
        font-size:.96rem;
        font-weight:800;
        line-height:1.4;
        color:var(--md-text);
    }

    .member-dashboard .mobile-sticky-bar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1030;
        padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(12px);
        border-top:1px solid rgba(15,23,42,.08);
        box-shadow:0 -10px 30px rgba(15,23,42,.06);
    }

    .member-dashboard .mobile-sticky-bar .btn{
        width:100%;
        min-height:46px;
    }

    @media (min-width: 768px){
        .member-dashboard{
            padding-bottom:1rem;
        }

        .member-dashboard .hero-card{
            padding:1.2rem;
        }

        .member-dashboard .hero-grid{
            grid-template-columns:1.15fr .85fr;
            align-items:center;
        }

        .member-dashboard .hero-right{
            align-items:flex-end;
        }

        .member-dashboard .hero-meta{
            justify-content:flex-end;
        }

        .member-dashboard .dashboard-grid{
            grid-template-columns:1.15fr .85fr;
        }

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

        .member-dashboard .stack-item{
            flex-direction:row;
            justify-content:space-between;
            align-items:flex-start;
            gap:1rem;
        }

        .member-dashboard .stack-item .right{
            text-align:right;
        }

        .member-dashboard .mobile-sticky-bar{
            display:none;
        }
    }

    @media (max-width: 767.98px){
        .member-dashboard .hero-left{
            align-items:flex-start;
        }

        .member-dashboard .card-foot{
            flex-direction:column;
            align-items:stretch;
        }

        .member-dashboard .card-foot .btn,
        .member-dashboard .card-head .btn{
            width:100%;
        }
    }

    @media (max-width: 420px){
        .member-dashboard .quick-strip{
            grid-template-columns:1fr;
        }

        .member-dashboard .meta-pill{
            width:100%;
            text-align:center;
            justify-content:center;
        }
    }
</style>

<div class="container-fluid member-dashboard">
    <div class="page-shell">

        @if(empty($anggotaId))
            <div class="warn-box">
                Akun Anda belum terhubung ke data anggota (anggota_id kosong). Hubungi admin untuk menghubungkan akun ke data anggota.
            </div>
        @elseif(!$anggota)
            <div class="warn-box">
                anggota_id ditemukan ({{ $anggotaId }}), tetapi data tidak ditemukan di tabel data_anggota.
            </div>
        @endif

        <div class="hero-card">
            <div class="hero-grid">
                <div class="hero-left">
                    <div class="avatar-box">
                        <i class="bi bi-person-vcard"></i>
                    </div>

                    <div>
                        <h1 class="hero-title">
                            Selamat datang, {{ $val($anggota?->nama_lengkap, $auth->name ?? 'Anggota') }}
                        </h1>
                        <p class="hero-subtitle">
                            Profil keanggotaan {{ $orgName }} Anda ditampilkan ringkas, nyaman dibaca di ponsel, dan mudah diperbarui saat ada perubahan data.
                        </p>
                    </div>
                </div>

                <div class="hero-right">
                    <span class="role-badge">
                        <i class="bi bi-shield-check"></i> Role: Anggota
                    </span>

                    <div class="hero-meta">
                        <span class="meta-pill">ID: {{ $anggotaId ?? '-' }}</span>
                        <span class="meta-pill">{{ $statusOrg }}</span>
                    </div>

                    @if($editUrl)
                        <a href="{{ $editUrl }}" class="btn btn-success btn-main d-none d-md-inline-flex align-items-center justify-content-center">
                            <i class="bi bi-pencil-square me-1"></i> Edit Profil Saya
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <div class="quick-strip">
            <div class="quick-card">
                <div class="quick-label">WhatsApp</div>
                <div class="quick-value">{{ $val($anggota?->nomor_wa) }}</div>
            </div>
            <div class="quick-card">
                <div class="quick-label">Kartu Kusuka</div>
                <div class="quick-value">
                    {{ $kusuka }}
                    @if(($anggota?->kartu_kusuka) === 'Y')
                        - {{ $anggota?->no_kartu_kusuka ?? '-' }}
                    @endif
                </div>
            </div>
        </div>

        <div class="dashboard-grid">
            <div class="content-card">
                <div class="card-head">
                    <div class="head-group">
                        <span class="icon-wrap"><i class="bi bi-person-badge"></i></span>
                        <div>
                            <h5 class="card-title">Profil Keanggotaan</h5>
                            <p class="card-note">Data identitas, kontak, dan domisili anggota.</p>
                        </div>
                    </div>

                    @if($editUrl)
                        <a href="{{ $editUrl }}" class="btn btn-soft-success d-none d-md-inline-flex align-items-center justify-content-center">
                            <i class="bi bi-pencil-square me-1"></i> Ubah Data
                        </a>
                    @endif
                </div>

                <div class="card-body">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">NIK</span>
                            <div class="info-value">{{ $val($anggota?->nik) }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Nama lengkap</span>
                            <div class="info-value">{{ $val($anggota?->nama_lengkap) }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Tanggal lahir</span>
                            <div class="info-value">{{ $tglTampil }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Jenis kelamin</span>
                            <div class="info-value">{{ $jk }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">No. WhatsApp</span>
                            <div class="info-value">{{ $val($anggota?->nomor_wa) }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Email</span>
                            <div class="info-value">{{ $val($anggota?->email, $auth->email ?? '-') }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Status organisasi</span>
                            <div class="info-value">{{ $statusOrg }}</div>
                        </div>

                        <div class="info-item">
                            <span class="info-label">Role sistem</span>
                            <div class="info-value">
                                <span class="status-chip">
                                    <i class="bi bi-person-check"></i> anggota
                                </span>
                            </div>
                        </div>
                    </div>

                    <hr class="section-divider">

                    <div class="address-box">
                        <div class="title-mini">
                            <i class="bi bi-geo-alt"></i> Alamat
                        </div>
                        <div class="address-text">
                            {{ $val($alamatLengkap) }}
                        </div>
                    </div>
                </div>

                <div class="card-foot">
                    <div class="muted-small">
                        ID Anggota: <strong>{{ $anggotaId ?? '-' }}</strong>
                    </div>

                    @if($editUrl)
                        <a href="{{ $editUrl }}" class="btn btn-outline-success d-none d-md-inline-flex align-items-center justify-content-center">
                            Perbarui Data Pribadi
                        </a>
                    @endif
                </div>
            </div>

            <div class="content-card">
                <div class="card-head">
                    <div class="head-group">
                        <span class="icon-wrap"><i class="bi bi-clipboard2-pulse"></i></span>
                        <div>
                            <h5 class="card-title">Informasi Tambahan</h5>
                            <p class="card-note">Kesejahteraan, fasilitas, dan perlindungan anggota.</p>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="stack-list">
                        <div class="stack-item">
                            <div class="left">Status rumah</div>
                            <div class="right">{{ $statusRumah }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">Tanah pekarangan</div>
                            <div class="right">{{ $tanahPekarangan }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">Akses listrik</div>
                            <div class="right">{{ $aksesListrik }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">Akses air bersih</div>
                            <div class="right">{{ $aksesAir }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">BPJS kesehatan</div>
                            <div class="right">{{ $bpjsKes }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">BPJS ketenagakerjaan</div>
                            <div class="right">{{ $bpjsKet }}</div>
                        </div>

                        <div class="stack-item">
                            <div class="left">Kartu Kusuka</div>
                            <div class="right">
                                {{ $kusuka }}
                                @if(($anggota?->kartu_kusuka) === 'Y')
                                    ({{ $anggota?->no_kartu_kusuka ?? '-' }})
                                @endif
                            </div>
                        </div>

                        <div class="stack-item">
                            <div class="left">Keanggotaan koperasi</div>
                            <div class="right">{{ $koperasi }}</div>
                        </div>
                    </div>

                    @if(!empty($anggota?->riwayat_penyakit_kecelakaan))
                        <hr class="section-divider">

                        <div class="note-box">
                            <div class="title-mini">
                                <i class="bi bi-heart-pulse"></i> Riwayat penyakit/kecelakaan
                            </div>
                            <div class="note-text">
                                {{ $anggota->riwayat_penyakit_kecelakaan }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($editUrl)
        <div class="mobile-sticky-bar d-md-none">
            <a href="{{ $editUrl }}" class="btn btn-success btn-main d-inline-flex align-items-center justify-content-center">
                <i class="bi bi-pencil-square me-1"></i> Edit Profil Saya
            </a>
        </div>
    @endif
</div>
@endsection