@extends('layouts.dashboard')

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

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

@section('content')
<section class="rates-page" data-rates-page>
    <div class="rates-page__header">
        <div>
            <span class="rates-page__eyebrow">
                <i class="ri-price-tag-3-line"></i>
                Formulebeheer
            </span>

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

            <p>
                Beheer All You Can Eat-, All You Can Drink- en hybride formules,
                inclusief sessieduur, bestelrondes, inbegrepen categorieën en leeftijdsprijzen.
            </p>
        </div>

        <button type="button" class="rates-btn rates-btn--primary" data-rate-create-open>
            <i class="ri-add-circle-line"></i>
            Nieuwe formule
        </button>
    </div>

    <div class="rates-overview">
        <article class="rates-overview-card">
            <span class="rates-overview-card__icon"><i class="ri-price-tag-3-line"></i></span>
            <div><span>Totaal formules</span><strong>{{ $rates->count() }}</strong></div>
        </article>

        <article class="rates-overview-card">
            <span class="rates-overview-card__icon"><i class="ri-restaurant-2-line"></i></span>
            <div><span>AYCE</span><strong>{{ $rates->where('rate_type', 'ayce_food')->count() }}</strong></div>
        </article>

        <article class="rates-overview-card">
            <span class="rates-overview-card__icon"><i class="ri-cup-line"></i></span>
            <div><span>AYCD</span><strong>{{ $rates->where('rate_type', 'aycd_drink')->count() }}</strong></div>
        </article>

        <article class="rates-overview-card">
            <span class="rates-overview-card__icon"><i class="ri-layout-masonry-line"></i></span>
            <div><span>Hybride</span><strong>{{ $rates->where('rate_type', 'hybrid')->count() }}</strong></div>
        </article>
    </div>

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

        <select data-rate-status-filter>
            <option value="all">Alle statussen</option>
            <option value="active">Actief</option>
            <option value="inactive">Inactief</option>
        </select>

        <select data-rate-type-filter>
            <option value="all">Alle types</option>
            <option value="ayce_food">All You Can Eat</option>
            <option value="aycd_drink">All You Can Drink</option>
            <option value="hybrid">Hybride</option>
        </select>

        <span data-rate-count>
            {{ $rates->count() }} {{ $rates->count() === 1 ? 'formule' : 'formules' }}
        </span>
    </div>

    @if($rates->isEmpty())
        <div class="rates-empty">
            <span><i class="ri-price-tag-3-line"></i></span>
            <h3>Nog geen formules</h3>
            <p>Maak je eerste AYCE-, AYCD- of hybride formule aan.</p>

            <button type="button" class="rates-btn rates-btn--primary" data-rate-create-open>
                <i class="ri-add-circle-line"></i>
                Eerste formule toevoegen
            </button>
        </div>
    @else
        <div class="rates-grid" data-rates-grid>
            @foreach($rates as $rate)
                @php
                    $typeLabel = match($rate->rate_type) {
                        'ayce_food' => 'All You Can Eat',
                        'aycd_drink' => 'All You Can Drink',
                        'hybrid' => 'Hybride',
                        default => $rate->rate_type,
                    };

                    $typeIcon = match($rate->rate_type) {
                        'ayce_food' => 'ri-restaurant-2-line',
                        'aycd_drink' => 'ri-cup-line',
                        'hybrid' => 'ri-layout-masonry-line',
                        default => 'ri-price-tag-3-line',
                    };

                    $ratePayload = [
                        'id' => $rate->id,
                        'name' => $rate->name,
                        'description' => $rate->description,
                        'rate_type' => $rate->rate_type,
                        'session_duration_minutes' => $rate->session_duration_minutes,
                        'food_round_interval_minutes' => $rate->food_round_interval_minutes,
                        'food_items_per_person_per_round' => $rate->food_items_per_person_per_round,
                        'drink_round_interval_minutes' => $rate->drink_round_interval_minutes,
                        'drink_items_per_person_per_round' => $rate->drink_items_per_person_per_round,
                        'starts_at' => optional($rate->starts_at)->format('Y-m-d\\TH:i'),
                        'ends_at' => optional($rate->ends_at)->format('Y-m-d\\TH:i'),
                        'active' => $rate->active,
                        'sort_order' => $rate->sort_order,
                        'weekdays' => $rate->weekdays
                            ->pluck('weekday')
                            ->values()
                            ->all(),
                        'menu_category_ids' => $rate->menuCategories
                            ->pluck('id')
                            ->values()
                            ->all(),
                        'age_prices' => $rate->agePrices
                            ->map(function ($price) {
                                return [
                                    'label' => $price->label,
                                    'minimum_age' => $price->minimum_age,
                                    'maximum_age' => $price->maximum_age,
                                    'price' => $price->price,
                                    'active' => $price->active,
                                    'sort_order' => $price->sort_order,
                                ];
                            })
                            ->values()
                            ->all(),
                    ];
                @endphp

                <article
                    class="rate-card"
                    data-rate-card
                    data-rate-status="{{ $rate->active ? 'active' : 'inactive' }}"
                    data-rate-type="{{ $rate->rate_type }}"
                    data-rate-search="{{ strtolower($rate->name . ' ' . ($rate->description ?? '') . ' ' . $typeLabel) }}"
                >
                    <div class="rate-card__top">
                        <span class="rate-card__type">
                            <i class="{{ $typeIcon }}"></i>
                            {{ $typeLabel }}
                        </span>

                        <span class="rate-card__status {{ $rate->active ? 'is-active' : 'is-inactive' }}">
                            <i class="{{ $rate->active ? 'ri-checkbox-circle-line' : 'ri-eye-off-line' }}"></i>
                            {{ $rate->active ? 'Actief' : 'Inactief' }}
                        </span>
                    </div>

                    <h3>{{ $rate->name }}</h3>
                    <p>{{ $rate->description ?: 'Nog geen beschrijving ingesteld.' }}</p>

                    @php
                        $weekdayLabels = [
                            'monday' => 'Ma',
                            'tuesday' => 'Di',
                            'wednesday' => 'Wo',
                            'thursday' => 'Do',
                            'friday' => 'Vr',
                            'saturday' => 'Za',
                            'sunday' => 'Zo',
                        ];
                    @endphp

                    <div class="rate-card__weekdays">
                        @foreach($weekdayLabels as $weekdayKey => $weekdayLabel)
                            <span class="{{ $rate->weekdays->contains('weekday', $weekdayKey) ? 'is-active' : '' }}">
                                {{ $weekdayLabel }}
                            </span>
                        @endforeach
                    </div>

                    <div class="rate-card__metrics">
                        <div>
                            <span>Sessieduur</span>
                            <strong>{{ $rate->session_duration_minutes }} min</strong>
                        </div>

                        @if($rate->includesFood())
                            <div>
                                <span>Eten per ronde</span>
                                <strong>{{ $rate->food_items_per_person_per_round }} p.p.</strong>
                            </div>
                        @endif

                        @if($rate->includesDrinks())
                            <div>
                                <span>Drank per ronde</span>
                                <strong>{{ $rate->drink_items_per_person_per_round }} p.p.</strong>
                            </div>
                        @endif

                        <div>
                            <span>Leeftijdsprijzen</span>
                            <strong>{{ $rate->agePrices->count() }}</strong>
                        </div>
                    </div>

                    <div class="rate-card__categories">
                        @forelse($rate->menuCategories as $category)
                            <span>
                                <i class="{{ $category->menu_section === 'drink' ? 'ri-cup-line' : 'ri-restaurant-2-line' }}"></i>
                                {{ $category->name }}
                            </span>
                        @empty
                            <span>Geen categorieën gekoppeld</span>
                        @endforelse
                    </div>

                    <div class="rate-card__prices">
                        @foreach($rate->agePrices->take(4) as $price)
                            <div>
                                <span>{{ $price->label }}</span>
                                <strong>€ {{ number_format((float) $price->price, 2, ',', '.') }}</strong>
                            </div>
                        @endforeach

                        @if($rate->agePrices->count() > 4)
                            <small>+ {{ $rate->agePrices->count() - 4 }} extra prijsregels</small>
                        @endif
                    </div>

                    <div class="rate-card__footer">
                        <button
                            type="button"
                            class="rates-btn rates-btn--light"
                            data-rate-edit
                            data-rate-update-url="{{ route('restaurants.rates.update', [$restaurant, $rate]) }}"
                            data-rate='@json($ratePayload)'
                        >
                            <i class="ri-edit-line"></i>
                            Bewerken
                        </button>

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

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

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

        <div class="rate-modal__dialog">
            <button type="button" class="rate-modal__close" data-rate-form-close>
                <i class="ri-close-line"></i>
            </button>

            <div class="rate-modal__header">
                <span data-rate-modal-eyebrow>Nieuwe formule</span>
                <h3 data-rate-modal-title>Formule toevoegen</h3>
                <p>Stel alle regels van deze formule in één keer in.</p>
            </div>

            @if($errors->any())
                <div class="rates-alert rates-alert--error rate-modal__validation" data-rate-modal-errors>
                    <i class="ri-error-warning-line"></i>
                    <div>
                        <strong>Controleer de gegevens</strong>
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <form
                method="POST"
                action="{{ route('restaurants.rates.store', $restaurant) }}"
                data-rate-form
                data-store-url="{{ route('restaurants.rates.store', $restaurant) }}"
            >
                @csrf
                <input type="hidden" name="_method" value="POST" data-rate-method>
                <input type="hidden" name="_rate_mode" value="create" data-rate-form-mode>
                <input type="hidden" name="_rate_action" value="{{ route('restaurants.rates.store', $restaurant) }}" data-rate-form-action>
                <input type="hidden" name="_rate_id" value="" data-rate-form-id>

                <section class="rate-form-section">
                    <div class="rate-form-section__heading">
                        <span>Basis</span>
                        <h4>Algemene instellingen</h4>
                    </div>

                    <div class="rate-form-grid">
                        <div class="rate-field rate-field--full">
                            <label for="rateName">Naam</label>
                            <input id="rateName" type="text" name="name" maxlength="150" required data-rate-name>
                        </div>

                        <div class="rate-field rate-field--full">
                            <label for="rateDescription">Beschrijving</label>
                            <textarea id="rateDescription" name="description" rows="3" maxlength="5000" data-rate-description></textarea>
                        </div>

                        <div class="rate-field rate-field--full">
                            <label>Formuletype</label>

                            <div class="rate-type-options">
                                <label>
                                    <input type="radio" name="rate_type" value="ayce_food" checked data-rate-type>
                                    <span>
                                        <i class="ri-restaurant-2-line"></i>
                                        <strong>All You Can Eat</strong>
                                        <small>Alleen geselecteerde eetcategorieën</small>
                                    </span>
                                </label>

                                <label>
                                    <input type="radio" name="rate_type" value="aycd_drink" data-rate-type>
                                    <span>
                                        <i class="ri-cup-line"></i>
                                        <strong>All You Can Drink</strong>
                                        <small>Alleen geselecteerde drankcategorieën</small>
                                    </span>
                                </label>

                                <label>
                                    <input type="radio" name="rate_type" value="hybrid" data-rate-type>
                                    <span>
                                        <i class="ri-layout-masonry-line"></i>
                                        <strong>Hybride</strong>
                                        <small>Eten en drank in één formule</small>
                                    </span>
                                </label>
                            </div>
                        </div>

                        <div class="rate-field">
                            <label for="sessionDuration">Sessieduur in minuten</label>
                            <input id="sessionDuration" type="number" name="session_duration_minutes" min="1" max="1440" value="150" required data-session-duration>
                        </div>

                        <div class="rate-field">
                            <label for="rateSortOrder">Volgorde</label>
                            <input id="rateSortOrder" type="number" name="sort_order" min="0" max="9999" value="0" data-rate-sort-order>
                        </div>

                        <div class="rate-field rate-field--full">
                            <label>Beschikbare weekdagen</label>

                            <div class="rate-weekday-options">
                                @foreach([
                                    'monday' => 'Maandag',
                                    'tuesday' => 'Dinsdag',
                                    'wednesday' => 'Woensdag',
                                    'thursday' => 'Donderdag',
                                    'friday' => 'Vrijdag',
                                    'saturday' => 'Zaterdag',
                                    'sunday' => 'Zondag',
                                ] as $weekdayKey => $weekdayLabel)
                                    <label>
                                        <input
                                            type="checkbox"
                                            name="weekdays[]"
                                            value="{{ $weekdayKey }}"
                                            data-rate-weekday
                                        >
                                        <span>{{ $weekdayLabel }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <input type="hidden" name="active" value="0">
                        <label class="rate-switch rate-field--full">
                            <input type="checkbox" name="active" value="1" checked data-rate-active>
                            <span></span>
                            <div>
                                <strong>Actieve formule</strong>
                                <small>Beschikbaar bij het starten van een tafelsessie</small>
                            </div>
                        </label>
                    </div>
                </section>

                <section class="rate-form-section" data-food-settings>
                    <div class="rate-form-section__heading">
                        <span>Eten</span>
                        <h4>Regels voor eetrondes</h4>
                    </div>

                    <div class="rate-form-grid">
                        <div class="rate-field">
                            <label for="foodInterval">Minuten tussen eetrondes</label>
                            <input id="foodInterval" type="number" name="food_round_interval_minutes" min="1" max="1440" value="5" data-food-interval>
                        </div>

                        <div class="rate-field">
                            <label for="foodItemsPerPerson">Gerechten per persoon per ronde</label>
                            <input id="foodItemsPerPerson" type="number" name="food_items_per_person_per_round" min="1" max="100" value="3" data-food-items>
                        </div>
                    </div>
                </section>

                <section class="rate-form-section" data-drink-settings hidden>
                    <div class="rate-form-section__heading">
                        <span>Drank</span>
                        <h4>Regels voor drankrondes</h4>
                    </div>

                    <div class="rate-form-grid">
                        <div class="rate-field">
                            <label for="drinkInterval">Minuten tussen drankrondes</label>
                            <input id="drinkInterval" type="number" name="drink_round_interval_minutes" min="1" max="1440" value="5" data-drink-interval>
                        </div>

                        <div class="rate-field">
                            <label for="drinkItemsPerPerson">Drankjes per persoon per ronde</label>
                            <input id="drinkItemsPerPerson" type="number" name="drink_items_per_person_per_round" min="1" max="100" value="2" data-drink-items>
                        </div>
                    </div>
                </section>

                <section class="rate-form-section">
                    <div class="rate-form-section__heading">
                        <span>Inbegrepen aanbod</span>
                        <h4>Menu-categorieën</h4>
                    </div>

                    <div class="rate-category-group" data-food-categories>
                        <h5><i class="ri-restaurant-2-line"></i> Eetcategorieën</h5>

                        <div class="rate-category-options">
                            @forelse($foodCategories as $category)
                                <label>
                                    <input
                                        type="checkbox"
                                        name="menu_category_ids[]"
                                        value="{{ $category->id }}"
                                        data-rate-category
                                        data-category-section="food"
                                    >
                                    <span><i class="ri-restaurant-line"></i>{{ $category->name }}</span>
                                </label>
                            @empty
                                <p>Er zijn nog geen eetcategorieën.</p>
                            @endforelse
                        </div>
                    </div>

                    <div class="rate-category-group" data-drink-categories hidden>
                        <h5><i class="ri-cup-line"></i> Drankcategorieën</h5>

                        <div class="rate-category-options">
                            @forelse($drinkCategories as $category)
                                <label>
                                    <input
                                        type="checkbox"
                                        name="menu_category_ids[]"
                                        value="{{ $category->id }}"
                                        data-rate-category
                                        data-category-section="drink"
                                    >
                                    <span><i class="ri-cup-line"></i>{{ $category->name }}</span>
                                </label>
                            @empty
                                <p>Er zijn nog geen drankcategorieën.</p>
                            @endforelse
                        </div>
                    </div>
                </section>

                <section class="rate-form-section">
                    <div class="rate-form-section__heading rate-form-section__heading--actions">
                        <div>
                            <span>Prijzen</span>
                            <h4>Leeftijdsprijzen</h4>
                        </div>

                        <button type="button" class="rates-btn rates-btn--light" data-age-price-add>
                            <i class="ri-add-line"></i>
                            Leeftijdsregel
                        </button>
                    </div>

                    <div class="age-price-list" data-age-price-list></div>

                    <small class="age-price-help">
                        Laat minimum of maximum leeg voor een open bereik.
                        Leeftijdsregels mogen niet overlappen.
                    </small>
                </section>

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

                    <button type="submit" class="rates-btn rates-btn--primary">
                        <i class="ri-save-line"></i>
                        Formule opslaan
                    </button>
                </div>
            </form>
        </div>
    </div>

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

        <div class="rate-modal__dialog rate-modal__dialog--small">
            <button type="button" class="rate-modal__close" data-rate-delete-close>
                <i class="ri-close-line"></i>
            </button>

            <div class="rate-modal__header">
                <span>Formule verwijderen</span>
                <h3>Weet je dit zeker?</h3>
                <p>Typ de exacte formulenaam om te bevestigen.</p>
            </div>

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

                <div class="rate-delete-warning">
                    <strong data-rate-delete-name></strong>
                </div>

                <div class="rate-field">
                    <label for="rateDeleteConfirmation">Formulenaam</label>
                    <input id="rateDeleteConfirmation" type="text" autocomplete="off" data-rate-delete-confirmation>
                </div>

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

                    <button type="submit" class="rates-btn rates-btn--danger" data-rate-delete-submit disabled>
                        <i class="ri-delete-bin-6-line"></i>
                        Definitief verwijderen
                    </button>
                </div>
            </form>
        </div>
    </div>

    <template data-age-price-template>
        <article class="age-price-row" data-age-price-row>
            <div class="age-price-row__drag"><i class="ri-drag-move-2-line"></i></div>

            <div class="rate-field">
                <label>Label</label>
                <input type="text" maxlength="100" placeholder="Bijvoorbeeld 8 t/m 10 jaar" data-age-label required>
            </div>

            <div class="rate-field">
                <label>Minimumleeftijd</label>
                <input type="number" min="0" max="150" placeholder="Geen minimum" data-age-minimum>
            </div>

            <div class="rate-field">
                <label>Maximumleeftijd</label>
                <input type="number" min="0" max="150" placeholder="Geen maximum" data-age-maximum>
            </div>

            <div class="rate-field">
                <label>Prijs</label>
                <input type="number" min="0" max="999999.99" step="0.01" value="0.00" data-age-price required>
            </div>

            <label class="rate-switch rate-switch--compact">
                <input type="hidden" value="0" data-age-active-hidden>
                <input type="checkbox" value="1" checked data-age-active>
                <span></span>
            </label>

            <button type="button" class="age-price-row__remove" data-age-price-remove>
                <i class="ri-delete-bin-6-line"></i>
            </button>
        </article>
    </template>

    @if($errors->any())
        <script type="application/json" data-rate-restore-state>{!! json_encode([
            'mode' => old('_rate_mode', 'create'),
            'action' => old('_rate_action', route('restaurants.rates.store', $restaurant)),
            'rate_id' => old('_rate_id'),
            'data' => old(),
        ], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!}</script>
    @endif
</section>
@endsection

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