@extends('layouts.dashboard')

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

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

@section('content')
<section class="menu-categories-page" data-menu-categories-page>
    <div class="menu-categories-page__header">
        <div>
            <span class="menu-categories-page__eyebrow">
                <i class="ri-book-open-line"></i>
                Menubeheer
            </span>
            <h2>Categorieën van {{ $restaurant->name }}</h2>
            <p>Organiseer het tafelmenu in duidelijke categorieën en bepaal welke onderdelen klanten kunnen zien.</p>
        </div>

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

    <div class="menu-categories-overview">
        <article class="menu-categories-overview-card">
            <span class="menu-categories-overview-card__icon menu-categories-overview-card__icon--blue">
                <i class="ri-book-open-line"></i>
            </span>
            <div>
                <span>Totaal categorieën</span>
                <strong>{{ $categories->count() }}</strong>
            </div>
        </article>

        <article class="menu-categories-overview-card">
            <span class="menu-categories-overview-card__icon menu-categories-overview-card__icon--green">
                <i class="ri-checkbox-circle-line"></i>
            </span>
            <div>
                <span>Actief</span>
                <strong>{{ $categories->where('active', true)->count() }}</strong>
            </div>
        </article>

        <article class="menu-categories-overview-card">
            <span class="menu-categories-overview-card__icon menu-categories-overview-card__icon--gold">
                <i class="ri-eye-off-line"></i>
            </span>
            <div>
                <span>Verborgen</span>
                <strong>{{ $categories->where('active', false)->count() }}</strong>
            </div>
        </article>
    </div>

    <div class="menu-categories-toolbar">
        <div class="menu-categories-search">
            <i class="ri-search-line"></i>
            <input type="search" placeholder="Zoek op naam of beschrijving..." aria-label="Menucategorieën zoeken" data-categories-search>
        </div>

        <div class="menu-categories-filter">
            <label for="categoryStatusFilter">Status</label>
            <select id="categoryStatusFilter" data-categories-status-filter>
                <option value="all">Alle categorieën</option>
                <option value="active">Actief</option>
                <option value="inactive">Verborgen</option>
            </select>
        </div>

        <span class="menu-categories-toolbar__count" data-categories-count>
            {{ $categories->count() }} {{ $categories->count() === 1 ? 'categorie' : 'categorieën' }}
        </span>
    </div>

    @if($categories->isEmpty())
        <div class="menu-categories-empty">
            <div class="menu-categories-empty__icon">
                <i class="ri-book-open-line"></i>
            </div>
            <h3>Nog geen menucategorieën</h3>
            <p>Voeg je eerste categorie toe, zoals Voorgerechten, Hoofdgerechten, Desserts of Dranken.</p>
            <button type="button" class="primary-btn" data-category-create-open>
                <i class="ri-add-circle-line"></i>
                Eerste categorie toevoegen
            </button>
        </div>
    @else
        <div class="menu-categories-grid" data-categories-grid>
            @foreach($categories as $category)
                <article
                    class="menu-category-card"
                    data-category-card
                    data-category-status="{{ $category->active ? 'active' : 'inactive' }}"
                    data-category-section="{{ $category->menu_section }}"
                    data-category-search="{{ strtolower($category->name . ' ' . ($category->description ?? '')) }}"
                >
                    <div class="menu-category-card__image">
                        @if($category->image)
                            <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}">
                        @else
                            <div class="menu-category-card__placeholder">
                                <i class="ri-restaurant-line"></i>
                            </div>
                        @endif

                        <span class="menu-category-card__status {{ $category->active ? 'is-active' : 'is-inactive' }}">
                            <span></span>
                            {{ $category->active ? 'Actief' : 'Verborgen' }}
                        </span>
                    </div>

                    <div class="menu-category-card__content">
                        <span class="menu-category-card__eyebrow"><i class="{{ $category->menu_section === 'drink' ? 'ri-cup-line' : 'ri-restaurant-2-line' }}"></i> {{ $category->menu_section === 'drink' ? 'Drank' : 'Eten' }}</span>
                        <h3>{{ $category->name }}</h3>
                        <p>{{ $category->description ?: 'Nog geen beschrijving ingesteld.' }}</p>

                        <div class="menu-category-card__meta">
                            <span><i class="ri-sort-asc"></i> Volgorde {{ $category->sort_order }}</span>
                            <span><i class="ri-restaurant-2-line"></i> {{ $category->menu_items_count ?? 0 }} items</span>
                        </div>
                    </div>

                    <div class="menu-category-card__footer">
                      <a
                        href="{{ route('restaurants.menu-items.index', $restaurant) }}?category={{ $category->id }}"
                        class="menu-category-card__items"
                    >
                        <i class="ri-list-check-2"></i>
                        Menu-items
                    </a>

                        <button
                            type="button"
                            class="menu-category-card__edit"
                            data-category-edit
                            data-category-name="{{ $category->name }}"
                            data-category-description="{{ $category->description }}"
                            data-category-section="{{ $category->menu_section }}"
                            data-category-active="{{ $category->active ? '1' : '0' }}"
                            data-category-sort-order="{{ $category->sort_order }}"
                            data-category-image="{{ $category->image ? asset('storage/' . $category->image) : '' }}"
                            data-category-update-url="{{ route('restaurants.menu-categories.update', [$restaurant, $category]) }}"
                        >
                            <i class="ri-edit-line"></i>
                            Bewerken
                        </button>

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

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

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

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

            <div class="menu-category-modal__icon">
                <i class="ri-book-open-line"></i>
            </div>

            <span class="menu-category-modal__eyebrow" data-category-modal-eyebrow>Nieuwe categorie</span>
            <h3 data-category-modal-title>Categorie toevoegen</h3>
            <p>Voeg een duidelijke categorie toe voor het publieke tafelmenu.</p>

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

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

                    <div class="menu-category-form__image-controls">
                        <label for="categoryImage" class="menu-category-upload">
                            <i class="ri-upload-cloud-2-line"></i>
                            Afbeelding kiezen
                        </label>

                        <input id="categoryImage" type="file" name="image" accept=".png,.jpg,.jpeg,.webp" data-category-image-input>

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

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

                <div class="menu-category-form__grid">
                    <div class="menu-category-field menu-category-field--full">
                        <label for="categoryName">Categorienaam</label>
                        <div class="menu-category-input">
                            <i class="ri-book-open-line"></i>
                            <input id="categoryName" type="text" name="name" maxlength="120" placeholder="Bijvoorbeeld Voorgerechten" required data-category-name-input>
                        </div>
                    </div>

                    <div class="menu-category-field">
                        <label for="categoryMenuSection">Onderdeel</label>
                        <div class="menu-category-input">
                            <i class="ri-layout-2-line"></i>
                            <select id="categoryMenuSection" name="menu_section" required data-category-section-input>
                                <option value="food">Eten</option>
                                <option value="drink">Drank</option>
                            </select>
                        </div>
                        <small>Bepaalt of deze categorie onder Eten of Drank verschijnt.</small>
                    </div>

                    <div class="menu-category-field menu-category-field--full">
                        <label for="categoryDescription">Beschrijving</label>
                        <textarea id="categoryDescription" name="description" maxlength="1000" rows="4" placeholder="Korte beschrijving voor klanten" data-category-description-input></textarea>
                    </div>

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

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

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

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

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

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

            <span class="menu-category-delete-modal__eyebrow">Definitief verwijderen</span>
            <h3>Weet je zeker dat je deze categorie wilt verwijderen?</h3>
            <p>Deze actie kan niet ongedaan worden gemaakt.</p>

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

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

                <div class="menu-category-field">
                    <label for="categoryDeleteConfirmation">Categorienaam</label>
                    <input id="categoryDeleteConfirmation" type="text" autocomplete="off" placeholder="Typ de exacte categorienaam" data-category-delete-confirmation>
                </div>

                <div class="menu-category-delete-modal__actions">
                    <button type="button" class="light-btn" data-category-delete-close>Annuleren</button>
                    <button type="submit" class="menu-category-delete-submit" data-category-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-categories.js') }}"></script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const page = document.querySelector('[data-menu-categories-page]');
        const input = page?.querySelector('[data-category-section-input]');
        page?.querySelectorAll('[data-category-create-open]').forEach(btn => btn.addEventListener('click', () => { if (input) input.value = 'food'; }));
        page?.querySelectorAll('[data-category-edit]').forEach(btn => btn.addEventListener('click', () => { if (input) input.value = btn.dataset.categorySection || 'food'; }));
    });
    </script>
@endpush