@extends('layouts.dashboard')
@section('title', ($station === 'kitchen' ? 'Keuken POS' : 'Bar POS').' - '.$restaurant->name)
@section('page-title', $station === 'kitchen' ? 'Keuken POS' : 'Bar POS')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/restaurant-settings.css') }}">
<link rel="stylesheet" href="{{ asset('css/pages/pos.css') }}?v={{ filemtime(public_path('css/pages/pos.css')) }}">
@endpush
@section('content')
<section class="ds-page pos-page" data-live-orders data-live-channel="private-restaurant.{{ $restaurant->id }}" data-live-url="{{ route('restaurants.pos.index',[$restaurant,$station]) }}" @include('partials.live-attributes')>
    <div class="pos-toolbar ds-panel">
        <div><span class="pos-eyebrow">{{ $restaurant->name }} · Live bestellingen</span><h2>{{ $station === 'kitchen' ? 'Aan de slag in de keuken' : 'Aan de slag aan de bar' }}</h2><p>Vink elk klaar stuk aan. De bon verdwijnt wanneer alles voor {{ $station === 'kitchen' ? 'de keuken' : 'de bar' }} klaar is.</p></div>
        <div class="ds-actions"><a class="ds-button {{ $station === 'kitchen' ? '' : 'ds-button--light' }}" href="{{ route('restaurants.pos.index',[$restaurant,'kitchen']) }}"><i class="ri-restaurant-2-line"></i> Keuken</a><a class="ds-button {{ $station === 'bar' ? '' : 'ds-button--light' }}" href="{{ route('restaurants.pos.index',[$restaurant,'bar']) }}"><i class="ri-cup-line"></i> Bar</a><button type="button" data-live-fullscreen class="ds-button ds-button--light">Volledig scherm</button></div>
    </div>
    <div class="pos-connection"><span data-live-status role="status">Verbinden…</span><button class="ds-button ds-button--light" type="button" data-live-refresh>Opnieuw controleren</button></div>
    <p data-live-error role="alert" hidden></p>
    <div data-live-content>@include('restaurants.pos.tickets')</div>
</section>
@endsection
@push('scripts')@include('partials.live-scripts')@endpush