@extends('layouts.dashboard')

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

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

@section('content')
<section class="menu-items-page" data-menu-items-page>
    <div class="menu-items-page__header">
        <div>
            <span class="menu-items-page__eyebrow"><i class="ri-restaurant-2-line"></i> Menubeheer</span>
            <h2>Menu-items van {{ $restaurant->name }}</h2>
            <p>Beheer gerechten, dranken, prijzen, afbeeldingen en beschikbaarheid. Elk item heeft altijd een verkoopprijs, ook wanneer het aan tafel in een formule inbegrepen is.</p>
        </div>

        <button type="button" class="secondary-btn" data-menu-item-create-open>
            <i class="ri-add-circle-line"></i>
            Nieuw menu-item
        </button>
    </div>

    <div class="menu-items-overview">
        @foreach([
            ['blue', 'ri-restaurant-2-line', 'Totaal menu-items', $statistics['total']],
            ['green', 'ri-checkbox-circle-line', 'Actief', $statistics['active']],
            ['gold', 'ri-shopping-basket-line', 'Beschikbaar', $statistics['available']],
            ['red', 'ri-forbid-2-line', 'Uitverkocht', $statistics['unavailable']],
        ] as [$color, $icon, $label, $value])
            <article class="menu-items-overview-card">
                <span class="menu-items-overview-card__icon menu-items-overview-card__icon--{{ $color }}">
                    <i class="{{ $icon }}"></i>
                </span>
                <div><span>{{ $label }}</span><strong>{{ $value }}</strong></div>
            </article>
        @endforeach
    </div>

    <div class="menu-items-toolbar">
        <div class="menu-items-search">
            <i class="ri-search-line"></i>
            <input type="search" placeholder="Zoek op naam, categorie of beschrijving..." data-menu-items-search>
        </div>

        <div class="menu-items-filter">
            <label for="menuItemCategoryFilter">Categorie</label>
            <select id="menuItemCategoryFilter" data-menu-items-category-filter>
                <option value="all">Alle categorieën</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ (string) request('category') === (string) $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="menu-items-filter">
            <label for="menuItemStatusFilter">Status</label>
            <select id="menuItemStatusFilter" data-menu-items-status-filter>
                <option value="all">Alle statussen</option>
                <option value="active">Actief</option>
                <option value="inactive">Verborgen</option>
                <option value="available">Beschikbaar</option>
                <option value="unavailable">Uitverkocht</option>
            </select>
        </div>

        <span class="menu-items-toolbar__count" data-menu-items-count>
            {{ $menuItems->count() }} {{ $menuItems->count() === 1 ? 'menu-item' : 'menu-items' }}
        </span>
    </div>

    @if($categories->isEmpty())
        <div class="menu-items-empty">
            <div class="menu-items-empty__icon"><i class="ri-folder-warning-line"></i></div>
            <h3>Maak eerst een menucategorie</h3>
            <p>Elk menu-item moet aan een categorie gekoppeld zijn.</p>
            <a href="{{ route('restaurants.menu-categories.index', $restaurant) }}" class="primary-btn">
                <i class="ri-book-open-line"></i>
                Naar menucategorieën
            </a>
        </div>
    @elseif($menuItems->isEmpty())
        <div class="menu-items-empty">
            <div class="menu-items-empty__icon"><i class="ri-restaurant-2-line"></i></div>
            <h3>Nog geen menu-items</h3>
            <p>Voeg je eerste gerecht of drankje toe.</p>
            <button type="button" class="primary-btn" data-menu-item-create-open>
                <i class="ri-add-circle-line"></i>
                Eerste menu-item toevoegen
            </button>
        </div>
    @else
        <div class="menu-items-grid" data-menu-items-grid>
            @foreach($menuItems as $menuItem)
                @php
                    $status = !$menuItem->active ? 'inactive' : ($menuItem->available ? 'available' : 'unavailable');
                    $statusLabel = match($status) {
                        'available' => 'Beschikbaar',
                        'unavailable' => 'Uitverkocht',
                        'inactive' => 'Verborgen',
                    };
                @endphp

                <article
                    class="menu-item-card"
                    data-menu-item-card
                    data-menu-item-category="{{ $menuItem->menu_category_id }}"
                    data-menu-item-status="{{ $status }}"
                    data-menu-item-search="{{ strtolower($menuItem->name . ' ' . ($menuItem->description ?? '') . ' ' . ($menuItem->category?->name ?? '')) }}"
                >
                    <div class="menu-item-card__image">
                        @if($menuItem->image)
                            <img src="{{ asset('storage/' . $menuItem->image) }}" alt="{{ $menuItem->name }}">
                        @else
                            <div class="menu-item-card__placeholder"><i class="ri-restaurant-line"></i></div>
                        @endif

                        <span class="menu-item-card__status is-{{ $status }}"><span></span>{{ $statusLabel }}</span>
                        <span class="menu-item-card__price {{ (float) $menuItem->price <= 0 ? 'is-missing' : '' }}">
                            @if((float) $menuItem->price > 0)
                                {{ $restaurant->currency === 'EUR' ? '€' : $restaurant->currency }}
                                {{ number_format((float) $menuItem->price, 2, ',', '.') }}
                            @else
                                Prijs instellen
                            @endif
                        </span>
                    </div>

                    <div class="menu-item-card__content">
                        <span class="menu-item-card__category">{{ $menuItem->category?->name ?? 'Geen categorie' }}</span>
                        <h3>{{ $menuItem->name }}</h3>
                        <p>{{ $menuItem->description ?: 'Nog geen beschrijving ingesteld.' }}</p>

                        <div class="menu-item-card__meta">
                            <span><i class="ri-sort-asc"></i> Volgorde {{ $menuItem->sort_order }}</span>
                            <span><i class="ri-eye-line"></i> {{ $menuItem->active ? 'Zichtbaar' : 'Verborgen' }}</span>
                        </div>
                    </div>

                    <div class="menu-item-card__footer">
                        <button
                            type="button"
                            class="menu-item-card__edit"
                            data-menu-item-edit
                            data-menu-item-name="{{ $menuItem->name }}"
                            data-menu-item-description="{{ $menuItem->description }}"
                            data-menu-item-price="{{ number_format((float) $menuItem->price, 2, '.', '') }}"
                            data-menu-item-category="{{ $menuItem->menu_category_id }}"
                            data-menu-item-active="{{ $menuItem->active ? '1' : '0' }}"
                            data-menu-item-available="{{ $menuItem->available ? '1' : '0' }}"
                            data-menu-item-sort-order="{{ $menuItem->sort_order }}"
                            data-menu-item-image="{{ $menuItem->image ? asset('storage/' . $menuItem->image) : '' }}"
                            data-menu-item-update-url="{{ route('restaurants.menu-items.update', [$restaurant, $menuItem]) }}"
                        >
                            <i class="ri-edit-line"></i>
                            Bewerken
                        </button>

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

        <div class="menu-items-no-results" data-menu-items-no-results hidden>
            <div class="menu-items-no-results__icon"><i class="ri-search-eye-line"></i></div>
            <h3>Geen menu-items gevonden</h3>
            <p>Pas je zoekterm of filters aan.</p>
        </div>
    @endif

    @if($categories->isNotEmpty())
        <div class="menu-item-modal" data-menu-item-form-modal aria-hidden="true">
            <div class="menu-item-modal__backdrop" data-menu-item-form-close></div>

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

                <div class="menu-item-modal__icon"><i class="ri-restaurant-2-line"></i></div>
                <span class="menu-item-modal__eyebrow" data-menu-item-modal-eyebrow>Nieuw menu-item</span>
                <h3 data-menu-item-modal-title>Menu-item toevoegen</h3>
                <p>Voeg een gerecht of drankje toe aan het publieke tafelmenu.</p>

                <form
                    method="POST"
                    action="{{ route('restaurants.menu-items.store', $restaurant) }}"
                    enctype="multipart/form-data"
                    class="menu-item-form"
                    data-menu-item-form
                    data-store-url="{{ route('restaurants.menu-items.store', $restaurant) }}"
                >
                    @csrf
                    <input type="hidden" name="_method" value="POST" data-menu-item-method>
                    <input type="hidden" name="remove_image" value="0" data-menu-item-remove-image>

                    <div class="menu-item-form__image-section">
                        <div class="menu-item-form__image-preview" data-menu-item-image-preview>
                            <span><i class="ri-image-add-line"></i></span>
                        </div>

                        <div class="menu-item-form__image-controls">
                            <label for="menuItemImage" class="menu-item-upload">
                                <i class="ri-upload-cloud-2-line"></i>
                                Afbeelding kiezen
                            </label>
                            <input id="menuItemImage" type="file" name="image" accept=".png,.jpg,.jpeg,.webp" data-menu-item-image-input>

                            <button type="button" class="menu-item-remove-image" data-menu-item-image-remove disabled>
                                <i class="ri-delete-bin-6-line"></i>
                                Verwijderen
                            </button>

                            <small data-menu-item-image-filename>Geen afbeelding geselecteerd</small>
                        </div>
                    </div>

                    <div class="menu-item-form__grid">
                        <div class="menu-item-field menu-item-field--full">
                            <label for="menuItemName">Naam</label>
                            <div class="menu-item-input">
                                <i class="ri-restaurant-line"></i>
                                <input id="menuItemName" type="text" name="name" maxlength="150" required data-menu-item-name-input>
                            </div>
                        </div>

                        <div class="menu-item-field">
                            <label for="menuItemCategory">Categorie</label>
                            <div class="menu-item-select">
                                <i class="ri-book-open-line"></i>
                                <select id="menuItemCategory" name="menu_category_id" required data-menu-item-category-input>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="menu-item-field">
                            <label for="menuItemPrice">Verkoop-/afhaalprijs <strong>*</strong></label>
                            <div class="menu-item-input">
                                <i class="ri-money-euro-circle-line"></i>
                                <input id="menuItemPrice" type="number" name="price" min="0.01" max="999999.99" step="0.01" placeholder="0,00" required data-menu-item-price-input>
                                <small class="menu-item-field__hint">Altijd verplicht. Bij AYCE/AYCD kan deze prijs aan tafel verborgen blijven, maar hij wordt bewaard voor afhaal en à-la-carte.</small>
                            </div>
                        </div>

                        <div class="menu-item-field menu-item-field--full">
                            <label for="menuItemDescription">Beschrijving</label>
                            <textarea id="menuItemDescription" name="description" maxlength="2000" rows="4" data-menu-item-description-input></textarea>
                        </div>

                        <div class="menu-item-field">
                            <label for="menuItemSortOrder">Volgorde</label>
                            <div class="menu-item-input">
                                <i class="ri-sort-asc"></i>
                                <input id="menuItemSortOrder" type="number" name="sort_order" min="0" max="9999" value="0" data-menu-item-sort-input>
                            </div>
                        </div>

                        <div class="menu-item-field">
                            <label>Zichtbaarheid</label>
                            <label class="menu-item-switch">
                                <input type="checkbox" name="active" value="1" checked data-menu-item-active-input>
                                <span class="menu-item-switch__track"><span></span></span>
                                <span class="menu-item-switch__copy">
                                    <strong>Actief</strong>
                                    <small>Zichtbaar in het menu</small>
                                </span>
                            </label>
                        </div>

                        <div class="menu-item-field menu-item-field--full">
                            <label>Beschikbaarheid</label>
                            <label class="menu-item-switch">
                                <input type="checkbox" name="available" value="1" checked data-menu-item-available-input>
                                <span class="menu-item-switch__track"><span></span></span>
                                <span class="menu-item-switch__copy">
                                    <strong>Beschikbaar</strong>
                                    <small>Klanten kunnen dit bestellen</small>
                                </span>
                            </label>
                        </div>
                    </div>

                    <div class="menu-item-modal__actions">
                        <button type="button" class="light-btn" data-menu-item-form-close>Annuleren</button>
                        <button type="submit" class="primary-btn" data-menu-item-submit>
                            <i class="ri-save-line"></i>
                            Menu-item opslaan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

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

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

            <div class="menu-item-delete-modal__icon"><i class="ri-delete-bin-6-line"></i></div>
            <span class="menu-item-delete-modal__eyebrow">Definitief verwijderen</span>
            <h3>Weet je zeker dat je dit menu-item wilt verwijderen?</h3>
            <p>Deze actie kan niet ongedaan worden gemaakt.</p>

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

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

                <div class="menu-item-field">
                    <label for="menuItemDeleteConfirmation">Naam van het menu-item</label>
                    <input id="menuItemDeleteConfirmation" type="text" autocomplete="off" data-menu-item-delete-confirmation>
                </div>

                <div class="menu-item-delete-modal__actions">
                    <button type="button" class="light-btn" data-menu-item-delete-close>Annuleren</button>
                    <button type="submit" class="menu-item-delete-submit" data-menu-item-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/menu-items.js') }}"></script>
@endpush