@extends('frontend.main_master')

@section('title', 'Cálculo de Natal Chart | ' . t('site-title'))
@section('body-class', 'panel-preview-body')

@php
    $mode = $mode ?? 'natal';
@endphp

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="card shadow-sm border-0 rounded-4 overflow-hidden">
                    <div class="card-body p-4">
                        <div class="mb-4">
                            <h1 class="h3 mb-2">
                                {{ $mode === 'solar_return' ? 'Solar Return Calculation' : ($mode === 'secondary_progression_361' ? 'Cálculo de Progresión Secundaria 361' : ($mode === 'secondary_progression_naibod' ? 'Cálculo de Progresión Secundaria (Naibod)' : 'Cálculo de Natal Chart')) }}
                            </h1>
                            <p class="text-muted mb-0">
                                Introduzca su date, time, location de nacimiento y name para calculate su mapa astrológico.
                            </p>
                        </div>

                        <form id="panelPreviewForm">
                            @csrf

                            <input type="hidden" id="preview_mode" value="{{ $mode }}">
                            <input type="hidden" name="house_system" value="P">

                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">Name</label>
                                    <input type="text" name="title" id="preview_title" class="form-control"
                                        placeholder="Ej: María" required>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">Date de Nacimiento</label>
                                    <input type="date" name="birth_date" class="form-control" required>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">Time de Nacimiento</label>
                                    <input type="time" name="birth_time" id="preview_birth_time" class="form-control">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="unknownTime"
                                            name="unknown_time" value="1">
                                        <label class="form-check-label" for="unknownTime">Time desconocida (12:00 por defecto)</label>
                                    </div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">Location de Nacimiento</label>

                                    <input type="hidden" name="birth_place_id" id="preview_birth_place_id">
                                    <input type="hidden" id="preview_lat" name="lat">
                                    <input type="hidden" id="preview_lon" name="lon">
                                    <input type="hidden" id="preview_city" name="city">
                                    <input type="hidden" id="preview_country_code" name="country_code">
                                    <input type="hidden" id="preview_timezone" name="timezone">

                                    <div class="position-relative">
                                        <input type="text" id="preview_birth_place" class="form-control"
                                            placeholder="Escriba la ciudad natal..." autocomplete="off" required>

                                        <div id="previewBirthPlaceResults"
                                            class="list-group position-absolute w-100 shadow-sm results-modern"
                                            style="z-index: 1050; display:none; max-height: 260px; overflow:auto;">
                                        </div>
                                    </div>
                                    <div class="form-text text-muted mt-1">
                                        Escriba al menos 2 letras y seleccione de la lista sugerida.
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-color-four text-white px-4">
                                    Calculate Chart
                                </button>
                                <a href="{{ url()->previous() }}" class="btn btn-light px-4">Volver</a>
                            </div>
                        </form>

                        <div class="alert alert-danger mt-4 d-none" id="panelPreviewError"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const mode = document.getElementById('preview_mode')?.value || 'natal';

            const unknown = document.getElementById('unknownTime');
            const timeInput = document.getElementById('preview_birth_time');
            unknown?.addEventListener('change', () => {
                if (!timeInput) return;
                timeInput.disabled = unknown.checked;
                if (unknown.checked) timeInput.value = '';
            });

            // Geonames autocomplete (panel modal'ındaki mantık ile aynı)
            const input = document.getElementById('preview_birth_place');
            const hidden = document.getElementById('preview_birth_place_id');
            const box = document.getElementById('previewBirthPlaceResults');
            const err = document.getElementById('panelPreviewError');

            const latEl = document.getElementById('preview_lat');
            const lonEl = document.getElementById('preview_lon');
            const cityEl = document.getElementById('preview_city');
            const ccEl = document.getElementById('preview_country_code');
            const tzEl = document.getElementById('preview_timezone');

            let t = null;

            function closeBox() {
                if (!box) return;
                box.style.display = 'none';
                box.innerHTML = '';
            }

            input?.addEventListener('input', () => {
                if (hidden) hidden.value = '';
                if (latEl) latEl.value = '';
                if (lonEl) lonEl.value = '';
                if (cityEl) cityEl.value = '';
                if (ccEl) ccEl.value = '';
                if (tzEl) tzEl.value = '';

                const q = (input?.value || '').trim();
                if (q.length < 2) return closeBox();

                clearTimeout(t);
                t = setTimeout(async () => {
                    const url = @json(route('geonames.cities.search')) + '?q=' + encodeURIComponent(q);
                    const res = await fetch(url, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const data = await res.json();

                    if (!Array.isArray(data) || !data.length) return closeBox();

                    box.innerHTML = data.map(item => {
                        const lat = item.lat ?? item.latitudee ?? item.y ?? '';
                        const lon = item.lon ?? item.lng ?? item.longitudee ?? item.x ?? '';

                        return `
                            <button type="button"
                                class="list-group-item list-group-item-action"
                                data-id="${item.id}"
                                data-label="${item.label}"
                                data-lat="${lat}"
                                data-lon="${lon}"
                                data-city="${item.city ?? ''}"
                                data-cc="${item.country_code ?? ''}"
                                data-tz="${item.timezone ?? ''}">
                                ${item.label}
                            </button>
                        `;
                    }).join('');

                    box.style.display = 'block';
                }, 250);
            });

            box?.addEventListener('click', (e) => {
                const btn = e.target.closest('button[data-id]');
                if (!btn) return;

                if (hidden) hidden.value = btn.dataset.id || '';
                if (input) input.value = btn.dataset.label || '';
                if (latEl) latEl.value = btn.dataset.lat || '';
                if (lonEl) lonEl.value = btn.dataset.lon || '';
                if (cityEl) cityEl.value = btn.dataset.city || btn.dataset.label || '';
                if (ccEl) ccEl.value = btn.dataset.cc || '';
                if (tzEl) tzEl.value = btn.dataset.tz || '';

                closeBox();
            });

            document.addEventListener('click', (e) => {
                if (!box || !input) return;
                if (!box.contains(e.target) && e.target !== input) closeBox();
            });

            const form = document.getElementById('panelPreviewForm');
            form?.addEventListener('submit', (e) => {
                e.preventDefault();
                if (!err) return;

                err.classList.add('d-none');
                err.textContent = '';

                if (!hidden?.value) {
                    err.textContent = 'Doğum yeri seçmelisiniz.';
                    err.classList.remove('d-none');
                    return;
                }
                if (!latEl?.value || !lonEl?.value) {
                    err.textContent = 'Koordinatlar bulunamadı.';
                    err.classList.remove('d-none');
                    return;
                }

                const fd = new FormData(form);
                const birthDate = fd.get('birth_date') || '';
                let birthTime = fd.get('birth_time') || '';
                const unknownTime = fd.get('unknown_time') === '1';

                if (unknownTime || !birthTime) birthTime = '12:00';

                const params = new URLSearchParams();
                params.set('preview', '1');
                params.set('preview_target', mode);
                params.set('date', birthDate);
                params.set('time', birthTime);
                params.set('lat', latEl.value);
                params.set('lon', lonEl.value);

                if (cityEl?.value) params.set('city', cityEl.value);
                if (ccEl?.value) params.set('country_code', ccEl.value);
                if (tzEl?.value) params.set('timezone', tzEl.value);

                const title = fd.get('title') || '';
                if (title) params.set('title', title);

                // house_system (resolver için)
                params.set('house_system', fd.get('house_system') || 'P');

                window.location.href = @json(route('panel.preview')) + '?' + params.toString();
            });
        });
    </script>