@php
    $asBodies = \App\Services\Ephemeris\EphemerisAspectSearchService::BODIES;
    $asAspects = \App\Services\Ephemeris\EphemerisAspectSearchService::ASPECTS;
@endphp

<style>
    /* Astro Bilge Teması - Efemeris Açı Tarayıcı */
    #aspectSearchModal .as-header {
        background: linear-gradient(135deg, #0b1d1a 0%, #133a33 55%, #1f564c 100%);
    }
    #aspectSearchModal .as-header-icon-wrap {
        width: 42px;
        height: 42px;
        background: rgba(71, 148, 131, 0.22);
        border: 1px solid rgba(110, 231, 183, 0.4);
    }
    #aspectSearchModal .btn-as-primary {
        background-color: #479483;
        border-color: #479483;
        color: #ffffff;
        transition: all 0.2s ease-in-out;
    }
    #aspectSearchModal .btn-as-primary:hover,
    #aspectSearchModal .btn-as-primary:focus {
        background-color: #357a6f;
        border-color: #357a6f;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(71, 148, 131, 0.3);
    }
    #aspectSearchModal .btn-as-outline {
        color: #479483;
        border-color: #479483;
        background-color: transparent;
        transition: all 0.15s ease-in-out;
    }
    #aspectSearchModal .btn-as-outline:hover,
    #aspectSearchModal .btn-as-outline:focus {
        background-color: #479483;
        border-color: #479483;
        color: #ffffff;
    }
    #aspectSearchModal .as-quick-date {
        color: #357a6f;
        border-color: #c2e2db;
        background-color: #f7faf9;
        transition: all 0.15s ease;
    }
    #aspectSearchModal .as-quick-date:hover {
        background-color: #eaf5f2;
        border-color: #479483;
        color: #1f5f54;
    }
    #aspectSearchModal .as-stats-banner {
        background: #eaf5f2;
        color: #164e43;
        border-left: 4px solid #479483 !important;
    }
    #aspectSearchModal .as-table-thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #133a33;
        color: #ffffff;
    }
    #aspectSearchModal .as-table-thead th {
        background-color: #133a33 !important;
        color: #e2f0ed !important;
        border-bottom: 2px solid #1f564c;
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: 0.5px;
    }
    #aspectSearchModal .as-badge-p1 {
        background-color: #eaf5f2;
        color: #1f5f54;
        border: 1px solid #c2e2db;
    }
    #aspectSearchModal .as-badge-p2 {
        background-color: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    #aspectSearchModal .form-control:focus,
    #aspectSearchModal .form-select:focus {
        border-color: #479483;
        box-shadow: 0 0 0 0.25rem rgba(71, 148, 131, 0.2);
    }
    #aspectSearchModal .pagination .page-item.active .page-link {
        background-color: #479483;
        border-color: #479483;
        color: #ffffff;
    }
    #aspectSearchModal .pagination .page-link {
        color: #1f5f54;
    }
    #aspectSearchModal .pagination .page-link:hover {
        color: #133a33;
        background-color: #eaf5f2;
    }
</style>

<div class="modal fade" id="aspectSearchModal" tabindex="-1" aria-labelledby="aspectSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content comment-modal border-0 shadow-lg" style="max-height: 90vh;">
            {{-- Modal Header (Ekstra Noktalar Stili) --}}
            <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-compass-drafting"></i>
                    </div>
                    <div class="comment-modal__title-wrap">
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="comment-modal__title" id="aspectSearchModalLabel">Açı Ara (Efemeris Açı Tarayıcı)</h5>
                            <span class="badge rounded-pill bg-white text-dark fw-semibold" style="font-size: 0.7rem;">Derin Araştırma</span>
                        </div>
                        <p class="comment-modal__subtitle">Girilen tarihler arasında iki gezegen arasındaki açının tam kesinleşme (0°00' exact) anlarını İsviçre Efemerisi ile tarayın</p>
                    </div>
                </div>
                <button type="button" class="comment-modal__close" data-bs-dismiss="modal" aria-label="Kapat">
                    <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="modal-body p-4" style="background: #f8fafc;">
                {{-- Arama Formu --}}
                <div class="card border-0 shadow-sm rounded-3 mb-3">
                    <div class="card-body p-3">
                        <div class="row g-3">
                            {{-- 1. Gezegen --}}
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-bold text-dark small mb-1">
                                    <i class="fa-solid fa-circle-dot me-1" style="color: #479483;"></i>1. Gök Cismi:
                                </label>
                                <select class="form-select form-select-sm fw-semibold" id="asPlanet1">
                                    @foreach ($asBodies as $key => $b)
                                        <option value="{{ $key }}" {{ $key === 'Mars' ? 'selected' : '' }}>
                                            {{ $b['symbol'] }} {{ $b['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Açı Türü --}}
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-bold text-dark small mb-1">
                                    <i class="fa-solid fa-arrows-split-up-and-left text-warning me-1"></i>Açı Türü:
                                </label>
                                <select class="form-select form-select-sm fw-semibold" id="asAspect">
                                    @foreach ($asAspects as $key => $asp)
                                        <option value="{{ $key }}" {{ $key === 'conjunction' ? 'selected' : '' }}>
                                            {{ $asp['symbol'] }} {{ $asp['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- 2. Gezegen --}}
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-bold text-dark small mb-1">
                                    <i class="fa-solid fa-circle-dot me-1" style="color: #357a6f;"></i>2. Gök Cismi:
                                </label>
                                <select class="form-select form-select-sm fw-semibold" id="asPlanet2">
                                    @foreach ($asBodies as $key => $b)
                                        <option value="{{ $key }}" {{ $key === 'Saturn' ? 'selected' : '' }}>
                                            {{ $b['symbol'] }} {{ $b['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Tarih Aralığı --}}
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-bold text-dark small mb-1">
                                    <i class="fa-regular fa-calendar-days text-secondary me-1"></i>Başlangıç Tarihi:
                                </label>
                                <input type="date" class="form-control form-control-sm" id="asStartDate"
                                    value="{{ date('Y') - 5 }}-01-01">
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-bold text-dark small mb-1">
                                    <i class="fa-regular fa-calendar-days text-secondary me-1"></i>Bitiş Tarihi:
                                </label>
                                <input type="date" class="form-control form-control-sm" id="asEndDate"
                                    value="{{ date('Y') + 5 }}-12-31">
                            </div>

                            <div class="col-12 col-md-4 d-flex align-items-end">
                                <button type="button" class="btn btn-as-primary btn-sm w-100 fw-bold d-flex align-items-center justify-content-center gap-2 py-2 shadow-sm"
                                    id="btnRunAspectSearch">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <span>Açıları Tara</span>
                                </button>
                            </div>

                            {{-- Hızlı Tarih Seçim Butonları --}}
                            <div class="col-12 pt-2 border-top">
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <small class="text-muted fw-semibold me-2" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-bolt text-warning me-1"></i>Hızlı Aralık:
                                    </small>
                                    <button type="button" class="btn btn-sm py-0 px-2 as-quick-date"
                                        data-start="{{ date('Y') }}-01-01" data-end="{{ date('Y') }}-12-31" style="font-size: 0.75rem;">
                                        Bu Yıl
                                    </button>
                                    <button type="button" class="btn btn-sm py-0 px-2 as-quick-date"
                                        data-start="{{ date('Y') - 5 }}-01-01" data-end="{{ date('Y') + 5 }}-12-31" style="font-size: 0.75rem;">
                                        ±5 Yıl
                                    </button>
                                    <button type="button" class="btn btn-sm py-0 px-2 as-quick-date"
                                        data-start="{{ date('Y') - 10 }}-01-01" data-end="{{ date('Y') + 10 }}-12-31" style="font-size: 0.75rem;">
                                        ±10 Yıl
                                    </button>
                                    <button type="button" class="btn btn-sm py-0 px-2 as-quick-date"
                                        data-start="2000-01-01" data-end="2050-12-31" style="font-size: 0.75rem;">
                                        2000 - 2050 (50 Yıl)
                                    </button>
                                    <button type="button" class="btn btn-sm py-0 px-2 as-quick-date"
                                        data-start="1950-01-01" data-end="2050-12-31" style="font-size: 0.75rem;">
                                        1950 - 2050 (100 Yıl)
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Özet İstatistik Çubuğu --}}
                <div class="d-none alert as-stats-banner py-2 px-3 rounded-3 d-flex flex-wrap align-items-center justify-content-between mb-3 shadow-sm border-0"
                    id="asStatsBar">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fa-solid fa-chart-pie fs-6" style="color: #479483;"></i>
                        <span class="fw-bold" id="asTextTotalCount">Toplam 0 Açı Bulundu</span>
                        <span class="badge bg-white border ms-2" id="asTextElapsed" style="color: #1f5f54; border-color: #c2e2db !important;">0 ms</span>
                    </div>
                    <div class="small" id="asTextQuerySummary" style="color: #246457;">-</div>
                </div>

                {{-- Yükleniyor Göstergesi --}}
                <div class="d-none py-5 text-center" id="asLoadingSpinner">
                    <div class="spinner-border mb-2" role="status" style="width: 2.5rem; height: 2.5rem; color: #479483;"></div>
                    <div class="fw-semibold text-muted">Efemeris taranıyor, lütfen bekleyin...</div>
                    <small class="text-muted">Gök cisimlerinin açı kesinleşmeleri inceleniyor.</small>
                </div>

                {{-- Hata Uyarısı --}}
                <div class="d-none alert alert-danger py-2 px-3 rounded-3 mb-3" id="asErrorAlert"></div>

                {{-- Sonuç Listesi Tablosu --}}
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden d-none" id="asResultsCard">
                    <div class="table-responsive" style="max-height: 480px;">
                        <table class="table table-hover table-striped align-middle mb-0" id="asResultsTable">
                            <thead class="as-table-thead small text-uppercase">
                                <tr>
                                    <th style="width: 50px;" class="text-center">#</th>
                                    <th>Tam Kesinleşme Tarihi (UTC)</th>
                                    <th id="thPlanet1Name">1. Gezegen</th>
                                    <th class="text-center" style="width: 140px;">Açı</th>
                                    <th id="thPlanet2Name">2. Gezegen</th>
                                    <th class="text-end" style="width: 150px;">Eylem</th>
                                </tr>
                            </thead>
                            <tbody id="asResultsTbody" class="small">
                                {{-- JS ile doldurulacak --}}
                            </tbody>
                        </table>
                    </div>

                    {{-- Sayfalama ve Alt Bilgi --}}
                    <div class="card-footer bg-white border-top py-2 d-flex flex-wrap align-items-center justify-content-between gap-2"
                        id="asPaginationWrap">
                        <div class="small text-muted" id="asPaginationInfo">
                            Gösterilen: 0 / 0
                        </div>
                        <ul class="pagination pagination-sm mb-0" id="asPaginationList">
                            {{-- JS ile doldurulacak --}}
                        </ul>
                    </div>
                </div>

                {{-- Boş Durum Bilgisi --}}
                <div class="py-5 text-center text-muted" id="asEmptyState">
                    <div class="mb-3">
                        <i class="fa-solid fa-compass-drafting fs-1 opacity-50" style="color: #479483;"></i>
                    </div>
                    <h6 class="fw-bold text-dark">Efemeris Açı Aramaya Hazır</h6>
                    <p class="small text-muted mb-0" style="max-width: 500px; margin: 0 auto;">
                        Yukarıdan iki gök cismi, açı türü ve tarih aralığı belirleyip <strong>"Açıları Tara"</strong> butonuna basın. Belirtilen yıllar arasındaki tüm kesin açı zamanları anında listelenecektir.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    var currentPage = 1;
    var currentPerPage = 50;

    // Hızlı Tarih Butonları
    document.querySelectorAll('#aspectSearchModal .as-quick-date').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var start = this.getAttribute('data-start');
            var end = this.getAttribute('data-end');
            if (start) document.getElementById('asStartDate').value = start;
            if (end) document.getElementById('asEndDate').value = end;
        });
    });

    // Arama Butonu
    var btnRun = document.getElementById('btnRunAspectSearch');
    if (btnRun) {
        btnRun.addEventListener('click', function() {
            runAspectSearch(1);
        });
    }

    function runAspectSearch(page) {
        currentPage = page || 1;

        var p1 = document.getElementById('asPlanet1').value;
        var p2 = document.getElementById('asPlanet2').value;
        var asp = document.getElementById('asAspect').value;
        var startDate = document.getElementById('asStartDate').value;
        var endDate = document.getElementById('asEndDate').value;

        if (p1 === p2) {
            showError('Lütfen birbirinden farklı iki gök cismi seçin.');
            return;
        }

        if (!startDate || !endDate) {
            showError('Lütfen geçerli bir başlangıç ve bitiş tarihi girin.');
            return;
        }

        hideError();
        showLoading(true);

        fetch('/panel/aspect-search/search', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: JSON.stringify({
                planet1: p1,
                planet2: p2,
                aspect: asp,
                start_date: startDate,
                end_date: endDate,
                page: currentPage,
                per_page: currentPerPage
            })
        })
        .then(function(res) {
            return res.json().then(function(data) {
                if (!res.ok) {
                    throw new Error(data.message || 'Arama sırasında sunucu hatası oluştu.');
                }
                return data;
            });
        })
        .then(function(data) {
            showLoading(false);
            if (data.ok) {
                renderResults(data);
            } else {
                showError(data.message || 'Bilinmeyen bir hata oluştu.');
            }
        })
        .catch(function(err) {
            showLoading(false);
            showError(err.message || 'Bağlantı hatası oluştu.');
        });
    }

    function renderResults(data) {
        var tbody = document.getElementById('asResultsTbody');
        var resultsCard = document.getElementById('asResultsCard');
        var emptyState = document.getElementById('asEmptyState');
        var statsBar = document.getElementById('asStatsBar');

        tbody.innerHTML = '';

        document.getElementById('thPlanet1Name').textContent = (data.planet1?.symbol || '') + ' ' + (data.planet1?.name || '1. Gezegen');
        document.getElementById('thPlanet2Name').textContent = (data.planet2?.symbol || '') + ' ' + (data.planet2?.name || '2. Gezegen');

        statsBar.classList.remove('d-none');
        document.getElementById('asTextTotalCount').textContent = 'Toplam ' + data.total_count + ' Açı Kesinleşmesi';
        document.getElementById('asTextElapsed').textContent = data.elapsed_ms + ' ms';
        document.getElementById('asTextQuerySummary').textContent =
            (data.planet1?.name || '') + ' - ' + (data.planet2?.name || '') + ' ' + (data.aspect?.name || '') +
            ' (' + data.start_date + ' ile ' + data.end_date + ' arası)';

        if (data.total_count === 0) {
            resultsCard.classList.add('d-none');
            emptyState.classList.remove('d-none');
            emptyState.querySelector('h6').textContent = 'Açı Bulunamadı';
            emptyState.querySelector('p').textContent = 'Belirttiğiniz tarih aralığında bu iki gök cismi arasında bu açı kesinleşmemiştir.';
            return;
        }

        emptyState.classList.add('d-none');
        resultsCard.classList.remove('d-none');

        var offset = (data.page - 1) * data.per_page;

        data.results.forEach(function(item, idx) {
            var tr = document.createElement('tr');

            var p1BadgeClass = item.p1_pos.is_retro ? 'bg-danger-subtle text-danger border border-danger-subtle' : 'as-badge-p1';
            var p2BadgeClass = item.p2_pos.is_retro ? 'bg-danger-subtle text-danger border border-danger-subtle' : 'as-badge-p2';

            tr.innerHTML =
                '<td class="text-center text-muted fw-bold">' + (offset + idx + 1) + '</td>' +
                '<td>' +
                    '<div class="fw-bold text-dark"><i class="fa-regular fa-clock me-1" style="color: #479483;"></i>' + item.date_formatted + '</div>' +
                    '<small class="text-muted font-monospace" style="font-size: 0.72rem;">' + item.date_utc + '</small>' +
                '</td>' +
                '<td>' +
                    '<span class="badge ' + p1BadgeClass + ' px-2 py-1">' + item.p1_pos.formatted + '</span>' +
                '</td>' +
                '<td class="text-center">' +
                    '<span class="badge bg-dark-subtle text-dark border px-2 py-1" title="' + item.aspect_label + '">' +
                        '<span class="fw-bold me-1">' + item.aspect_symbol + '</span>' + item.aspect_short +
                    '</span>' +
                '</td>' +
                '<td>' +
                    '<span class="badge ' + p2BadgeClass + ' px-2 py-1">' + item.p2_pos.formatted + '</span>' +
                '</td>' +
                '<td class="text-end">' +
                    '<button type="button" class="btn btn-as-outline btn-sm py-1 px-2 btn-open-exact-chart" ' +
                        'data-date="' + item.date_utc.substr(0, 10) + '" ' +
                        'data-time="' + item.time + '" ' +
                        'data-title="' + (data.planet1?.name || '') + ' ' + item.aspect_short + ' ' + (data.planet2?.name || '') + '">' +
                        '<i class="fa-solid fa-up-right-from-square me-1"></i>Haritada Aç' +
                    '</button>' +
                '</td>';

            tbody.appendChild(tr);
        });

        // Haritada Aç Butonları
        tbody.querySelectorAll('.btn-open-exact-chart').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var dt = this.getAttribute('data-date');
                var tm = this.getAttribute('data-time');
                var title = this.getAttribute('data-title');
                openChartInMasterSlot(dt, tm, title);
            });
        });

        // Sayfalama
        renderPagination(data);
    }

    function renderPagination(data) {
        var info = document.getElementById('asPaginationInfo');
        var list = document.getElementById('asPaginationList');

        var start = (data.page - 1) * data.per_page + 1;
        var end = Math.min(data.page * data.per_page, data.total_count);
        info.textContent = 'Gösterilen: ' + start + ' - ' + end + ' / Toplam ' + data.total_count;

        list.innerHTML = '';
        if (data.total_pages <= 1) {
            return;
        }

        // Önceki
        var prevLi = document.createElement('li');
        prevLi.className = 'page-item' + (data.page <= 1 ? ' disabled' : '');
        prevLi.innerHTML = '<a class="page-link" href="#" aria-label="Önceki">&laquo;</a>';
        if (data.page > 1) {
            prevLi.querySelector('a').addEventListener('click', function(e) {
                e.preventDefault();
                runAspectSearch(data.page - 1);
            });
        }
        list.appendChild(prevLi);

        // Sayfa Numaraları (max 7 düğme)
        var pStart = Math.max(1, data.page - 3);
        var pEnd = Math.min(data.total_pages, pStart + 6);
        if (pEnd - pStart < 6) {
            pStart = Math.max(1, pEnd - 6);
        }

        for (var p = pStart; p <= pEnd; p++) {
            (function(pageNum) {
                var li = document.createElement('li');
                li.className = 'page-item' + (pageNum === data.page ? ' active' : '');
                li.innerHTML = '<a class="page-link" href="#">' + pageNum + '</a>';
                li.querySelector('a').addEventListener('click', function(e) {
                    e.preventDefault();
                    runAspectSearch(pageNum);
                });
                list.appendChild(li);
            })(p);
        }

        // Sonraki
        var nextLi = document.createElement('li');
        nextLi.className = 'page-item' + (data.page >= data.total_pages ? ' disabled' : '');
        nextLi.innerHTML = '<a class="page-link" href="#" aria-label="Sonraki">&raquo;</a>';
        if (data.page < data.total_pages) {
            nextLi.querySelector('a').addEventListener('click', function(e) {
                e.preventDefault();
                runAspectSearch(data.page + 1);
            });
        }
        list.appendChild(nextLi);
    }

    function openChartInMasterSlot(dateStr, timeStr, titleStr) {
        var drawerEl = document.getElementById('chartsDrawer');
        var dateEl = document.getElementById('drawerChartDate');
        var timeEl = document.getElementById('drawerChartTime');
        var btnDrawerApply = document.getElementById('btnDrawerApplyChart');

        if (dateEl) dateEl.value = dateStr;
        if (timeEl) timeEl.value = timeStr.length === 5 ? timeStr + ':00' : timeStr;

        if (drawerEl) {
            drawerEl.setAttribute('data-current-owner-name', titleStr || 'Açı Haritası');
        }

        // Master slot key natal olarak ayarla
        window.activeKey = 'natal';

        if (btnDrawerApply) {
            btnDrawerApply.click();

            // Modalı kapat
            var modalEl = document.getElementById('aspectSearchModal');
            if (modalEl && window.bootstrap && window.bootstrap.Modal) {
                var modalInst = window.bootstrap.Modal.getInstance(modalEl) || window.bootstrap.Modal.getOrCreateInstance(modalEl);
                modalInst.hide();
            }
            if (drawerEl && window.bootstrap && window.bootstrap.Offcanvas) {
                var offInst = window.bootstrap.Offcanvas.getInstance(drawerEl);
                if (offInst) offInst.hide();
            }
        } else {
            // Fallback URL yönlendirme
            var params = new URLSearchParams();
            params.set('date', dateStr);
            params.set('time', timeStr.length === 5 ? timeStr + ':00' : timeStr);
            params.set('title', titleStr || 'Açı Haritası');
            params.set('preview', '1');
            window.location.href = '/panel?' + params.toString();
        }
    }

    function showLoading(show) {
        var spinner = document.getElementById('asLoadingSpinner');
        var btn = document.getElementById('btnRunAspectSearch');
        var empty = document.getElementById('asEmptyState');
        var results = document.getElementById('asResultsCard');

        if (show) {
            spinner.classList.remove('d-none');
            empty.classList.add('d-none');
            results.classList.add('d-none');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Taranıyor...';
        } else {
            spinner.classList.add('d-none');
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-magnifying-glass me-1"></i>Açıları Tara';
        }
    }

    function showError(msg) {
        var alertBox = document.getElementById('asErrorAlert');
        alertBox.textContent = msg;
        alertBox.classList.remove('d-none');
    }

    function hideError() {
        var alertBox = document.getElementById('asErrorAlert');
        alertBox.classList.add('d-none');
    }
})();
</script>