@extends('front.layouts.app')

@section('title', 'New Kundali - Astrotalk')

@section('content')
    <div class="py-20 px-6">
        <div class="max-w-xl mx-auto">
            <h2 class="text-2xl font-bold text-white mb-8">New Kundli</h2>

            <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 shadow-2xl">
                <form action="{{ route('kundali.generate') }}" method="POST" class="space-y-6" id="kundliForm">
                    @csrf

                    <input type="hidden" name="lat" id="lat_input" value="31.62">
                    <input type="hidden" name="lon" id="lon_input" value="74.88">

                    <div>
                        <label class="block text-sm font-bold text-slate-400 mb-2">Name<span
                                class="text-red-500">*</span></label>
                        <input type="text" name="name" placeholder="Enter Name" required
                            class="w-full bg-slate-800 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:ring-1 focus:ring-yellow-500 transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-400 mb-2">Gender<span
                                class="text-red-500">*</span></label>
                        <select name="gender" required
                            class="w-full bg-slate-800 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:ring-1 focus:ring-yellow-500 transition-all appearance-none cursor-pointer">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>

                    <div class="pt-2">
                        <p class="text-sm font-bold text-slate-200 mb-4 uppercase tracking-widest text-[10px]">Birth Details
                        </p>
                        <div class="grid grid-cols-3 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Day*</label>
                                <select name="day" required
                                    class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                    @for($i = 1; $i <= 31; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Month*</label>
                                <select name="month" required
                                    class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                    @foreach(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] as $m)
                                        <option value="{{ $m }}">{{ $m }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Year*</label>
                                <select name="year" required
                                    class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                    @for($i = date('Y'); $i >= 1900; $i--)
                                        <option value="{{ $i }}" {{ $i == 1990 ? 'selected' : '' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Hour*</label>
                            <select name="hour" required
                                class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                @for($i = 0; $i <= 23; $i++)
                                    <option value="{{ $i }}" {{ $i == 15 ? 'selected' : '' }}>{{ sprintf("%02d", $i) }}</option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Minute*</label>
                            <select name="minute" required
                                class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                @for($i = 0; $i <= 59; $i++)
                                    <option value="{{ $i }}" {{ $i == 22 ? 'selected' : '' }}>{{ sprintf("%02d", $i) }}</option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Second</label>
                            <select name="second" required
                                class="w-full bg-slate-800 border border-white/10 rounded-xl py-2 px-3 text-white text-sm focus:outline-none focus:ring-1 focus:ring-yellow-500 appearance-none">
                                @for($i = 0; $i <= 59; $i++)
                                    <option value="{{ $i }}" {{ $i == 10 ? 'selected' : '' }}>{{ sprintf("%02d", $i) }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="relative" x-data="{
                            query: '',
                            results: [],
                            loading: false,
                            async searchCity() {
                                if (this.query.length < 3) return;
                                this.loading = true;
                                try {
                                    const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(this.query)}&limit=5`);
                                    this.results = await response.json();
                                } catch (e) {
                                    console.error(e);
                                } finally {
                                    this.loading = false;
                                }
                            },
                            selectCity(city) {
                                this.query = city.display_name;
                                document.getElementById('lat_input').value = city.lat;
                                document.getElementById('lon_input').value = city.lon;
                                this.results = [];
                            }
                        }">
                        <label class="block text-sm font-bold text-slate-400 mb-2">Birth Place<span
                                class="text-red-500">*</span></label>
                        <input type="text" name="birth_place" x-model="query" @input.debounce.500ms="searchCity()"
                            placeholder="Search city for coordinates..." required
                            class="w-full bg-slate-800 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:ring-1 focus:ring-yellow-500 transition-all">

                        <div x-show="results.length > 0"
                            class="absolute z-50 w-full mt-2 bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl"
                            x-cloak>
                            <template x-for="result in results" :key="result.place_id">
                                <button type="button" @click="selectCity(result)"
                                    class="w-full text-left px-4 py-3 hover:bg-yellow-500/10 text-sm text-slate-300 border-b border-white/5 last:border-0 transition-colors">
                                    <span x-text="result.display_name"></span>
                                </button>
                            </template>
                        </div>
                    </div>

                    <button type="submit"
                        class="w-full bg-slate-800 hover:bg-slate-700 text-yellow-500 font-bold py-4 rounded-full border border-white/5 transition-all shadow-xl hover:scale-[1.02] active:scale-95">
                        Generate Horoscope
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection