@php
    $badge = $vm['badge'];
    $cap = $vm['capacity'];
    $typeKey = $vm['type_key'];
    $id = $vm['id'];
    $updateUrl = route('agency.operations.update-field', [$typeKey, $id]);
    $isTerminal = in_array($badge['key'], ['cancelled', 'completed']);
    $isGuaranteed = in_array($badge['key'], ['auto_guaranteed', 'manual_guaranteed']);

    $start = $vm['start'];
    $end = $vm['end'];
    $dateLabel = $start?->translatedFormat('d F Y') ?? 'Tarih atanmadı';
    if ($start && $end && $end->ne($start)) {
        $dateLabel = $start->isSameMonth($end)
            ? $start->format('d') . '–' . $end->translatedFormat('d F Y')
            : $start->translatedFormat('d M') . ' – ' . $end->translatedFormat('d M Y');
    }
@endphp

<x-quick-view.layout>
    <x-quick-view.header>
        <x-slot:avatar>
            <div style="display:flex;flex-direction:column;align-items:center;line-height:1;">
                <span style="font-size:1.55rem;font-weight:800;">{{ $start?->format('d') ?? '—' }}</span>
                <span style="font-size:.62rem;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.04em;">{{ $start?->translatedFormat('M') }}</span>
            </div>
        </x-slot:avatar>

        <x-slot:title>
            {{ $dateLabel }}@if($vm['start_time']) <span class="text-muted" style="font-weight:600;">· {{ $vm['start_time'] }}</span>@endif
        </x-slot:title>

        <x-slot:subtitle>
            @if($start)<span class="text-muted small fw-600">{{ $start->translatedFormat('l') }}</span>@endif
            <span class="fw-700 text-dark @if($vm['tour_qv_url'] ?? null) ops-tourlink @endif"
                  @if($vm['tour_qv_url'] ?? null) data-quickview-url="{{ $vm['tour_qv_url'] }}" title="Tur kartını aç" @endif><i class="fas fa-route me-1 text-muted"></i>{{ $vm['tour_name'] }}</span>
            <span class="badge border-0 px-2" style="background:{{ $vm['type_color'] }}1a;color:{{ $vm['type_color'] }}">{{ $vm['type_label'] }}</span>
            @if($vm['tour_code'])<span class="text-muted small fw-500" style="font-family:monospace">{{ $vm['tour_code'] }}</span>@endif
            <span class="badge border-0 px-2" style="background:{{ $badge['color'] }}1a;color:{{ $badge['color'] }}">
                <i class="fas {{ $badge['icon'] }} me-1"></i>{{ $badge['label'] }}
            </span>
        </x-slot:subtitle>

        <x-slot:metrics>
            <div class="qv-metric">
                <span class="qv-metric-label">DOLULUK</span>
                <span class="qv-metric-val">%{{ $cap['occupancy'] }}</span>
            </div>
            <div class="qv-metric">
                <span class="qv-metric-label">YOLCU</span>
                <span class="qv-metric-val">{{ $vm['pax'] }}</span>
            </div>
            <div class="qv-metric">
                <span class="qv-metric-label">CİRO</span>
                <span class="qv-metric-val text-success">{{ number_format($vm['revenue'], 0, ',', '.') }}₺</span>
            </div>
        </x-slot:metrics>

        <x-slot:tabs>
            <x-quick-view.tab id="overview" label="Operasyon" icon="fas fa-clipboard-check" active="true" />
            <x-quick-view.tab id="manifest" label="Yolcu Listesi" icon="fas fa-users" :count="$sales->count()" />
        </x-slot:tabs>
    </x-quick-view.header>

    <x-quick-view.content>
        {{-- ── OPERASYON ── --}}
        <div id="qv-tab-overview" class="qv-tab-panel active">
            <x-quick-view.main class="border-0">

                {{-- Kesin kalkış durumu --}}
                <div class="card border-0 p-4 mb-4" style="border-radius:20px;background:{{ $badge['color'] }}0f;">
                    <div class="d-flex align-items-center gap-3">
                        <div style="width:52px;height:52px;border-radius:16px;background:{{ $badge['color'] }};color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;">
                            <i class="fas {{ $badge['icon'] }}"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-800" style="color:{{ $badge['color'] }};font-size:1.05rem;">{{ $badge['label'] }}</div>
                            @if($op && $op->guaranteed_at)
                                <div class="small text-muted">
                                    {{ $op->guaranteed_mode === 'manual' ? 'Manuel olarak' : 'Otomatik (eşik dolunca)' }}
                                    kesin kalkışa alındı · {{ $op->guaranteed_at->translatedFormat('d F Y H:i') }}
                                    @if($op->guaranteedBy) · {{ $op->guaranteedBy->full_name ?? $op->guaranteedBy->name }}@endif
                                </div>
                            @elseif($op && $op->departure_status === 'cancelled')
                                <div class="small text-muted">{{ $op->cancellation_reason ?: 'İptal edildi' }}</div>
                            @else
                                <div class="small text-muted">Rezervasyon toplanıyor, henüz kesin kalkışa geçmedi.</div>
                            @endif
                        </div>
                    </div>

                    @if(!$isTerminal)
                        <div class="d-flex gap-2 mt-3">
                            @if(!$isGuaranteed)
                                <form method="POST" action="{{ route('agency.operations.guarantee', [$typeKey, $id]) }}" onsubmit="return confirm('Kesin kalkışa alınsın mı?')">
                                    @csrf
                                    <button class="btn btn-sm fw-700 text-white" style="background:#10b981;border-radius:10px;"><i class="fas fa-circle-check me-1"></i> Kesin Kalkışa Al</button>
                                </form>
                            @endif
                            <form method="POST" action="{{ route('agency.operations.complete', [$typeKey, $id]) }}" onsubmit="return confirm('Kalkış tamamlandı olarak işaretlensin mi?')">
                                @csrf
                                <button class="btn btn-sm btn-light fw-700" style="border-radius:10px;"><i class="fas fa-flag-checkered me-1"></i> Tamamla</button>
                            </form>
                            <form method="POST" action="{{ route('agency.operations.cancel', [$typeKey, $id]) }}" onsubmit="return confirm('Kalkış iptal edilsin mi?')">
                                @csrf
                                <button class="btn btn-sm fw-700 text-danger" style="background:#fee2e2;border-radius:10px;"><i class="fas fa-ban me-1"></i> İptal Et</button>
                            </form>
                        </div>
                    @endif
                </div>

                {{-- Doluluk + finans --}}
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="card border-0 bg-light p-3 h-100" style="border-radius:16px;">
                            <div class="small fw-800 text-muted mb-1">KAPASİTE</div>
                            <div class="fw-800 fs-5 text-dark">{{ $cap['used'] }} / {{ $cap['total'] ?: '∞' }}</div>
                            <div class="progress mt-2" style="height:6px;border-radius:6px;">
                                <div class="progress-bar" style="width:{{ $cap['occupancy'] }}%;background:#334155;"></div>
                            </div>
                            <div class="small text-muted mt-1">Kalan: {{ $cap['remaining'] }} · Rezerve: {{ $cap['reserved'] }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 bg-light p-3 h-100" style="border-radius:16px;">
                            <div class="small fw-800 text-muted mb-1">REZERVASYON</div>
                            <div class="fw-800 fs-5 text-dark">{{ $vm['res_count'] }}</div>
                            <div class="small text-muted mt-1">{{ $vm['pax'] }} yolcu</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 bg-light p-3 h-100" style="border-radius:16px;">
                            <div class="small fw-800 text-muted mb-1">CİRO</div>
                            <div class="fw-800 fs-5 text-success">{{ number_format($vm['revenue'], 0, ',', '.') }}₺</div>
                        </div>
                    </div>
                </div>

                {{-- Atanan kaynaklar --}}
                @if($assignments->count())
                    <div class="card border-0 bg-light p-4 mb-4" style="border-radius:20px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-800 text-dark mb-0"><i class="fas fa-people-carry-box text-secondary me-2"></i>Atanan Kaynaklar</h6>
                            <span class="fw-800 text-danger">{{ number_format($assignments->sum(fn($a) => $a->effective_cost), 0, ',', '.') }}₺</span>
                        </div>
                        @foreach($assignments as $a)
                            @php $rm = ['guide'=>['Rehber','fa-user-tie','#3b82f6'],'vehicle'=>['Araç','fa-bus','#10b981'],'captain'=>['Kaptan','fa-id-card','#8b5cf6']][$a->effective_role] ?? ['Kaynak','fa-cube','#64748b']; @endphp
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width:32px;height:32px;border-radius:9px;background:{{ $rm[2] }}1a;color:{{ $rm[2] }};display:flex;align-items:center;justify-content:center;"><i class="fas {{ $rm[1] }}"></i></div>
                                <div class="flex-grow-1"><span class="fw-700 text-dark">{{ $a->resource->name ?? 'Kaynak' }}</span> <span class="text-muted small">· {{ $rm[0] }}</span></div>
                                <span class="fw-700 text-dark">{{ number_format($a->effective_cost, 0, ',', '.') }}₺</span>
                            </div>
                        @endforeach
                        <a href="{{ $vm['show_url'] }}" class="small fw-700 mt-1 d-inline-block" style="color:#334155;"><i class="fas fa-gear me-1"></i>Kaynakları Yönet</a>
                    </div>
                @else
                    <div class="card border-0 bg-light p-3 mb-4" style="border-radius:16px;">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small"><i class="fas fa-people-carry-box me-1"></i>Henüz kaynak atanmadı</span>
                            <a href="{{ $vm['show_url'] }}" class="small fw-700" style="color:#334155;">Kaynak Ata →</a>
                        </div>
                    </div>
                @endif

                {{-- Hizmet onayları (yalnızca kültür/yurt dışı) --}}
                @if($vm['services'])
                    <div class="card border-0 bg-light p-4 mb-4" style="border-radius:20px;">
                        <h6 class="fw-800 text-dark mb-3"><i class="fas fa-clipboard-check text-secondary me-2"></i>Hizmet Onayları</h6>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach(['accommodation'=>['Konaklama','fa-bed'],'meals'=>['Yemek','fa-utensils'],'transportation'=>['Ulaşım','fa-bus']] as $svc => $info)
                                @php $on = $vm['services'][$svc]; @endphp
                                <button type="button" class="ops-svc-toggle btn btn-sm fw-700 {{ $on ? '' : 'text-muted' }}"
                                    style="border-radius:10px;border:1px solid {{ $on ? '#bbf7d0' : '#e2e8f0' }};background:{{ $on ? '#dcfce7' : '#fff' }};color:{{ $on ? '#16a34a' : '#64748b' }};"
                                    data-service="{{ $svc }}" data-confirmed="{{ $on ? 1 : 0 }}"
                                    data-url="{{ route('agency.operations.confirm-service', [$typeKey, $id]) }}">
                                    <i class="fas {{ $info[1] }} me-1"></i>{{ $info[0] }}
                                    <i class="fas {{ $on ? 'fa-check' : 'fa-xmark' }} ms-1"></i>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Operasyon notu (inline edit) --}}
                <div class="card border-0 bg-light p-4" style="border-radius:20px;">
                    <h6 class="fw-800 text-dark mb-2"><i class="fas fa-note-sticky text-secondary me-2"></i>Operasyon Notu</h6>
                    <div class="fw-600 inline-editable w-100" data-id="{{ $id }}" data-url="{{ $updateUrl }}"
                         data-field="operation_notes" data-type="textarea">{{ $op->operation_notes ?: '—' }}</div>
                </div>

            </x-quick-view.main>
        </div>

        {{-- ── MANİFESTO ── --}}
        <div id="qv-tab-manifest" class="qv-tab-panel">
            <x-quick-view.main class="border-0">
                @forelse($sales as $sale)
                    <div class="d-flex align-items-center gap-3 p-3 mb-2 ops-pax-row" style="border:1px solid #e2e8f0;border-radius:14px;">
                        <div style="width:40px;height:40px;border-radius:12px;background:#f1f5f9;color:#334155;display:flex;align-items:center;justify-content:center;font-weight:800;">
                            {{ mb_strtoupper(mb_substr($sale->customer->first_name ?? 'M', 0, 1)) }}
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-700 text-dark">
                                {{ $sale->customer->first_name ?? '' }} {{ $sale->customer->last_name ?? '' }}
                            </div>
                            <div class="small text-muted">{{ $sale->sale_code }} · {{ $sale->total_participants }} yolcu</div>
                        </div>
                        <span class="badge border-0 px-2" style="background:{{ $sale->status_color }}1a;color:{{ $sale->status_color }}">
                            {{ $sale->status_label }}
                        </span>
                        <div class="fw-800 text-dark">{{ number_format($sale->total_amount, 0, ',', '.') }}₺</div>
                        <div class="d-flex gap-1 ms-2">
                            <button type="button" class="ops-pax-btn" title="Yolcu (Kişi) Kartı"
                                onclick="event.stopPropagation(); openCustomerDrawer({{ $sale->customer_id }})"><i class="fas fa-user"></i></button>
                            <button type="button" class="ops-pax-btn" title="Satış Kartı"
                                onclick="event.stopPropagation(); openSaleDrawer({{ $sale->id }})"><i class="fas fa-receipt"></i></button>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-user-slash fa-2x mb-3 d-block" style="color:#cbd5e1;"></i>
                        Bu kalkışa bağlı yolcu kaydı yok.
                    </div>
                @endforelse
            </x-quick-view.main>
        </div>
    </x-quick-view.content>
</x-quick-view.layout>

<style>
    .ops-pax-btn { width:32px; height:32px; border-radius:9px; border:1px solid #e2e8f0; background:#fff; color:#64748b; display:inline-flex; align-items:center; justify-content:center; transition:all .18s; cursor:pointer; font-size:.8rem; }
    .ops-pax-btn:hover { background:#334155; border-color:#334155; color:#fff; transform:translateY(-1px); }
    .ops-pax-row:hover { border-color:#cbd5e1 !important; background:#f8fafc; }
    .ops-tourlink { cursor:pointer; transition:color .15s; }
    .ops-tourlink:hover { color:#0f172a !important; text-decoration:underline; text-underline-offset:3px; }
</style>

<script>
(function () {
    if (!window.opsToggleService) {
        window.opsToggleService = function (btn) {
            const url = btn.dataset.url;
            const service = btn.dataset.service;
            const confirmed = btn.dataset.confirmed === '1' ? 0 : 1;
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ service: service, confirmed: confirmed })
            })
            .then(r => r.json())
            .then(d => {
                if (d.success) {
                    btn.dataset.confirmed = confirmed;
                    btn.style.background = confirmed ? '#dcfce7' : '#fff';
                    btn.style.color = confirmed ? '#16a34a' : '#64748b';
                    btn.style.borderColor = confirmed ? '#bbf7d0' : '#e2e8f0';
                    const mark = btn.querySelector('i:last-child');
                    if (mark) mark.className = 'fas ms-1 ' + (confirmed ? 'fa-check' : 'fa-xmark');
                    if (typeof toastr !== 'undefined') toastr.success(d.message);
                }
            });
        };
    }
    document.querySelectorAll('.ops-svc-toggle').forEach(function (b) {
        b.addEventListener('click', function () { window.opsToggleService(b); });
    });
})();
</script>