@extends('layouts.app')

@section('title', 'Verifikasi e-KTP')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-slate-800 mb-2">Verifikasi e-KTP</h1>
        <p class="text-slate-500">Satu warga, satu suara — pastikan aspirasi Anda dihitung sebagai suara warga yang sah</p>
    </div>

    @if($user->status_kyc === 'verified')
        {{-- Sudah terverifikasi --}}
        <div class="bg-white rounded-2xl shadow-sm border border-emerald-200 p-8 text-center">
            <div class="w-16 h-16 rounded-full bg-emerald-50 mx-auto mb-4 flex items-center justify-center">
                <svg class="w-8 h-8 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
            </div>
            <h2 class="text-xl font-bold text-slate-800 mb-1">Akun Anda Terverifikasi</h2>
            <p class="text-sm text-slate-500 mb-4">
                NIK terdaftar: <strong class="text-slate-700">{{ substr($user->nik, 0, 6) }}&bull;&bull;&bull;&bull;&bull;&bull;{{ substr($user->nik, -4) }}</strong>
            </p>
            <a href="{{ route('profile') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-white bg-red-600 hover:bg-red-700 shadow-md shadow-red-500/20 transition-all">
                Kembali ke Profil
            </a>
        </div>
    @else
        {{-- Trust badges --}}
        <div class="grid grid-cols-3 gap-3 mb-6">
            <div class="bg-white rounded-xl border border-slate-100 p-4 text-center">
                <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                <p class="text-xs font-semibold text-slate-700">Data Terenkripsi</p>
            </div>
            <div class="bg-white rounded-xl border border-slate-100 p-4 text-center">
                <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                <p class="text-xs font-semibold text-slate-700">Foto Langsung Dihapus</p>
            </div>
            <div class="bg-white rounded-xl border border-slate-100 p-4 text-center">
                <svg class="w-6 h-6 text-red-500 mx-auto mb-2" 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>
                <p class="text-xs font-semibold text-slate-700">Identitas Dirahasiakan</p>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
            @if($errors->any())
                <div class="mb-6 rounded-xl p-4 border border-red-200 bg-red-50">
                    <div class="flex items-center gap-2 text-red-700 font-medium text-sm mb-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                        Verifikasi gagal:
                    </div>
                    <ul class="list-disc list-inside text-sm text-red-600 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('verifikasi-ktp') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="space-y-6">
                    {{-- NIK --}}
                    <div>
                        <label for="nik" class="block text-sm font-semibold text-slate-700 mb-2">NIK (Nomor Induk Kependudukan) <span class="text-red-500">*</span></label>
                        <input type="text" name="nik" id="nik" inputmode="numeric" maxlength="16" placeholder="16 digit sesuai e-KTP" required
                               value="{{ old('nik') }}"
                               class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all tracking-widest @error('nik') border-red-300 @enderror">
                        @error('nik')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Foto e-KTP --}}
                    <div>
                        <label for="foto_ktp" class="block text-sm font-semibold text-slate-700 mb-2">Foto e-KTP <span class="text-red-500">*</span></label>
                        <input type="file" name="foto_ktp" id="foto_ktp" accept=".jpg,.jpeg,.png" required
                               class="block w-full text-sm text-slate-500 file:mr-4 file:py-3 file:px-6 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-600 hover:file:bg-red-100 file:cursor-pointer file:transition-all rounded-xl border border-slate-200 cursor-pointer">
                        <p class="mt-2 text-xs text-slate-400">Pastikan seluruh bagian KTP terlihat jelas. Maks 2MB (JPG/PNG).</p>
                        @error('foto_ktp')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Foto Selfie --}}
                    <div>
                        <label for="foto_selfie" class="block text-sm font-semibold text-slate-700 mb-2">Foto Selfie <span class="text-red-500">*</span></label>
                        <input type="file" name="foto_selfie" id="foto_selfie" accept=".jpg,.jpeg,.png" required
                               class="block w-full text-sm text-slate-500 file:mr-4 file:py-3 file:px-6 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-600 hover:file:bg-red-100 file:cursor-pointer file:transition-all rounded-xl border border-slate-200 cursor-pointer">
                        <p class="mt-2 text-xs text-slate-400">Wajah menghadap kamera, tanpa masker/kacamata gelap. Maks 2MB (JPG/PNG).</p>
                        @error('foto_selfie')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Jaminan privasi --}}
                    <div class="flex gap-3 p-4 rounded-xl bg-slate-50 border border-slate-100">
                        <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        <p class="text-xs text-slate-500 leading-relaxed">
                            Foto e-KTP dan selfie Anda <strong>hanya diproses saat verifikasi dan langsung dihapus</strong> — sistem hanya menyimpan status hasil verifikasi (prinsip <em>data minimization</em> sesuai UU PDP). Validasi dilakukan melalui <strong>Mock API Dukcapil</strong> (sistem tiruan data kependudukan untuk prototipe).
                        </p>
                    </div>

                    <button type="submit" class="w-full px-8 py-3.5 rounded-xl text-sm font-semibold text-white shadow-lg shadow-red-500/20 hover:bg-red-700 bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 transition-all">
                        <span class="flex items-center justify-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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            Verifikasi Sekarang
                        </span>
                    </button>
                </div>
            </form>
        </div>
    @endif
</div>
@endsection