@extends('layouts.app')

@section('title', 'Data Saya')

@section('content')
<div class="max-w-md mx-auto px-4 py-6 space-y-6 text-[11px]">

    {{-- HEADER --}}
    <h2 class="text-xl font-black text-yellow-500 text-center uppercase tracking-[0.2em]">
        DATA SAYA
    </h2>

    {{-- FOTO PROFIL (FLOATING DESIGN) --}}
    <div class="flex justify-center">
        <div class="p-1 bg-gradient-to-tr from-yellow-600 to-yellow-300 rounded-2xl shadow-[0_10px_25px_-5px_rgba(234,179,8,0.3)]">
            <div class="bg-slate-900 rounded-[14px] p-2">
                <div class="w-24 h-24 rounded-lg overflow-hidden border border-white/10">
                    <img src="{{ $user->profile?->foto_path
                        ? asset('storage/foto_user/'.$user->profile->foto_path)
                        : asset('img/avatar.png') }}"
                        class="w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>

    @php
        // Helper function untuk baris data agar konsisten
        if (!function_exists('row')) {
            function row($label, $value){
                return '<div class="grid grid-cols-[115px_10px_1fr] gap-1 py-1 border-b border-white/[0.03] last:border-0">
                            <div class="text-white/50">'.$label.'</div>
                            <div class="text-white/30">:</div>
                            <div class="font-medium text-white tracking-wide">'.($value ?: '-').'</div>
                        </div>';
            }
        }
    @endphp

    {{-- ================= KEPALA KELUARGA ================= --}}
    <div class="bg-white/10 backdrop-blur-md rounded-2xl p-5 border border-white/20 shadow-xl relative overflow-hidden">
        <h3 class="font-bold text-yellow-400 mb-4 uppercase tracking-widest flex items-center gap-2 text-xs">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            Kepala Keluarga
        </h3>

        <div class="space-y-0.5 text-white/90">
            {!! row('Nomor KSK', $ksk->nomor_ksk ?? null) !!}
            {!! row('Nama', $ksk->kepala_keluarga_nama ?? null) !!}
            {!! row('NIK', $ksk->kepala_keluarga_nik ?? null) !!}
            {!! row('Tempat Lahir', $kepalaKeluargaData->tempat_lahir ?? ($kepalaProfile->tempat_lahir ?? null)) !!}
            {!! row('Tanggal Lahir', ($kepalaKeluargaData->tanggal_lahir ?? $kepalaProfile->tanggal_lahir ?? null)
                ? \Carbon\Carbon::parse($kepalaKeluargaData->tanggal_lahir ?? $kepalaProfile->tanggal_lahir)->format('d-m-Y')
                : '-') !!}
            {!! row('Jenis Kelamin', $kepalaKeluargaData->jenis_kelamin ?? ($kepalaProfile->jenis_kelamin ?? null)) !!}
            {!! row('Agama', $kepalaKeluargaData->agama ?? ($kepalaProfile->agama ?? null)) !!}
            {!! row('Golongan Darah', $kepalaKeluargaData->golongan_darah ?? ($kepalaProfile->golongan_darah ?? null)) !!}
            {!! row('Status Perkawinan', $kepalaKeluargaData->status_perkawinan ?? null) !!} 
            {!! row('Pendidikan', $kepalaKeluargaData->pendidikan ?? ($kepalaProfile->pendidikan ?? null)) !!}
            {!! row('Pekerjaan', $kepalaKeluargaData->pekerjaan ?? ($kepalaProfile->pekerjaan ?? null)) !!}
            {!! row('No. Telepon', $user->no_hp ?? ($kepalaProfile->no_telepon ?? null)) !!}
            
            <div class="my-3 border-t border-white/10"></div>
            
            {!! row('Alamat', $ksk->alamat ?? null) !!}
            {!! row('RT / RW', ($ksk->rt ?? '-') .' / '. ($ksk->rw->kode_rw ?? '-')) !!}
            {!! row('Desa', $ksk->desa ?? null) !!}
            {!! row('Kecamatan', $ksk->kecamatan ?? null) !!}
            {!! row('Kabupaten', $ksk->kabupaten ?? null) !!}
            {!! row('Provinsi', $ksk->provinsi ?? null) !!}
            {!! row('Kewarganegaraan', $kepalaKeluargaData->kewarganegaraan ?? ($kepalaProfile->kewarganegaraan ?? 'WNI')) !!}

            @if(!empty($ksk?->file_path))
                <div class="mt-4 pt-4 border-t border-white/10">
                    <a href="{{ asset('storage/ksk/'.$ksk->file_path) }}" target="_blank" class="text-yellow-400 font-bold flex justify-center items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        LIHAT DOKUMEN KSK
                    </a>
                </div>
            @endif
        </div>
    </div>

    {{-- ================= ANGGOTA KELUARGA ================= --}}
    <div class="bg-white/10 backdrop-blur-md rounded-2xl p-5 border border-white/20 shadow-xl">
        <h3 class="font-bold text-yellow-400 mb-6 uppercase tracking-widest flex items-center gap-2 text-xs border-b border-white/10 pb-3">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            Daftar Anggota Keluarga
        </h3>

        @if($changeRequests->isNotEmpty())
            @php
                $pendingRequestCount = $changeRequests->where('status', 'pending')->count();
            @endphp
            <details class="mb-6 rounded-xl border border-white/10 bg-slate-950/30 p-4">
                <summary class="cursor-pointer font-bold text-white">
                    Riwayat pengajuan ({{ $changeRequests->count() }})
                    @if($pendingRequestCount)
                        <span class="ml-1 text-yellow-300">· {{ $pendingRequestCount }} menunggu</span>
                    @endif
                    <span class="ml-1 text-white/50">— tampilkan/sembunyikan</span>
                </summary>
                <div class="mt-3 space-y-2">
                    @foreach($changeRequests as $changeRequest)
                        <div class="rounded-lg border border-white/10 bg-slate-950/40 px-3 py-2 text-white">
                            <span class="font-bold">{{ ucfirst($changeRequest->action) }}</span>
                            <span class="text-white/60">· {{ $changeRequest->created_at->format('d-m-Y H:i') }}</span>
                            <span class="ml-1 font-bold {{ $changeRequest->status === 'approved' ? 'text-green-300' : ($changeRequest->status === 'rejected' ? 'text-red-300' : 'text-yellow-300') }}">
                                {{ strtoupper($changeRequest->status) }}
                            </span>
                            @if($changeRequest->admin_note)
                                <div class="mt-1 text-red-200">Catatan admin: {{ $changeRequest->admin_note }}</div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </details>
        @endif

        @if($ksk)
            <details class="mb-6 rounded-xl border border-yellow-400/30 bg-slate-950/30 p-4">
                <summary class="cursor-pointer font-bold text-yellow-300">+ Ajukan anggota keluarga baru</summary>
                <div class="mt-4">
                    @include('user.partials.anggota-keluarga-form', [
                        'member' => null,
                        'formAction' => route('user.anggota-keluarga.store'),
                        'formMethod' => 'POST',
                    ])
                </div>
            </details>
        @endif

        <div class="space-y-8">
            @forelse($anggotaList as $anggota)
                <div class="space-y-0.5">
                    {{-- Nama Anggota --}}
                    <div class="flex items-center mb-3">
                        <div class="h-[1px] w-4 bg-yellow-500 mr-2"></div>
                        <span class="font-bold text-white uppercase tracking-wider text-[12px]">{{ $anggota->nama }}</span>
                    </div>

                    {!! row('Status Hubungan', $anggota->status_keluarga) !!}
                    {!! row('NIK', $anggota->nik) !!}
                    {!! row('Tempat Lahir', $anggota->tempat_lahir) !!}
                    {!! row('Tanggal Lahir', $anggota->tanggal_lahir ? \Carbon\Carbon::parse($anggota->tanggal_lahir)->format('d-m-Y') : '-') !!}
                    {!! row('Jenis Kelamin', $anggota->jenis_kelamin) !!}
                    {!! row('Golongan Darah', $anggota->golongan_darah) !!}
                    {!! row('Status Nikah', $anggota->status_perkawinan) !!}
                    {!! row('Agama', $anggota->agama) !!}
                    {!! row('Pendidikan', $anggota->pendidikan) !!}
                    {!! row('Pekerjaan', $anggota->pekerjaan) !!}
                    {!! row('Kewarganegaraan', $anggota->kewarganegaraan ?? 'WNI') !!}

                    @if($ksk)
                        <details class="mt-4 rounded-lg border border-white/10 bg-slate-950/30 p-3">
                            <summary class="cursor-pointer font-bold text-yellow-300">Ajukan perubahan data</summary>
                            <div class="mt-3">
                                @include('user.partials.anggota-keluarga-form', [
                                    'member' => $anggota,
                                    'formAction' => route('user.anggota-keluarga.update', $anggota),
                                    'formMethod' => 'PUT',
                                ])
                            </div>
                        </details>
                        <form action="{{ route('user.anggota-keluarga.destroy', $anggota) }}" method="POST" class="mt-3" onsubmit="return confirmDeleteRequest(this)">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="flex w-full items-center justify-center gap-2 rounded-xl border-2 border-red-300 bg-red-700 px-4 py-3 font-black uppercase tracking-wide text-white shadow-lg shadow-red-950/40 transition hover:bg-red-600">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 4h.01M10.29 3.86l-7.1 12.3A2 2 0 004.92 19h14.16a2 2 0 001.73-2.84l-7.1-12.3a2 2 0 00-3.46 0z"/>
                                </svg>
                                Ajukan Penghapusan
                            </button>
                            <p class="mt-2 text-center font-semibold text-red-200">
                                Perhatian: penghapusan hanya dilakukan setelah disetujui admin.
                            </p>
                        </form>
                    @endif
                    
                    {{-- Spacing antar data anggota --}}
                    @if(!$loop->last)
                        <div class="pt-6"></div>
                    @endif
                </div>
            @empty
                <div class="text-center py-4 opacity-30 italic text-white">Belum ada data anggota keluarga.</div>
            @endforelse
        </div>
    </div>

</div>
@endsection

@push('styles')
<style>
    .user-notification-toast {
        box-sizing: border-box !important;
        width: min(92vw, 360px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 8px 12px !important;
    }

    .user-notification-toast .swal2-title {
        margin: 0.25em 0.5em !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    @media (max-width: 480px) {
        .user-notification-toast {
            width: calc(100vw - 24px) !important;
            padding: 6px 10px !important;
        }

        .user-notification-toast .swal2-title {
            font-size: 12px !important;
        }
    }
</style>
@endpush

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        @if(session('success'))
            Swal.fire({
                toast: true,
                position: 'top',
                customClass: { popup: 'user-notification-toast' },
                icon: 'success',
                title: @json(session('success')),
                showConfirmButton: false,
                timer: 1000,
                timerProgressBar: true
            });
        @elseif($errors->any())
            Swal.fire({
                toast: true,
                position: 'top',
                customClass: { popup: 'user-notification-toast' },
                icon: 'error',
                title: @json($errors->first()),
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true
            });
        @elseif(session('error'))
            Swal.fire({
                toast: true,
                position: 'top',
                customClass: { popup: 'user-notification-toast' },
                icon: 'error',
                title: @json(session('error')),
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true
            });
        @endif
    });

    function confirmDeleteRequest(form) {
        if (form.dataset.confirmed === 'true') {
            return true;
        }

        const warning = 'PERINGATAN: Pengajuan penghapusan akan dikirim ke admin. Data anggota baru dihapus jika admin menyetujuinya.';
        if (typeof Swal === 'undefined') {
            return window.confirm(warning + ' Lanjutkan?');
        }

        Swal.fire({
            icon: 'warning',
            title: 'Ajukan penghapusan anggota?',
            text: warning,
            showCancelButton: true,
            confirmButtonText: 'Ya, kirim pengajuan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#b91c1c',
            cancelButtonColor: '#64748b'
        }).then(function (result) {
            if (result.isConfirmed) {
                form.dataset.confirmed = 'true';
                form.requestSubmit();
            }
        });

        return false;
    }
</script>
@endsection