@extends(auth()->user()->isKitchen() ? 'layouts.kitchen' : 'layouts.admin')

@section('title', 'Kitchen Display')

@section('content')
<div style="margin-bottom: 1rem;">
    @if(auth()->user()->isAdmin())
    <select id="branch-select" style="padding: 0.5rem 1rem; background:#1e293b; color:#f8fafc; border:1px solid #475569; border-radius:0.25rem;">
        @foreach($branches as $b)
        <option value="{{ $b->id }}" {{ $b->id == $branchId ? 'selected' : '' }}>{{ $b->name }}</option>
        @endforeach
    </select>
    @elseif(auth()->user()->isBranchManager())
    <span style="color:#94a3b8;">{{ $branches->first()?->name ?? 'Branch' }}</span>
    @endif
</div>
<div id="orders-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;"></div>
@endsection

@section('scripts')
<script>
const branchId = {{ $branchId }};
const csrf = '{{ csrf_token() }}';

function loadOrders() {
    const base = window.APP_BASE || '';
    fetch(`${base}/kds/orders/${branchId}`)
        .then(r => r.json())
        .then(orders => {
            const container = document.getElementById('orders-container');
            const now = new Date();
            container.innerHTML = orders.map(o => {
                const created = new Date(o.created_at);
                const mins = Math.floor((now - created) / 60000);
                const timeStr = mins < 60 ? mins + ' min ago' : Math.floor(mins/60) + 'h ' + (mins%60) + 'm ago';
                return `
                <div style="background: #f8fafc; color: #1e293b; padding: 1rem; border-radius: 0.5rem; border-left: 4px solid #ff753a; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                        <strong>#${o.token_number} - ${o.order_number}</strong>
                        <span style="background:#e2e8f0;padding:0.25rem 0.5rem;border-radius:0.25rem;">${o.status}</span>
                    </div>
                    <div style="font-size:0.8rem;color:#64748b;margin-bottom:0.5rem;">Ordered ${timeStr}</div>
                    <ul style="margin: 0.5rem 0; padding-left: 1.25rem; color: #334155;">
                        ${(o.items || []).map(i => `<li>${i.qty} x ${(i.product && i.product.name) || 'Item'}${i.notes ? ' - ' + i.notes : ''}</li>`).join('')}
                    </ul>
                    <div style="margin-top: 0.5rem;">
                        <button onclick="updateStatus(${o.id}, 'preparing')" ${o.status === 'preparing' ? 'disabled' : ''} style="padding: 0.25rem 0.5rem; margin-right: 0.5rem; background:#334155;color:white;border:none;border-radius:0.25rem;cursor:pointer;">Preparing</button>
                        <button onclick="updateStatus(${o.id}, 'ready')" style="padding: 0.25rem 0.5rem; background: #16a34a; color:white; border:none; border-radius:0.25rem; cursor:pointer;">Ready</button>
                    </div>
                </div>
            `}).join('') || '<p style="color:#64748b;">No active orders</p>';
        });
}

function updateStatus(orderId, status) {
    const base = window.APP_BASE || '';
    fetch(`${base}/kds/orders/${orderId}/status`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ status })
    }).then(() => loadOrders());
}

document.getElementById('branch-select')?.addEventListener('change', e => {
    const base = window.APP_BASE || '';
    window.location = base + '/kds?branch_id=' + e.target.value;
});

loadOrders();
setInterval(loadOrders, 5000);
</script>
@endsection