<x-layouts.auth title="Identity Verification | {{ config('app.name') }}">
<header class="bg-[#f9f9f9] flex justify-between items-center w-full px-8 py-4 max-w-full sticky top-0 z-50">
    <div class="flex items-center gap-4">
        <span class="text-2xl font-serif italic text-neutral-900">{{ config('app.name') }}</span>
    </div>
    <nav class="hidden md:flex items-center gap-8">
        <span class="text-[#af0017] font-bold border-b-2 border-[#765a25]">Security</span>
    </nav>
    <div class="flex items-center gap-4">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="material-symbols-outlined text-on-surface-variant cursor-pointer">logout</button>
        </form>
    </div>
</header>

@php $hasDocuments = auth()->user()->government_id_path !== null; @endphp

<main class="max-w-6xl mx-auto px-6 py-12 md:py-20">
    <div class="mb-16 max-w-2xl">
        <h1 class="text-5xl font-serif text-on-surface mb-4 leading-tight">Identity Verification</h1>
        <p class="text-on-surface-variant text-lg leading-relaxed">
            @if($hasDocuments)
                Your documents have been submitted and are under review by our underwriting team.
            @else
                Your account is pending verification. Please upload the required documents to activate your account.
            @endif
        </p>
    </div>

    @if(session('success'))
        <div class="mb-8 bg-secondary-container text-on-secondary-container p-4 rounded-sm text-sm max-w-4xl flex items-center gap-3">
            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">check_circle</span>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-8 bg-error-container text-on-error-container p-4 rounded-sm text-sm max-w-4xl">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div class="lg:col-span-8 space-y-12">
            @if($hasDocuments)
                {{-- Documents submitted — under review --}}
                <div class="bg-surface-container-lowest p-12 text-center space-y-8">
                    <div class="w-24 h-24 mx-auto rounded-full bg-secondary-container flex items-center justify-center">
                        <span class="material-symbols-outlined text-5xl text-secondary" style="font-variation-settings: 'FILL' 1;">hourglass_top</span>
                    </div>
                    <div>
                        <h2 class="text-3xl font-serif text-on-surface mb-3">Final Underwriting</h2>
                        <p class="text-on-surface-variant text-lg leading-relaxed max-w-md mx-auto">
                            Your identity documents are currently being reviewed by our compliance team. This process typically takes 1–2 business days.
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-lg mx-auto text-left">
                        <div class="flex items-center gap-4 bg-surface-container-low p-5 rounded-lg">
                            <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">badge</span>
                            <div>
                                <p class="text-sm font-bold text-on-surface">Government ID</p>
                                <p class="text-xs text-secondary font-medium">Submitted</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4 bg-surface-container-low p-5 rounded-lg">
                            <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">face</span>
                            <div>
                                <p class="text-sm font-bold text-on-surface">Selfie Photo</p>
                                <p class="text-xs text-secondary font-medium">Submitted</p>
                            </div>
                        </div>
                    </div>

                    <p class="text-xs text-on-surface-variant">You will be notified once your account has been approved.</p>
                </div>
            @else
                {{-- Upload form --}}
                <form method="POST" action="{{ route('pending.upload') }}" enctype="multipart/form-data">
                    @csrf
                    <!-- Step 1: Government ID -->
                    <section class="mb-12">
                        <div class="flex items-center gap-3 mb-6">
                            <span class="w-8 h-8 rounded-full bg-secondary text-on-secondary flex items-center justify-center text-sm font-bold">01</span>
                            <h2 class="text-2xl font-serif">Government-Issued Identification</h2>
                        </div>
                        <div class="mt-8 border-2 border-dashed border-outline-variant rounded-lg p-12 flex flex-col items-center justify-center bg-surface-container-low text-center">
                            <span class="material-symbols-outlined text-5xl text-outline mb-4">upload_file</span>
                            <p class="text-lg font-medium text-on-surface mb-1">Upload your ID document</p>
                            <p class="text-sm text-on-surface-variant mb-6">PDF, JPEG, or PNG (Max 5MB)</p>
                            <input type="file" name="government_id" accept=".pdf,.jpg,.jpeg,.png" class="block text-sm text-on-surface-variant file:mr-4 file:py-3 file:px-8 file:border-0 file:text-sm file:font-semibold file:bg-white file:text-on-surface file:border file:border-outline file:uppercase file:tracking-widest hover:file:bg-surface-container file:cursor-pointer"/>
                        </div>
                    </section>

                    <!-- Step 2: Selfie -->
                    <section class="mb-12">
                        <div class="flex items-center gap-3 mb-6">
                            <span class="w-8 h-8 rounded-full bg-secondary text-on-secondary flex items-center justify-center text-sm font-bold">02</span>
                            <h2 class="text-2xl font-serif">Selfie Verification</h2>
                        </div>
                        <div class="bg-surface-container-lowest p-10 flex flex-col md:flex-row items-center gap-10">
                            <div class="relative w-48 h-48 rounded-full overflow-hidden bg-surface-container-highest border-4 border-white shadow-xl flex-shrink-0 flex items-center justify-center">
                                <span class="material-symbols-outlined text-4xl text-outline">face</span>
                            </div>
                            <div class="flex-1 text-center md:text-left">
                                <h3 class="text-xl font-serif mb-3">Upload Selfie Photo</h3>
                                <p class="text-on-surface-variant mb-6 leading-relaxed">A clear photo of your face for identity matching.</p>
                                <input type="file" name="selfie" accept=".jpg,.jpeg,.png" class="block text-sm text-on-surface-variant file:mr-4 file:py-3 file:px-8 file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-on-primary file:uppercase file:tracking-widest hover:file:opacity-90 file:cursor-pointer"/>
                            </div>
                        </div>
                    </section>

                    <div class="pt-8 border-t border-outline-variant flex justify-between items-center">
                        <span></span>
                        <button type="submit" class="px-12 py-4 bg-secondary text-on-secondary font-bold uppercase tracking-widest text-xs hover:opacity-90 transition-all shadow-lg">Submit for Review</button>
                    </div>
                </form>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-4 space-y-8">
            <div class="bg-surface-container-low p-8 rounded-lg">
                <h3 class="text-lg font-serif mb-6 flex items-center justify-between">
                    Application Status
                    <span class="bg-secondary-container text-on-secondary-container text-[10px] px-3 py-1 font-bold uppercase tracking-wider rounded-full">
                        {{ auth()->user()->status->value }}
                    </span>
                </h3>
                <div class="space-y-6">
                    {{-- Step 1: Account Creation — always completed --}}
                    <div class="flex gap-4">
                        <div class="flex flex-col items-center">
                            <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                            <div class="w-[1px] h-full bg-outline-variant mt-2"></div>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-on-surface">Account Creation</p>
                            <p class="text-xs text-on-surface-variant mt-1">Completed on {{ auth()->user()->created_at->format('M d') }}</p>
                        </div>
                    </div>

                    {{-- Step 2: Identity Documentation --}}
                    <div class="flex gap-4">
                        <div class="flex flex-col items-center">
                            @if($hasDocuments)
                                <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                            @else
                                <span class="material-symbols-outlined text-secondary">radio_button_checked</span>
                            @endif
                            <div class="w-[1px] h-full bg-outline-variant mt-2"></div>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-on-surface">Identity Documentation</p>
                            @if($hasDocuments)
                                <p class="text-xs text-primary mt-1 font-medium">Completed</p>
                            @else
                                <p class="text-xs text-secondary mt-1 font-medium">In Progress</p>
                            @endif
                        </div>
                    </div>

                    {{-- Step 3: Final Underwriting --}}
                    <div class="flex gap-4 {{ $hasDocuments ? '' : 'opacity-50' }}">
                        <div class="flex flex-col items-center">
                            @if($hasDocuments)
                                <span class="material-symbols-outlined text-secondary animate-pulse">hourglass_top</span>
                            @else
                                <span class="material-symbols-outlined text-outline">circle</span>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-bold text-on-surface">Final Underwriting</p>
                            @if($hasDocuments)
                                <p class="text-xs text-secondary mt-1 font-medium">Pending Review</p>
                            @else
                                <p class="text-xs text-on-surface-variant mt-1">Awaiting Documents</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-secondary-container/30 p-8 relative overflow-hidden">
                <div class="relative z-10">
                    <h3 class="text-xl font-serif text-secondary mb-3">Why we verify</h3>
                    <p class="text-sm text-on-secondary-container leading-relaxed mb-6 italic">
                        "Your security is our highest priority. Every verification step protects your financial future."
                    </p>
                    <p class="text-xs text-on-surface-variant leading-relaxed">
                        Your data is encrypted using military-grade AES-256 protocols and stored in secure vaults.
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>
</x-layouts.auth>
