@extends('layout.layout')

@php
    $title = 'Verifikasi Pendaftaran';
    $subTitle = 'Detail Pendaftaran Baru';

    $wargaBaseUrl = rtrim(config('app.warga_url', 'http://127.0.0.1:8000'), '/');
@endphp

@section('content')

<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    
    {{-- KOLOM KIRI - INFO PENDAFTAR --}}
    <div class="col-span-12 lg:col-span-4">
        <div class="user-grid-card relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden bg-white dark:bg-neutral-700 h-full">
            <div class="pb-6 ms-6 mb-6 me-6 -mt-[100px]">
                <div class="text-center border-b border-neutral-200 dark:border-neutral-600 pb-4">
                    <h6 class="mb-0 mt-4 text-lg font-semibold">{{ $user->name }}</h6>
                    <span class="text-secondary-light mb-4 block">{{ $user->email }}</span>
                </div>

                <div class="mt-6">
                    <h6 class="text-xl mb-4 font-semibold text-neutral-800 dark:text-white">Data Pendaftaran</h6>
                    <ul>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Full Name</span>
                            <span class="w-[65%] text-secondary-light">: {{ $user->name }}</span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Email</span>
                            <span class="w-[65%] text-secondary-light">: {{ $user->email }}</span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Phone</span>
                            <span class="w-[65%] text-secondary-light">: {{ $user->profile->phone_number ?? '-' }}</span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Address</span>
                            <span class="w-[65%] text-secondary-light">: {{ $user->profile->address ?? '-' }}</span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">KTP</span>
                            <span class="w-[65%] text-secondary-light">: 
                                @if($user->profile->ktp)
                                    <a href="{{ $wargaBaseUrl }}/storage/{{ $user->profile->ktp }}" target="_blank" class="text-primary-600 hover:underline">Lihat KTP</a>
                                @else - @endif
                            </span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Selfie</span>
                            <span class="w-[65%] text-secondary-light">: 
                                @if($user->profile->foto)
                                    <a href="{{ $wargaBaseUrl }}/storage/{{ $user->profile->foto }}" target="_blank" class="text-primary-600 hover:underline">Lihat Foto</a>
                                @else - @endif
                            </span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Lokasi GPS</span>
                            <span class="w-[65%] text-secondary-light">: 
                                @if($user->profile->latitude && $user->profile->longitude)
                                    <a href="https://maps.google.com/?q={{ $user->profile->latitude }},{{ $user->profile->longitude }}" target="_blank" class="text-primary-600 hover:underline">Buka Maps</a>
                                @else - @endif
                            </span>
                        </li>
                        <li class="flex items-center gap-1 mb-3">
                            <span class="w-[35%] text-base font-semibold">Status</span>
                            <span class="w-[65%] text-secondary-light">: 
                                <span class="px-3 py-1 rounded-full text-sm font-medium bg-warning-100 text-warning-600">
                                    {{ ucfirst($user->status) }}
                                </span>
                            </span>
                        </li>
                        <li class="flex items-center gap-1">
                            <span class="w-[35%] text-base font-semibold">Joined Date</span>
                            <span class="w-[65%] text-secondary-light">: {{ $user->created_at->translatedFormat('d M Y, H:i') }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- KOLOM KANAN - DOKUMEN & AKSI --}}
    <div class="col-span-12 lg:col-span-8">
        <div class="card h-full border-0 shadow-sm">
            <div class="card-body p-6">

                <h6 class="text-lg font-semibold mb-4">Dokumen Pendaftaran</h6>

                {{-- KTP & Selfie --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="border rounded-lg p-4 text-center">
                        <h6 class="font-semibold mb-3">Foto KTP</h6>
                        @if($user->profile->ktp)
                            @php $ktpUrl = $wargaBaseUrl . '/storage/' . $user->profile->ktp; @endphp
                            <img src="{{ $ktpUrl }}" 
                                 alt="KTP" 
                                 class="w-full rounded-lg max-h-64 object-contain cursor-pointer border mx-auto"
                                 onerror="this.onerror=null; this.src='https://placehold.co/600x400?text=KTP+Tidak+Ditemukan';">
                            
                        @else
                            <p class="text-sm text-neutral-400 py-10">Tidak tersedia</p>
                        @endif
                    </div>
                    <div class="border rounded-lg p-4 text-center">
                        <h6 class="font-semibold mb-3">Foto Selfie</h6>
                        @if($user->profile->foto)
                            @php $fotoUrl = $wargaBaseUrl . '/storage/' . $user->profile->foto; @endphp
                            <img src="{{ $fotoUrl }}" 
                                 alt="Selfie" 
                                 class="w-full rounded-lg max-h-64 object-contain cursor-pointer border mx-auto"
                                 onerror="this.onerror=null; this.src='https://placehold.co/600x400?text=Selfie+Tidak+Ditemukan';">
                            
                        @else
                            <p class="text-sm text-neutral-400 py-10">Tidak tersedia</p>
                        @endif
                    </div>
                </div>

                {{-- Lokasi GPS --}}
                @if($user->profile->latitude && $user->profile->longitude)
                <div class="border rounded-lg p-4 mb-6">
                    <h6 class="font-semibold mb-2">Lokasi Pendaftar</h6>
                    <p class="text-sm mb-3">Koordinat: <strong>{{ $user->profile->latitude }}, {{ $user->profile->longitude }}</strong></p>
                    <a href="https://maps.google.com/?q={{ $user->profile->latitude }},{{ $user->profile->longitude }}" 
                       target="_blank" 
                       class="px-4 py-2 bg-primary-600 text-white rounded-lg inline-flex items-center gap-2 hover:bg-primary-700 transition text-sm">
                        <iconify-icon icon="mdi:map-marker"></iconify-icon> Buka di Google Maps
                    </a>
                </div>
                @endif

                {{-- Tombol Aksi --}}
                <div class="flex items-center justify-end gap-3 border-t pt-4 mt-4">
                    <a href="{{ route('verifikasi') }}" class="px-6 py-2.5 rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-50 transition">
                        Kembali
                    </a>
                    
                    <form method="POST" action="{{ route('verifikasi.tolak', $user->id) }}">
                        @csrf
                        <button type="submit" class="px-6 py-2.5 rounded-lg bg-danger-600 text-white hover:bg-danger-700 transition flex items-center gap-2" onclick="return confirm('Yakin ingin MENOLAK pendaftaran ini?')">
                            <iconify-icon icon="iconamoon:close-circle-1-light"></iconify-icon> Tolak
                        </button>
                    </form>
                    
                    <form method="POST" action="{{ route('verifikasi.approve', $user->id) }}">
                        @csrf
                        <button type="submit" class="px-6 py-2.5 rounded-lg bg-success-600 text-white hover:bg-success-700 transition flex items-center gap-2" onclick="return confirm('Yakin ingin MENYETUJUI pendaftaran ini?')">
                            <iconify-icon icon="iconamoon:check-circle-1-light"></iconify-icon> Setujui
                        </button>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection