{{-- Pazaryeri seçimi — LEDGER kartında minimal "pill bulutu" tasarımı.
     Kategori çipleriyle aynı dil: tıkla → seç/kaldır, yıldız → ana pazar.
     JS kancaları _quick-view-crud-script ile AYNI (tamamı delegasyonlu):
       [data-pqv-mp-sync][data-pqv-mp-primaryid] > .pqv-mp-card > [data-pqv-mp] + .pqv-mp-star[data-pqv-mp-primary]
     Script .pqv-mp-card üzerinde is-primary-mp sınıfını ve yıldız ikonunu (fas/far) günceller;
     bu sınıf/yapı adları bu yüzden DEĞİŞTİRİLEMEZ. Görünüm .qvmp kapsamıyla ezilir.
     Günübirlik, kültür ve yurtdışı turlarının ortak pazaryeri kartıdır.
     Beklenen: $allMarketplaces, $selectedIds, $syncUrl — Opsiyonel: $primaryId --}}
@php
    $primaryId = (int) ($primaryId ?? ($tour->product->primary_marketplace_id ?? 0));
    // Ana pazar yalnızca SEÇİLİ pazaryerlerinden biriyse geçerlidir
    $primarySet = $primaryId > 0 && $selectedIds->contains($primaryId);
    $primaryName = $primarySet ? optional($allMarketplaces->firstWhere('id', $primaryId))->name : null;
@endphp
<div class="pfx">
    <div class="pfx-top">
        <span class="pfx-top-t"><i class="fas fa-store"></i> Pazaryerleri</span>
        @if($primarySet)
            <span class="qvmp-primary-chip" title="Fiyatlar bu pazardan okunur"><i class="fas fa-star"></i> {{ $primaryName }}</span>
        @endif
        @if($allMarketplaces->isNotEmpty())
            <span class="qmp-auto"><i class="fas fa-bolt"></i> Otomatik kayıt</span>
        @endif
    </div>
    <div class="pfx-body">
        @if($allMarketplaces->isEmpty())
            <div class="qmp-none">
                <i class="fas fa-store-slash"></i>
                <b>Tanımlı pazaryeri yok</b>
                <span>Önce acente ayarlarından pazaryeri tanımlayın.</span>
            </div>
        @else
            @if(!$primarySet && $selectedIds->isNotEmpty())
                <div class="qvmp-warn">
                    <i class="fas fa-triangle-exclamation"></i>
                    <span><b>Ana pazar seçilmedi</b> — bir pazaryerinin yıldızına basın; turun ana fiyatı ve tarih fiyat matrisinin tabanı o pazardan okunur.</span>
                </div>
            @endif

            <div class="qvmp" data-pqv-mp-sync="{{ $syncUrl }}" data-pqv-mp-primaryid="{{ $primaryId ?: '' }}">
                @foreach($allMarketplaces as $mp)
                    <label class="pqv-mp-card {{ $primaryId === $mp->id ? 'is-primary-mp' : '' }}">
                        <input type="checkbox" data-pqv-mp value="{{ $mp->id }}" @checked($selectedIds->contains($mp->id))>
                        <i class="fas fa-check qvmp-check"></i>
                        <span class="qvmp-name">{{ $mp->name }}</span>
                        <button type="button" class="pqv-mp-star" data-pqv-mp-primary="{{ $mp->id }}"
                                title="{{ $primaryId === $mp->id ? 'Ana pazar' : 'Ana pazar yap' }}">
                            <i class="{{ $primaryId === $mp->id ? 'fas' : 'far' }} fa-star"></i>
                        </button>
                    </label>
                @endforeach
            </div>

            <div class="pfx-note" style="padding-left:0;padding-bottom:0">
                <i class="fas fa-circle-info"></i>
                Tıklayınca seçilir, yıldız <b>ana pazarı</b> belirler — değişiklik anında kaydedilir.
            </div>
        @endif
    </div>
</div>
@once
<style>
    /* ── Pazaryeri pill bulutu (.qvmp kapsamı, _quick-view-styles'taki kart tabanını ezer) ── */
    .qvmp { display: flex; flex-wrap: wrap; gap: 8px; }

    .qvmp .pqv-mp-card {
        position: relative; margin: 0; user-select: none;
        display: inline-flex; align-items: center; gap: 7px;
        padding: 6px 6px 6px 14px; border: 1.5px solid #e2e8f0; border-radius: 999px;
        background: #fff; color: #64748b; cursor: pointer;
        font-size: .8rem; font-weight: 700; line-height: 1;
        transition: all .18s cubic-bezier(.34, 1.3, .6, 1);
    }
    .qvmp .pqv-mp-card input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    .qvmp .pqv-mp-card:hover { border-color: #bfdbfe; color: #1d4ed8; background: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px -5px rgba(37, 99, 235, .35); }

    /* Seçim onay ikonu: seçilince yaylanarak açılır (kategori çipleriyle aynı hareket) */
    .qvmp .qvmp-check {
        font-size: .58rem; width: 0; opacity: 0; overflow: hidden;
        transform: scale(.4) rotate(-90deg);
        transition: all .18s cubic-bezier(.34, 1.3, .6, 1);
    }
    .qvmp .pqv-mp-card:has(input:checked) { background: #0f172a; border-color: #0f172a; color: #fff; }
    .qvmp .pqv-mp-card:has(input:checked) .qvmp-check { width: .62rem; opacity: 1; transform: none; color: #93c5fd; }
    .qvmp .qvmp-name { white-space: nowrap; }

    /* Yıldız: pasif pill'de sönük, hover'da belirir; ana pazarda dolu ve amber */
    .qvmp .pqv-mp-star {
        border: 0; cursor: pointer; margin: 0; padding: 0;
        width: 22px; height: 22px; border-radius: 50%;
        display: grid; place-items: center; font-size: .68rem; line-height: 1;
        background: transparent; color: #cbd5e1; opacity: .45;
        transition: opacity .15s, color .15s, background .15s, transform .15s;
    }
    .qvmp .pqv-mp-card:hover .pqv-mp-star { opacity: 1; }
    .qvmp .pqv-mp-star:hover { color: #f59e0b; background: rgba(245, 158, 11, .14); transform: scale(1.12); }
    .qvmp .pqv-mp-card:has(input:checked) .pqv-mp-star { color: rgba(255, 255, 255, .55); opacity: .8; }
    .qvmp .pqv-mp-card:has(input:checked) .pqv-mp-star:hover { color: #fbbf24; background: rgba(251, 191, 36, .18); }

    /* Ana pazar: amber halka + dolu yıldız (is-primary-mp sınıfını script de canlı toggle'lar) */
    .qvmp .pqv-mp-card.is-primary-mp {
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
    }
    .qvmp .pqv-mp-card.is-primary-mp .pqv-mp-star { color: #f59e0b; opacity: 1; }
    .qvmp .pqv-mp-card.is-primary-mp:has(input:checked) .pqv-mp-star { color: #fbbf24; }

    /* Kart başlığındaki ana pazar rozeti */
    .qvmp-primary-chip {
        display: inline-flex; align-items: center; gap: 5px; max-width: 40%;
        font-size: .64rem; font-weight: 800; color: #92400e;
        background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px;
        padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qvmp-primary-chip i { color: #f59e0b; font-size: .58rem; }

    /* İnce uyarı şeridi: ana pazar seçilmemiş */
    .qvmp-warn {
        display: flex; align-items: baseline; gap: 7px;
        margin-bottom: .6rem; padding: 5px 10px;
        background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
        font-size: .7rem; font-weight: 600; color: #92400e; line-height: 1.45;
    }
    .qvmp-warn i { color: #f59e0b; font-size: .66rem; }
</style>
@endonce