@extends('layout.index')
@section('title', 'Detail Anggota - ' . $anggota->nama)

@push('styles')
    <style>
        .detail-card {
            background: #fff;
            border-radius: var(--radius-card);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
            padding: 2rem 2.5rem;
            margin-top: 1.5rem;
            animation: fadeInUp 0.5s ease-out;
        }

        .detail-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            border-bottom: 2px solid var(--primary-light);
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .detail-avatar {
            width: 120px;
            height: 150px;
            border-radius: 16px;
            overflow: hidden;
            border: 4px solid var(--primary-light);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            flex-shrink: 0;
            background: #f1f5f9;
        }
        .detail-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .detail-avatar .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: 800;
            background: var(--primary-gradient);
            color: #fff;
        }

        .detail-title {
            flex: 1;
        }
        .detail-title h2 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
            letter-spacing: -0.02em;
        }
        .detail-title .subtitle {
            color: var(--text-secondary);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem 2rem;
            margin: 1.5rem 0;
        }
        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .detail-item .label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
        }
        .detail-item .value {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            word-break: break-word;
        }
        .detail-item .value i {
            color: var(--primary);
            margin-right: 0.4rem;
        }

        .status-badge-large {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 1.5rem;
            border-radius: var(--radius-btn);
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--bg-body);
            border: 1px solid var(--border-color);
        }
        .status-badge-large::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.7;
        }
        .status-badge-large.success {
            background: #DCFCE7;
            color: #166534;
            border-color: #86EFAC;
        }
        .status-badge-large.warning {
            background: #FEF3C7;
            color: #92400E;
            border-color: #FCD34D;
        }
        .status-badge-large.danger {
            background: #FEE2E2;
            color: #991B1B;
            border-color: #FCA5A5;
        }

        .status-description {
            margin-top: 0.3rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .status-description i {
            margin-right: 0.3rem;
        }
        .status-description .text-success { color: #166534; }
        .status-description .text-warning { color: #92400E; }
        .status-description .text-danger { color: #991B1B; }

        .detail-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .info-box {
            background: var(--primary-light);
            border-radius: var(--radius-input);
            padding: 1rem 1.5rem;
            margin: 1rem 0;
            border-left: 4px solid var(--primary);
        }
        .info-box p {
            margin: 0;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        .info-box strong {
            color: var(--text-primary);
        }

        @media (max-width: 576px) {
            .detail-card {
                padding: 1.25rem;
            }
            .detail-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .detail-avatar {
                width: 100px;
                height: 130px;
            }
            .detail-title h2 {
                font-size: 1.4rem;
            }
            .detail-grid {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-0 py-3 px-md-3" style="max-width:1200px;">

        {{-- Breadcrumb --}}
        <nav aria-label="Breadcrumb" class="breadcrumb-custom">
            <a href="{{ route('dashboard.index') }}"><i class="bi bi-house"></i> Dashboard</a>
            <span class="separator"> / </span>
            <a href="{{ route('anggota.index') }}"><i class="bi bi-people"></i> Data Anggota</a>
            <span class="separator"> / </span>
            @if($user->role === 'super_admin')
                <a href="{{ route('anggota.pac', $anggota->id_pac) }}"><i class="bi bi-building"></i> {{ $anggota->pac->nama_pac }}</a>
                <span class="separator"> / </span>
            @endif
            <span class="active"><i class="bi bi-person-badge"></i> {{ $anggota->id_anggota }}</span>
        </nav>

        {{-- Card Detail --}}
        <div class="detail-card">
            <div class="detail-header">
                <div class="detail-avatar">
                    @if($anggota->id_gambar)
                        <img src="{{ route('proxy.image', $anggota->id_gambar) }}" alt="Foto {{ $anggota->nama }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="avatar-placeholder" style="display:none;">{{ strtoupper(substr($anggota->nama, 0, 1)) }}</div>
                    @else
                        <div class="avatar-placeholder">{{ strtoupper(substr($anggota->nama, 0, 1)) }}</div>
                    @endif
                </div>
                <div class="detail-title">
                    <h2>{{ $anggota->nama }}</h2>
                    <div class="subtitle">
                        <span><i class="bi bi-upc-scan"></i> {{ $anggota->id_anggota }}</span>
                        <span class="text-muted">|</span>
                        <span><i class="bi bi-building"></i> {{ $anggota->pac->nama_pac ?? 'Tidak Diketahui' }}</span>
                        <span class="text-muted">|</span>
                        <span class="status-badge-large 
                            @if($anggota->status == 'Aktif') success
                            @elseif($anggota->status == 'Baru') warning
                            @else danger @endif">
                            {{ $anggota->status }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Info Status dengan Deskripsi --}}
            <div class="info-box">
                <p>
                    <strong>Status Anggota:</strong> 
                    <span class="fw-bold 
                        @if($anggota->status == 'Aktif') text-success
                        @elseif($anggota->status == 'Baru') text-warning
                        @else text-danger @endif">
                        {{ $anggota->status }}
                    </span>
                    <br>
                    <span class="status-description">
                        @if($anggota->status == 'Aktif')
                            <i class="bi bi-check-circle-fill text-success"></i> Anggota aktif dan memiliki hak penuh.
                        @elseif($anggota->status == 'Baru')
                            <i class="bi bi-clock-fill text-warning"></i> Anggota baru, masih menunggu verifikasi/aktivasi.
                        @elseif($anggota->status == 'Nonaktif')
                            <i class="bi bi-x-circle-fill text-danger"></i> Anggota nonaktif, tidak memiliki hak akses.
                        @endif
                    </span>
                </p>
            </div>

            {{-- Data Grid LENGKAP --}}
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="label">ID Anggota</span>
                    <span class="value"><i class="bi bi-upc-scan"></i> {{ $anggota->id_anggota }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Nama Lengkap</span>
                    <span class="value"><i class="bi bi-person"></i> {{ $anggota->nama }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Tempat, Tanggal Lahir</span>
                    <span class="value"><i class="bi bi-calendar3"></i> {{ $anggota->ttl }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Alamat</span>
                    <span class="value"><i class="bi bi-geo-alt"></i> {{ $anggota->alamat }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">PAC</span>
                    <span class="value"><i class="bi bi-building"></i> {{ $anggota->pac->nama_pac ?? 'Tidak Diketahui' }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Pengesahan</span>
                    <span class="value"><i class="bi bi-calendar-event"></i> 
                        @if($anggota->pengesahan)
                            {{ $anggota->pengesahan->tahun }} - {{ $anggota->pengesahan->tanggal_bulan }}
                        @else
                            <span class="text-muted">Tidak ada</span>
                        @endif
                    </span>
                </div>
                <div class="detail-item">
                    <span class="label">Status</span>
                    <span class="value">
                        <span class="badge-modern 
                            @if($anggota->status == 'Aktif') badge-modern-success
                            @elseif($anggota->status == 'Baru') badge-modern-warning
                            @else badge-modern-danger @endif">
                            {{ $anggota->status }}
                        </span>
                    </span>
                </div>
                <div class="detail-item">
                    <span class="label">Tanggal Dibuat</span>
                    <span class="value"><i class="bi bi-clock"></i> {{ $anggota->created_at->format('d-m-Y H:i') }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Terakhir Diperbarui</span>
                    <span class="value"><i class="bi bi-clock-history"></i> {{ $anggota->updated_at->format('d-m-Y H:i') }}</span>
                </div>
            </div>

            {{-- Actions --}}
            <div class="detail-actions">
                @if($user->role === 'super_admin')
                    <a href="{{ route('anggota.pac', $anggota->id_pac) }}" class="btn-modern btn-sm btn-outline-green">
                        <i class="bi bi-arrow-left"></i> Kembali ke PAC
                    </a>
                    <a href="{{ route('anggota.edit', $anggota->id) }}" class="btn-modern btn-sm btn-outline-warning">
                        <i class="bi bi-pencil-square"></i> Edit
                    </a>
                @else
                    <a href="{{ route('anggota.index') }}" class="btn-modern btn-sm btn-light">
                        <i class="bi bi-arrow-left"></i> Kembali
                    </a>
                @endif
                {{-- Tombol cetak KTA jika ada blanko aktif --}}
                @if(isset($activeBlanko) && $activeBlanko)
                    <a href="{{ route('anggota.cetak', $anggota->id) }}" target="_blank" class="btn-modern btn-sm btn-success-green">
                        <i class="bi bi-printer-fill"></i> Cetak KTA
                    </a>
                @else
                    <span class="text-muted small"><i class="bi bi-info-circle"></i> Blanko KTA belum aktif</span>
                @endif
            </div>
        </div>

        {{-- Informasi QR Code --}}
        <div class="text-center text-muted small mt-4">
            <i class="bi bi-qr-code"></i> Scan QR Code pada KTA untuk melihat halaman verifikasi online.
        </div>
    </div>
@endsection