@extends('layouts.dashboard')

@section('title', 'Restaurants - DineSync')
@section('eyebrow', 'Platform')
@section('page-title', 'Restaurants')

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

@section('content')
<section class="restaurants-page" data-restaurants-page>
    <div class="restaurants-page__header">
        <div>
            <span class="restaurants-page__eyebrow">
                <i class="ri-store-2-line"></i>
                Restaurantbeheer
            </span>

            <h2>Jouw restaurants</h2>

            <p>
                Bekijk en beheer alle restaurants die aan jouw DineSync-account gekoppeld zijn.
            </p>
        </div>

        <a href="{{ route('restaurants.create') }}" class="secondary-btn">
            <i class="ri-add-circle-line"></i>
            Nieuw restaurant
        </a>
    </div>

    <div class="restaurants-overview">
        <article class="restaurants-overview-card">
            <span class="restaurants-overview-card__icon restaurants-overview-card__icon--blue">
                <i class="ri-store-2-line"></i>
            </span>

            <div>
                <span>Totaal restaurants</span>
                <strong>{{ $restaurants->count() }}</strong>
            </div>
        </article>

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

            <div>
                <span>Actieve restaurants</span>
                <strong>{{ $restaurants->where('active', true)->count() }}</strong>
            </div>
        </article>

        <article class="restaurants-overview-card">
            <span class="restaurants-overview-card__icon restaurants-overview-card__icon--gold">
                <i class="ri-team-line"></i>
            </span>

            <div>
                <span>Actieve medewerkers</span>
                <strong>{{ $restaurants->sum('active_members_count') }}</strong>
            </div>
        </article>
    </div>

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

            <input
                type="search"
                placeholder="Zoek op naam, type of contact..."
                aria-label="Restaurants zoeken"
                data-restaurants-search
            >
        </div>

        <div class="restaurants-toolbar__meta">
            <span data-restaurants-count>
                {{ $restaurants->count() }}
                {{ $restaurants->count() === 1 ? 'restaurant' : 'restaurants' }}
            </span>
        </div>
    </div>

    @if($restaurants->isEmpty())
        <div class="restaurants-empty">
            <div class="restaurants-empty__visual">
                <span class="restaurants-empty__icon">
                    <i class="ri-store-2-line"></i>
                </span>

                <span class="restaurants-empty__orb restaurants-empty__orb--one"></span>
                <span class="restaurants-empty__orb restaurants-empty__orb--two"></span>
            </div>

            <h3>Nog geen restaurants</h3>

            <p>
                Voeg je eerste restaurant toe en start daarna met het beheren van rollen, medewerkers en operationele modules.
            </p>

            <a href="{{ route('restaurants.create') }}" class="primary-btn">
                <i class="ri-add-circle-line"></i>
                Eerste restaurant toevoegen
            </a>
        </div>
    @else
        <div class="restaurants-grid" data-restaurants-grid>
            @foreach($restaurants as $restaurant)
                @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

                <article
                    class="restaurant-card"
                    data-restaurant-card
                    data-search="{{ strtolower($restaurant->name . ' ' . $serviceModeLabel . ' ' . ($restaurant->email ?? '') . ' ' . ($restaurant->phone ?? '')) }}"
                >
                    <div class="restaurant-card__top">
                        <div class="restaurant-card__brand">
                            <div class="restaurant-card__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 class="restaurant-card__title">
                                <span>{{ $serviceModeLabel }}</span>
                                <h3>{{ $restaurant->name }}</h3>
                            </div>
                        </div>

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

                    <div class="restaurant-card__details">
                        <div>
                            <span>
                                <i class="ri-team-line"></i>
                                Medewerkers
                            </span>

                            <strong>{{ $restaurant->active_members_count ?? 0 }}</strong>
                        </div>

                        <div>
                            <span>
                                <i class="ri-money-euro-circle-line"></i>
                                Valuta
                            </span>

                            <strong>{{ $restaurant->currency }}</strong>
                        </div>

                        <div>
                            <span>
                                <i class="ri-time-zone-line"></i>
                                Tijdzone
                            </span>

                            <strong>{{ $restaurant->timezone }}</strong>
                        </div>
                    </div>

                    <div class="restaurant-card__contact">
                        @if($restaurant->email)
                            <span>
                                <i class="ri-mail-line"></i>
                                {{ $restaurant->email }}
                            </span>
                        @endif

                        @if($restaurant->phone)
                            <span>
                                <i class="ri-phone-line"></i>
                                {{ $restaurant->phone }}
                            </span>
                        @endif

                        @if(!$restaurant->email && !$restaurant->phone)
                            <span class="restaurant-card__contact-empty">
                                <i class="ri-information-line"></i>
                                Geen contactgegevens ingesteld
                            </span>
                        @endif
                    </div>

                    <div class="restaurant-card__footer">
                        <span class="restaurant-card__owner">
                            <i class="ri-shield-user-line"></i>
                            Restaurantomgeving
                        </span>

                        <div class="restaurant-card__footer-actions">
                            <button
                                type="button"
                                class="restaurant-card__delete"
                                data-delete-restaurant
                                data-restaurant-name="{{ $restaurant->name }}"
                                data-delete-url="{{ route('restaurants.destroy', $restaurant) }}"
                            >
                                <i class="ri-delete-bin-6-line"></i>
                                Verwijderen
                            </button>

                            <a
                                href="{{ route('restaurants.dashboard', $restaurant) }}"
                                class="restaurant-card__open"
                            >
                                Open dashboard
                                <i class="ri-arrow-right-line"></i>
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>

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

            <h3>Geen restaurants gevonden</h3>

            <p>Probeer een andere zoekterm.</p>
        </div>
    @endif

    <div
        class="restaurant-delete-modal"
        data-delete-modal
        aria-hidden="true"
    >
        <div
            class="restaurant-delete-modal__backdrop"
            data-delete-cancel
        ></div>

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

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

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

            <h3 id="restaurantDeleteTitle">
                Weet je zeker dat je dit restaurant wilt verwijderen?
            </h3>

            <p>
                Deze actie kan niet ongedaan worden gemaakt. Alle gekoppelde restaurantgegevens kunnen hierdoor definitief verloren gaan.
            </p>

            <div class="restaurant-delete-modal__warning">
                <i class="ri-error-warning-line"></i>

                <span>
                    Typ
                    <strong data-delete-restaurant-name></strong>
                    om de verwijdering te bevestigen.
                </span>
            </div>

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

                <div class="restaurant-delete-field">
                    <label for="restaurantDeleteConfirmation">
                        Restaurantnaam
                    </label>

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

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

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

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