@extends('restaurant.layout')
@section('title', 'شاشة المطبخ (KDS)')
@section('main_class', 'full')

@push('styles')
<style>
    .kbar{background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap}
    .kbar .ttl b{font-size:16px} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-left:6px;animation:pl 1.6s infinite}
    .dot.off{background:var(--red);animation:none}
    @keyframes pl{50%{opacity:.35}}
    .chips{display:flex;gap:6px;margin:0 auto;background:var(--bg);border:1px solid var(--line);padding:4px;border-radius:14px;flex-wrap:wrap}
    .chips button{border:0;background:transparent;padding:6px 14px;border-radius:10px;cursor:pointer;font-weight:700;color:var(--text)}
    .chips button.on{background:var(--primary);color:#fff}
    .chips button b{background:rgba(0,0,0,.1);border-radius:8px;padding:0 7px;margin-right:4px;font-size:12px}
    .clock{font-weight:800;color:var(--orange);direction:ltr}
    .board{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start}
    .kc{background:var(--card);border:2px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
    .kc.new{border-color:var(--orange)} .kc.preparing{border-color:var(--yellow)} .kc.ready{border-color:var(--green)}
    .kc.late{animation:late 1.2s infinite}
    @keyframes late{50%{box-shadow:0 0 0 4px rgba(239,68,68,.35)}}
    .kc .hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg)}
    .kc.new .hd{background:var(--orange-soft)} .kc.preparing .hd{background:var(--yellow-soft)} .kc.ready .hd{background:var(--green-soft)}
    .kc .no{font-size:26px;font-weight:800;line-height:1}
    .kc .tm{font-weight:800;direction:ltr} .kc.warn .tm{color:var(--orange)} .kc.late .tm{color:var(--red)}
    .kc .meta{padding:6px 14px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px dashed var(--line)}
    .kc ul{list-style:none;margin:0;padding:8px 14px}
    .kc li{padding:5px 0;border-bottom:1px dotted var(--line);display:flex;gap:8px;font-size:15px}
    .kc li:last-child{border:0} .kc li .q{font-weight:800;color:var(--primary);min-width:28px}
    .kc li .s{color:var(--muted);font-size:12px}
    .kc .note{margin:0 14px 8px;background:var(--yellow-soft);border-radius:8px;padding:6px 10px;font-size:12px}
    .kc .ft{padding:10px 14px;display:flex;gap:8px}
    .kc .ft .btn{flex:1;padding:11px;font-size:15px}
    .none{grid-column:1/-1;text-align:center;padding:70px 10px;color:var(--muted)}
    .none .ic{font-size:64px}
</style>
@endpush

@section('content')
<div class="kbar no-print">
    <div class="ttl"><b>👨‍🍳 شاشة تحضير المطبخ (KDS)</b><span class="dot" id="live"></span><div class="muted small">متابعة وتحديث حالات الطلبات لحظياً</div></div>
    <div class="chips" id="chips">
        <button data-f="all" class="on">الكل <b id="c-all">0</b></button>
        <button data-f="new">⏳ بانتظار التحضير <b id="c-new">0</b></button>
        <button data-f="preparing">🔥 جاري التحضير <b id="c-preparing">0</b></button>
        <button data-f="ready">✅ جاهز للتسليم <b id="c-ready">0</b></button>
    </div>
    <select class="inp" id="branch" style="width:150px" onchange="KDS.setBranch(this.value)">
        @foreach($branches as $b)<option value="{{ $b->id }}" @selected($b->id == $branchId)>{{ $b->name }}</option>@endforeach
    </select>
    <span class="clock" id="clock"></span>
    <button class="btn soft sm" id="snd" onclick="KDS.toggleSound()">🔔 التنبيه مفعّل</button>
    <a class="btn ghost sm" href="{{ route('restaurant.display') }}?branch={{ $branchId }}" target="_blank">📺 شاشة العميل (TV)</a>
    <a class="btn ghost sm" href="{{ route('restaurant.pos') }}">← الكاشير</a>
    <button class="btn ghost sm" onclick="RS.fullscreen()">⛶</button>
</div>
<div class="board" id="board"></div>
@endsection

@push('scripts')
<script>
const KDS = (function () {
    const URL_FEED = @json(route('restaurant.kitchen.feed'));
    const URL_STATUS = @json(url('restaurant/kitchen/orders/__ID__/status'));
    const $ = id => document.getElementById(id);
    let branch = {{ (int) $branchId }}, filter = 'all', orders = [], seen = null, off = 0, sound = true, timer;
    const NEXT = {new: ['preparing', '▶ بدء التحضير', 'orange'], preparing: ['ready', '✔ جاهز للتسليم', 'green'], ready: ['delivered', '📦 تم التسليم للعميل', 'navy']};
    const PREV = {preparing: 'new', ready: 'preparing'};
    const TYPE_ICON = {dine_in: '🍽️', takeaway: '🥡', delivery: '🛵'};

    function pull() {
        RS.api(URL_FEED + '?branch=' + branch).then(r => {
            off = r.now - Math.floor(Date.now() / 1000);
            const ids = r.orders.map(o => o.id);
            if (seen !== null) {
                const fresh = r.orders.filter(o => !seen.has(o.id));
                if (fresh.length) { if (sound) RS.beep([784, 988, 1175]); RS.toast('🆕 طلب جديد #' + fresh[fresh.length - 1].queue, 'ok'); }
            }
            seen = new Set(ids); orders = r.orders; $('live').classList.remove('off'); draw();
        }).catch(() => $('live').classList.add('off'));
    }

    function elapsed(o) { return Math.max(0, Math.floor(Date.now() / 1000) + off - o.created); }
    function fmt(s) { const m = Math.floor(s / 60), x = s % 60; return String(m).padStart(2, '0') + ':' + String(x).padStart(2, '0'); }

    function draw() {
        const c = {new: 0, preparing: 0, ready: 0};
        orders.forEach(o => c[o.status]++);
        $('c-all').textContent = orders.length; $('c-new').textContent = c.new; $('c-preparing').textContent = c.preparing; $('c-ready').textContent = c.ready;
        const list = orders.filter(o => filter === 'all' || o.status === filter);
        if (!list.length) {
            $('board').innerHTML = '<div class="none"><div class="ic">👨‍🍳</div><h3>لا توجد طلبات نشطة في المطبخ حالياً</h3><div class="small">ستظهر الطلبات الجديدة هنا تلقائياً فور تسجيلها من الكاشير</div></div>';
            return;
        }
        $('board').innerHTML = list.map(o => {
            const s = elapsed(o), cls = o.status !== 'ready' ? (s > 900 ? 'late' : (s > 480 ? 'warn' : '')) : '';
            const nx = NEXT[o.status];
            return `<div class="kc ${o.status} ${cls}" data-id="${o.id}">
              <div class="hd"><div><div class="no">#${o.queue}</div><div class="small muted">${RS.esc(o.number)}</div></div><div class="tm" data-t="${o.id}">${fmt(s)}</div></div>
              <div class="meta"><span class="badge blue">${TYPE_ICON[o.type] || ''} ${RS.esc(o.type_label)}</span>${o.table ? `<span class="badge">طاولة ${RS.esc(o.table)}</span>` : ''}${o.driver ? `<span class="badge gray">🛵 ${RS.esc(o.driver)}</span>` : ''}</div>
              <ul>${o.items.map(i => `<li><span class="q">${i.qty}×</span><span><b>${RS.esc(i.name)}</b> ${i.size ? `<span class="s">(${RS.esc(i.size)})</span>` : ''}${i.notes ? `<div class="s">📝 ${RS.esc(i.notes)}</div>` : ''}</span></li>`).join('')}</ul>
              ${o.notes ? `<div class="note">📝 ${RS.esc(o.notes)}</div>` : ''}
              <div class="ft"><button class="btn ${nx[2]}" data-go="${nx[0]}">${nx[1]}</button>${PREV[o.status] ? `<button class="btn ghost" title="رجوع للحالة السابقة" data-go="${PREV[o.status]}" style="flex:0">↩</button>` : ''}</div></div>`;
        }).join('');
    }

    $('board').addEventListener('click', e => {
        const b = e.target.closest('[data-go]'); if (!b) return;
        const id = b.closest('.kc').dataset.id; b.disabled = true;
        RS.api(URL_STATUS.replace('__ID__', id), {body: {status: b.dataset.go}}).then(pull).catch(err => { RS.toast(err.message, 'bad'); b.disabled = false; });
    });
    $('chips').addEventListener('click', e => { const f = e.target.closest('button'); if (!f) return; filter = f.dataset.f; document.querySelectorAll('#chips button').forEach(x => x.classList.toggle('on', x === f)); draw(); });

    setInterval(() => {
        $('clock').textContent = new Date().toLocaleTimeString('ar-SA', {hour: '2-digit', minute: '2-digit', second: '2-digit'});
        orders.forEach(o => { const el = document.querySelector(`[data-t="${o.id}"]`); if (el) el.textContent = fmt(elapsed(o)); });
    }, 1000);

    pull(); timer = setInterval(pull, 4000);
    return {
        setBranch(v) { branch = Number(v); seen = null; pull(); history.replaceState(null, '', '?branch=' + v); },
        toggleSound() { sound = !sound; $('snd').textContent = sound ? '🔔 التنبيه مفعّل' : '🔕 التنبيه متوقف'; if (sound) RS.beep([880]); }
    };
})();
</script>
@endpush