@php
    $cardTypes = \App\Enums\CardType::cases();
    $deliveryMethods = \App\Enums\CardDeliveryMethod::cases();
@endphp

<section id="apply" class="bg-slate-50 py-16 dark:bg-surface lg:py-24">
    <div class="mx-auto max-w-3xl px-4 sm:px-6">
        <div class="reveal mx-auto mb-10 max-w-xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">Get
                Started</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 sm:text-4xl dark:text-white">
                Apply For <span class="text-primary dark:text-secondary">Card</span></h2>
            <p class="mt-3 text-slate-500 dark:text-slate-400">A few quick details and we'll get your card moving.</p>
        </div>

        <div x-data="cardApplication()"
            class="reveal-scale rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-panel">
            @if (session('card-application-status'))
                <div
                    class="rounded-t-2xl border-b border-emerald-200 bg-emerald-50 px-5 py-4 text-sm font-semibold text-emerald-700">
                    {{ session('card-application-status') }}</div>
            @endif
            @if ($errors->any())
                <div
                    class="rounded-t-2xl border-b border-red-200 bg-red-50 px-5 py-4 text-sm font-semibold text-red-700">
                    Please correct the highlighted fields and submit your application again.</div>
            @endif
            <form method="post" action="{{ route('card-applications.store') }}" class="space-y-6 p-5 sm:p-8">
                @csrf
                <div>
                    <label for="full_name"
                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">Full Name <span
                            class="text-red-600">*</span></label>
                    <input id="full_name" name="full_name" type="text" value="{{ old('full_name') }}" required
                        placeholder="Enter your full name"
                        class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white">
                    @error('full_name')
                        <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="gender"
                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">Gender <span
                                class="text-red-600">*</span></label>
                        <select id="gender" name="gender" required
                            class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white">
                            <option value="">Select Gender</option>
                            @foreach (\App\Enums\Gender::cases() as $gender)
                                <option value="{{ $gender->value }}" @selected(old('gender') === $gender->value)>{{ $gender->label() }}
                                </option>
                            @endforeach
                        </select>
                        @error('gender')
                            <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="mobile_number"
                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">Mobile Number
                            <span class="text-red-600">*</span></label>
                        <input id="mobile_number" name="mobile_number" type="tel" value="{{ old('mobile_number') }}"
                            required placeholder="9812345678"
                            class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white">
                        @error('mobile_number')
                            <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="sm:col-span-2">
                        <label for="email"
                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">Email <span
                                class="text-red-600">*</span></label>
                        <input id="email" name="email" type="email" value="{{ old('email') }}" required
                            placeholder="you@example.com"
                            class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white">
                        @error('email')
                            <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">Card Type <span
                            class="text-red-600">*</span></h3>
                    <div class="mt-3 grid gap-3 sm:grid-cols-2">
                        @foreach ($cardTypes as $type)
                            <label
                                :class="card === '{{ $type->value }}' ?
                                    'border-primary bg-primary/5 ring-2 ring-primary/15 dark:border-secondary dark:bg-secondary/10' :
                                    'border-slate-200 dark:border-white/10'"
                                class="flex cursor-pointer items-start justify-between gap-3 rounded-xl border p-4"><input
                                    x-model="card" name="card_type" value="{{ $type->value }}" type="radio"
                                    class="hidden"><span><span
                                        class="block font-semibold text-slate-900 dark:text-white">{{ $type->label() }}</span><span
                                        class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{{ $type->tagline() }}</span></span><span
                                    class="grid h-5 w-5 place-items-center rounded-full border"
                                    :class="card === '{{ $type->value }}' ? 'border-primary bg-primary text-white' :
                                        'border-slate-300'"><i
                                        class="fa-solid fa-check text-[10px]"
                                        x-show="card === '{{ $type->value }}'"></i></span></label>
                        @endforeach
                    </div>
                    @error('card_type')
                        <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">How would you like to receive
                        your card? <span class="text-red-600">*</span></h3>
                    <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                        @foreach ($deliveryMethods as $method)
                            <label
                                :class="delivery === '{{ $method->value }}' ?
                                    'border-primary bg-primary/5 dark:border-secondary dark:bg-secondary/10' :
                                    'border-slate-200 dark:border-white/10'"
                                class="cursor-pointer rounded-xl border p-4 transition hover:border-primary/60 dark:hover:border-secondary/60"><input
                                    x-model="delivery" name="delivery_method" value="{{ $method->value }}"
                                    type="radio" class="hidden">
                                <div class="flex items-start justify-between gap-2"><i
                                        class="fa-solid {{ match ($method) {\App\Enums\CardDeliveryMethod::CollectFromOffice => 'fa-building',\App\Enums\CardDeliveryMethod::DeliverToMe => 'fa-truck-fast',\App\Enums\CardDeliveryMethod::CollectionCenter => 'fa-map-location-dot'} }} mt-0.5 text-primary dark:text-secondary"
                                        aria-hidden="true"></i><span
                                        class="grid h-4 w-4 place-items-center rounded-full border transition"
                                        :class="delivery === '{{ $method->value }}' ?
                                            'border-primary bg-primary text-white dark:border-secondary dark:bg-secondary' :
                                            'border-slate-300 dark:border-white/20'"><i
                                            class="fa-solid fa-check text-[8px]"
                                            x-show="delivery === '{{ $method->value }}'" aria-hidden="true"></i></span>
                                </div>
                                <div class="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
                                    {{ $method->label() }}</div>
                                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                                    {{ match ($method) {\App\Enums\CardDeliveryMethod::CollectFromOffice => 'Pick up directly from our office.',\App\Enums\CardDeliveryMethod::DeliverToMe => 'Deliver the card to my address.',\App\Enums\CardDeliveryMethod::CollectionCenter => 'Choose a partner collection center.'} }}
                                </p>
                            </label>
                        @endforeach
                    </div>
                    @error('delivery_method')
                        <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div x-cloak x-show="delivery === 'collect_from_office'"
                    class="rounded-xl border border-primary/15 bg-primary/5 p-5 dark:border-secondary/20 dark:bg-secondary/10">
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white">Office Pickup Details</h3>
                    <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Fintech International Pvt. Ltd.,
                        Jwagal-10, Lalitpur<br>Sunday – Friday, 9:30 AM – 5:30 PM</p>
                </div>

                <div x-cloak x-show="delivery === 'deliver_to_me'"><label for="delivery_address"
                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">Delivery Address
                        <span class="text-red-600">*</span></label>
                    <textarea id="delivery_address" name="delivery_address" rows="3" :required="delivery === 'deliver_to_me'"
                        placeholder="Enter your complete delivery address"
                        class="w-full resize-none rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white">{{ old('delivery_address') }}</textarea>
                    @error('delivery_address')
                        <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div x-cloak x-show="delivery === 'collection_center'" x-data="{ open: false }"
                    @click.outside="open = false">
                    <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">Select Collection Center <span
                            class="text-red-600">*</span></h3>
                    <div class="relative mt-3">
                        <input type="hidden" name="agent_id" :value="selectedAgent">
                        <button type="button" @click="open = !open"
                            class="flex w-full items-center justify-between gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-left text-sm shadow-sm focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink">
                            <span :class="selectedAgent ? 'text-slate-900 dark:text-white' : 'text-slate-400'"
                                x-text="selectedAgentLabel || 'Search and select a collection center'"></span>
                            <i class="fa-solid fa-chevron-down text-xs text-slate-400"
                                :class="open ? 'rotate-180' : ''" aria-hidden="true"></i>
                        </button>
                        <div x-show="open" x-cloak
                            class="absolute z-20 mt-2 w-full rounded-xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-ink">
                            <div class="relative mb-2">
                                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400"
                                    aria-hidden="true"></i>
                                <input type="text" x-model="agentQuery" @click.stop
                                    placeholder="Search by name or address"
                                    class="w-full rounded-lg border border-slate-200 bg-slate-50 py-2 pl-8 pr-3 text-sm text-slate-900 focus:border-primary focus:outline-none dark:border-white/10 dark:bg-panel dark:text-white">
                            </div>
                            <ul class="max-h-56 space-y-0.5 overflow-y-auto">
                                <template x-for="agent in filteredAgents" :key="agent.id">
                                    <li @click="selectedAgent = String(agent.id); selectedAgentLabel = agent.name; open = false; agentQuery = ''"
                                        :class="selectedAgent === String(agent.id) ?
                                            'bg-primary/5 text-primary dark:bg-secondary/10 dark:text-secondary' :
                                            'text-slate-700 dark:text-slate-200'"
                                        class="cursor-pointer rounded-lg px-3 py-2 text-sm font-semibold transition hover:bg-primary/5 dark:hover:bg-secondary/10">
                                        <span x-text="agent.name"></span>
                                        <span class="block text-xs font-normal text-slate-400 dark:text-slate-500"
                                            x-text="agent.address"></span>
                                    </li>
                                </template>
                                <li x-show="filteredAgents.length === 0" class="px-3 py-2 text-sm text-slate-400">No
                                    matches found</li>
                            </ul>
                        </div>
                    </div>
                    @error('agent_id')
                        <p class="mt-1.5 text-xs font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="pt-2"><button type="submit"
                        class="w-full rounded-xl bg-accent py-3.5 text-center font-semibold text-ink shadow-lg transition hover:scale-[1.02]">Apply
                        For Card <i class="fa-solid fa-arrow-right ml-1.5 text-sm"></i></button></div>
            </form>
        </div>
    </div>
</section>

<script>
    function cardApplication() {
        return {
            card: @js(old('card_type', \App\Enums\CardType::NonPersonalized->value)),
            delivery: @js(old('delivery_method', \App\Enums\CardDeliveryMethod::DeliverToMe->value)),
            agents: @js($agents->map(fn($agent) => ['id' => $agent->id, 'name' => $agent->company_name, 'address' => $agent->address?->name])->values()),
            selectedAgent: @js(old('agent_id')),
            selectedAgentLabel: '',
            agentQuery: '',
            get filteredAgents() {
                const q = this.agentQuery.trim().toLowerCase();
                if (!q) return this.agents;
                return this.agents.filter((agent) => agent.name.toLowerCase().includes(q) || (agent.address ?? '')
                    .toLowerCase().includes(q));
            },
            init() {
                if (this.selectedAgent) {
                    const match = this.agents.find((agent) => String(agent.id) === String(this.selectedAgent));
                    if (match) this.selectedAgentLabel = match.name;
                }
            },
        }
    }
</script>