@extends('layouts.dashboard')

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

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

@section('content')
<section class="tables-page" data-tables-page>
    <div class="tables-page__header">
        <div>
            <span class="tables-page__eyebrow">
                <i class="ri-layout-grid-line"></i>
                Tafelbeheer
            </span>

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

            <p>
                Beheer capaciteit, status, volgorde en QR-toegang voor alle tafels van dit restaurant.
            </p>
        </div>

        <button type="button" class="secondary-btn" data-table-create-open>
            <i class="ri-add-circle-line"></i>
            Nieuwe tafel
        </button>
    </div>

    <div class="tables-overview">
        <article class="tables-overview-card">
            <span class="tables-overview-card__icon tables-overview-card__icon--blue">
                <i class="ri-layout-grid-line"></i>
            </span>

            <div>
                <span>Totaal tafels</span>
                <strong>{{ $statistics['total'] }}</strong>
            </div>
        </article>

        <article class="tables-overview-card">
            <span class="tables-overview-card__icon tables-overview-card__icon--green">
                <i class="ri-checkbox-circle-line"></i>
            </span>

            <div>
                <span>Beschikbaar</span>
                <strong>{{ $statistics['available'] }}</strong>
            </div>
        </article>

        <article class="tables-overview-card">
            <span class="tables-overview-card__icon tables-overview-card__icon--gold">
                <i class="ri-user-3-line"></i>
            </span>

            <div>
                <span>Totale capaciteit</span>
                <strong>{{ $statistics['total_capacity'] }}</strong>
            </div>
        </article>

        <article class="tables-overview-card">
            <span class="tables-overview-card__icon tables-overview-card__icon--purple">
                <i class="ri-restaurant-2-line"></i>
            </span>

            <div>
                <span>Bezet</span>
                <strong>{{ $statistics['occupied'] }}</strong>
            </div>
        </article>
    </div>

    <div class="tables-toolbar">
        <div class="tables-search">
            <i class="ri-search-line"></i>

            <input
                type="search"
                placeholder="Zoek op tafelnaam of status..."
                aria-label="Tafels zoeken"
                data-tables-search
            >
        </div>

        <div class="tables-filter">
            <label for="tableStatusFilter">Status</label>

            <select id="tableStatusFilter" data-tables-status-filter>
                <option value="all">Alle statussen</option>
                <option value="available">Beschikbaar</option>
                <option value="occupied">Bezet</option>
                <option value="reserved">Gereserveerd</option>
                <option value="inactive">Inactief</option>
            </select>
        </div>

        <span class="tables-toolbar__count" data-tables-count>
            {{ $tables->count() }}
            {{ $tables->count() === 1 ? 'tafel' : 'tafels' }}
        </span>
    </div>

    @if($tables->isEmpty())
        <div class="tables-empty">
            <div class="tables-empty__icon">
                <i class="ri-layout-grid-line"></i>
            </div>

            <h3>Nog geen tafels</h3>

            <p>
                Voeg je eerste tafel toe. Daarna kun je capaciteit, status, QR-toegang en toekomstige tafelsessies beheren.
            </p>

            <button type="button" class="primary-btn" data-table-create-open>
                <i class="ri-add-circle-line"></i>
                Eerste tafel toevoegen
            </button>
        </div>
    @else
        <div class="tables-grid" data-tables-grid>
            @foreach($tables as $table)
                @php
                    $displayStatus = $table->active ? $table->status : 'inactive';

                    $statusLabel = match($displayStatus) {
                        'available' => 'Beschikbaar',
                        'occupied' => 'Bezet',
                        'reserved' => 'Gereserveerd',
                        'inactive' => 'Inactief',
                        default => ucfirst($displayStatus),
                    };
                @endphp

                <article
                    class="table-card"
                    data-table-card
                    data-table-status="{{ $displayStatus }}"
                    data-table-search="{{ strtolower($table->name . ' ' . $statusLabel) }}"
                >
                    <div class="table-card__top">
                        <div class="table-card__identity">
                            <div class="table-card__icon">
                                <i class="ri-table-line"></i>
                            </div>

                            <div>
                                <span>Tafel</span>
                                <h3>{{ $table->name }}</h3>
                            </div>
                        </div>

                        <span class="table-card__status is-{{ $displayStatus }}">
                            <span></span>
                            {{ $statusLabel }}
                        </span>
                    </div>

                    <div class="table-card__metrics">
                        <div>
                            <span>
                                <i class="ri-group-line"></i>
                                Capaciteit
                            </span>

                            <strong>{{ $table->capacity }} personen</strong>
                        </div>

                        <div>
                            <span>
                                <i class="ri-sort-asc"></i>
                                Volgorde
                            </span>

                            <strong>{{ $table->sort_order }}</strong>
                        </div>
                    </div>

                    <div class="table-card__qr">
                        <div>
                            <span>QR-toegang</span>
                            <strong>{{ Str::limit($table->qr_token, 18) }}</strong>
                        </div>

                        <form
                            method="POST"
                            action="{{ route('restaurants.tables.regenerate-qr', [$restaurant, $table]) }}"
                        >
                            @csrf

                            <button type="submit" class="table-card__qr-button">
                                <i class="ri-refresh-line"></i>
                                Vernieuwen
                            </button>
                        </form>
                    </div>

                    <div class="table-card__footer">
                        <a
                            href="{{ route('table.menu.show', $table->qr_token) }}"
                            class="table-card__open-menu"
                            target="_blank"
                            rel="noopener"
                        >
                            <i class="ri-tablet-line"></i>
                            Open tafelmenu
                        </a>

                        <button
                            type="button"
                            class="table-card__edit"
                            data-table-edit
                            data-table-id="{{ $table->id }}"
                            data-table-name="{{ $table->name }}"
                            data-table-capacity="{{ $table->capacity }}"
                            data-table-status="{{ $displayStatus }}"
                            data-table-sort-order="{{ $table->sort_order }}"
                            data-table-update-url="{{ route('restaurants.tables.update', [$restaurant, $table]) }}"
                        >
                            <i class="ri-edit-line"></i>
                            Bewerken
                        </button>

                        <button
                            type="button"
                            class="table-card__delete"
                            data-table-delete
                            data-table-name="{{ $table->name }}"
                            data-table-delete-url="{{ route('restaurants.tables.destroy', [$restaurant, $table]) }}"
                        >
                            <i class="ri-delete-bin-6-line"></i>
                            Verwijderen
                        </button>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="tables-no-results" data-tables-no-results hidden>
            <div class="tables-no-results__icon">
                <i class="ri-search-eye-line"></i>
            </div>

            <h3>Geen tafels gevonden</h3>
            <p>Pas je zoekterm of statusfilter aan.</p>
        </div>
    @endif

    <div class="table-modal" data-table-form-modal aria-hidden="true">
        <div class="table-modal__backdrop" data-table-form-close></div>

        <div class="table-modal__dialog" role="dialog" aria-modal="true">
            <button type="button" class="table-modal__close" data-table-form-close>
                <i class="ri-close-line"></i>
            </button>

            <div class="table-modal__icon">
                <i class="ri-layout-grid-line"></i>
            </div>

            <span class="table-modal__eyebrow" data-table-modal-eyebrow>
                Nieuwe tafel
            </span>

            <h3 data-table-modal-title>Tafel toevoegen</h3>

            <p>
                Stel de basisgegevens van de tafel in. Alles kan later nog aangepast worden.
            </p>

            <form
                method="POST"
                action="{{ route('restaurants.tables.store', $restaurant) }}"
                class="table-form"
                data-table-form
                data-store-url="{{ route('restaurants.tables.store', $restaurant) }}"
            >
                @csrf

                <input type="hidden" name="_method" value="POST" data-table-method>

                <div class="table-form__grid">
                    <div class="table-field table-field--full">
                        <label for="tableName">Tafelnaam</label>

                        <div class="table-input">
                            <i class="ri-table-line"></i>

                            <input
                                id="tableName"
                                type="text"
                                name="name"
                                placeholder="Bijvoorbeeld Tafel 1"
                                maxlength="100"
                                required
                                data-table-name-input
                            >
                        </div>
                    </div>

                    <div class="table-field">
                        <label for="tableCapacity">Capaciteit</label>

                        <div class="table-input">
                            <i class="ri-group-line"></i>

                            <input
                                id="tableCapacity"
                                type="number"
                                name="capacity"
                                value="2"
                                min="1"
                                max="100"
                                required
                                data-table-capacity-input
                            >
                        </div>
                    </div>

                    <div class="table-field">
                        <label for="tableSortOrder">Volgorde</label>

                        <div class="table-input">
                            <i class="ri-sort-asc"></i>

                            <input
                                id="tableSortOrder"
                                type="number"
                                name="sort_order"
                                value="0"
                                min="0"
                                max="9999"
                                data-table-sort-input
                            >
                        </div>
                    </div>

                    <div class="table-field table-field--full">
                        <label for="tableStatus">Status</label>

                        <div class="table-select">
                            <i class="ri-pulse-line"></i>

                            <select
                                id="tableStatus"
                                name="status"
                                required
                                data-table-status-input
                            >
                                <option value="available">Beschikbaar</option>
                                <option value="occupied">Bezet</option>
                                <option value="reserved">Gereserveerd</option>
                                <option value="inactive">Inactief</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="table-modal__actions">
                    <button type="button" class="light-btn" data-table-form-close>
                        Annuleren
                    </button>

                    <button type="submit" class="primary-btn" data-table-submit>
                        <i class="ri-save-line"></i>
                        Tafel opslaan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="table-delete-modal" data-table-delete-modal aria-hidden="true">
        <div class="table-delete-modal__backdrop" data-table-delete-close></div>

        <div class="table-delete-modal__dialog" role="dialog" aria-modal="true">
            <button type="button" class="table-delete-modal__close" data-table-delete-close>
                <i class="ri-close-line"></i>
            </button>

            <div class="table-delete-modal__icon">
                <i class="ri-delete-bin-6-line"></i>
            </div>

            <span class="table-delete-modal__eyebrow">Definitief verwijderen</span>

            <h3>Weet je zeker dat je deze tafel wilt verwijderen?</h3>

            <p>
                Deze actie kan niet ongedaan worden gemaakt.
            </p>

            <div class="table-delete-modal__warning">
                Typ <strong data-table-delete-name></strong> om te bevestigen.
            </div>

            <form method="POST" action="" data-table-delete-form>
                @csrf
                @method('DELETE')

                <div class="table-field">
                    <label for="tableDeleteConfirmation">Tafelnaam</label>

                    <input
                        id="tableDeleteConfirmation"
                        type="text"
                        autocomplete="off"
                        placeholder="Typ de exacte tafelnaam"
                        data-table-delete-confirmation
                    >
                </div>

                <div class="table-delete-modal__actions">
                    <button type="button" class="light-btn" data-table-delete-close>
                        Annuleren
                    </button>

                    <button
                        type="submit"
                        class="table-delete-submit"
                        data-table-delete-submit
                        disabled
                    >
                        <i class="ri-delete-bin-6-line"></i>
                        Definitief verwijderen
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

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