{{-- resources/views/frontend/panel/partials/progression-modal.blade.php --}}
{{-- İlerletim & Gezegen Dönüşleri (Transit Stepper & Planetary Returns) - Panel Sayfası Tam Ekran Görünümü --}}

<style>
    /* Tam Ekran Panel Düzeni (100vh Viewport Fitting - Dış Scroll Çubuğu Tamamen Kaldırıldı) */
    #progressionModal.modal,
    #progressionModal.modal.show {
        padding: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    #progressionModal::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    #progressionModal .modal-dialog,
    #progressionModal .modal-dialog.modal-fullscreen {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    #progressionModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        background: #f8fafc;
    }
    body[data-theme="dark"] #progressionModal .modal-content {
        background: #0b1118;
    }

    /* Compact Header Bar */
    #progressionModal .prog-header {
        background: linear-gradient(135deg, #092c25 0%, #0F5A4F 60%, #177869 100%);
        border-bottom: 1px solid rgba(110, 231, 183, 0.25);
        flex-shrink: 0;
        padding: 0.45rem 1rem;
        min-height: 52px;
    }
    #progressionModal .prog-header-icon {
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #6ee7b7;
        font-size: 0.85rem;
    }
    #progressionModal .prog-mode-pill {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.65rem;
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
        transition: all 0.15s ease;
        cursor: pointer;
        white-space: nowrap;
    }
    #progressionModal .prog-mode-pill:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }
    #progressionModal .prog-mode-pill.active {
        background: #ffffff;
        color: #0F5A4F;
        border-color: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    /* Modal Body (Fitted into remaining viewport height) */
    #progressionModal .prog-body-container {
        flex: 1 1 auto;
        height: calc(100vh - 52px) !important;
        max-height: calc(100vh - 52px) !important;
        min-height: 0;
        overflow: hidden !important;
        padding: 0.5rem 0.75rem;
        box-sizing: border-box;
    }
    #progressionModal .prog-body-container > .row {
        height: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    #progressionModal .prog-body-container > .row > [class*="col-"] {
        height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    @media (max-width: 991.98px) {
        #progressionModal .prog-body-container {
            overflow-y: auto !important;
            height: auto !important;
            max-height: calc(100vh - 52px) !important;
        }
    }

    /* Left & Right Panel Cards */
    #progressionModal .prog-canvas-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(15, 90, 79, 0.04);
        position: relative;
    }
    body[data-theme="dark"] #progressionModal .prog-canvas-card {
        background: #131c26;
        border-color: #233446;
    }

    /* Chart SVG Area */
    #progressionModal .prog-chart-wrapper {
        width: 100%;
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    #progressionModal .prog-chart-wrapper svg {
        width: auto !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 200px) !important;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.06));
    }
    @media (max-width: 991.98px) {
        #progressionModal .prog-chart-wrapper svg {
            max-height: 420px !important;
            width: 100% !important;
            height: auto !important;
        }
    }

    /* Moment Readout Banner */
    #progressionModal .prog-moment-banner {
        background: #f1f8f6;
        border: 1px solid #d1eae4;
        border-radius: 6px;
        color: #0F5A4F;
        flex-shrink: 0;
    }
    body[data-theme="dark"] #progressionModal .prog-moment-banner {
        background: #172a27;
        border-color: #1f4740;
        color: #6ee7b7;
    }

    /* Docked Bottom Controls */
    #progressionModal .prog-controls-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        flex-shrink: 0;
    }
    body[data-theme="dark"] #progressionModal .prog-controls-card {
        background: #16202c;
        border-color: #243547;
    }
    #progressionModal .prog-play-btn {
        background-color: #0F5A4F;
        border-color: #0F5A4F;
        color: #ffffff;
        font-weight: 700;
        transition: all 0.2s;
    }
    #progressionModal .prog-play-btn:hover {
        background-color: #0c483f;
        border-color: #0c483f;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(15, 90, 79, 0.35);
    }
    #progressionModal .prog-play-btn.is-playing {
        background-color: #dc2626 !important;
        border-color: #dc2626 !important;
        box-shadow: 0 0 14px rgba(220, 38, 38, 0.4) !important;
    }
    #progressionModal .prog-play-btn * {
        pointer-events: none;
    }

    /* Right Aspect Feed (İç Scroll Alanı - Gezegen Açıları İçin Bağımsız Kaydırma) */
    #progressionModal .prog-feed-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    #progressionModal .prog-feed-container::-webkit-scrollbar {
        width: 6px;
    }
    #progressionModal .prog-feed-container::-webkit-scrollbar-track {
        background: transparent;
    }
    #progressionModal .prog-feed-container::-webkit-scrollbar-thumb {
        background: rgba(15, 90, 79, 0.25);
        border-radius: 4px;
    }
    #progressionModal .prog-feed-container::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 90, 79, 0.5);
    }
    #progressionModal .prog-aspect-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 0.5rem 0.65rem;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    #progressionModal .prog-aspect-card:hover {
        border-color: #0F5A4F;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(15, 90, 79, 0.1);
    }
    #progressionModal .prog-aspect-card.is-active {
        border-color: #0F5A4F;
        background: #f0fdf9;
        box-shadow: 0 0 0 2px rgba(15, 90, 79, 0.25);
    }
    body[data-theme="dark"] #progressionModal .prog-aspect-card {
        background: #1a2533;
        border-color: #2b3e52;
    }
    body[data-theme="dark"] #progressionModal .prog-aspect-card.is-active {
        background: #14352e;
        border-color: #6ee7b7;
    }
    #progressionModal .prog-quick-year-btn {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #334155;
        font-weight: 600;
    }
    #progressionModal .prog-quick-year-btn:hover {
        background: #0F5A4F;
        border-color: #0F5A4F;
        color: #ffffff;
    }
    #progressionModal .prog-scrubber {
        cursor: pointer;
        accent-color: #0F5A4F;
    }
    #progressionModal .prog-pulse-alert {
        animation: progPulse 1.2s infinite alternate ease-in-out;
    }
    @keyframes progPulse {
        from { transform: scale(1); opacity: 0.9; }
        to { transform: scale(1.03); opacity: 1; box-shadow: 0 0 10px rgba(220, 38, 38, 0.5); }
    }
</style>

<div class="modal fade modal-modern" id="progressionModal" tabindex="-1" aria-labelledby="progressionModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content border-0">

            {{-- HEADER: Panel tarzı tek satır kompakt üst bar --}}
            <div class="prog-header text-white d-flex align-items-center justify-content-between gap-3">
                {{-- Sol: Başlık ve İkon --}}
                <div class="d-flex align-items-center gap-2 flex-shrink-0">
                    <div class="prog-header-icon rounded-circle d-flex align-items-center justify-content-center shadow-sm">
                        <i class="fa-solid fa-clock-rotate-left"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold text-white mb-0 d-flex align-items-center gap-2" id="progressionModalLabel">
                            <span>İlerletim & Gezegen Dönüşleri</span>
                            <span class="badge bg-warning text-dark fw-bold" style="font-size: 0.6rem;">Canlı / Hareketli</span>
                        </h6>
                    </div>
                </div>

                {{-- Orta: Hızlı Mod Seçici (Pills) --}}
                <div class="d-flex align-items-center gap-1 overflow-x-auto py-0 flex-nowrap" style="scrollbar-width: none;">
                    <button type="button" class="prog-mode-pill active" data-mode="transit" id="progModeTransit">
                        <i class="fa-solid fa-satellite me-1"></i> Transit İlerletimi
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Sun" id="progModeSolar">
                        <i class="fa-solid fa-sun text-warning me-1"></i> Solar Return
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Moon" id="progModeLunar">
                        <i class="fa-solid fa-moon text-info me-1"></i> Lunar Return
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Mercury" id="progModeMercury">
                        <span>☿</span> Merkür
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Venus" id="progModeVenus">
                        <span>♀</span> Venüs
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Mars" id="progModeMars">
                        <span>♂</span> Mars
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Jupiter" id="progModeJupiter">
                        <span>♃</span> Jüpiter
                    </button>
                    <button type="button" class="prog-mode-pill" data-mode="return" data-planet="Saturn" id="progModeSaturn">
                        <span>♄</span> Satürn
                    </button>
                </div>

                {{-- Sağ: Kapat Butonu --}}
                <div class="flex-shrink-0">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ t('close') }}" id="progModalCloseBtn"></button>
                </div>
            </div>

            {{-- BODY: 100vh Viewport'a Sığdırılmış İki Sütunlu Panel Düzeni --}}
            <div class="prog-body-container">
                <div class="row g-2 h-100">

                    {{-- SOL / ORTA: HARİTA KANVASI VE OYNATICI (Col 8 / Desktop) --}}
                    <div class="col-12 col-lg-7 col-xl-8 h-100 d-flex flex-column" style="min-height: 0;">
                        <div class="prog-canvas-card p-2 p-md-3 d-flex flex-column h-100 gap-2" style="min-height: 0;">

                            {{-- 1. Aktif An Bilgi Bandı (Kompakt) --}}
                            <div class="prog-moment-banner px-3 py-1 d-flex flex-wrap align-items-center justify-content-between gap-2 shadow-sm">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="fa-regular fa-calendar-check text-success"></i>
                                    <span class="fw-bold small">İlerleme Tarihi:</span>
                                    <span class="badge bg-success-subtle text-success-emphasis border border-success-subtle fw-bold" id="progCurrentDateBadge" style="font-size: 0.82rem;">
                                        {{ date('d.m.Y H:i') }}
                                    </span>
                                    <span class="text-muted small d-none d-sm-inline" id="progCurrentModeLabel">(Günün Transiti)</span>
                                </div>
                                <div id="progActiveHitAlert" class="d-none prog-pulse-alert badge bg-danger text-white py-1 px-2 fw-semibold" style="font-size: 0.75rem;">
                                    <i class="fa-solid fa-bolt me-1"></i> <span id="progActiveHitText">Kesin Açı Teması!</span>
                                </div>
                            </div>

                            {{-- 2. HARİTA SVG ALANI (Viewport Yüksekliğine Göre Otomatik Ölçeklenir) --}}
                            <div class="prog-chart-wrapper" id="progChartContainer">
                                <div class="text-center py-5" id="progLoadingSpinner">
                                    <div class="spinner-border text-success" role="status" style="width: 2.5rem; height: 2.5rem;">
                                        <span class="visually-hidden">Yükleniyor...</span>
                                    </div>
                                    <div class="mt-2 text-muted fw-semibold small">İlerletim haritası ve efemeris hesaplanıyor...</div>
                                </div>
                                <div id="progSvgWrap" class="w-100 h-100 d-none d-flex align-items-center justify-content-center"></div>
                            </div>

                            {{-- 3. ALTA SABİTLENMİŞ ZAMAN ÇUBUĞU VE OYNATICI (DOCK CONTROLS) --}}
                            <div class="prog-controls-card p-2 px-3">
                                <div class="d-flex align-items-center justify-content-between small text-muted mb-1 fw-semibold" style="font-size: 0.75rem;">
                                    <span id="progScrubberStartLabel">{{ date('d.m.Y') }}</span>
                                    <span class="text-dark fw-bold" id="progScrubberCurrentLabel">{{ date('d.m.Y') }}</span>
                                    <span id="progScrubberTargetLabel">{{ date('Y') + 2 }}-12-31</span>
                                </div>
                                <input type="range" class="form-range prog-scrubber w-100 mb-1" id="progTimelineRange" min="0" max="1000" value="0" step="1">

                                {{-- OYNATMA BUTONLARI & HIZ AYARLARI --}}
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 pt-0">
                                    <div class="btn-group shadow-sm" role="group">
                                        <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" id="progBtnRewind" title="Başa Dön">
                                            <i class="fa-solid fa-backward-step"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" id="progBtnStepBack" title="Geri Adım">
                                            <i class="fa-solid fa-step-backward"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm prog-play-btn py-1 px-3" id="progBtnPlay">
                                            <i class="fa-solid fa-play me-1" id="progPlayIcon"></i>
                                            <span id="progPlayText">İlerlet</span>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" id="progBtnStepForward" title="İleri Adım">
                                            <i class="fa-solid fa-step-forward"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" id="progBtnForwardEnd" title="Hedefe Git">
                                            <i class="fa-solid fa-forward-step"></i>
                                        </button>
                                    </div>

                                    {{-- ADIM & HIZ --}}
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="d-flex align-items-center gap-1">
                                            <small class="text-muted fw-semibold" style="font-size: 0.75rem;">Adım:</small>
                                            <select class="form-select form-select-sm py-0" id="progStepUnit" style="width: auto; font-size: 0.75rem;">
                                                <option value="1">1 Gün</option>
                                                <option value="7" selected>1 Hafta</option>
                                                <option value="30">1 Ay</option>
                                            </select>
                                        </div>
                                        <div class="d-flex align-items-center gap-1">
                                            <small class="text-muted fw-semibold" style="font-size: 0.75rem;">Hız:</small>
                                            <select class="form-select form-select-sm py-0" id="progPlaySpeed" style="width: auto; font-size: 0.75rem;">
                                                <option value="0.5">0.5x</option>
                                                <option value="1" selected>1x</option>
                                                <option value="2">2x</option>
                                                <option value="5">5x</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- DURAKSAMA SEÇENEĞİ --}}
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" id="progPauseOnHitSwitch" checked style="cursor: pointer;">
                                        <label class="form-check-label small fw-semibold text-muted" for="progPauseOnHitSwitch" style="font-size: 0.75rem; cursor: pointer;">
                                            Açıda Durakla (1 sn)
                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- SAĞ: KONTROL PANELİ & KESİN AÇILAR LİSTESİ (Col 4 / Desktop) --}}
                    <div class="col-12 col-lg-5 col-xl-4 h-100 d-flex flex-column gap-2" style="min-height: 0;">

                        {{-- 1. KONTROLLER KARTI --}}
                        <div class="prog-canvas-card p-2 px-3 flex-shrink-0">
                            {{-- A: TRANSIT MODU KONTROLLERİ --}}
                            <div id="progTransitControlsBlock">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <span class="fw-bold text-dark small d-flex align-items-center gap-1">
                                        <i class="fa-solid fa-sliders text-success"></i> Tarih Aralığı
                                    </span>
                                    {{-- Hızlı Yıl Seçiciler --}}
                                    <div class="d-flex gap-1">
                                        <button type="button" class="prog-quick-year-btn" data-add-months="6">+6A</button>
                                        <button type="button" class="prog-quick-year-btn" data-add-years="1">+1Y</button>
                                        <button type="button" class="prog-quick-year-btn" data-set-year="{{ date('Y') }}">{{ date('Y') }}</button>
                                        <button type="button" class="prog-quick-year-btn" data-set-year="{{ date('Y') + 1 }}">{{ date('Y') + 1 }}</button>
                                        <button type="button" class="prog-quick-year-btn" data-set-year="2028">2028</button>
                                    </div>
                                </div>
                                <div class="row g-1 mb-2">
                                    <div class="col-6">
                                        <input type="date" class="form-control form-control-sm py-1" id="progStartDateInput" value="{{ date('Y-m-d') }}" style="font-size: 0.78rem;">
                                    </div>
                                    <div class="col-6">
                                        <input type="date" class="form-control form-control-sm py-1" id="progTargetDateInput" value="{{ date('Y') + 2 }}-12-31" style="font-size: 0.78rem;">
                                    </div>
                                </div>

                                <div class="d-flex align-items-center justify-content-between gap-2">
                                    <div class="form-check mb-0">
                                        <input class="form-check-input" type="checkbox" id="progOnlyHardCheck" checked style="cursor: pointer;">
                                        <label class="form-check-label text-danger fw-bold" for="progOnlyHardCheck" style="font-size: 0.72rem; cursor: pointer;">
                                            Sert Açılar (0°, 90°, 180°)
                                        </label>
                                    </div>
                                    <button type="button" class="btn btn-success btn-sm fw-bold px-3 py-1 shadow-sm" id="progBtnScanAspects" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-magnifying-glass-chart me-1"></i> Taramayı Başlat
                                    </button>
                                </div>
                            </div>

                            {{-- B: GEZEGEN DÖNÜŞÜ (RETURN) KONTROLLERİ --}}
                            <div id="progReturnControlsBlock" class="d-none">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <span class="fw-bold text-dark small d-flex align-items-center gap-1">
                                        <i class="fa-solid fa-arrows-rotate text-primary"></i> <span id="progReturnTitleText">Solar Return Hesaplama</span>
                                    </span>
                                </div>
                                <div class="row g-2 align-items-center mb-1">
                                    <div class="col-6">
                                        <input type="number" class="form-control form-control-sm py-1" id="progReturnYearInput" value="{{ date('Y') }}" min="1920" max="2100" placeholder="Yıl" style="font-size: 0.8rem;">
                                        <input type="date" class="form-control form-control-sm py-1 d-none" id="progReturnDateInput" value="{{ date('Y-m-d') }}" style="font-size: 0.8rem;">
                                    </div>
                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary btn-sm w-100 fw-bold py-1 shadow-sm" id="progBtnCalculateReturn" style="font-size: 0.75rem;">
                                            <i class="fa-solid fa-circle-notch fa-spin d-none me-1" id="progReturnSpinner"></i>
                                            <i class="fa-solid fa-rotate me-1" id="progReturnIcon"></i> Dönüşü Koy
                                        </button>
                                    </div>
                                </div>
                                <small class="text-muted d-block" style="font-size: 0.7rem;" id="progReturnHintText">
                                    Gezegenin doğum anındaki tam derecesine ulaştığı an hesaplanır.
                                </small>
                            </div>
                        </div>

                        {{-- 2. TARANAN SERT VE KESİN AÇILAR LİSTESİ (Kalan Yüksekliği Doldurur & İç Scroll) --}}
                        <div class="prog-canvas-card p-2 px-3 flex-grow-1 d-flex flex-column" style="min-height: 0; overflow: hidden;">
                            <div class="d-flex align-items-center justify-content-between mb-1 flex-shrink-0">
                                <span class="fw-bold text-dark small d-flex align-items-center gap-1">
                                    <i class="fa-solid fa-timeline text-danger"></i> Taranan Kesin Açılar
                                </span>
                                <span class="badge bg-secondary" id="progHitsCountBadge" style="font-size: 0.7rem;">0 Açı</span>
                            </div>
                            <div class="text-muted mb-2 flex-shrink-0" style="font-size: 0.7rem;">
                                Açıya tıklayarak haritayı o ana sıçratabilirsiniz.
                            </div>

                            {{-- LİSTE AKIŞI (Sadece burası kayar) --}}
                            <div class="prog-feed-container d-flex flex-column gap-1 pe-1" id="progAspectFeed">
                                <div class="text-center py-4 text-muted small" id="progFeedEmptyState">
                                    <i class="fa-solid fa-satellite-dish fa-2x mb-2 text-muted opacity-50"></i>
                                    <div>Taranan açılar burada kronolojik olarak listelenecektir.</div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>