@extends('front.layouts.app')

@section('title', 'Daily Panchang - Astrotalk')

@section('styles')
    <style>
        .panchang-header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            padding: 4rem 1rem;
            position: relative;
            overflow: hidden;
        }

        .panchang-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-blur: 15px;
            border: 1px border rgba(255, 255, 255, 0.1);
            border-radius: 2rem;
        }

        .data-table tr {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .data-table tr:last-child {
            border: none;
        }
    </style>
@endsection

@section('content')
    <div class="min-h-screen bg-slate-950 text-slate-200">
        <!-- Header Section -->
        <header class="panchang-header">
            <div class="max-w-6xl mx-auto text-center relative z-10">
                <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight">
                    Daily <span class="text-yellow-500">Panchang</span>
                </h1>
                <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                    Accurate Vedic Panchang for {{ $day }} {{ $month }} {{ $year }} at {{ $place }}.
                    Plan your day according to the celestial movements.
                </p>
            </div>
        </header>

        <div class="max-w-6xl mx-auto px-4 py-12 -mt-16 relative z-20">
            <!-- Location Picker -->
            <div class="glass-card p-6 mb-8 border border-white/5 shadow-2xl">
                <form action="{{ route('panchang.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Location</label>
                        <div class="relative">
                            <input type="text" name="birth_place" id="city_search" value="{{ $place }}"
                                placeholder="Enter city..."
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all">
                            <input type="hidden" name="lat" id="lat" value="{{ $lat }}">
                            <input type="hidden" name="lon" id="lon" value="{{ $lon }}">
                            <ul id="city_results"
                                class="absolute z-50 w-full mt-1 bg-slate-900 border border-white/10 rounded-xl hidden max-h-48 overflow-y-auto shadow-2xl">
                            </ul>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Date</label>
                        <input type="date" name="date"
                            value="{{ $year }}-{{ sprintf('%02d', array_search($month, ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']) + 1) }}-{{ sprintf('%02d', $day) }}"
                            onchange="const d = new Date(this.value); window.location.href = '{{ route('panchang.index') }}?day='+d.getDate()+'&month='+d.toLocaleString('en-us', {month:'short'})+'&year='+d.getFullYear()+'&birth_place={{ $place }}&lat={{ $lat }}&lon={{ $lon }}'"
                            class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all">
                    </div>
                    <div class="flex items-end">
                        <button type="submit"
                            class="w-full bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold py-3 px-6 rounded-xl transition-all shadow-lg shadow-yellow-500/20">
                            Update Panchang
                        </button>
                    </div>
                </form>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Main Panchang Card -->
                <div class="glass-card overflow-hidden">
                    <div class="bg-yellow-500/10 p-6 border-b border-white/5">
                        <h3 class="text-xl font-bold flex items-center gap-2">
                            <i data-lucide="sun" class="w-6 h-6 text-yellow-500"></i>
                            Panchang Fundamentals
                        </h3>
                    </div>
                    <div class="p-8">
                        <table class="w-full data-table">
                            <tr class="h-14">
                                <td class="text-slate-500 font-medium">Tithi</td>
                                <td class="text-right text-white font-bold">{{ $panchang['tithi'] }}</td>
                            </tr>
                            <tr class="h-14">
                                <td class="text-slate-500 font-medium">Nakshatra</td>
                                <td class="text-right text-white font-bold">{{ $panchang['nakshatra'] }}</td>
                            </tr>
                            <tr class="h-14">
                                <td class="text-slate-500 font-medium">Karan</td>
                                <td class="text-right text-white font-bold">{{ $panchang['karan'] }}</td>
                            </tr>
                            <tr class="h-14">
                                <td class="text-slate-500 font-medium">Yog</td>
                                <td class="text-right text-white font-bold">{{ $panchang['yog'] }}</td>
                            </tr>
                            <tr class="h-14">
                                <td class="text-slate-500 font-medium">Week Day</td>
                                <td class="text-right text-white font-bold">{{ date('l', strtotime("$day $month $year")) }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Muhurta & Timings -->
                <div class="glass-card overflow-hidden">
                    <div class="bg-blue-500/10 p-6 border-b border-white/5">
                        <h3 class="text-xl font-bold flex items-center gap-2">
                            <i data-lucide="clock" class="w-6 h-6 text-blue-500"></i>
                            Auspicious & Inauspicious Timings
                        </h3>
                    </div>
                    <div class="p-8">
                        <div class="grid grid-cols-2 gap-6">
                            <div class="bg-indigo-500/5 p-5 rounded-2xl border border-indigo-500/10">
                                <p class="text-[10px] uppercase font-bold text-indigo-400 tracking-widest mb-1">Sunrise</p>
                                <p class="text-2xl font-mono text-white">{{ $panchang['sunrise'] }}</p>
                            </div>
                            <div class="bg-orange-500/5 p-5 rounded-2xl border border-orange-500/10">
                                <p class="text-[10px] uppercase font-bold text-orange-400 tracking-widest mb-1">Sunset</p>
                                <p class="text-2xl font-mono text-white">{{ $panchang['sunset'] }}</p>
                            </div>
                        </div>

                        <div class="mt-8 space-y-4">
                            <div
                                class="flex items-center justify-between p-4 bg-green-500/5 border border-green-500/10 rounded-2xl">
                                <span class="text-green-500 font-bold">Abhijit Muhurta</span>
                                <span class="text-white font-mono">{{ $panchang['abhijit_muhurta'] }}</span>
                            </div>
                            <div
                                class="flex items-center justify-between p-4 bg-red-500/5 border border-red-500/10 rounded-2xl">
                                <span class="text-red-500 font-bold">Rahu Kaal</span>
                                <span class="text-white font-mono">{{ $panchang['rahukaal'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            const cityInput = document.getElementById('city_search');
            const resultsList = document.getElementById('city_results');
            const latInput = document.getElementById('lat');
            const lonInput = document.getElementById('lon');

            let timeout = null;

            cityInput.addEventListener('input', (e) => {
                clearTimeout(timeout);
                const query = e.target.value;
                if (query.length < 3) {
                    resultsList.classList.add('hidden');
                    return;
                }

                timeout = setTimeout(() => {
                    fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5`)
                        .then(res => res.json())
                        .then(data => {
                            resultsList.innerHTML = '';
                            resultsList.classList.remove('hidden');
                            data.forEach(item => {
                                const li = document.createElement('li');
                                li.className = 'px-4 py-3 hover:bg-white/5 cursor-pointer text-sm text-slate-300 transition-colors border-b border-white/5 last:border-0';
                                li.textContent = item.display_name;
                                li.onclick = () => {
                                    cityInput.value = item.display_name;
                                    latInput.value = item.lat;
                                    lonInput.value = item.lon;
                                    resultsList.classList.add('hidden');
                                };
                                resultsList.appendChild(li);
                            });
                        });
                }, 500);
            });

            document.addEventListener('click', (e) => {
                if (!cityInput.contains(e.target) && !resultsList.contains(e.target)) {
                    resultsList.classList.add('hidden');
                }
            });

            // Initialize Lucide icons
            document.addEventListener('DOMContentLoaded', () => {
                lucide.createIcons();
            });
        </script>
    @endpush
@endsection