@extends('front.layouts.app')

@section('title', 'Astrologer Registration - Astrotalk')

@push('styles')
    <style>
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
@endpush

@section('content')
    <div class="py-12 px-4 px-6 md:py-20">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-10">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-500/10 rounded-3xl mb-6">
                    <i data-lucide="sparkles" class="text-yellow-500 w-10 h-10"></i>
                </div>
                <h1 class="text-3xl md:text-4xl font-black text-white mb-4">Astrologer Registration</h1>
                <p class="text-slate-400 max-w-lg mx-auto">Join our community of elite astrologers and guide people through
                    their cosmic journey.</p>
            </div>

            <div
                class="bg-white/5 backdrop-blur-xl border border-white/5 rounded-[3rem] p-8 md:p-12 shadow-2xl relative overflow-hidden">
                <form action="{{ route('astrologer.register.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Profile Pic Section -->
                    <div class="flex flex-col items-center mb-12" x-data="{ photoPreview: null }">
                        <div class="relative w-32 h-32 rounded-3xl overflow-hidden bg-slate-900 border-2 border-white/10 shadow-lg mb-6 cursor-pointer group"
                            onclick="document.getElementById('profile_pic').click()">
                            <img id="preview" src="https://ui-avatars.com/api/?name=Auth&background=1e293b&color=94a3b8"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-yellow-500/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity backdrop-blur-sm">
                                <i data-lucide="camera" class="text-white w-8 h-8"></i>
                            </div>
                        </div>
                        <input type="file" name="profile_pic" id="profile_pic" class="hidden" accept="image/*"
                            onchange="previewImage(this)">

                        <div class="text-center">
                            <h3 class="text-white font-bold mb-1">Profile Photo</h3>
                            <p class="text-[11px] text-slate-500 max-w-xs mx-auto">Upload a clear professional photo (JPG,
                                PNG, max 5MB). <a href="#" class="text-yellow-500 hover:underline">Guidelines</a></p>
                        </div>
                        @error('profile_pic') <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Name -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Full
                                Name</label>
                            <input type="text" name="name" value="{{ old('name') }}" placeholder="e.g. John Doe"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all"
                                required>
                            @error('name') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>

                        <!-- DOB -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Date of
                                Birth</label>
                            <input type="date" name="dob" value="{{ old('dob') }}"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all custom-calendar-icon"
                                required>
                            @error('dob') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>

                        <!-- Gender -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Gender</label>
                            <div class="flex items-center gap-4 py-1">
                                @foreach(['Male', 'Female', 'Other'] as $gender)
                                    <label class="flex-1 cursor-pointer group">
                                        <input type="radio" name="gender" value="{{ $gender }}" class="hidden peer" {{ old('gender') == $gender ? 'checked' : '' }} required>
                                        <div
                                            class="text-center py-3.5 rounded-2xl bg-slate-900/50 border border-white/5 text-slate-400 font-bold text-sm transition-all peer-checked:bg-yellow-500 peer-checked:text-slate-900 peer-checked:border-yellow-500 group-hover:border-white/20">
                                            {{ $gender }}
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                            @error('gender') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>

                        <!-- Languages -->
                        <div class="space-y-2">
                            <label
                                class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Languages</label>
                            <div x-data="multiSelect({
                                                items: {{ $languages->map(fn($l) => ['id' => $l->id, 'name' => $l->name])->values()->toJson() }},
                                                selected: {{ json_encode(old('languages', [])) }},
                                                placeholder: 'Select Languages'
                                            })" class="relative group" @click.outside="open = false">

                                <select name="languages[]" multiple class="hidden">
                                    <template x-for="id in selected">
                                        <option :value="id" selected></option>
                                    </template>
                                </select>

                                <!-- Trigger -->
                                <div @click="open = !open"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[60px] flex flex-wrap gap-2 items-center justify-between">

                                    <div class="flex flex-wrap gap-2 items-center flex-1">
                                        <template x-if="selected.length === 0">
                                            <span class="text-slate-500" x-text="placeholder"></span>
                                        </template>

                                        <template x-for="item in selectedOptions" :key="item.id">
                                            <span
                                                class="bg-yellow-500 text-slate-900 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                                                <span x-text="item.name"></span>
                                                <button type="button" @click.stop="toggle(item.id)"
                                                    class="hover:text-red-800 transition-colors">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M18 6 6 18" />
                                                        <path d="m6 6 12 12" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </template>
                                    </div>

                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                        :class="open ? 'rotate-180' : ''">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </div>

                                <!-- Dropdown -->
                                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 translate-y-2"
                                    class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-2xl shadow-xl overflow-hidden backdrop-blur-xl"
                                    x-cloak>

                                    <div class="p-3 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                        <div class="relative">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                                <circle cx="11" cy="11" r="8" />
                                                <path d="m21 21-4.3-4.3" />
                                            </svg>
                                            <input type="text" x-model="search" placeholder="Search languages..."
                                                class="w-full bg-slate-800 rounded-xl pl-9 pr-4 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                        </div>
                                    </div>

                                    <div class="max-h-60 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                                        <template x-for="item in filteredOptions" :key="item.id">
                                            <div @click="toggle(item.id)"
                                                class="flex items-center gap-3 px-3 py-2 rounded-xl cursor-pointer transition-colors group/item"
                                                :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">

                                                <div class="w-5 h-5 rounded-md border flex items-center justify-center transition-colors"
                                                    :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                    <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                        width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="3" stroke-linecap="round"
                                                        stroke-linejoin="round" class="text-slate-900">
                                                        <polyline points="20 6 9 17 4 12" />
                                                    </svg>
                                                </div>

                                                <span x-text="item.name" class="font-medium text-sm"></span>
                                            </div>
                                        </template>
                                        <div x-show="filteredOptions.length === 0"
                                            class="p-4 text-center text-slate-500 text-sm">
                                            No languages found
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @error('languages') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Primary Expertise (Service Categories) -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Primary
                                Expertise</label>
                            <div x-data="multiSelect({
                                                items: {{ $scategories->map(fn($s) => ['id' => $s->id, 'name' => $s->name])->values()->toJson() }},
                                                selected: {{ json_encode(old('primary_skills', [])) }},
                                                placeholder: 'Select Primary Expertise'
                                            })" class="relative group" @click.outside="open = false">

                                <select name="primary_skills[]" multiple class="hidden">
                                    <template x-for="id in selected">
                                        <option :value="id" selected></option>
                                    </template>
                                </select>

                                <!-- Trigger -->
                                <div @click="open = !open"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[60px] flex flex-wrap gap-2 items-center justify-between">

                                    <div class="flex flex-wrap gap-2 items-center flex-1">
                                        <template x-if="selected.length === 0">
                                            <span class="text-slate-500" x-text="placeholder"></span>
                                        </template>

                                        <template x-for="item in selectedOptions" :key="item.id">
                                            <span
                                                class="bg-yellow-500 text-slate-900 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                                                <span x-text="item.name"></span>
                                                <button type="button" @click.stop="toggle(item.id)"
                                                    class="hover:text-red-800 transition-colors">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M18 6 6 18" />
                                                        <path d="m6 6 12 12" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </template>
                                    </div>

                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                        :class="open ? 'rotate-180' : ''">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </div>

                                <!-- Dropdown -->
                                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 translate-y-2"
                                    class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-2xl shadow-xl overflow-hidden backdrop-blur-xl"
                                    x-cloak>

                                    <div class="p-3 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                        <div class="relative">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                                <circle cx="11" cy="11" r="8" />
                                                <path d="m21 21-4.3-4.3" />
                                            </svg>
                                            <input type="text" x-model="search" placeholder="Search expertise..."
                                                class="w-full bg-slate-800 rounded-xl pl-9 pr-4 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                        </div>
                                    </div>

                                    <div class="max-h-60 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                                        <template x-for="item in filteredOptions" :key="item.id">
                                            <div @click="toggle(item.id)"
                                                class="flex items-center gap-3 px-3 py-2 rounded-xl cursor-pointer transition-colors group/item"
                                                :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">

                                                <div class="w-5 h-5 rounded-md border flex items-center justify-center transition-colors"
                                                    :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                    <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                        width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="3" stroke-linecap="round"
                                                        stroke-linejoin="round" class="text-slate-900">
                                                        <polyline points="20 6 9 17 4 12" />
                                                    </svg>
                                                </div>

                                                <span x-text="item.name" class="font-medium text-sm"></span>
                                            </div>
                                        </template>
                                        <div x-show="filteredOptions.length === 0"
                                            class="p-4 text-center text-slate-500 text-sm">
                                            No expertise found
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @error('primary_skills') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Skills (Secondary) -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Skills</label>
                            <div x-data="multiSelect({
                                                items: {{ $skills->map(fn($s) => ['id' => $s->id, 'name' => $s->name])->values()->toJson() }},
                                                selected: {{ json_encode(old('skills', [])) }},
                                                placeholder: 'Select Skills'
                                            })" class="relative group" @click.outside="open = false">

                                <select name="skills[]" multiple class="hidden">
                                    <template x-for="id in selected">
                                        <option :value="id" selected></option>
                                    </template>
                                </select>

                                <!-- Trigger -->
                                <div @click="open = !open"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[60px] flex flex-wrap gap-2 items-center justify-between">

                                    <div class="flex flex-wrap gap-2 items-center flex-1">
                                        <template x-if="selected.length === 0">
                                            <span class="text-slate-500" x-text="placeholder"></span>
                                        </template>

                                        <template x-for="item in selectedOptions" :key="item.id">
                                            <span
                                                class="bg-yellow-500 text-slate-900 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                                                <span x-text="item.name"></span>
                                                <button type="button" @click.stop="toggle(item.id)"
                                                    class="hover:text-red-800 transition-colors">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M18 6 6 18" />
                                                        <path d="m6 6 12 12" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </template>
                                    </div>

                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                        :class="open ? 'rotate-180' : ''">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </div>

                                <!-- Dropdown -->
                                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 translate-y-2"
                                    class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-2xl shadow-xl overflow-hidden backdrop-blur-xl"
                                    x-cloak>

                                    <div class="p-3 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                        <div class="relative">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                                <circle cx="11" cy="11" r="8" />
                                                <path d="m21 21-4.3-4.3" />
                                            </svg>
                                            <input type="text" x-model="search" placeholder="Search skills..."
                                                class="w-full bg-slate-800 rounded-xl pl-9 pr-4 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                        </div>
                                    </div>

                                    <div class="max-h-60 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                                        <template x-for="item in filteredOptions" :key="item.id">
                                            <div @click="toggle(item.id)"
                                                class="flex items-center gap-3 px-3 py-2 rounded-xl cursor-pointer transition-colors group/item"
                                                :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">

                                                <div class="w-5 h-5 rounded-md border flex items-center justify-center transition-colors"
                                                    :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                    <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                        width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="3" stroke-linecap="round"
                                                        stroke-linejoin="round" class="text-slate-900">
                                                        <polyline points="20 6 9 17 4 12" />
                                                    </svg>
                                                </div>

                                                <span x-text="item.name" class="font-medium text-sm"></span>
                                            </div>
                                        </template>
                                        <div x-show="filteredOptions.length === 0"
                                            class="p-4 text-center text-slate-500 text-sm">
                                            No skills found
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @error('skills') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>

                        <!-- Phone Usage -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Phone
                                Platform</label>
                            <select name="phone_type"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all appearance-none"
                                required>
                                <option value="" class="bg-slate-900">Select Platform</option>
                                <option value="Android" class="bg-slate-900" {{ old('phone_type') == 'Android' ? 'selected' : '' }}>Android</option>
                                <option value="iPhone" class="bg-slate-900" {{ old('phone_type') == 'iPhone' ? 'selected' : '' }}>iPhone</option>
                                <option value="Both" class="bg-slate-900" {{ old('phone_type') == 'Both' ? 'selected' : '' }}>
                                    Both</option>
                            </select>
                        </div>

                        <!-- Email -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Email
                                Address</label>
                            <input type="email" name="email" value="{{ old('email') }}" placeholder="your@email.com"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all"
                                required>
                            @error('email') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>

                        <!-- Contribution Hours -->
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Daily
                                Contribution</label>
                            <select name="contribution_hours"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all appearance-none"
                                required>
                                <option value="" class="bg-slate-900">Select Daily Hours</option>
                                <option value="0-2" class="bg-slate-900" {{ old('contribution_hours') == '0-2' ? 'selected' : '' }}>0-2 Hours</option>
                                <option value="2-4" class="bg-slate-900" {{ old('contribution_hours') == '2-4' ? 'selected' : '' }}>2-4 Hours</option>
                                <option value="4-6" class="bg-slate-900" {{ old('contribution_hours') == '4-6' ? 'selected' : '' }}>4-6 Hours</option>
                                <option value="More than 8" class="bg-slate-900" {{ old('contribution_hours') == 'More than 8' ? 'selected' : '' }}>8+ Hours</option>
                            </select>
                        </div>

                        <!-- Password -->
                        <div class="space-y-2 md:col-span-2" x-data="{ showPassword: false }">
                            <label class="block text-sm font-bold text-slate-300 uppercase tracking-widest">Security
                                Password</label>
                            <div class="relative">
                                <input :type="showPassword ? 'text' : 'password'" name="password"
                                    placeholder="Minimum 8 characters"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-2xl px-5 py-4 text-white focus:border-yellow-500/50 outline-none transition-all pr-12"
                                    required>
                                <button type="button" @click="showPassword = !showPassword"
                                    class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors">
                                    <i class="w-5 h-5" :data-lucide="showPassword ? 'eye-off' : 'eye'"></i>
                                </button>
                            </div>
                            @error('password') <p class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</p> @enderror
                        </div>
                        <script>lucide.createIcons();</script>
                    </div>

                    <div class="mt-12 pt-8 border-t border-white/5">
                        <button type="submit"
                            class="w-full bg-yellow-500 hover:bg-yellow-600 text-slate-900 font-black py-5 rounded-2xl shadow-xl shadow-yellow-500/20 transition-all uppercase tracking-[0.2em]">
                            Submit Application
                        </button>
                        <div class="text-center mt-8">
                            <p class="text-slate-500 text-sm font-bold">
                                Already on board?
                                <a href="{{ route('astrologer.login') }}"
                                    class="text-yellow-500 hover:text-yellow-400 ml-2 transition-colors">Sign in here</a>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function previewImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById('preview').src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        document.addEventListener('alpine:init', () => {
            Alpine.data('multiSelect', (config) => ({
                items: config.items,
                selected: config.selected.map(String),
                placeholder: config.placeholder,
                search: '',
                open: false,

                get filteredOptions() {
                    if (this.search === '') return this.items;
                    return this.items.filter(item =>
                        item.name.toLowerCase().includes(this.search.toLowerCase())
                    );
                },

                get selectedOptions() {
                    return this.items.filter(item => this.selected.includes(String(item.id)));
                },

                toggle(id) {
                    id = String(id);
                    if (this.selected.includes(id)) {
                        this.selected = this.selected.filter(i => i !== id);
                    } else {
                        this.selected.push(id);
                    }
                },

                isSelected(id) {
                    return this.selected.includes(String(id));
                }
            }))
        });
    </script>
@endsection