@extends('layouts.dashboard')

@section('title', 'Genkai beheer')
@section('eyebrow', 'Genkai Grill & Sushi')
@section('page-title', 'Restaurantdashboard')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/restaurant-dashboard.css') }}?v={{ @filemtime(public_path('css/pages/restaurant-dashboard.css')) ?: time() }}">
@endpush

@section('content')
<section class="restaurant-dashboard">
    <div class="restaurant-dashboard-hero">
        <div class="restaurant-dashboard-hero__content">
            <span class="restaurant-dashboard-hero__eyebrow"><i class="ri-store-2-line"></i> Enige restaurant in dit systeem</span>
            <h2>{{ $restaurant->name }}</h2>
            <p>Reservaties, tafels, QR-menu, menu-items, personeel, pincodes en formules staan samen in één beheeromgeving.</p>
            <div class="restaurant-dashboard-hero__actions">
                <a href="{{ route('owner.reservations.index') }}" class="restaurant-dashboard-hero__primary"><i class="ri-calendar-event-line"></i> Reservaties</a>
                <a href="{{ route('restaurants.tables.index', $restaurant) }}" class="restaurant-dashboard-hero__ghost"><i class="ri-layout-grid-line"></i> Tafels beheren</a>
            </div>
        </div>
        <div class="restaurant-dashboard-hero__visual">
            <div class="restaurant-dashboard-live-card">
                <div class="restaurant-dashboard-live-card__top"><span><span></span>Live status</span><i class="ri-pulse-line"></i></div>
                <strong>Genkai operationeel</strong>
                <p>Er kunnen geen extra restaurants worden toegevoegd.</p>
                <div class="restaurant-dashboard-live-card__stats">
                    <div><span>Medewerkers</span><strong>{{ $restaurant->active_members_count ?? 0 }}</strong></div>
                    <div><span>Open tickets</span><strong>{{ $openOrderCount }}</strong></div>
                </div>
            </div>
        </div>
    </div>

    <div class="restaurant-dashboard-stats">
        <article class="restaurant-dashboard-stat"><div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--gold"><i class="ri-line-chart-line"></i></div><div><span>Omzet vandaag</span><strong>€ {{ number_format($todayRevenue, 2, ',', '.') }}</strong><small>Op basis van geregistreerde orders</small></div></article>
        <article class="restaurant-dashboard-stat"><div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--blue"><i class="ri-layout-grid-line"></i></div><div><span>Bezette tafels</span><strong>{{ $activeTableCount }}</strong><small>Momenteel</small></div></article>
        <article class="restaurant-dashboard-stat"><div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--purple"><i class="ri-calendar-event-line"></i></div><div><span>Reservaties</span><strong>{{ $reservationCount }}</strong><small>Vandaag</small></div></article>
        <article class="restaurant-dashboard-stat"><div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--green"><i class="ri-restaurant-2-line"></i></div><div><span>Open tickets</span><strong>{{ $openOrderCount }}</strong><small>Nog niet afgewerkt</small></div></article>
    </div>

    <div class="restaurant-dashboard-grid">
        <section class="restaurant-dashboard-card">
            <div class="restaurant-dashboard-card__header">
                <div><span class="restaurant-dashboard-card__eyebrow">Live activiteit</span><h3>Recente gebeurtenissen</h3><p>De laatste acties binnen Genkai, netjes gegroepeerd en leesbaar.</p></div>
                <a href="{{ route('owner.logs.index') }}" class="restaurant-dashboard-inline-link">Alles bekijken <i class="ri-arrow-right-line"></i></a>
            </div>
            <div class="restaurant-dashboard-timeline">
                @forelse($recentActivities as $activity)
                    <article class="restaurant-dashboard-timeline__item restaurant-dashboard-timeline__item--{{ $activity['tone'] ?? 'neutral' }}">
                        <div class="restaurant-dashboard-timeline__icon"><i class="{{ $activity['icon'] }}"></i></div>
                        <div class="restaurant-dashboard-timeline__body">
                            <div class="restaurant-dashboard-timeline__top">
                                <strong>{{ $activity['title'] }}</strong>
                                <span><i class="ri-time-line"></i> {{ $activity['time'] }}</span>
                            </div>
                            <p>{{ $activity['description'] }}</p>
                            @if(!empty($activity['context']))
                                <div class="restaurant-dashboard-timeline__context"><i class="ri-map-pin-line"></i>{{ $activity['context'] }}</div>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="restaurant-dashboard-empty"><div class="restaurant-dashboard-empty__icon"><i class="ri-history-line"></i></div><h4>Nog geen activiteit</h4><p>Acties via tafelmenu en personeel verschijnen hier.</p></div>
                @endforelse
            </div>
        </section>

        <aside class="restaurant-dashboard-side">
            <section class="restaurant-dashboard-card">
                <div class="restaurant-dashboard-card__header restaurant-dashboard-card__header--compact"><div><span class="restaurant-dashboard-card__eyebrow">Snel starten</span><h3>Snelle acties</h3></div></div>
                <div class="restaurant-dashboard-actions">
                    @foreach([
                        ['ri-calendar-event-line','Reservaties','Bekijk en bevestig aanvragen',route('owner.reservations.index')],
                        ['ri-layout-grid-line','Tafels & QR','Beheer tafels en QR-links',route('restaurants.tables.index',$restaurant)],
                        ['ri-restaurant-2-line','Menu-items','Beheer gerechten en dranken',route('restaurants.menu-items.index',$restaurant)],
                        ['ri-user-add-line','Personeel','Team en pincodes beheren',route('restaurants.staff.index',$restaurant)],
                        ['ri-timer-line','Sessiebeheer','Actieve tafels en zaaloproepen',route('owner.sessions.index')],
                    ] as [$icon,$title,$description,$url])
                        <a href="{{ $url }}" class="restaurant-dashboard-action"><span><i class="{{ $icon }}"></i></span><div><strong>{{ $title }}</strong><small>{{ $description }}</small></div><i class="ri-arrow-right-s-line"></i></a>
                    @endforeach
                </div>
            </section>
            <section class="restaurant-dashboard-card">
                <div class="restaurant-dashboard-card__header restaurant-dashboard-card__header--compact"><div><span class="restaurant-dashboard-card__eyebrow">Configuratie</span><h3>Inrichting</h3></div><span class="restaurant-dashboard-health__score">{{ $setupProgress }}%</span></div>
                <div class="restaurant-dashboard-health__track" data-progress="{{ $setupProgress }}"><span style="width:{{ $setupProgress }}%"></span></div>
                <div class="restaurant-dashboard-checklist"><div class="is-complete"><i class="ri-checkbox-circle-fill"></i><span>Genkai gekoppeld</span></div><div class="{{ $restaurant->tables()->exists() ? 'is-complete' : '' }}"><i class="{{ $restaurant->tables()->exists() ? 'ri-checkbox-circle-fill' : 'ri-checkbox-blank-circle-line' }}"></i><span>Tafels instellen</span></div><div class="{{ $restaurant->menuItems()->exists() ? 'is-complete' : '' }}"><i class="{{ $restaurant->menuItems()->exists() ? 'ri-checkbox-circle-fill' : 'ri-checkbox-blank-circle-line' }}"></i><span>Menu toevoegen</span></div><div class="{{ $restaurant->memberships()->count() > 1 ? 'is-complete' : '' }}"><i class="{{ $restaurant->memberships()->count() > 1 ? 'ri-checkbox-circle-fill' : 'ri-checkbox-blank-circle-line' }}"></i><span>Team toevoegen</span></div></div>
            </section>
        </aside>
    </div>

    <section class="restaurant-dashboard-card">
        <div class="restaurant-dashboard-card__header"><div><span class="restaurant-dashboard-card__eyebrow">Modules</span><h3>Genkai beheren</h3><p>Alle modules uit het aangeleverde systeem, zonder multi-restaurantlaag.</p></div></div>
        <div class="restaurant-dashboard-modules">
            @foreach([
                ['ri-calendar-event-line','Reservaties','Datums, uren en bevestigingen',route('owner.reservations.index')],
                ['ri-layout-grid-line','Tafels & QR','Tafels, capaciteit en QR-codes',route('restaurants.tables.index',$restaurant)],
                ['ri-price-tag-2-line','Categorieën','Eten- en drankcategorieën',route('restaurants.menu-categories.index',$restaurant)],
                ['ri-restaurant-2-line','Menu-items','Prijzen, foto’s en beschikbaarheid',route('restaurants.menu-items.index',$restaurant)],
                ['ri-price-tag-3-line','Formules','AYCE, drank en hybride tarieven',route('restaurants.rates.index',$restaurant)],
                ['ri-team-line','Personeel','Rollen, accounts en pincodes',route('restaurants.staff.index',$restaurant)],
                ['ri-timer-line','Sessiebeheer','Actieve tafelsessies en zaaloproepen',route('owner.sessions.index')],
                ['ri-restaurant-line','Keuken POS','Food tickets en statusupdates',route('owner.pos.kitchen')],
                ['ri-cup-line','Bar POS','Dranktickets en statusupdates',route('owner.pos.bar')],
                ['ri-history-line','Activiteitenlog','Overzicht van acties en gebeurtenissen',route('owner.logs.index')],
                ['ri-palette-line','Tafelmenu branding','Logo en kleuren voor QR-menu',route('restaurants.settings.table-menu-branding.edit',$restaurant)],
                ['ri-mail-settings-line','SMTP & website','Mail en reservatie-instellingen',route('owner.settings.edit')],
            ] as [$icon,$title,$description,$url])
                <a href="{{ $url }}" class="restaurant-dashboard-module"><span><i class="{{ $icon }}"></i></span><strong>{{ $title }}</strong><small>{{ $description }}</small></a>
            @endforeach
        </div>
    </section>
</section>
@endsection

@push('scripts')
<script src="{{ asset('js/pages/restaurant-dashboard.js') }}"></script>
@endpush