@extends('layouts.dashboard')

@section('title', 'Restaurant toevoegen - DineSync')
@section('eyebrow', 'Restaurants')
@section('page-title', 'Nieuw restaurant')

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

@section('content')
<section class="restaurant-onboarding" data-restaurant-wizard data-current-step="1">
    <div class="restaurant-onboarding__header">
        <div>
            <span class="restaurant-onboarding__eyebrow">
                <i class="ri-sparkling-2-line"></i>
                Restaurant onboarding
            </span>

            <h2>Voeg je restaurant toe</h2>

            <p>
                Stel de basis van je restaurant in. Je kunt alle gegevens later nog aanpassen.
            </p>
        </div>

        <a href="{{ route('restaurants.index') }}" class="light-btn">
            <i class="ri-arrow-left-line"></i>
            Terug naar restaurants
        </a>
    </div>

    <div class="restaurant-onboarding__layout">
        <aside class="restaurant-wizard-nav">
            <div class="restaurant-wizard-nav__intro">
                <span>Installatie</span>
                <strong>3 korte stappen</strong>
                <p>
                    DineSync maakt automatisch de eigenaarrol, standaardrollen en jouw restaurantlidmaatschap aan.
                </p>
            </div>

            <ol class="restaurant-wizard-steps">
                <li class="restaurant-wizard-step is-active" data-step-indicator="1">
                    <span class="restaurant-wizard-step__number">1</span>
                    <span class="restaurant-wizard-step__copy">
                        <strong>Algemene gegevens</strong>
                        <small>Naam en contactinformatie</small>
                    </span>
                    <i class="ri-check-line"></i>
                </li>

                <li class="restaurant-wizard-step" data-step-indicator="2">
                    <span class="restaurant-wizard-step__number">2</span>
                    <span class="restaurant-wizard-step__copy">
                        <strong>Werking</strong>
                        <small>Type, valuta en tijdzone</small>
                    </span>
                    <i class="ri-check-line"></i>
                </li>

                <li class="restaurant-wizard-step" data-step-indicator="3">
                    <span class="restaurant-wizard-step__number">3</span>
                    <span class="restaurant-wizard-step__copy">
                        <strong>Bevestigen</strong>
                        <small>Controleer en maak aan</small>
                    </span>
                    <i class="ri-check-line"></i>
                </li>
            </ol>

            <div class="restaurant-wizard-nav__security">
                <i class="ri-shield-check-line"></i>

                <div>
                    <strong>Veilige onboarding</strong>
                    <span>Alle gegevens blijven gekoppeld aan jouw account.</span>
                </div>
            </div>
        </aside>

        <div class="restaurant-wizard-card">
            <div class="restaurant-wizard-progress" aria-hidden="true">
                <span class="restaurant-wizard-progress__bar"></span>
            </div>

            <form method="POST" action="{{ route('restaurants.store') }}" class="restaurant-wizard-form" novalidate>
                @csrf

                <section class="restaurant-wizard-panel is-active" data-step-panel="1">
                    <header class="restaurant-wizard-panel__header">
                        <span>Stap 1 van 3</span>
                        <h3>Vertel ons over je restaurant</h3>
                        <p>Deze gegevens worden gebruikt binnen je account en op administratieve pagina's.</p>
                    </header>

                    <div class="restaurant-form-grid">
                        <div class="restaurant-field restaurant-field--full">
                            <label for="name">Restaurantnaam <span>*</span></label>

                            <div class="restaurant-input">
                                <i class="ri-store-2-line"></i>
                                <input id="name" type="text" name="name" value="{{ old('name') }}" placeholder="Bijvoorbeeld Brasserie De Markt" maxlength="255" required autofocus data-summary-source="name">
                            </div>

                            @error('name')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="restaurant-field">
                            <label for="email">E-mailadres</label>

                            <div class="restaurant-input">
                                <i class="ri-mail-line"></i>
                                <input id="email" type="email" name="email" value="{{ old('email') }}" placeholder="info@restaurant.be" autocomplete="email" data-summary-source="email">
                            </div>

                            @error('email')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="restaurant-field">
                            <label for="phone">Telefoonnummer</label>

                            <div class="restaurant-input">
                                <i class="ri-phone-line"></i>
                                <input id="phone" type="text" name="phone" value="{{ old('phone') }}" placeholder="+32 12 34 56 78" autocomplete="tel" data-summary-source="phone">
                            </div>

                            @error('phone')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="restaurant-field restaurant-field--full">
                            <label for="website">Website</label>

                            <div class="restaurant-input">
                                <i class="ri-global-line"></i>
                                <input id="website" type="url" name="website" value="{{ old('website') }}" placeholder="https://www.jouwrestaurant.be" autocomplete="url" data-summary-source="website">
                            </div>

                            <small class="restaurant-field__help">Voeg steeds <strong>https://</strong> toe.</small>

                            @error('website')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="restaurant-wizard-panel__actions">
                        <span></span>

                        <button type="button" class="primary-btn" data-next-step>
                            Volgende stap
                            <i class="ri-arrow-right-line"></i>
                        </button>
                    </div>
                </section>

                <section class="restaurant-wizard-panel" data-step-panel="2">
                    <header class="restaurant-wizard-panel__header">
                        <span>Stap 2 van 3</span>
                        <h3>Hoe werkt je restaurant?</h3>
                        <p>Kies het servicemodel en de financiële basisinstellingen.</p>
                    </header>

                    <div class="restaurant-service-modes">
                        <label class="restaurant-service-mode">
                            <input type="radio" name="service_mode" value="ayce" {{ old('service_mode', 'ayce') === 'ayce' ? 'checked' : '' }} data-summary-source="service_mode" required>
                            <span class="restaurant-service-mode__icon"><i class="ri-loop-left-line"></i></span>
                            <span class="restaurant-service-mode__copy">
                                <strong>All you can eat</strong>
                                <small>Werken met sessies, rondes en limieten.</small>
                            </span>
                            <span class="restaurant-service-mode__check"><i class="ri-check-line"></i></span>
                        </label>

                        <label class="restaurant-service-mode">
                            <input type="radio" name="service_mode" value="a_la_carte" {{ old('service_mode') === 'a_la_carte' ? 'checked' : '' }} data-summary-source="service_mode">
                            <span class="restaurant-service-mode__icon"><i class="ri-restaurant-line"></i></span>
                            <span class="restaurant-service-mode__copy">
                                <strong>À la carte</strong>
                                <small>Traditionele bestellingen zonder bestelrondes.</small>
                            </span>
                            <span class="restaurant-service-mode__check"><i class="ri-check-line"></i></span>
                        </label>

                        <label class="restaurant-service-mode">
                            <input type="radio" name="service_mode" value="hybrid" {{ old('service_mode') === 'hybrid' ? 'checked' : '' }} data-summary-source="service_mode">
                            <span class="restaurant-service-mode__icon"><i class="ri-layout-masonry-line"></i></span>
                            <span class="restaurant-service-mode__copy">
                                <strong>Hybride</strong>
                                <small>Combineer AYCE en betalende losse items.</small>
                            </span>
                            <span class="restaurant-service-mode__check"><i class="ri-check-line"></i></span>
                        </label>
                    </div>

                    @error('service_mode')
                        <small class="restaurant-field__error restaurant-field__error--standalone">{{ $message }}</small>
                    @enderror

                    <div class="restaurant-form-grid restaurant-form-grid--settings">
                        <div class="restaurant-field">
                            <label for="currency">Valuta <span>*</span></label>

                            <div class="restaurant-select">
                                <i class="ri-money-euro-circle-line"></i>
                                <select id="currency" name="currency" required data-summary-source="currency">
                                    <option value="EUR" {{ old('currency', 'EUR') === 'EUR' ? 'selected' : '' }}>Euro — EUR</option>
                                    <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>US Dollar — USD</option>
                                    <option value="GBP" {{ old('currency') === 'GBP' ? 'selected' : '' }}>Britse pond — GBP</option>
                                </select>
                            </div>

                            @error('currency')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="restaurant-field">
                            <label for="timezone">Tijdzone <span>*</span></label>

                            <div class="restaurant-select">
                                <i class="ri-time-zone-line"></i>
                                <select id="timezone" name="timezone" required data-summary-source="timezone">
                                    <option value="Europe/Brussels" {{ old('timezone', 'Europe/Brussels') === 'Europe/Brussels' ? 'selected' : '' }}>Europe/Brussels</option>
                                    <option value="Europe/Amsterdam" {{ old('timezone') === 'Europe/Amsterdam' ? 'selected' : '' }}>Europe/Amsterdam</option>
                                    <option value="Europe/Paris" {{ old('timezone') === 'Europe/Paris' ? 'selected' : '' }}>Europe/Paris</option>
                                    <option value="Europe/London" {{ old('timezone') === 'Europe/London' ? 'selected' : '' }}>Europe/London</option>
                                </select>
                            </div>

                            @error('timezone')
                                <small class="restaurant-field__error">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="restaurant-wizard-panel__actions">
                        <button type="button" class="light-btn" data-previous-step>
                            <i class="ri-arrow-left-line"></i>
                            Vorige
                        </button>

                        <button type="button" class="primary-btn" data-next-step>
                            Controleer gegevens
                            <i class="ri-arrow-right-line"></i>
                        </button>
                    </div>
                </section>

                <section class="restaurant-wizard-panel" data-step-panel="3">
                    <header class="restaurant-wizard-panel__header">
                        <span>Stap 3 van 3</span>
                        <h3>Klaar om je restaurant aan te maken</h3>
                        <p>Controleer de gegevens. DineSync maakt daarna automatisch je restaurantstructuur aan.</p>
                    </header>

                    <div class="restaurant-summary">
                        <div class="restaurant-summary__brand">
                            <div class="restaurant-summary__logo"><i class="ri-store-2-line"></i></div>

                            <div>
                                <span>Nieuw restaurant</span>
                                <strong data-summary-output="name">Nog geen naam ingevuld</strong>
                                <small data-summary-output="service_mode">All you can eat</small>
                            </div>
                        </div>

                        <dl class="restaurant-summary__details">
                            <div><dt>E-mailadres</dt><dd data-summary-output="email">Niet ingevuld</dd></div>
                            <div><dt>Telefoonnummer</dt><dd data-summary-output="phone">Niet ingevuld</dd></div>
                            <div><dt>Website</dt><dd data-summary-output="website">Niet ingevuld</dd></div>
                            <div><dt>Valuta</dt><dd data-summary-output="currency">EUR</dd></div>
                            <div><dt>Tijdzone</dt><dd data-summary-output="timezone">Europe/Brussels</dd></div>
                        </dl>
                    </div>

                    <div class="restaurant-creation-info">
                        <div>
                            <i class="ri-shield-user-line"></i>
                            <span><strong>Eigenaarrol</strong>Je krijgt automatisch volledige toegang.</span>
                        </div>

                        <div>
                            <i class="ri-team-line"></i>
                            <span><strong>Standaardrollen</strong>Manager, Personeel+ en Personeel worden aangemaakt.</span>
                        </div>

                        <div>
                            <i class="ri-dashboard-3-line"></i>
                            <span><strong>Eigen dashboard</strong>Je gaat direct naar het restaurantdashboard.</span>
                        </div>
                    </div>

                    <div class="restaurant-wizard-panel__actions">
                        <button type="button" class="light-btn" data-previous-step>
                            <i class="ri-arrow-left-line"></i>
                            Vorige
                        </button>

                        <button type="submit" class="secondary-btn restaurant-create-submit">
                            <span class="restaurant-create-submit__default">
                                <i class="ri-add-circle-line"></i>
                                Restaurant aanmaken
                            </span>

                            <span class="restaurant-create-submit__loading">
                                <i class="ri-loader-4-line"></i>
                                Restaurant wordt aangemaakt
                            </span>
                        </button>
                    </div>
                </section>
            </form>
        </div>
    </div>
</section>
@endsection

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