@extends('layouts.dashboard')

@section('title', 'Sessiebeheer')
@section('eyebrow', 'Restaurantwerking')
@section('page-title', 'Sessiebeheer')

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

@section('content')
<section
    class="operations-page"
    data-owner-operations-realtime
    data-realtime-channel="genkai.owner.operations"
    data-realtime-private="1"
    data-reverb-key="{{ config('broadcasting.connections.reverb.key') }}"
    data-reverb-host="{{ config('realtime.host') }}"
    data-reverb-port="{{ config('realtime.port') }}"
    data-reverb-scheme="{{ config('realtime.scheme') }}"
    data-reverb-auth-endpoint="/broadcasting/auth"
>
    <div class="operations-hero">
        <div>
            <span class="operations-eyebrow"><i class="ri-timer-flash-line"></i> Live tafels</span>
            <h2>Actieve sessies en zaaloproepen</h2>
            <p>Volg per tafel de lopende sessie, formules, open bestellingen en oproepen van gasten.</p>
        </div>

        <div class="operations-actions">
            <span class="operations-live-state" data-realtime-state data-state="connecting"><i class="ri-wifi-line"></i> Verbinden…</span>
            <a href="{{ route('owner.pos.kitchen') }}" class="button-ghost"><i class="ri-knife-blood-line"></i> Keuken POS</a>
            <a href="{{ route('owner.pos.bar') }}" class="button-ghost"><i class="ri-goblet-line"></i> Bar POS</a>
        </div>
    </div>

    <div class="operations-stats">
        <article class="operations-stat">
            <span>Actieve sessies</span>
            <strong>{{ $sessions->count() }}</strong>
        </article>
        <article class="operations-stat">
            <span>Open zaaloproepen</span>
            <strong>{{ $openRequests->count() }}</strong>
        </article>
        <article class="operations-stat">
            <span>Open bestellingen</span>
            <strong>{{ $sessions->sum(fn ($session) => $session->orders->whereNotIn('status', ['delivered', 'cancelled'])->count()) }}</strong>
        </article>
        <article class="operations-stat">
            <span>Gasten actief</span>
            <strong>{{ $sessions->sum('guest_count') }}</strong>
        </article>
    </div>

    <div class="operations-grid">
        <section class="operations-card">
            <div class="operations-card__header">
                <div>
                    <span class="operations-eyebrow">Open sessies</span>
                    <h3>Tafels in gebruik</h3>
                </div>
            </div>

            <div class="operations-list">
                @forelse($sessions as $session)
                    <article class="session-card">
                        <div class="session-card__header">
                            <div>
                                <h4>{{ $session->restaurantTable?->name ?? 'Onbekende tafel' }}</h4>
                                <p class="operations-meta">Gestart {{ optional($session->started_at)->diffForHumans() }} door {{ $session->openedBy?->displayName() ?? 'Onbekend' }}</p>
                            </div>

                            <span class="badge {{ $session->hasExpired() ? 'badge--expired' : 'badge--open' }}">
                                {{ $session->hasExpired() ? 'Verlopen' : 'Open' }}
                            </span>
                        </div>

                        <div class="details-grid">
                            <div>
                                <span>Duur</span>
                                <strong>{{ $session->started_at?->format('H:i') }} - {{ $session->ends_at?->format('H:i') ?? 'Open einde' }}</strong>
                            </div>
                            <div>
                                <span>Aantal gasten</span>
                                <strong>{{ $session->guest_count }}</strong>
                            </div>
                            <div>
                                <span>Nog te betalen</span>
                                <strong>€ {{ number_format($session->amountDue(), 2, ',', '.') }}</strong>
                            </div>
                        </div>

                        <div class="formula-list">
                            <span>Formules</span>
                            <ul>
                                @foreach($session->rateGuests as $rateGuest)
                                    <li>{{ $rateGuest->quantity }}× {{ $rateGuest->rate_name_snapshot }} — {{ $rateGuest->age_price_label_snapshot }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="details-grid">
                            <div>
                                <span>Bruto rekening</span>
                                <strong>€ {{ number_format($session->checkoutTotal(), 2, ',', '.') }}</strong>
                            </div>
                            <div>
                                <span>Cadeaubon & korting</span>
                                <strong>- € {{ number_format($session->creditTotal(), 2, ',', '.') }}</strong>
                            </div>
                            <div>
                                <span>Openstaand</span>
                                <strong>€ {{ number_format($session->amountDue(), 2, ',', '.') }}</strong>
                            </div>
                        </div>

                        <div class="details-grid">
                            <div>
                                <span>Formules</span>
                                <strong>€ {{ number_format($session->formulaTotal(), 2, ',', '.') }}</strong>
                            </div>
                            <div>
                                <span>À la carte</span>
                                <strong>€ {{ number_format($session->orderTotal(), 2, ',', '.') }}</strong>
                            </div>
                            <div>
                                <span>Bestelrondes</span>
                                <strong>{{ $session->orders->count() }}</strong>
                            </div>
                        </div>

                        <div class="details-grid">
                            <div>
                                <span>Open orders</span>
                                <strong>{{ $session->orders->whereNotIn('status', ['delivered', 'cancelled'])->count() }}</strong>
                            </div>
                            <div>
                                <span>Open oproepen</span>
                                <strong>{{ $session->serviceRequests->where('status', 'open')->count() }}</strong>
                            </div>
                            <div>
                                <span>Volgende ronde</span>
                                <strong>{{ $session->next_round_at && $session->next_round_at->isFuture() ? $session->next_round_at->format('H:i') : 'Nu' }}</strong>
                            </div>
                        </div>

                        <div class="operations-actions">
                            <form method="POST" action="{{ route('owner.sessions.close', $session) }}">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="button-danger"><i class="ri-stop-circle-line"></i> Sessie afsluiten</button>
                            </form>

                            @if($session->restaurantTable)
                                <a href="{{ route('table.menu.show', $session->restaurantTable->qr_token) }}" target="_blank" class="button-ghost"><i class="ri-qr-scan-2-line"></i> Tafelmenu openen</a>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="operations-empty">Er zijn momenteel geen actieve tafelsessies.</div>
                @endforelse
            </div>
        </section>

        <section class="operations-card">
            <div class="operations-card__header">
                <div>
                    <span class="operations-eyebrow">Zaaloproepen</span>
                    <h3>Open verzoeken van gasten</h3>
                </div>
            </div>

            <div class="operations-list">
                @forelse($openRequests 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-card__body">
                            <span>Actieve sessie</span>
                            <strong>#{{ $serviceRequest->table_session_id ?? '—' }}</strong>
                        </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">Er staan geen open zaaloproepen klaar.</div>
                @endforelse
            </div>
        </section>
    </div>
</section>
@endsection


@push('scripts')
<script src="https://js.pusher.com/8.6.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@2.5.0/dist/echo.iife.js"></script>
<script src="{{ asset('js/realtime/reverb.js') }}?v={{ filemtime(public_path('js/realtime/reverb.js')) }}"></script>
<script src="{{ asset('js/pages/owner-sessions-realtime.js') }}"></script>
@endpush