@php
    $localeIsEn = str_starts_with(strtolower(app()->getLocale()), 'en');
    $localeIsEs = str_starts_with(strtolower(app()->getLocale()), 'es') || !str_starts_with(strtolower(app()->getLocale()), 'tr');
    $horaryRequiredTokens = (int) ($horaryChatWordsCost ?? 0);
    $creditHintText = $localeIsEs ? 'Cada interpretación se deduce de su saldo.' : ($localeIsEn ? 'Each request is deducted from your balance.' : 'Her yorum bakiyenizden düşer');
    $horaryTypeYesNoLabel = $localeIsEs ? 'Sí/No' : ($localeIsEn ? 'Yes/No' : 'Evet/Hayır');
    $horaryTypeLostItemLabel = $localeIsEs ? 'Objeto Perdido' : ($localeIsEn ? 'Lost Item' : 'Kayıp Eşya');
    $horaryTypeHelpText = $localeIsEs
        ? 'Seleccione el tipo de pregunta antes del cálculo. El modo objeto perdido enfocará la interpretación en encontrar pistas.'
        : ($localeIsEn
            ? 'Select the question type before calculation. Lost item mode will focus the interpretation on finding clues.'
            : 'Hesaplamadan önce soru tipini seçin. Kayıp eşya modunda yorum, bulmaya yönelik ipuçlarına odaklanır.');
@endphp

<div class="modal fade" id="horaryModal" tabindex="-1" aria-labelledby="horaryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content comment-modal border-0">
            <form id="horaryForm">
                @csrf

                <div class="comment-modal__header">
                    <div class="comment-modal__header-bg"></div>
                    <div class="comment-modal__header-content">
                        <div class="comment-modal__icon-wrap">
                            <i class="fa-solid fa-question"></i>
                        </div>
                        <div class="comment-modal__title-wrap">
                            <h5 class="comment-modal__title" id="horaryModalLabel">{{ t('horary-map') }}</h5>
                            <p class="comment-modal__subtitle">{{ t('horary-map-content') }}</p>
                        </div>
                    </div>
                    <button type="button" class="comment-modal__close" data-bs-dismiss="modal"
                        aria-label="{{ t('close') }}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                    <div class="comment-modal__stars">
                        <span class="comment-modal__star" style="top:12%;left:18%;">✦</span>
                        <span class="comment-modal__star" style="top:60%;left:8%;">✦</span>
                        <span class="comment-modal__star" style="top:25%;right:22%;">✦</span>
                        <span class="comment-modal__star" style="top:65%;right:12%;">✦</span>
                    </div>
                </div>

                <div class="comment-modal__body">
                    <div class="comment-modal__token-bar mb-2">
                        <div class="comment-modal__token-info">
                            <div class="comment-modal__token-icon">
                                <i class="fa-solid fa-coins"></i>
                            </div>
                            <div>
                                <span class="comment-modal__token-label">{{ t('remaining-tokens') }}</span>
                                <span class="comment-modal__token-hint">{{ $creditHintText }}</span>
                            </div>
                        </div>
                        <div class="comment-modal__token-badge" id="horaryCreditsCount">
                            {{ number_format($chatWordsRemaining ?? 0) }}
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">
                                <i class="fa-regular fa-calendar me-1 text-muted"></i> {{ t('date') }}
                            </label>
                            <input type="date" name="horary_date" id="horaryDate"
                                class="form-control form-control-modern" required>
                        </div>

                        <div class="col-6">
                            <label class="form-label fw-semibold">
                                <i class="fa-regular fa-clock me-1 text-muted"></i> {{ t('hour') }}
                            </label>
                            <input type="time" name="horary_time" id="horaryTime"
                                class="form-control form-control-modern" required>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold d-block mb-2">
                                <i class="fa-solid fa-list-check me-1 text-muted"></i> {{ $localeIsEs ? 'Tipo de Pregunta' : ($localeIsEn ? 'Question Type' : 'Soru Tipi') }}
                            </label>
                            <div class="horary-type-switch" role="radiogroup" aria-label="{{ $localeIsEs ? 'Tipo de pregunta horaria' : ($localeIsEn ? 'Horary question type' : 'Horary soru tipi') }}">
                                <label class="horary-type-pill" for="horaryTypeYesNo">
                                    <input class="horary-type-pill__input" type="radio" name="horary_question_type"
                                        id="horaryTypeYesNo" value="yes_no" checked>
                                    <span class="horary-type-pill__content">
                                        <span class="horary-type-pill__icon"><i class="fa-solid fa-circle-check"></i></span>
                                        <span class="horary-type-pill__text-wrap">
                                            <span class="horary-type-pill__title">{{ $horaryTypeYesNoLabel }}</span>
                                            <span class="horary-type-pill__desc">{{ $localeIsEs ? 'Enfoque de juicio binario' : ($localeIsEn ? 'Binary judgment focus' : 'Karar odaklı kısa hüküm') }}</span>
                                        </span>
                                    </span>
                                </label>

                                <label class="horary-type-pill" for="horaryTypeLostItem">
                                    <input class="horary-type-pill__input" type="radio" name="horary_question_type"
                                        id="horaryTypeLostItem" value="lost_item">
                                    <span class="horary-type-pill__content">
                                        <span class="horary-type-pill__icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                                        <span class="horary-type-pill__text-wrap">
                                            <span class="horary-type-pill__title">{{ $horaryTypeLostItemLabel }}</span>
                                            <span class="horary-type-pill__desc">{{ $localeIsEs ? 'Pistas de ubicación' : ($localeIsEn ? 'Find-location clues' : 'Bulmaya yönelik konum ipuçları') }}</span>
                                        </span>
                                    </span>
                                </label>
                            </div>
                            <div class="form-text text-muted mt-1">
                                <i class="fa-solid fa-info-circle me-1"></i>
                                {{ $horaryTypeHelpText }}
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold" for="horaryQuestion">
                                <i class="fa-solid fa-pen-to-square me-1 text-muted"></i> {{ t('your_question', 'Su Pregunta') }}
                            </label>
                            <textarea name="horary_question" id="horaryQuestion" class="form-control form-control-modern"
                                rows="3" maxlength="600" placeholder="{{ t('horary_question_placeholder', 'Escriba su pregunta horaria de forma clara y concisa. Ej: ¿Debería aceptar esta oferta de trabajo?') }}"
                                required></textarea>
                            <div class="form-text text-muted mt-1">
                                <i class="fa-solid fa-info-circle me-1"></i>
                                {{ t('horary_question_hint', 'Exprese la pregunta en una sola frase, orientada a la toma de decisiones y lo más clara posible.') }}
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                <i class="fa-solid fa-location-dot me-1 text-muted"></i> {{ t('question-location') }}
                            </label>

                            <input type="hidden" name="horary_place_id" id="horary_place_id">
                            <input type="hidden" id="horary_lat" name="horary_lat">
                            <input type="hidden" id="horary_lon" name="horary_lon">
                            <input type="hidden" id="horary_city" name="horary_city">
                            <input type="hidden" id="horary_country_code" name="horary_country_code">
                            <input type="hidden" id="horary_timezone" name="horary_timezone">

                            <div class="position-relative">
                                <div class="input-group input-group-modern">
                                    <span class="input-group-text"><i class="fa-solid fa-map-pin"
                                            style="color: #8b5cf6;"></i></span>
                                    <input type="text" id="horary_place_input"
                                        class="form-control form-control-modern" placeholder="{{ t('enter-location') }}"
                                        autocomplete="off" required>
                                </div>

                                <div id="horaryPlaceResults"
                                    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">
                                <i class="fa-solid fa-info-circle me-1"></i>
                                {{ t('horary-location-hint') }}
                            </div>
                        </div>

                        <div class="col-12">
                            <button type="button" id="getLocationBtn" class="btn btn-outline-secondary btn-sm w-100">
                                <i class="fa-solid fa-crosshairs me-2"></i> {{ t('use-current-location') }}
                            </button>
                        </div>
                    </div>

                    <div class="alert alert-danger mt-3 d-none" id="horaryError"></div>
                    <div class="comment-modal__token-inline mt-3">
                        <div class="comment-modal__token-badge comment-modal__token-badge--compact" id="horaryRequiredCredits">
                            <i class="fa-solid fa-coins me-1"></i>
                            @if (!empty($showFeaturePriceInsteadOfTokens))
                                {{ number_format((float) ($horaryPriceTl ?? 0), 0, ',', '.') }} €
                            @else
                                {{ number_format($horaryRequiredTokens) }} {{ $localeIsEs ? 'Puntos' : ($localeIsEn ? 'Points' : 'Puan') }}
                            @endif
                        </div>
                    </div>
                    <div class="d-flex justify-content-between gap-2 mt-4">
                        <button type="button" class="btn btn-light text-muted fw-bold rounded-pill px-4"
                            data-bs-dismiss="modal">
                            <i class="fa-solid fa-xmark me-2"></i> {{ t('cancel') }}
                        </button>
                        <button type="submit" class="btn fw-bold rounded-pill px-4 text-white"
                            style="background: #439280;">
                            <i class="fa-solid fa-calculator me-2"></i> {{ t('calculate') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('horaryModal');
        if (!modal) return;

        const form = document.getElementById('horaryForm');
        const dateInput = document.getElementById('horaryDate');
        const timeInput = document.getElementById('horaryTime');
        const questionInput = document.getElementById('horaryQuestion');
        const placeInput = document.getElementById('horary_place_input');
        const placeIdEl = document.getElementById('horary_place_id');
        const latEl = document.getElementById('horary_lat');
        const lonEl = document.getElementById('horary_lon');
        const cityEl = document.getElementById('horary_city');
        const ccEl = document.getElementById('horary_country_code');
        const tzEl = document.getElementById('horary_timezone');
        const resultsBox = document.getElementById('horaryPlaceResults');
        const errorEl = document.getElementById('horaryError');
        const getLocationBtn = document.getElementById('getLocationBtn');
        const creditsCountEl = document.getElementById('horaryCreditsCount');
        const typeInputs = form.querySelectorAll('input[name="horary_question_type"]');

        const questionPlaceholderByType = {
            yes_no: @json($localeIsEn ? 'Write your horary question clearly. Ex: Should I accept this job offer?' : 'Horary sorunu net ve kısa yaz. Örn: Bu iş teklifini kabul etmeli miyim?'),
            lost_item: @json($localeIsEn ? 'Describe the lost item and ask where/how to find it. Ex: Where is my lost key and when can I find it?' : 'Kayıp eşyayı tarif ederek sor. Örn: Kaybolan anahtarım nerede, ne zaman bulurum?'),
        };

        let searchTimeout = null;

        function getSelectedHoraryQuestionType() {
            const selected = form.querySelector('input[name="horary_question_type"]:checked');
            return selected ? selected.value : 'yes_no';
        }

        function applyHoraryQuestionTypeUi() {
            if (!questionInput) return;
            const type = getSelectedHoraryQuestionType();
            questionInput.placeholder = questionPlaceholderByType[type] || questionPlaceholderByType.yes_no;
        }

        function syncHoraryCredits(remaining) {
            if (!creditsCountEl) return;
            const value = Number.isFinite(Number(remaining)) ? Number(remaining) : 0;
            creditsCountEl.textContent = value.toLocaleString(document.documentElement.lang || 'en-US');
        }

        window.addEventListener('panel:credits-updated', (event) => {
            const remaining = event?.detail?.chat_words_remaining;
            if (remaining === undefined || remaining === null) return;
            syncHoraryCredits(remaining);
        });

        // ✅ Modal açıldığında anlık tarih/saat doldur
        modal.addEventListener('show.bs.modal', () => {
            const now = new Date();

            // Tarih formatı: YYYY-MM-DD
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            dateInput.value = `${year}-${month}-${day}`;

            // Saat formatı: HH:MM
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            timeInput.value = `${hours}:${minutes}`;

            if (questionInput) {
                questionInput.value = (sessionStorage.getItem('horary_question') || '').trim();
            }

            const savedQuestionType = (sessionStorage.getItem('horary_question_type') || 'yes_no').trim();
            const safeType = savedQuestionType === 'lost_item' ? 'lost_item' : 'yes_no';
            const selectedInput = form.querySelector('input[name="horary_question_type"][value="' + safeType + '"]');
            if (selectedInput) selectedInput.checked = true;
            applyHoraryQuestionTypeUi();

            syncHoraryCredits(window.CHAT_WORDS_REMAINING || 0);

            // Hata mesajını temizle
            errorEl.classList.add('d-none');
            errorEl.textContent = '';
        });

        // ✅ Geonames Autocomplete
        function closeResults() {
            resultsBox.style.display = 'none';
            resultsBox.innerHTML = '';
        }

        placeInput.addEventListener('input', () => {
            // Hidden alanları temizle
            placeIdEl.value = '';
            latEl.value = '';
            lonEl.value = '';
            cityEl.value = '';
            ccEl.value = '';
            tzEl.value = '';

            const q = placeInput.value.trim();
            if (q.length < 2) return closeResults();

            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(async () => {
                try {
                    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 closeResults();

                    resultsBox.innerHTML = data.map(item => {
                        const lat = item.lat ?? item.latitude ?? item.y ?? '';
                        const lon = item.lon ?? item.lng ?? item.longitude ?? 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('');

                    resultsBox.style.display = 'block';
                } catch (err) {
                    console.error('Horary geonames error:', err);
                }
            }, 250);
        });

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

            placeIdEl.value = btn.dataset.id;
            placeInput.value = btn.dataset.label;
            latEl.value = btn.dataset.lat || '';
            lonEl.value = btn.dataset.lon || '';
            cityEl.value = btn.dataset.city || btn.dataset.label || '';
            ccEl.value = btn.dataset.cc || '';
            tzEl.value = btn.dataset.tz || '';

            closeResults();
        });

        document.addEventListener('click', (e) => {
            if (!resultsBox.contains(e.target) && e.target !== placeInput) closeResults();
        });

        // ✅ Mevcut Konumu Al (Geolocation API)
        getLocationBtn?.addEventListener('click', () => {
            if (!navigator.geolocation) {
                alert(
                    (window.I18N && window.I18N.HORARY_LOCATION_NOT_SUPPORTED)
                    || ''
                );
                return;
            }

            getLocationBtn.disabled = true;
            var gettingLocText = (window.I18N && window.I18N.HORARY_GETTING_LOCATION) || '';
            getLocationBtn.innerHTML =
                '<i class="fa-solid fa-spinner fa-spin me-2"></i>' + gettingLocText;

            navigator.geolocation.getCurrentPosition(
                async (position) => {
                        const lat = position.coords.latitude;
                        const lon = position.coords.longitude;

                        // Reverse geocoding ile şehir bul
                        try {
                            const url = @json(route('geonames.cities.search')) + '?lat=' + lat + '&lon=' +
                            lon;
                            const res = await fetch(url, {
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            });
                            const data = await res.json();

                            if (Array.isArray(data) && data.length > 0) {
                                const item = data[0];
                                placeIdEl.value = item.id || 'current';
                                placeInput.value = item.label ||
                                    `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
                                latEl.value = item.lat ?? lat;
                                lonEl.value = item.lon ?? lon;
                                cityEl.value = item.city || item.label || '';
                                ccEl.value = item.country_code || '';
                                tzEl.value = item.timezone || '';
                            } else {
                                // Reverse geocoding başarısız, koordinatları direkt kullan
                                placeIdEl.value = 'current';
                                placeInput.value = `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
                                latEl.value = lat;
                                lonEl.value = lon;
                            }
                        } catch (err) {
                            // Hata durumunda koordinatları kullan
                            placeIdEl.value = 'current';
                            placeInput.value = `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
                            latEl.value = lat;
                            lonEl.value = lon;
                        }

                        getLocationBtn.disabled = false;
                        var useCurrentText = (window.I18N && window.I18N.HORARY_USE_CURRENT_LOCATION) || '';
                        getLocationBtn.innerHTML =
                            '<i class="fa-solid fa-crosshairs me-2"></i>' + useCurrentText;
                    },
                    (error) => {
                        console.error('Geolocation error:', error);
                        alert(
                            (window.I18N && window.I18N.HORARY_LOCATION_NOT_SUPPORTED)
                            || ''
                        );
                        getLocationBtn.disabled = false;
                        var useCurrentText = (window.I18N && window.I18N.HORARY_USE_CURRENT_LOCATION) || '';
                        getLocationBtn.innerHTML =
                            '<i class="fa-solid fa-crosshairs me-2"></i>' + useCurrentText;
                    }, {
                        enableHighAccuracy: true,
                        timeout: 10000
                    }
            );
        });

        // ✅ Form Submit
        form.addEventListener('submit', (e) => {
            e.preventDefault();

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

            // Konum seçimi kontrolü
            if (!latEl.value || !lonEl.value) {
                errorEl.textContent =
                    (window.I18N && window.I18N.HORARY_SELECT_LOCATION_REQUIRED)
                    || '';
                errorEl.classList.remove('d-none');
                return;
            }

            const horaryQuestion = (questionInput?.value || '').trim();
            const horaryQuestionType = getSelectedHoraryQuestionType();
            if (horaryQuestion.length < 5) {
                errorEl.textContent = 'Lütfen horary sorunu daha net yaz (en az 5 karakter).';
                errorEl.classList.remove('d-none');
                return;
            }

            // ✅ HORARY BİLGİLERİNİ SAKLA VE LAZY LOAD İLE YÜKLE
            sessionStorage.setItem('horary_date', dateInput.value);
            sessionStorage.setItem('horary_time', timeInput.value);
            sessionStorage.setItem('horary_lat', latEl.value);
            sessionStorage.setItem('horary_lon', lonEl.value);
            sessionStorage.setItem('horary_question', horaryQuestion);
            sessionStorage.setItem('horary_question_type', horaryQuestionType);
            if (cityEl.value) sessionStorage.setItem('horary_city', cityEl.value);
            if (ccEl.value) sessionStorage.setItem('horary_country_code', ccEl.value);
            if (tzEl.value) sessionStorage.setItem('horary_timezone', tzEl.value);

            // Modal'ı kapat
            const modal = bootstrap.Modal.getInstance(document.getElementById('horaryModal'));
            modal.hide();

            // Horary parametrelerini form'a ekle
            const chartForm = document.getElementById('chartForm');
            const horaryParams = [{
                    name: 'horary_date',
                    value: dateInput.value
                },
                {
                    name: 'horary_time',
                    value: timeInput.value
                },
                {
                    name: 'horary_lat',
                    value: latEl.value
                },
                {
                    name: 'horary_lon',
                    value: lonEl.value
                },
                {
                    name: 'horary_city',
                    value: cityEl.value
                },
                {
                    name: 'horary_country_code',
                    value: ccEl.value
                },
                {
                    name: 'horary_timezone',
                    value: tzEl.value
                },
                {
                    name: 'horary_question',
                    value: horaryQuestion
                },
                {
                    name: 'horary_question_type',
                    value: horaryQuestionType
                }
            ];

            // Eski horary inputları temizle
            chartForm.querySelectorAll('input[name^="horary_"]').forEach(el => el.remove());

            // Yeni horary inputları ekle
            horaryParams.forEach(param => {
                if (param.value) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = param.name;
                    input.value = param.value;
                    chartForm.appendChild(input);
                }
            });

            // Lazy load fonksiyonunu çağır (all-chart-modal.js'den)
            if (typeof window.loadChartTypeAndActivate === 'function') {
                setTimeout(async () => {
                    await window.loadChartTypeAndActivate('horary');

                    // Horary haritası yüklendikten sonra soruyu AI'a otomatik göndermek için event yayınla.
                    try {
                        window.dispatchEvent(new CustomEvent('ai:sendHoraryQuestion', {
                            detail: {
                                question: horaryQuestion,
                                questionType: horaryQuestionType,
                                source: 'horary_modal'
                            }
                        }));
                    } catch (err) {
                        console.error('Horary AI event dispatch error:', err);
                    }
                }, 300); // Modal kapanma animasyonu için bekle
            } else {
                alert(
                    (window.I18N && window.I18N.HORARY_NOT_FOUND)
                    || ''
                );
            }
        });

        typeInputs.forEach((input) => {
            input.addEventListener('change', applyHoraryQuestionTypeUi);
        });
    });
</script>