{{-- Son Tarihler görünümü — vade odaklı kanban panosu.
     Beklenen: $deadlineColumns (OperationController::deadlineColumns çıktısı)
     Not: Tamamlanan / iptal / yola çıkmış kalkışlar bu görünümde gizlenir. --}}

<div class="opsk-note">
    <i class="fas fa-circle-info"></i>
    Kayıtlar kalkış tarihine göre vade sütunlarına dizilir; tamamlanan, iptal edilen ve yola çıkan kalkışlar bu görünümde gösterilmez.
</div>

<div class="opsk-board">
    @foreach($deadlineColumns as $col)
        <div class="opsk-col opsk-{{ $col['key'] }}" style="--kc:{{ $col['color'] }}">
            <div class="opsk-head">
                <span class="opsk-ico"><i class="fas {{ $col['icon'] }}"></i></span>
                <div class="opsk-title">
                    <b>{{ $col['label'] }}</b>
                    <small>{{ $col['hint'] }}</small>
                </div>
                <span class="opsk-count">{{ $col['items']->count() }}</span>
            </div>

            <div class="opsk-body">
                @forelse($col['items'] as $d)
                    @php
                        $days = $d['days_until'];
                        $isCustom = (bool) ($d['is_custom_sale'] ?? false);
                        $occ = $d['capacity']['occupancy'];
                        $occColor = $occ >= 80 ? '#16a34a' : ($occ >= 40 ? '#334155' : '#f59e0b');
                    @endphp
                    <div class="opsk-card" data-quickview-url="{{ $d['quick_view_url'] }}"
                         data-ops-search="{{ $d['tour_name'] . ' ' . ($d['tour_code'] ?? '') }}"
                         style="--tc:{{ $d['type_color'] }}">
                        <div class="opsk-card-top">
                            <span class="opsk-type"><span class="dot"></span>{{ $d['type_label'] }}</span>
                            @if($days !== null)
                                <span class="opsk-due {{ $days < 0 ? 'late' : ($days === 0 ? 'now' : '') }}">
                                    @if($days < 0) <i class="fas fa-fire"></i> {{ abs((int) $days) }} gün gecikti
                                    @elseif($days === 0) <i class="fas fa-bolt"></i> Bugün
                                    @else <i class="far fa-clock"></i> {{ (int) $days }} gün kaldı @endif
                                </span>
                            @else
                                <span class="opsk-due none"><i class="fas fa-calendar-question"></i> Tarih yok</span>
                            @endif
                        </div>

                        <div class="opsk-name">{{ $d['tour_name'] }}</div>
                        @if($d['tour_code'])<div class="opsk-code">{{ $d['tour_code'] }}</div>@endif

                        <div class="opsk-meta">
                            <span title="Kalkış tarihi"><i class="far fa-calendar"></i> {{ $d['start']?->translatedFormat('d M Y') ?? 'Belirsiz' }}</span>
                            <span title="Yolcu"><i class="fas fa-users"></i> {{ $d['pax'] }}</span>
                            <span title="Rezervasyon"><i class="fas fa-ticket"></i> {{ $d['res_count'] }}</span>
                        </div>

                        <div class="opsk-foot">
                            <span class="opsk-rev">{{ number_format($d['revenue'], 0, ',', '.') }}₺</span>
                            @if(!$isCustom)
                                <span class="opsk-occ" title="Doluluk %{{ $occ }}">
                                    <span class="bar"><span style="width:{{ $occ }}%;background:{{ $occColor }}"></span></span>
                                    %{{ $occ }}
                                </span>
                            @else
                                <span class="opsk-freetag" title="Katalog dışı (serbest) satış"><i class="fas fa-box-open"></i> Serbest</span>
                            @endif
                            <span class="opsk-badge" style="--bc:{{ $d['badge']['color'] }}" title="{{ $d['badge']['label'] }}">
                                <i class="fas {{ $d['badge']['icon'] }}"></i>
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="opsk-empty">
                        <i class="fas fa-mug-hot"></i>
                        <span>Bu vadede kayıt yok</span>
                    </div>
                @endforelse
            </div>
        </div>
    @endforeach
</div>

<style>
    /* ── Son Tarihler kanban ── */
    .opsk-note { display:flex; align-items:center; gap:9px; font-size:.76rem; font-weight:600; color:#64748b;
        background:#f8fafc; border:1px dashed #e2e8f0; border-radius:12px; padding:9px 14px; margin-bottom:16px; }
    .opsk-note i { color:#94a3b8; }

    /* Sütunlar ekrana sığar: yatay kaydırma yok, dar ekranda alt satıra sarar. */
    .opsk-board { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 172px), 1fr));
        gap:12px; align-items:start; padding-bottom:6px; }

    .opsk-col { min-width:0;
        background:color-mix(in srgb, var(--kc) 4%, #f8fafc); border:1px solid color-mix(in srgb, var(--kc) 16%, #e2e8f0);
        border-radius:18px; overflow:hidden; position:relative; }
    .opsk-col::before { content:''; display:block; height:4px;
        background:linear-gradient(90deg, var(--kc), color-mix(in srgb, var(--kc) 45%, transparent)); }

    .opsk-head { display:flex; align-items:center; gap:8px; padding:11px 11px 9px; }
    .opsk-ico { width:30px; height:30px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:.76rem; background:linear-gradient(135deg, var(--kc), color-mix(in srgb, var(--kc) 70%, #0f172a));
        box-shadow:0 6px 14px -6px color-mix(in srgb, var(--kc) 65%, transparent); }
    .opsk-title { min-width:0; flex:1; }
    .opsk-title b { display:block; font-size:.82rem; font-weight:800; color:#0f172a; line-height:1.15;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .opsk-title small { display:block; font-size:.6rem; font-weight:600; color:#94a3b8; margin-top:1px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .opsk-count { margin-left:auto; flex-shrink:0; min-width:24px; height:24px; padding:0 7px; border-radius:9px;
        display:inline-flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:800;
        color:var(--kc); background:color-mix(in srgb, var(--kc) 12%, #fff); border:1px solid color-mix(in srgb, var(--kc) 26%, #fff); }
    .opsk-overdue .opsk-count { animation:opskPulse 2.2s ease-in-out infinite; }
    @keyframes opskPulse {
        0%, 100% { box-shadow:0 0 0 0 rgba(220,38,38,.34); }
        50% { box-shadow:0 0 0 6px rgba(220,38,38,0); }
    }

    /* Sütun yüksekliği sınırsız: kayıt sayısı ne olursa olsun kartlar sıkışmaz, sayfa uzar. */
    .opsk-body { padding:4px 8px 11px; display:flex; flex-direction:column; gap:8px; }

    .opsk-card { background:#fff; border:1px solid #e8edf4; border-radius:14px; padding:10px 11px 9px; cursor:pointer; min-width:0; flex:0 0 auto;
        position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
    .opsk-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tc,#334155); }
    .opsk-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--kc) 40%, #e2e8f0);
        box-shadow:0 12px 26px -12px color-mix(in srgb, var(--kc) 45%, rgba(15,23,42,.25)); }
    .opsk-overdue .opsk-card { border-color:#fecaca; background:linear-gradient(180deg,#fff,#fffafa); }

    .opsk-card-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; margin-bottom:6px; }
    .opsk-type { display:inline-flex; align-items:center; gap:5px; min-width:0; font-size:.6rem; font-weight:800;
        text-transform:uppercase; letter-spacing:.05em; color:var(--tc,#334155);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .opsk-type .dot { flex-shrink:0; }
    .opsk-type .dot { width:7px; height:7px; border-radius:50%; background:var(--tc,#334155); }

    .opsk-due { display:inline-flex; align-items:center; gap:4px; font-size:.62rem; font-weight:800;
        padding:2px 8px; border-radius:20px; color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; white-space:nowrap; }
    .opsk-due.late { color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
    .opsk-due.now { color:#15803d; background:#dcfce7; border-color:#bbf7d0; }
    .opsk-due.none { color:#64748b; background:#f1f5f9; border-color:#e2e8f0; }

    .opsk-name { font-size:.83rem; font-weight:800; color:#0f172a; line-height:1.3; overflow-wrap:anywhere; }
    .opsk-code { font-size:.63rem; font-weight:700; color:#94a3b8; font-family:'Courier New',monospace; margin-top:1px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .opsk-meta { display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:7px; font-size:.67rem; font-weight:600; color:#64748b; }
    .opsk-meta span { white-space:nowrap; }
    .opsk-meta i { color:#94a3b8; margin-right:3px; }

    .opsk-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:9px; padding-top:8px; border-top:1px dashed #eef2f6; }
    .opsk-rev { font-size:.78rem; font-weight:800; color:#0f172a; }
    .opsk-occ { display:inline-flex; align-items:center; gap:5px; font-size:.63rem; font-weight:700; color:#64748b; margin-left:auto; }
    .opsk-occ .bar { width:32px; height:5px; border-radius:5px; background:#eef2f6; overflow:hidden; display:inline-block; flex-shrink:0; }
    .opsk-occ .bar span { display:block; height:100%; border-radius:5px; }
    .opsk-freetag { display:inline-flex; align-items:center; gap:4px; font-size:.6rem; font-weight:800; text-transform:uppercase;
        letter-spacing:.04em; color:#6d28d9; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:20px; padding:2px 8px; margin-left:auto; }
    .opsk-badge { width:24px; height:24px; border-radius:8px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
        font-size:.62rem; color:var(--bc,#64748b); background:color-mix(in srgb, var(--bc,#64748b) 12%, #fff);
        border:1px solid color-mix(in srgb, var(--bc,#64748b) 26%, #fff); }

    .opsk-empty { text-align:center; padding:22px 8px; color:#b6c2d2; border:1.5px dashed color-mix(in srgb, var(--kc) 22%, #e2e8f0);
        border-radius:13px; font-size:.7rem; font-weight:700; }
    .opsk-empty i { display:block; font-size:1.15rem; margin-bottom:6px; opacity:.7; }
</style>