@extends('layouts.dashboard')

@section('title', 'Keuken POS')
@section('eyebrow', 'Restaurantwerking')
@section('page-title', 'Keuken POS')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/owner-operations.css') }}">
@endpush

@section('content')
<section class="operations-page">
    <div class="operations-hero">
        <div>
            <span class="operations-eyebrow"><i class="ri-knife-blood-line"></i> Keukenstation</span>
            <h2>Keuken POS</h2>
            <p>Alle food-items uit bestellingen. Werk elk item door van pending naar delivered.</p>
        </div>
    </div>

    <section class="operations-card">
        <div class="operations-card__header">
            <div>
                <span class="operations-eyebrow">Zaaloproepen</span>
                <h3>Keukenoproepen</h3>
                <p>Open verzoeken die op dit station moeten worden afgehandeld.</p>
            </div>
        </div>

        <div class="operations-list">
            @forelse($serviceRequests as $serviceRequest)
                <article class="request-card">
                    <div class="request-card__header">
                        <div>
                            <h4>{{ $serviceRequest->label() }}</h4>
                            <p class="operations-meta">{{ $serviceRequest->table?->name ?? 'Tafel onbekend' }} · {{ optional($serviceRequest->requested_at)->diffForHumans() }}</p>
                        </div>

                        <span class="badge badge--open">Open</span>
                    </div>

                    <div class="request-actions">
                        <form method="POST" action="{{ route('owner.service-requests.resolve', $serviceRequest) }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="button"><i class="ri-check-line"></i> Afgewerkt</button>
                        </form>
                    </div>
                </article>
            @empty
                <div class="operations-empty">Geen open verzoeken voor dit station.</div>
            @endforelse
        </div>
    </section>

    <section class="operations-card">
        <div class="operations-card__header">
            <div>
                <span class="operations-eyebrow">Filter</span>
                <h3>Food tickets</h3>
            </div>
        </div>

        <form method="GET" class="filter-bar">
            <select name="status">
                <option value="">Actieve statussen</option>
                @foreach(['pending' => 'Pending', 'accepted' => 'Accepted', 'preparing' => 'Preparing', 'ready' => 'Ready', 'delivered' => 'Delivered', 'cancelled' => 'Cancelled'] as $value => $label)
                    <option value="{{ $value }}" @selected($statusFilter === $value)>{{ $label }}</option>
                @endforeach
            </select>
            <button type="submit" class="button">Filter toepassen</button>
            <a href="{{ route('owner.pos.kitchen') }}" class="button-ghost">Reset</a>
        </form>

        <div class="operations-list">
            @forelse($items as $item)
                <article class="pos-item-card">
                    <div class="pos-item-card__header">
                        <div>
                            <h4>{{ $item->name_snapshot }}</h4>
                            <p class="operations-meta">{{ $item->order?->restaurantTable?->name ?? 'Tafel onbekend' }} · Ronde {{ $item->order?->round_number ?? 1 }} · {{ $item->quantity }} stuks</p>
                        </div>

                        <span class="badge badge--{{ $item->status }}">{{ ucfirst($item->status) }}</span>
                    </div>

                    <div class="details-grid">
                        <div>
                            <span>Besteld</span>
                            <strong>{{ optional($item->order?->ordered_at)->format('d/m H:i') }}</strong>
                        </div>
                        <div>
                            <span>Sessie</span>
                            <strong>#{{ $item->order?->table_session_id ?? '—' }}</strong>
                        </div>
                        <div>
                            <span>Notitie</span>
                            <strong>{{ $item->order?->notes ?: 'Geen notitie' }}</strong>
                        </div>
                    </div>

                    <div class="pos-item-card__actions">
                        @foreach(['pending' => 'Pending', 'accepted' => 'Accepted', 'preparing' => 'Preparing', 'ready' => 'Ready', 'delivered' => 'Delivered', 'cancelled' => 'Cancelled'] as $status => $label)
                            <form method="POST" action="{{ route('owner.pos.items.update', $item) }}">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="{{ $status }}">
                                <button type="submit" class="status-button status-button--{{ $status }}">{{ $label }}</button>
                            </form>
                        @endforeach
                    </div>
                </article>
            @empty
                <div class="operations-empty">Er zijn momenteel geen kitchen tickets.</div>
            @endforelse
        </div>

        {{ $items->links() }}
    </section>
</section>
@endsection