@extends('layouts.admin')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    body { background-color: #f4f7fa; font-family: 'Inter', sans-serif; color: #2d3436; }
    
    /* Skala Font & Data */
    .info-group { margin-bottom: 0.4rem; border-bottom: 1px dashed #ced4da; padding-bottom: 4px; }
    .info-label { display: block; font-size: 10px; text-transform: uppercase; color: #636e72; font-weight: 800; margin-bottom: 1px; }
    .info-value { display: block; font-weight: 700; color: #1e272e; font-size: 13px; line-height: 1.2; }
    
    .user-photo { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .card-compact .card-body { padding: 1.2rem !important; }
    .badge-status { font-size: 10px !important; padding: 4px 10px !important; font-weight: 700; border-radius: 6px; }

    .btn-action { font-size: 14px; padding: 12px; font-weight: 800; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
    .btn-modern-reject { background: #fff; border: 2px solid #ff7675; color: #ff7675; }
    .btn-modern-accept { background: #2ecc71; border: none; color: #fff; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); }
    
    /* Scroll Containers */
    .scroll-container-left { height: calc(100vh - 200px); overflow-y: auto; padding-right: 10px; }
    .scroll-container-right { height: calc(100vh - 120px); overflow-y: auto; padding-right: 10px; }
    
    .ksk-preview-box { background: #dfe6e9; border-radius: 15px; overflow: hidden; border: 2px solid #dcdde1; position: relative; min-height: 350px; margin-bottom: 20px; }
    
    /* Zoom UI */
    .zoom-hint { position: absolute; top: 12px; left: 12px; z-index: 10; pointer-events: none; }
    .btn-full { position: absolute; top: 12px; right: 12px; z-index: 10; width: 35px; height: 35px; border-radius: 8px; background: rgba(255,255,255,0.9); border: none; display: grid; place-items: center; color: #2d3436; }

    .scroll-container-left::-webkit-scrollbar, .scroll-container-right::-webkit-scrollbar { width: 6px; }
    .scroll-container-left::-webkit-scrollbar-thumb, .scroll-container-right::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 10px; }
</style>

<div class="container-fluid py-3">
    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div class="d-flex align-items-center">
            <a href="{{ route('superadmin.dashboard') }}" class="btn btn-white shadow-sm rounded-circle me-3" style="width: 40px; height: 40px; display: grid; place-items: center; border: none; background: white;">
                <i class="fas fa-arrow-left text-primary"></i>
            </a>
            <div>
                <h3 class="fw-bold mb-0 text-dark">Detail Verifikasi Warga</h3>
                <p class="text-muted mb-0 small text-uppercase fw-bold">
                    No. KSK: {{ $warga->ksk->nomor_ksk ?? '-' }} 
                    <span class="badge bg-secondary ms-2">ASAL RW: {{ $warga->rw->kode_rw ?? '-' }}</span>
                </p>
            </div>
        </div>
    </div>

    <div class="row g-4">
        {{-- SISI KIRI: DATA LENGKAP TEXTUAL --}}
        <div class="col-lg-6">
            <div class="scroll-container-left">
                
                {{-- 1. DATA KEPALA KELUARGA --}}
                <div class="card border-0 shadow-sm card-compact mb-4" style="border-radius: 18px; border-left: 5px solid #4e73df !important;">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            @php $avatarUrl = $warga->profile && $warga->profile->foto_path ? asset('storage/foto_user/' . ltrim($warga->profile->foto_path, '/')) : "https://ui-avatars.com/api/?name=".urlencode($warga->name)."&background=4e73df&color=fff"; @endphp
                            <img src="{{ $avatarUrl }}" class="user-photo me-3">
                            <div>
                                <h5 class="fw-bold mb-1 text-uppercase">{{ $warga->profile->nama_lengkap ?? $warga->name }}</h5>
                                <span class="badge bg-primary text-white badge-status">KEPALA KELUARGA</span>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-md-6"><div class="info-group"><label class="info-label">NIK</label><span class="info-value text-primary">{{ $warga->profile->nik ?? '-' }}</span></div></div>
                            <div class="col-md-6"><div class="info-group"><label class="info-label">Pekerjaan</label><span class="info-value">{{ strtoupper($warga->profile->pekerjaan ?? '-') }}</span></div></div>
                            <div class="col-md-6"><div class="info-group"><label class="info-label">Tempat, Tgl Lahir</label><span class="info-value">{{ strtoupper($warga->profile->tempat_lahir ?? '-') }}, {{ $warga->profile->tanggal_lahir ? \Carbon\Carbon::parse($warga->profile->tanggal_lahir)->format('d/m/Y') : '-' }}</span></div></div>
                            <div class="col-md-3"><div class="info-group"><label class="info-label">Kelamin</label><span class="info-value">{{ strtoupper($warga->profile->jenis_kelamin ?? '-') }}</span></div></div>
                            <div class="col-md-3"><div class="info-group"><label class="info-label">Agama</label><span class="info-value">{{ strtoupper($warga->profile->agama ?? '-') }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Pendidikan</label><span class="info-value">{{ strtoupper($warga->profile->pendidikan ?? '-') }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Status Kawin</label><span class="info-value">{{ strtoupper($warga->profile->status_perkawinan ?? '-') }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Darah / WN</label><span class="info-value text-danger">{{ $warga->profile->golongan_darah ?? '-' }} / <span class="text-success">WNI</span></span></div></div>
                            <div class="col-12"><div class="info-group"><label class="info-label">Alamat Sesuai KSK</label><span class="info-value small">{{ strtoupper($warga->profile->alamat ?? '-') }} (RT {{ $warga->ksk->rt ?? '0' }}/RW {{ $warga->rw->kode_rw ?? '0' }})</span></div></div>
                        </div>
                    </div>
                </div>

                <h6 class="fw-bold mb-3 px-2 text-secondary text-uppercase" style="font-size: 12px; letter-spacing: 1px;">Anggota Keluarga Lainnya</h6>

                {{-- 2. LOOPING DATA ANGGOTA KELUARGA (DIJAMIN GAK HILANG) --}}
                @php 
                    $filtered = optional($warga->ksk)->anggota_keluarga ? $warga->ksk->anggota_keluarga->where('urutan', '>=', 2)->sortBy('urutan') : collect(); 
                @endphp

                @forelse($filtered as $anggota)
                <div class="card border-0 shadow-sm card-compact mb-3" style="border-radius: 18px; border-left: 5px solid #2ecc71 !important;">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3 pb-2 border-bottom">
                            <div class="bg-light rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                <i class="fas fa-user text-secondary"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-0 text-uppercase">{{ $anggota->nama }}</h6>
                                <span class="badge bg-success-subtle text-success badge-status">{{ strtoupper($anggota->status_keluarga) }}</span>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-md-6"><div class="info-group"><label class="info-label">NIK</label><span class="info-value text-dark">{{ $anggota->nik }}</span></div></div>
                            <div class="col-md-6"><div class="info-group"><label class="info-label">Pekerjaan</label><span class="info-value">{{ strtoupper($anggota->pekerjaan) }}</span></div></div>
                            <div class="col-md-6"><div class="info-group"><label class="info-label">Tempat, Tgl Lahir</label><span class="info-value">{{ strtoupper($anggota->tempat_lahir) }}, {{ \Carbon\Carbon::parse($anggota->tanggal_lahir)->format('d/m/Y') }}</span></div></div>
                            <div class="col-md-3"><div class="info-group"><label class="info-label">Kelamin</label><span class="info-value">{{ strtoupper($anggota->jenis_kelamin) }}</span></div></div>
                            <div class="col-md-3"><div class="info-group"><label class="info-label">Agama</label><span class="info-value">{{ strtoupper($anggota->agama) }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Pendidikan</label><span class="info-value">{{ strtoupper($anggota->pendidikan) }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Status Kawin</label><span class="info-value">{{ strtoupper($anggota->status_perkawinan) }}</span></div></div>
                            <div class="col-md-4"><div class="info-group"><label class="info-label">Darah / WN</label><span class="info-value text-danger">{{ $anggota->golongan_darah ?? '-' }} / <span class="text-success">{{ $anggota->kewarganegaraan }}</span></span></div></div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="text-center p-4 bg-white rounded-3 shadow-sm mb-4">
                    <p class="text-muted small mb-0">Hanya pendaftar tunggal (Kepala Keluarga).</p>
                </div>
                @endforelse
            </div>

            {{-- ACTION BUTTONS --}}
            <div class="row g-3 mt-2">
                <div class="col-6">
                    <form action="{{ route('adminrw.verifikasi.tolak', $warga->id) }}" method="POST" id="form-tolak">@csrf
                        <button type="button" class="btn btn-action btn-modern-reject w-100" onclick="confirmTolak()"><i class="fas fa-times me-2"></i> TOLAK</button>
                    </form>
                </div>
                <div class="col-6">
                    <form action="{{ route('adminrw.verifikasi.aktivasi', $warga->id) }}" method="POST" id="form-aktivasi">@csrf
                        <button type="button" class="btn btn-action btn-modern-accept w-100" onclick="confirmTerima()"><i class="fas fa-check me-2"></i> TERIMA</button>
                    </form>
                </div>
            </div>
        </div>

        {{-- SISI KANAN: DOKUMEN (KSK & SERTIFIKAT) --}}
        <div class="col-lg-6">
            <div class="scroll-container-right">
                
                {{-- PREVIEW KSK --}}
                <h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 11px;">Kartu Satuan Keluarga (KSK)</h6>
                <div class="ksk-preview-box shadow-sm" id="magnify-container">
                    @if($warga->ksk && $warga->ksk->file_path)
                        <div class="zoom-hint">
                            <span class="badge bg-dark bg-opacity-75 py-2 px-3 shadow-sm" style="font-size: 10px;">
                                <i class="fas fa-search-plus me-1 text-warning"></i> Hover untuk Zoom
                            </span>
                        </div>
                        <button type="button" class="btn-full shadow-sm" data-bs-toggle="modal" data-bs-target="#kskFullModal"><i class="fas fa-expand"></i></button>
                        <img src="{{ asset('storage/ksk/' . ltrim($warga->ksk->file_path, '/')) }}" id="ksk-image" class="img-fluid" style="width: 100%; transition: transform 0.1s; cursor: crosshair;">
                    @else
                        <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted p-5 text-center">
                            <i class="fas fa-file-invoice fa-4x mb-3 opacity-25"></i>
                            <h5 class="fw-bold">KSK Tidak Ada</h5>
                        </div>
                    @endif
                </div>

                {{-- PREVIEW SERTIFIKAT --}}
                <h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 11px;">Sertifikat / Berkas Pendukung</h6>
                @if($warga->profile && $warga->profile->sertifikat)
                    <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px; overflow: hidden;">
                        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
                            <span class="fw-bold text-dark small" style="font-size: 12px;"><i class="fas fa-certificate text-warning me-2"></i>FILE SERTIFIKAT</span>
                            <a href="{{ asset('storage/sertifikat_user/' . ltrim($warga->profile->sertifikat, '/')) }}" target="_blank" class="btn btn-sm btn-outline-primary" style="font-size: 10px;">BUKA</a>
                        </div>
                        <div class="card-body p-0 bg-light text-center">
                            @php 
                                $fileSertif = $warga->profile->sertifikat;
                                $ext = pathinfo($fileSertif, PATHINFO_EXTENSION); 
                            @endphp
                            @if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'webp']))
                                <img src="{{ asset('storage/sertifikat_user/' . ltrim($fileSertif, '/')) }}" class="img-fluid" style="max-height: 400px;">
                            @else
                                <div class="py-5">
                                    <i class="fas fa-file-pdf fa-4x text-danger mb-3"></i>
                                    <p class="fw-bold mb-0">Dokumen PDF Terlampir</p>
                                    <p class="text-muted small">{{ $fileSertif }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @else
                    <div class="text-center py-4 border-dashed rounded-3" style="border: 2px dashed #ced4da; background: #f8f9fa;">
                        <span class="text-muted small">Warga tidak mengunggah sertifikat</span>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- MODAL FULLSCREEN --}}
@if($warga->ksk && $warga->ksk->file_path)
<div class="modal fade" id="kskFullModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 text-center">
                <div class="d-flex justify-content-end mb-2"><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div>
                <img src="{{ asset('storage/ksk/' . ltrim($warga->ksk->file_path, '/')) }}" class="img-fluid rounded shadow-lg" style="max-height: 90vh;">
            </div>
        </div>
    </div>
</div>
@endif

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmTerima() {
        Swal.fire({
            title: 'Terima Warga Ini?',
            text: "Data akan divalidasi dan akun akan aktif.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#2ecc71',
            confirmButtonText: 'Ya, Terima!',
            cancelButtonText: 'Batal'
        }).then((result) => { if (result.isConfirmed) document.getElementById('form-aktivasi').submit(); });
    }

    function confirmTolak() {
        Swal.fire({
            title: 'Tolak Pendaftaran?',
            text: "Data pendaftaran warga ini akan dihapus permanen.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ff7675',
            confirmButtonText: 'Ya, Tolak!',
            cancelButtonText: 'Batal'
        }).then((result) => { if (result.isConfirmed) document.getElementById('form-tolak').submit(); });
    }

    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('magnify-container');
        const img = document.getElementById('ksk-image');
        if (container && img) {
            container.addEventListener('mousemove', (e) => {
                const rect = container.getBoundingClientRect();
                const x = ((e.clientX - rect.left) / rect.width) * 100;
                const y = ((e.clientY - rect.top) / rect.height) * 100;
                img.style.transformOrigin = `${x}% ${y}%`;
                img.style.transform = "scale(2.5)";
            });
            container.addEventListener('mouseleave', () => { img.style.transform = "scale(1)"; });
        }
    });
</script>
@endsection