@extends('layouts.dashboard')

@section('title', $restaurant->name . ' - DineSync')
@section('eyebrow', 'Restaurant')
@section('page-title', $restaurant->name)

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

@section('content')
@php
    $serviceModeLabel = match($restaurant->service_mode) {
        'ayce' => 'All you can eat',
        'a_la_carte' => 'À la carte',
        'hybrid' => 'Hybride',
        default => ucfirst(str_replace('_', ' ', $restaurant->service_mode)),
    };
@endphp

<section class="restaurant-dashboard" data-restaurant-dashboard data-currency="{{ $restaurant->currency }}">
    <div class="restaurant-dashboard-hero">
        <div class="restaurant-dashboard-hero__content">
            <div class="restaurant-dashboard-hero__brand">
                <div class="restaurant-dashboard-hero__logo">
                    @if($restaurant->logo)
                        <img src="{{ asset('storage/' . $restaurant->logo) }}" alt="{{ $restaurant->name }}">
                    @else
                        <span>{{ strtoupper(substr($restaurant->name, 0, 1)) }}</span>
                    @endif
                </div>

                <div>
                    <span class="restaurant-dashboard-hero__eyebrow">
                        <i class="ri-store-2-line"></i>
                        Restaurantomgeving
                    </span>

                    <h2>{{ $restaurant->name }}</h2>

                    <div class="restaurant-dashboard-hero__meta">
                        <span><i class="ri-restaurant-line"></i>{{ $serviceModeLabel }}</span>
                        <span><i class="ri-money-euro-circle-line"></i>{{ $restaurant->currency }}</span>
                        <span><i class="ri-time-zone-line"></i>{{ $restaurant->timezone }}</span>

                        <span class="restaurant-dashboard-status {{ $restaurant->active ? 'is-active' : 'is-inactive' }}">
                            <span></span>
                            {{ $restaurant->active ? 'Actief' : 'Inactief' }}
                        </span>
                    </div>
                </div>
            </div>

            <p>
                Beheer de dagelijkse werking, volg live activiteit en open snel de belangrijkste modules van dit restaurant.
            </p>

            <div class="restaurant-dashboard-hero__actions">
                <a href="{{ route('restaurants.settings.edit',$restaurant) }}" class="secondary-btn">
                    <i class="ri-settings-3-line"></i>
                    Restaurantinstellingen
                </a>

                <a href="{{ route('restaurants.staff.index', $restaurant) }}" class="restaurant-dashboard-hero__ghost">
                    <i class="ri-team-line"></i>
                    Medewerkers beheren
                </a>

                <a href="{{ route('restaurants.index') }}" class="restaurant-dashboard-hero__ghost">
                    <i class="ri-arrow-left-line"></i>
                    Alle restaurants
                </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>Restaurant operationeel</strong>

                <p>Alle kernmodules zijn klaar om verder ingesteld te worden.</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 ?? 0 }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="restaurant-dashboard-stats">
        <article class="restaurant-dashboard-stat" data-counter="{{ $todayRevenue ?? 0 }}" data-format="currency">
            <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 class="restaurant-dashboard-stat__value">
                    {{ $restaurant->currency }} {{ number_format($todayRevenue ?? 0, 2, ',', '.') }}
                </strong>
                <small>Vandaag</small>
            </div>
        </article>

        <article class="restaurant-dashboard-stat" data-counter="{{ $activeTableCount ?? 0 }}">
            <div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--blue">
                <i class="ri-layout-grid-line"></i>
            </div>

            <div>
                <span>Actieve tafels</span>
                <strong class="restaurant-dashboard-stat__value">{{ $activeTableCount ?? 0 }}</strong>
                <small>Momenteel bezet</small>
            </div>
        </article>

        <article class="restaurant-dashboard-stat" data-counter="{{ $reservationCount ?? 0 }}">
            <div class="restaurant-dashboard-stat__icon restaurant-dashboard-stat__icon--purple">
                <i class="ri-calendar-event-line"></i>
            </div>

            <div>
                <span>Reservaties</span>
                <strong class="restaurant-dashboard-stat__value">{{ $reservationCount ?? 0 }}</strong>
                <small>Vandaag gepland</small>
            </div>
        </article>

        <article class="restaurant-dashboard-stat" data-counter="{{ $openOrderCount ?? 0 }}">
            <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 class="restaurant-dashboard-stat__value">{{ $openOrderCount ?? 0 }}</strong>
                <small>Nog te verwerken</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 {{ $restaurant->name }}.</p>
                </div>

                <a href="#" class="restaurant-dashboard-inline-link">
                    Alle logs
                    <i class="ri-arrow-right-line"></i>
                </a>
            </div>

            <div class="restaurant-dashboard-timeline">
                @forelse(($recentActivities ?? []) as $activity)
                    <article class="restaurant-dashboard-timeline__item">
                        <div class="restaurant-dashboard-timeline__icon">
                            <i class="{{ $activity['icon'] ?? 'ri-history-line' }}"></i>
                        </div>

                        <div>
                            <div class="restaurant-dashboard-timeline__top">
                                <strong>{{ $activity['title'] ?? 'Activiteit' }}</strong>
                                <span>{{ $activity['time'] ?? '' }}</span>
                            </div>

                            <p>{{ $activity['description'] ?? '' }}</p>
                        </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>
                            Zodra medewerkers, tafels of bestellingen actief worden, verschijnt de activiteit 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-layout-grid-line', 'Tafel beheren', 'Open het tafeloverzicht', route('restaurants.tables.index', $restaurant)],
                        ['ri-restaurant-2-line', 'Bestellingen openen', 'Bekijk lopende tickets', '#'],
                        ['ri-tv-2-line', 'Kitchen Display', 'Open het live keukenscherm', '#'],
                        ['ri-user-add-line', 'Medewerker toevoegen', 'Breid je team uit', route('restaurants.staff.index', $restaurant)],
                    ] 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>Restaurantstatus</h3>
                    </div>

                    <span class="restaurant-dashboard-health__score">{{ $setupProgress ?? 25 }}%</span>
                </div>

                <div class="restaurant-dashboard-health__track" data-progress="{{ $setupProgress }}" role="progressbar" aria-label="Restaurantconfiguratie" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $setupProgress }}">
                    <span></span>
                </div>

                <div class="restaurant-dashboard-checklist">
                    @foreach($setupSteps as $key => $step)
                    <div class="{{ $step['complete'] ? 'is-complete' : '' }}" data-setup-step="{{ $key }}" data-complete="{{ $step['complete'] ? 'true' : 'false' }}">
                        <i class="{{ $step['complete'] ? 'ri-checkbox-circle-fill' : 'ri-checkbox-blank-circle-line' }}" aria-hidden="true"></i>
                        <span>@if($step['complete'])<strong>{{ $step['label'] }}</strong>@else{{ $step['label'] }}@endif</span>
                        <span class="setup-status">{{ $step['complete'] ? 'Voltooid' : 'Nog te doen' }}</span>
                    </div>
                    @endforeach
                </div>
            </section>
        </aside>
    </div>

    <section class="restaurant-dashboard-card">
        <div class="restaurant-dashboard-card__header">
            <div>
                <span class="restaurant-dashboard-card__eyebrow">Restaurantmodules</span>
                <h3>Beheer je dagelijkse werking</h3>
                <p>Open direct de module die je nodig hebt.</p>
            </div>
        </div>

        <div class="restaurant-dashboard-modules">
            @foreach([
                ['ri-layout-grid-line', 'Tafels', 'Beheer tafels en sessies', route('restaurants.tables.index', $restaurant)],
                ['ri-qr-code-line', 'QR-codes', 'Downloaden en afdrukken', route('restaurants.qr.index',$restaurant)],
                ['ri-restaurant-2-line', 'Bestellingen', 'Volg alle actieve orders', route('restaurants.orders.index',$restaurant)],
                ['ri-settings-line', 'Instellingen', 'Restauranttype en bestelmethode', route('restaurants.settings.edit',$restaurant)],
                ['ri-book-open-line', 'Menu', 'Menu-items en categorieën', route('restaurants.menu-categories.index', $restaurant)],
                ['ri-team-line', 'Personeel', 'Team, rollen en pincodes', route('restaurants.staff.index', $restaurant)],
            ] as [$icon, $title, $description, $url])
                @php($permission = ['Tafels'=>'tables.view','Bestellingen'=>'orders.view','Menu'=>'menu.view','Personeel'=>'staff.view','QR-codes'=>'settings.manage','Instellingen'=>'settings.manage'][$title])
                @if(\App\Support\RestaurantAccess::allows(auth()->user(),$restaurant,$permission))<a href="{{ $url }}" class="restaurant-dashboard-module">
                    <span><i class="{{ $icon }}"></i></span>
                    <strong>{{ $title }}</strong>
                    <small>{{ $description }}</small>
                </a>@endif
            @endforeach
        </div>
    </section>
</section>
@endsection

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