@php
    $c = $comb ?? null;
    $natal = $c ? $c->natalgezegen : null;
    $aci = $c ? (string)$c->aci : 'off';
    $orb = $c ? $c->aciorbu : 'off';
    $targetPlanet = $c ? $c->aciyapangezegen : null;
    $transitPlanet = $c ? $c->transitgezegen : null;
    $nokta = $c ? $c->nokta : null;
    $yonetici = $c ? $c->yonetici : null;
    $astroid = $c ? $c->astroid : null;
    $sabit = $c ? $c->sabityildiz : null;

    $hasTargetPlanet = !empty($targetPlanet);
    $hasTransit = !empty($transitPlanet);
    $hasNokta = !empty($nokta);
    $hasYonetici = !empty($yonetici);
    $hasAstroid = !empty($astroid);
    $hasSabit = !empty($sabit);
@endphp

<div class="combination-row card border-secondary-subtle bg-white shadow-sm p-3 mb-2" data-row-index="{{ $index }}">
    <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
        <span class="badge bg-primary-subtle text-primary fw-bold row-label">
            <i class="bi bi-diagram-3-fill me-1"></i> Kombinasyon #<span class="row-num">{{ $index + 1 }}</span>
        </span>
        <button type="button" class="btn btn-outline-danger btn-sm delete-combination-btn" onclick="removeCombinationRow(this)" title="Bu kombinasyonu kaldır">
            <i class="bi bi-trash"></i> Satırı Sil
        </button>
    </div>

    <div class="row g-3 align-items-start">
        {{-- SOL SÜTUN: NATAL GEZEGEN VE TÜR SEÇİMLERİ --}}
        <div class="col-lg-5 col-md-12">
            <div class="mb-2">
                <label class="form-label fw-semibold small text-muted mb-1">Natal Gezegen (Haritadaki Gezegen)</label>
                <select class="form-select form-select-sm natal-select" name="natalgezegen[]" onchange="onNatalPlanetChanged(this)">
                    <option value="off" {{ (!$natal || $natal == 'off') ? 'selected' : '' }}>Gezegen Seç</option>
                    <option value="gunes" {{ $natal == 'gunes' ? 'selected' : '' }}>☀️ Güneş</option>
                    <option value="ay" {{ $natal == 'ay' ? 'selected' : '' }}>🌙 Ay</option>
                    <option value="merkur" {{ $natal == 'merkur' ? 'selected' : '' }}>☿ Merkür</option>
                    <option value="venus" {{ $natal == 'venus' ? 'selected' : '' }}>♀ Venüs</option>
                    <option value="mars" {{ $natal == 'mars' ? 'selected' : '' }}>♂ Mars</option>
                    <option value="jupiter" {{ $natal == 'jupiter' ? 'selected' : '' }}>♃ Jüpiter</option>
                    <option value="saturn" {{ $natal == 'saturn' ? 'selected' : '' }}>♄ Satürn</option>
                    <option value="uranus" {{ $natal == 'uranus' ? 'selected' : '' }}>♅ Uranüs</option>
                    <option value="neptun" {{ $natal == 'neptun' ? 'selected' : '' }}>♆ Neptün</option>
                    <option value="pluto" {{ $natal == 'pluto' ? 'selected' : '' }}>♇ Plüto</option>
                </select>
            </div>

            <div class="row g-2 mt-1">
                {{-- Hedef Göstergeler --}}
                <div class="col-sm-6">
                    <div class="p-2 rounded bg-light border">
                        <small class="fw-bold d-block text-secondary mb-1">Hedef Seçiciler</small>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="aciyapangezegenler[]" value="1"
                                onchange="toggleTargetGroup(this, 'aciyapangezegenlerdiv')" {{ $hasTargetPlanet ? 'checked' : '' }}>
                            <label class="form-check-label small">Açı Yapan Gezegen</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="transit[]" value="1"
                                onchange="toggleTargetGroup(this, 'transitgezegen')" {{ $hasTransit ? 'checked' : '' }}>
                            <label class="form-check-label small">Transit Gezegen</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="noktalar[]" value="1"
                                onchange="toggleTargetGroup(this, 'noktalardiv')" {{ $hasNokta ? 'checked' : '' }}>
                            <label class="form-check-label small">Noktalar (ASC/MC..)</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="yoneticilikler[]" value="1"
                                onchange="toggleTargetGroup(this, 'yoneticievler')" {{ $hasYonetici ? 'checked' : '' }}>
                            <label class="form-check-label small">Yöneticilikler</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="astroidler[]" value="1"
                                onchange="toggleTargetGroup(this, 'astroidlerdiv')" {{ $hasAstroid ? 'checked' : '' }}>
                            <label class="form-check-label small">Astroidler</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input check-trigger" type="checkbox" name="sabityildizlar[]" value="1"
                                onchange="toggleTargetGroup(this, 'sabityildizlardiv')" {{ $hasSabit ? 'checked' : '' }}>
                            <label class="form-check-label small">Sabit Yıldızlar</label>
                        </div>
                    </div>
                </div>

                {{-- Nitelik ve Puanlar --}}
                <div class="col-sm-6">
                    <div class="p-2 rounded bg-light border">
                        <small class="fw-bold d-block text-secondary mb-1">Gezegen Durumu</small>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input" type="checkbox" name="iyicilgezegenler[]" value="1"
                                {{ $c?->iyicilgezegenler ? 'checked' : '' }}>
                            <label class="form-check-label small text-success">İyicil Gezegen</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input" type="checkbox" name="kotuculgezegenler[]" value="1"
                                {{ $c?->kotuculgezegenler ? 'checked' : '' }}>
                            <label class="form-check-label small text-danger">Kötücül Gezegen</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input" type="checkbox" name="pozitifacialangezegenler[]" value="1"
                                {{ $c?->pozitifacialangezegenler ? 'checked' : '' }}>
                            <label class="form-check-label small text-primary">Pozitif Açı Alan</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input" type="checkbox" name="negatifacialangezegenler[]" value="1"
                                {{ $c?->negatifacialangezegenler ? 'checked' : '' }}>
                            <label class="form-check-label small text-warning-emphasis">Negatif Açı Alan</label>
                        </div>
                        <div class="form-check form-check-sm">
                            <input class="form-check-input" type="checkbox" name="almuten[]" value="1"
                                {{ $c?->almuten ? 'checked' : '' }}>
                            <label class="form-check-label small text-info-emphasis">Almuten</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ORTA SÜTUN: AÇI VE ORB --}}
        <div class="col-lg-3 col-md-6">
            <div class="p-2 rounded bg-light border">
                <small class="fw-bold d-block text-secondary mb-2">Açı & Orb Toleransı</small>
                <div class="mb-2">
                    <label class="form-label small text-muted mb-1">Açı (Aspect)</label>
                    <select class="form-select form-select-sm" name="aci[]">
                        <option value="off" {{ $aci == 'off' ? 'selected' : '' }}>Açı Seç</option>
                        <option value="0" {{ $aci == '0' ? 'selected' : '' }}>0° - Kavuşum (Conjunction)</option>
                        <option value="30" {{ $aci == '30' ? 'selected' : '' }}>30° - Yarı Altmışlık (Semi-sextile)</option>
                        <option value="45" {{ $aci == '45' ? 'selected' : '' }}>45° - Yarım Kare (Semi-square)</option>
                        <option value="60" {{ $aci == '60' ? 'selected' : '' }}>60° - Altmışlık (Sextile)</option>
                        <option value="72" {{ $aci == '72' ? 'selected' : '' }}>72° - Beşlik (Quintile)</option>
                        <option value="90" {{ $aci == '90' ? 'selected' : '' }}>90° - Kare (Square)</option>
                        <option value="120" {{ $aci == '120' ? 'selected' : '' }}>120° - Üçgen (Trine)</option>
                        <option value="135" {{ $aci == '135' ? 'selected' : '' }}>135° - Sesquiquadrate</option>
                        <option value="144" {{ $aci == '144' ? 'selected' : '' }}>144° - Çift Beşlik (Bi-quintile)</option>
                        <option value="150" {{ $aci == '150' ? 'selected' : '' }}>150° - Görmeyen Açı (Inconjunct)</option>
                        <option value="180" {{ $aci == '180' ? 'selected' : '' }}>180° - Karşıt (Opposition)</option>
                    </select>
                </div>
                <div>
                    <label class="form-label small text-muted mb-1">Açı Orbu</label>
                    <select class="form-select form-select-sm" name="aciorbu[]">
                        <option value="off" {{ $orb == 'off' ? 'selected' : '' }}>Orb Seç</option>
                        <option value="orb1" {{ $orb == 'orb1' ? 'selected' : '' }}>Orb -1° / +1°</option>
                        <option value="orb3" {{ $orb == 'orb3' ? 'selected' : '' }}>Orb -3° / +3°</option>
                        <option value="orb5" {{ $orb == 'orb5' ? 'selected' : '' }}>Orb -5° / +5°</option>
                        <option value="orb7" {{ $orb == 'orb7' ? 'selected' : '' }}>Orb -7° / +7°</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- SAĞ SÜTUN: AÇI YAPILAN HEDEFİN DETAYLARI --}}
        <div class="col-lg-4 col-md-6">
            <div class="p-2 rounded bg-light border target-selectors-wrapper">
                <small class="fw-bold d-block text-secondary mb-2">Açı Yapılan Gösterge Detayı</small>

                {{-- 1. Açı Yapılan Natal Gezegen --}}
                <div class="mb-2 aciyapangezegenlerdiv {{ $hasTargetPlanet ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Açıdaki Gezegen</label>
                    <select class="form-select form-select-sm target-planet-select" name="aciyapangezegen[]">
                        <option value="off">Açı Yapan Gezegen Seç</option>
                        @foreach(['gunes'=>'Güneş','ay'=>'Ay','merkur'=>'Merkür','venus'=>'Venüs','mars'=>'Mars','jupiter'=>'Jüpiter','saturn'=>'Satürn','uranus'=>'Uranüs','neptun'=>'Neptün','pluto'=>'Plüto'] as $pk => $pn)
                            <option value="{{ $pk }}" {{ $targetPlanet == $pk ? 'selected' : '' }}>{{ $pn }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- 2. Transit Gezegen --}}
                <div class="mb-2 transitgezegen {{ $hasTransit ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Transit Gezegen</label>
                    <select class="form-select form-select-sm" name="transitgezegen[]">
                        <option value="off">Transit Gezegen Seç</option>
                        <option value="trgunes" {{ $transitPlanet == 'trgunes' ? 'selected' : '' }}>Transit Güneş</option>
                        <option value="tray" {{ $transitPlanet == 'tray' ? 'selected' : '' }}>Transit Ay</option>
                        <option value="trmerkur" {{ $transitPlanet == 'trmerkur' ? 'selected' : '' }}>Transit Merkür</option>
                        <option value="trvenus" {{ $transitPlanet == 'trvenus' ? 'selected' : '' }}>Transit Venüs</option>
                        <option value="trmars" {{ $transitPlanet == 'trmars' ? 'selected' : '' }}>Transit Mars</option>
                        <option value="trjupiter" {{ $transitPlanet == 'trjupiter' ? 'selected' : '' }}>Transit Jüpiter</option>
                        <option value="trsaturn" {{ $transitPlanet == 'trsaturn' ? 'selected' : '' }}>Transit Satürn</option>
                        <option value="trneptun" {{ $transitPlanet == 'trneptun' ? 'selected' : '' }}>Transit Neptün</option>
                        <option value="trpluto" {{ $transitPlanet == 'trpluto' ? 'selected' : '' }}>Transit Plüto</option>
                    </select>
                </div>

                {{-- 3. Noktalar --}}
                <div class="mb-2 noktalardiv {{ $hasNokta ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Özel Noktalar</label>
                    <select class="form-select form-select-sm" name="nokta[]">
                        <option value="off">Nokta Seç</option>
                        <option value="asc-yukselen" {{ $nokta == 'asc-yukselen' ? 'selected' : '' }}>ASC - Yükselen</option>
                        <option value="dsc-alcalan" {{ $nokta == 'dsc-alcalan' ? 'selected' : '' }}>DSC - Alçalan</option>
                        <option value="ıc-ayak-ucu" {{ $nokta == 'ıc-ayak-ucu' ? 'selected' : '' }}>IC - Ayak Ucu</option>
                        <option value="mc-tepenoktasi" {{ $nokta == 'mc-tepenoktasi' ? 'selected' : '' }}>MC - Tepe Noktası</option>
                        <option value="lilith" {{ $nokta == 'lilith' ? 'selected' : '' }}>Lilith</option>
                        <option value="kuzey-ay-dugumu" {{ $nokta == 'kuzey-ay-dugumu' ? 'selected' : '' }}>Kuzey Ay Düğümü (Rahu)</option>
                        <option value="guney-ay-dugumu" {{ $nokta == 'guney-ay-dugumu' ? 'selected' : '' }}>Güney Ay Düğümü (Ketu)</option>
                        <option value="sans-noktasi" {{ $nokta == 'sans-noktasi' ? 'selected' : '' }}>Şans Noktası</option>
                        <option value="vertex" {{ $nokta == 'vertex' ? 'selected' : '' }}>Vertex</option>
                    </select>
                </div>

                {{-- 4. Yöneticilikler --}}
                <div class="mb-2 yoneticievler {{ $hasYonetici ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Ev & Nokta Yöneticisi</label>
                    <select class="form-select form-select-sm" name="yonetici[]">
                        <option value="off">Yönetici Seç</option>
                        <option value="asc-yukselen-yoneticisi" {{ $yonetici == 'asc-yukselen-yoneticisi' ? 'selected' : '' }}>ASC - Yükselen Yöneticisi</option>
                        <option value="dsc-alcalan-yoneticisi" {{ $yonetici == 'dsc-alcalan-yoneticisi' ? 'selected' : '' }}>DSC - Alçalan Yöneticisi</option>
                        <option value="ıc-ayakucu-yoneticisi" {{ $yonetici == 'ıc-ayakucu-yoneticisi' ? 'selected' : '' }}>IC - Ayak Ucu Yöneticisi</option>
                        <option value="mc-tepe-noktasi-yoneticisi" {{ $yonetici == 'mc-tepe-noktasi-yoneticisi' ? 'selected' : '' }}>MC - Tepe Noktası Yöneticisi</option>
                        @for($evN = 1; $evN <= 12; $evN++)
                            <option value="{{ $evN }}-ev-yoneticisi" {{ $yonetici == "{$evN}-ev-yoneticisi" ? 'selected' : '' }}>{{ $evN }}. Evin Yöneticisi</option>
                        @endfor
                    </select>
                </div>

                {{-- 5. Astroidler --}}
                <div class="mb-2 astroidlerdiv {{ $hasAstroid ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Astroid</label>
                    <select class="form-select form-select-sm" name="astroid[]">
                        <option value="off">Astroid Seç</option>
                        <option value="juno" {{ $astroid == 'juno' ? 'selected' : '' }}>Juno</option>
                        <option value="ceres" {{ $astroid == 'ceres' ? 'selected' : '' }}>Ceres</option>
                        <option value="jupido" {{ $astroid == 'jupido' ? 'selected' : '' }}>Cupido</option>
                        <option value="chiron" {{ $astroid == 'chiron' ? 'selected' : '' }}>Chiron (Kiron)</option>
                    </select>
                </div>

                {{-- 6. Sabit Yıldızlar --}}
                <div class="mb-2 sabityildizlardiv {{ $hasSabit ? '' : 'd-none' }}">
                    <label class="form-label small text-muted mb-1">Sabit Yıldız</label>
                    <select class="form-select form-select-sm" name="sabityildiz[]">
                        <option value="off">Sabit Yıldız Seç</option>
                        <option value="beteljuse" {{ $sabit == 'beteljuse' ? 'selected' : '' }}>Betelgeuse</option>
                        <option value="aldebaran" {{ $sabit == 'aldebaran' ? 'selected' : '' }}>Aldebaran</option>
                        <option value="regulus" {{ $sabit == 'regulus' ? 'selected' : '' }}>Regulus</option>
                        <option value="fomalhaut" {{ $sabit == 'fomalhaut' ? 'selected' : '' }}>Fomalhaut</option>
                        <option value="antares" {{ $sabit == 'antares' ? 'selected' : '' }}>Antares</option>
                    </select>
                </div>

                <div class="no-target-hint text-muted small fst-italic {{ ($hasTargetPlanet || $hasTransit || $hasNokta || $hasYonetici || $hasAstroid || $hasSabit) ? 'd-none' : '' }}">
                    Sol taraftaki "Hedef Seçiciler" kutularını işaretleyerek açının karşı tarafındaki göstergeyi belirleyin.
                </div>
            </div>
        </div>
    </div>
</div>