{{-- Tarihi belirsiz kayıtlar uyarısı — kart ve tablo görünümlerinin en üstünde.
     Beklenen: $undated (start === null olan kalkış/satış kayıtları koleksiyonu) --}}

<div class="ops-warn" id="opsUndatedWarn">
    <div class="ops-warn-head">
        <span class="ops-warn-ico"><i class="fas fa-calendar-xmark"></i></span>
        <div class="ops-warn-txt">
            <b>Tarihi belirsiz {{ $undated->count() }} kayıt</b>
            <small>Operasyon tarihi girilmediği için gün planına ve vade takibine dahil edilemiyor. Kayda tıklayıp tarihi tamamlayın.</small>
        </div>
        <button type="button" class="ops-warn-tgl" onclick="opsToggleUndated(this)" title="Listeyi aç / kapat">
            <span class="n">{{ $undated->count() }}</span>
            <i class="fas fa-chevron-up"></i>
        </button>
    </div>

    <div class="ops-warn-list">
        @foreach($undated as $d)
            <div class="ops-warn-item" data-quickview-url="{{ $d['quick_view_url'] }}"
                 data-ops-search="{{ $d['tour_name'] . ' ' . ($d['tour_code'] ?? '') }}"
                 title="Kaydı açıp tarih gir">
                <span class="wi-ic"><i class="fas {{ $d['badge']['icon'] }}"></i></span>
                <div class="wi-t">
                    <b>{{ $d['tour_name'] }}</b>
                    @if($d['tour_code'])<small>{{ $d['tour_code'] }}</small>@endif
                </div>
                <span class="wi-m" title="Yolcu"><i class="fas fa-users"></i> {{ $d['pax'] }}</span>
                <span class="wi-m" title="Rezervasyon"><i class="fas fa-ticket"></i> {{ $d['res_count'] }}</span>
                <span class="wi-rev">{{ number_format($d['revenue'], 0, ',', '.') }}₺</span>
                <span class="wi-go"><i class="fas fa-arrow-right"></i></span>
            </div>
        @endforeach
    </div>
</div>

<style>
    /* ── Tarihi belirsiz uyarı bloğu ── */
    .ops-warn { position:relative; overflow:hidden; margin-bottom:22px; border-radius:18px;
        background:linear-gradient(180deg,#fffbeb,#fffdf5); border:1px solid #fde68a;
        box-shadow:0 10px 26px -18px rgba(180,83,9,.55); }
    .ops-warn::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
        background:linear-gradient(180deg,#f59e0b,#d97706); }
    .ops-warn::after { content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
        background:radial-gradient(circle, rgba(245,158,11,.14), transparent 70%); pointer-events:none; }

    .ops-warn-head { display:flex; align-items:center; gap:12px; padding:13px 16px 13px 19px; }
    .ops-warn-ico { width:38px; height:38px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:.95rem; background:linear-gradient(135deg,#f59e0b,#d97706);
        box-shadow:0 8px 16px -8px rgba(217,119,6,.85); }
    .ops-warn-txt { min-width:0; }
    .ops-warn-txt b { display:block; font-size:.9rem; font-weight:800; color:#7c2d12; line-height:1.2; }
    .ops-warn-txt small { display:block; font-size:.73rem; font-weight:600; color:#a16207; margin-top:2px; }

    .ops-warn-tgl { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
        background:#fff; border:1px solid #fcd34d; border-radius:11px; padding:6px 11px; color:#b45309;
        font-size:.78rem; font-weight:800; transition:background .18s, border-color .18s; }
    .ops-warn-tgl:hover { background:#fffbeb; border-color:#f59e0b; }
    .ops-warn-tgl .n { min-width:18px; }
    .ops-warn-tgl i { font-size:.68rem; transition:transform .22s ease; }

    .ops-warn-list { display:flex; flex-direction:column; gap:7px; padding:0 14px 14px 19px; max-height:320px; overflow-y:auto; }
    .ops-warn-list::-webkit-scrollbar { width:7px; }
    .ops-warn-list::-webkit-scrollbar-thumb { background:#fcd34d; border-radius:7px; }
    .ops-warn.collapsed .ops-warn-list { display:none; }
    .ops-warn.collapsed .ops-warn-tgl i { transform:rotate(180deg); }

    .ops-warn-item { display:flex; align-items:center; gap:11px; cursor:pointer; flex:0 0 auto; padding:9px 12px; border-radius:12px;
        background:#fff; border:1px solid #fef3c7; transition:transform .16s, box-shadow .16s, border-color .16s; }
    .ops-warn-item:hover { transform:translateX(3px); border-color:#fcd34d; box-shadow:0 8px 18px -12px rgba(180,83,9,.6); }
    .ops-warn-item .wi-ic { width:28px; height:28px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center;
        font-size:.72rem; color:#b45309; background:#fffbeb; border:1px solid #fde68a; }
    .ops-warn-item .wi-t { min-width:0; flex:1; }
    .ops-warn-item .wi-t b { display:block; font-size:.82rem; font-weight:800; color:#0f172a; line-height:1.25;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ops-warn-item .wi-t small { font-size:.65rem; font-weight:700; color:#94a3b8; font-family:'Courier New',monospace; }
    .ops-warn-item .wi-m { flex-shrink:0; font-size:.72rem; font-weight:700; color:#64748b; }
    .ops-warn-item .wi-m i { color:#cbd5e1; margin-right:3px; }
    .ops-warn-item .wi-rev { flex-shrink:0; font-size:.82rem; font-weight:800; color:#0f172a; min-width:74px; text-align:right; }
    .ops-warn-item .wi-go { width:26px; height:26px; flex-shrink:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
        font-size:.66rem; color:#b45309; background:#fef3c7; transition:background .16s; }
    .ops-warn-item:hover .wi-go { background:#fde68a; }

    @media (max-width:720px) {
        .ops-warn-item .wi-m { display:none; }
        .ops-warn-txt small { display:none; }
    }
</style>

<script>
    function opsToggleUndated(btn) {
        btn.closest('.ops-warn').classList.toggle('collapsed');
    }
</script>