@extends('layouts.branch')

@section('title', "ABHA Enrollment")
@section('header', "ABHA Enrollment")

@section('content')
<div class="space-y-6" x-data="abhaEnrollment()">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Registration Directory', 'url' => route('branch.patients.index')],
            ['name' => "ABHA Management", 'url' => '#'],
            ['name' => "New Enrollment", 'url' => '#']
        ]
    ])

    <div class="max-w-4xl mx-auto">
        <!-- Step Indicator -->
        <div class="flex items-center justify-between mb-12 px-10">
            <template x-for="(stepLabel, index) in steps" :key="index">
                <div class="flex items-center flex-1 last:flex-none">
                    <div class="relative flex flex-col items-center">
                        <div :class="currentStep > index + 1 ? 'bg-emerald-500 text-white' : (currentStep === index + 1 ? 'bg-indigo-600 text-white shadow-xl shadow-indigo-200' : 'bg-slate-100 text-slate-400')"
                             class="h-12 w-12 rounded-2xl flex items-center justify-center font-black transition-all duration-500 z-10">
                            <template x-if="currentStep > index + 1">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                            </template>
                            <template x-if="currentStep <= index + 1">
                                <span x-text="index + 1"></span>
                            </template>
                        </div>
                        <span class="absolute top-16 text-[9px] font-black uppercase tracking-widest text-center w-24" 
                              :class="currentStep === index + 1 ? 'text-indigo-600' : 'text-slate-400'"
                              x-text="stepLabel"></span>
                    </div>
                    <div x-show="index < steps.length - 1" 
                         class="flex-1 h-1 mx-4 rounded-full transition-all duration-500"
                         :class="currentStep > index + 1 ? 'bg-emerald-500' : 'bg-slate-100'"></div>
                </div>
            </template>
        </div>

        <!-- Main Enrollment Card -->
        <div class="bg-white rounded-[50px] shadow-2xl shadow-indigo-100 border border-slate-100 italic relative overflow-hidden p-12 min-h-[500px] flex flex-col">
            
            <!-- Step 1: Aadhaar Input -->
            <div x-show="currentStep === 1" x-transition class="space-y-10 flex-1 flex flex-col justify-center">
                <div class="text-center space-y-4">
                    <div class="h-20 w-20 bg-indigo-50 text-indigo-600 rounded-[30px] flex items-center justify-center mx-auto mb-6">
                        <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/></svg>
                    </div>
                    <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">Aadhaar Verification</h2>
                    <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase max-w-sm mx-auto leading-relaxed">Enter the patient's 12-digit Aadhaar number to initiate the secure ABHA creation process.</p>
                </div>

                <div class="max-w-md mx-auto w-full space-y-8">
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-indigo-500 rounded-full"></span>
                            Aadhaar Number
                        </label>
                        <input type="text" x-model="aadhaar" maxlength="12" placeholder="XXXX XXXX XXXX"
                               class="w-full px-8 py-6 bg-slate-50 border-2 border-slate-50 rounded-[2rem] text-2xl font-black tracking-[0.3em] text-center focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>

                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-indigo-400 rounded-full"></span>
                            Linked Mobile Number
                        </label>
                        <input type="text" x-model="mobile" maxlength="10" placeholder="9876543210"
                               class="w-full px-8 py-6 bg-slate-50 border-2 border-slate-50 rounded-[2rem] text-2xl font-black tracking-[0.3em] text-center focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>

                    <button @click="requestOtp()" :disabled="loading || aadhaar.length !== 12 || mobile.length !== 10"
                            class="w-full py-6 bg-slate-900 text-white rounded-[2rem] text-sm font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-xl shadow-slate-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 group">
                        <span x-show="!loading">Send Verification OTP</span>
                        <span x-show="loading">Requesting Gateway...</span>
                        <svg x-show="!loading" class="h-5 w-5 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                    </button>
                </div>
            </div>

            <!-- Step 2: OTP Verification -->
            <div x-show="currentStep === 2" x-transition class="space-y-10 flex-1 flex flex-col justify-center">
                <div class="text-center space-y-4">
                    <div class="h-20 w-20 bg-amber-50 text-amber-600 rounded-[30px] flex items-center justify-center mx-auto mb-6">
                        <svg class="h-10 w-10" 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>
                    </div>
                    <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">Security OTP</h2>
                    <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase max-w-sm mx-auto leading-relaxed">Enter the 6-digit code sent to the patient's Aadhaar-linked mobile device.</p>
                </div>

                <div class="max-w-md mx-auto w-full space-y-8">
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-amber-500 rounded-full"></span>
                            Verification Code
                        </label>
                        <input type="text" x-model="otp" maxlength="6" placeholder="000000"
                               class="w-full px-8 py-6 bg-slate-50 border-2 border-slate-50 rounded-[2rem] text-4xl font-black tracking-[0.5em] text-center focus:ring-4 focus:ring-amber-50 focus:border-amber-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>

                    <div class="flex flex-col gap-4">
                        <button @click="verifyOtp()" :disabled="loading || otp.length !== 6"
                                class="w-full py-6 bg-amber-600 text-white rounded-[2rem] text-sm font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-xl shadow-amber-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3">
                            <span x-show="!loading">Verify Identity</span>
                            <span x-show="loading">Authenticating...</span>
                        </button>
                        <button @click="currentStep = 1" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-rose-600 transition-colors">Entered wrong Aadhaar? Back</button>
                    </div>
                </div>
            </div>

            <!-- Step 3: Profile & ABHA Address -->
            <div x-show="currentStep === 3" x-transition class="space-y-8 flex-1">
                <div class="flex items-center gap-8 mb-10">
                    <div class="h-24 w-24 bg-slate-100 rounded-[35px] overflow-hidden border-4 border-white shadow-xl">
                        <template x-if="profile.photo">
                            <img :src="'data:image/jpeg;base64,' + profile.photo" class="h-full w-full object-cover">
                        </template>
                        <template x-if="!profile.photo">
                            <div class="h-full w-full flex items-center justify-center text-slate-300">
                                <svg class="h-12 w-12" 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>
                            </div>
                        </template>
                    </div>
                    <div>
                        <h2 class="text-3xl font-black text-slate-800 uppercase tracking-tighter leading-none" x-text="profile.name"></h2>
                        <div class="flex items-center gap-4 mt-3">
                            <span class="px-4 py-1.5 bg-indigo-50 text-indigo-600 rounded-xl text-[10px] font-black uppercase tracking-widest" x-text="profile.gender"></span>
                            <span class="px-4 py-1.5 bg-slate-50 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest" x-text="profile.dob"></span>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-6">
                        <div class="space-y-3">
                            <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2">Select ABHA Address</label>
                            <div class="space-y-3">
                                <template x-for="suggestion in suggestions" :key="suggestion">
                                    <button @click="selectedAbha = suggestion" 
                                            :class="selectedAbha === suggestion ? 'bg-indigo-600 text-white border-indigo-600 shadow-xl shadow-indigo-100' : 'bg-slate-50 text-slate-600 border-slate-50 hover:border-indigo-600'"
                                            class="w-full px-6 py-4 rounded-2xl text-sm font-black text-left transition-all border-2 italic">
                                        <span x-text="suggestion"></span>
                                    </button>
                                </template>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2">Custom ABHA Address</label>
                            <input type="text" x-model="selectedAbha" placeholder="yourname@abdm"
                                   class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                        </div>
                    </div>

                    <div class="bg-slate-900 rounded-[40px] p-8 text-white relative overflow-hidden flex flex-col justify-between">
                        <div class="relative z-10">
                            <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] mb-8">Confirm Enrollment</h4>
                            <div class="space-y-6">
                                <div class="pb-4 border-b border-white/10">
                                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest mb-1">Target Address</p>
                                    <p class="text-xl font-black text-white italic" x-text="selectedAbha || 'Not Selected'"></p>
                                </div>
                                <div>
                                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest mb-1">Facility Name</p>
                                    <p class="text-xs font-bold text-slate-300 uppercase tracking-widest">{{ auth()->guard('branch')->user()->name }}</p>
                                </div>
                            </div>
                        </div>

                        <button @click="createAbha()" :disabled="loading || !selectedAbha"
                                class="relative z-10 w-full py-5 bg-indigo-600 text-white rounded-3xl font-black uppercase tracking-widest text-xs hover:bg-white hover:text-indigo-600 transition-all shadow-2xl shadow-indigo-900 disabled:opacity-50 mt-10">
                            <span x-show="!loading">Finalize ABHA Creation</span>
                            <span x-show="loading">Communicating with ABDM...</span>
                        </button>

                        <div class="absolute -bottom-10 -right-10 h-32 w-32 bg-indigo-500/10 rounded-full blur-2xl"></div>
                    </div>
                </div>
            </div>

            <!-- Step 4: Success / Card -->
            <div x-show="currentStep === 4" x-transition class="space-y-10 flex-1 flex flex-col justify-center items-center text-center">
                <div class="h-24 w-24 bg-emerald-50 text-emerald-500 rounded-[40px] flex items-center justify-center mb-6 shadow-2xl shadow-emerald-50">
                    <svg class="h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                </div>
                <h2 class="text-5xl font-black text-slate-800 tracking-tighter uppercase leading-none">ABHA Created!</h2>
                <div class="space-y-2">
                    <p class="text-xl font-black text-indigo-600 italic" x-text="selectedAbha"></p>
                    <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase">The patient's digital health identity is now active.</p>
                </div>

                <div class="flex gap-6 mt-10">
                    <button class="px-10 py-5 bg-slate-900 text-white rounded-[2rem] text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-xl shadow-slate-200 flex items-center gap-3">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                        Print ABHA Card
                    </button>
                    <a href="{{ route('branch.registrations.create') }}" class="px-10 py-5 border-2 border-slate-100 text-slate-500 rounded-[2rem] text-[10px] font-black uppercase tracking-widest hover:border-indigo-600 hover:text-indigo-600 transition-all">
                        New Registration
                    </a>
                </div>
            </div>

            <!-- Loading Overlay -->
            <div x-show="loading" class="absolute inset-0 bg-white/60 backdrop-blur-[2px] z-[60] flex items-center justify-center">
                <div class="flex flex-col items-center gap-6">
                    <div class="h-12 w-12 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
                    <p class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.3em] animate-pulse">Connecting to ABDM Gateway</p>
                </div>
            </div>
            
            <!-- Abstract backgrounds -->
            <div class="absolute -top-24 -left-24 h-64 w-64 bg-indigo-50/50 rounded-full blur-[80px] pointer-events-none"></div>
            <div class="absolute -bottom-24 -right-24 h-64 w-64 bg-amber-50/30 rounded-full blur-[80px] pointer-events-none"></div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function abhaEnrollment() {
    return {
        currentStep: 1,
        transactionId: null,
        steps: ['Verification', 'Authentication', 'Identification', 'Finalization'],
        loading: false,
        aadhaar: '',
        mobile: '',
        otp: '',
        suggestions: [],
        selectedAbha: '',
        profile: {
            name: '',
            gender: '',
            dob: '',
            photo: null
        },

        async requestOtp() {
            this.loading = true;
            try {
                const response = await fetch('{{ route('branch.abha.enroll.request-otp') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ 
                        aadhaar: this.aadhaar,
                        mobile: this.mobile
                    })
                });

                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('Server Error:', errorText);
                    try {
                        const errorJson = JSON.parse(errorText);
                        alert(errorJson.message || 'Error requesting OTP');
                    } catch (e) {
                        alert('Server Error (' + response.status + '). Please check logs.');
                    }
                    return;
                }

                const data = await response.json();
                this.transactionId = data.transactionId;
                this.currentStep = 2;
            } catch (e) {
                console.error('Fetch Error:', e);
                alert('Network error: ' + e.message);
            } finally {
                this.loading = false;
            }
        },

        async verifyOtp() {
            this.loading = true;
            try {
                const response = await fetch('{{ route('branch.abha.enroll.verify-otp') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ 
                        otp: this.otp,
                        transactionId: this.transactionId,
                        mobile: this.mobile
                    })
                });
                const data = await response.json();
                if (response.ok) {
                    this.transactionId = data.transactionId;
                    this.profile = data.profile;
                    this.suggestions = data.suggestions;
                    this.currentStep = 3;
                } else {
                    alert(data.message || 'OTP verification failed');
                }
            } catch (e) {
                console.error('Fetch Error:', e);
                alert('Network error: ' + e.message);
            } finally {
                this.loading = false;
            }
        },

        async createAbha() {
            this.loading = true;
            try {
                const response = await fetch('{{ route('branch.abha.enroll.create') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ 
                        abha_address: this.selectedAbha,
                        transactionId: this.transactionId
                    })
                });
                const data = await response.json();
                if (response.ok) {
                    this.currentStep = 4;
                } else {
                    alert(data.message || 'ABHA creation failed');
                }
            } catch (e) {
                console.error('Fetch Error:', e);
                alert('Network error: ' + e.message);
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>
@endpush
@endsection