@extends('layouts.dashboard')

@section('title', 'Tafelmenu branding - ' . $restaurant->name)
@section('eyebrow', 'Restaurantinstellingen')
@section('page-title', 'Tafelmenu instellingen')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pages/table-menu-branding.css') }}?v={{ filemtime(public_path('css/pages/table-menu-branding.css')) }}">
@endpush

@section('content')
<section class="branding-page" data-branding-page data-restaurant-initial="{{ strtoupper(substr($restaurant->name,0,1)) }}">
    <div class="branding-page__header">
        <div>
            <span class="branding-page__eyebrow">
                <i class="ri-palette-line"></i>
                Klantbeleving
            </span>

            <h2>Stel het tafelmenu in</h2>

            <p>
                Stel het logo en de kleuren in die klanten op het tafelmenu zien.
            </p>
        </div>

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

    <form
        method="POST"
        action="{{ route('restaurants.settings.table-menu-branding.update', $restaurant) }}"
        enctype="multipart/form-data"
        class="branding-layout"
        data-branding-form
    >
        @csrf
        @method('PUT')

        <div class="branding-settings">
            <section class="branding-card">
                <div class="branding-card__header">
                    <div>
                        <span class="branding-card__eyebrow">Restaurantlogo</span>
                        <h3>Logo voor het tafelmenu</h3>
                        <p>
                            Gebruik een transparante PNG, WEBP of SVG voor het mooiste resultaat.
                        </p>
                    </div>
                </div>

                <div class="branding-logo-editor">
                    <div class="branding-logo-editor__preview" data-logo-preview>
                        @if($restaurant->table_menu_logo)
                            <img
                                src="{{ asset('storage/' . $restaurant->table_menu_logo) }}"
                                alt="{{ $restaurant->name }}"
                                data-current-logo
                            >
                        @else
                            <span data-logo-placeholder>
                                {{ strtoupper(substr($restaurant->name, 0, 1)) }}
                            </span>
                        @endif
                    </div>

                    <div class="branding-logo-editor__controls">
                        <label for="tableMenuLogo" class="branding-upload-button">
                            <i class="ri-upload-cloud-2-line"></i>
                            Nieuw logo kiezen
                        </label>

                        <input
                            id="tableMenuLogo"
                            type="file"
                            name="table_menu_logo"
                            accept=".png,.jpg,.jpeg,.webp,.svg"
                            data-logo-input
                        >

                        <button
                            type="button"
                            class="branding-remove-logo"
                            data-remove-logo
                            {{ $restaurant->table_menu_logo ? '' : 'disabled' }}
                        >
                            <i class="ri-delete-bin-6-line"></i>
                            Logo verwijderen
                        </button>

                        <input
                            type="hidden"
                            name="remove_table_menu_logo"
                            value="0"
                            data-remove-logo-input
                        >

                        <small data-logo-filename>
                            {{ $restaurant->table_menu_logo ? basename($restaurant->table_menu_logo) : 'Nog geen apart tafelmenu-logo ingesteld.' }}
                        </small>

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

            <section class="branding-card"><h3>Bestelmethode</h3><a class="branding-reset" href="{{ route('restaurants.settings.edit',$restaurant) }}">Beheren via Restaurantinstellingen</a></section>

            <section class="branding-card">
                <div class="branding-card__header">
                    <div>
                        <span class="branding-card__eyebrow">Kleurenpalet</span>
                        <h3>Merk- en interfacekleuren</h3>
                        <p>
                            De preview rechts wordt live bijgewerkt terwijl je de kleuren aanpast.
                        </p>
                    </div>

                    <button type="button" class="branding-reset" data-branding-reset>
                        <i class="ri-restart-line"></i>
                        Standaardkleuren
                    </button>
                </div>

                <div class="branding-color-grid">
                    @php
                        $colors = [
                            [
                                'name' => 'table_menu_primary_color',
                                'label' => 'Primaire kleur',
                                'description' => 'Header, navigatie en belangrijke vlakken',
                                'value' => old('table_menu_primary_color', $restaurant->table_menu_primary_color ?? '#062945'),
                                'default' => '#062945',
                            ],
                            [
                                'name' => 'table_menu_secondary_color',
                                'label' => 'Secundaire kleur',
                                'description' => 'Subtiele vlakken en categorieën',
                                'value' => old('table_menu_secondary_color', $restaurant->table_menu_secondary_color ?? '#0A3B61'),
                                'default' => '#0A3B61',
                            ],
                            [
                                'name' => 'table_menu_accent_color',
                                'label' => 'Accentkleur',
                                'description' => 'Knoppen, badges en actieve elementen',
                                'value' => old('table_menu_accent_color', $restaurant->table_menu_accent_color ?? '#BFA164'),
                                'default' => '#BFA164',
                            ],
                            [
                                'name' => 'table_menu_background_color',
                                'label' => 'Achtergrondkleur',
                                'description' => 'Hoofdachtergrond van het tafelmenu',
                                'value' => old('table_menu_background_color', $restaurant->table_menu_background_color ?? '#F4F7FB'),
                                'default' => '#F4F7FB',
                            ],
                            [
                                'name' => 'table_menu_text_color',
                                'label' => 'Tekstkleur',
                                'description' => 'Titels, productnamen en beschrijvingen',
                                'value' => old('table_menu_text_color', $restaurant->table_menu_text_color ?? '#0F172A'),
                                'default' => '#0F172A',
                            ],
                            [
                                'name' => 'table_menu_button_text_color',
                                'label' => 'Knoptekstkleur',
                                'description' => 'Tekst op primaire actieknoppen',
                                'value' => old('table_menu_button_text_color', $restaurant->table_menu_button_text_color ?? '#FFFFFF'),
                                'default' => '#FFFFFF',
                            ],
                            [
                                'name' => 'table_menu_sidebar_color',
                                'label' => 'Sidebar achtergrond',
                                'description' => 'Achtergrond van Overzicht, Eten en Drank',
                                'value' => old('table_menu_sidebar_color', $restaurant->table_menu_sidebar_color ?? '#FFFFFF'),
                                'default' => '#FFFFFF',
                            ],
                            [
                                'name' => 'table_menu_card_color',
                                'label' => 'Kaartkleur',
                                'description' => 'Achtergrond van gerechten en besteloverzicht',
                                'value' => old('table_menu_card_color', $restaurant->table_menu_card_color ?? '#FFFFFF'),
                                'default' => '#FFFFFF',
                            ],
                            [
                                'name' => 'table_menu_border_color',
                                'label' => 'Randkleur',
                                'description' => 'Randen rond kaarten, zoekveld en navigatie',
                                'value' => old('table_menu_border_color', $restaurant->table_menu_border_color ?? '#E2E7F0'),
                                'default' => '#E2E7F0',
                            ],
                            [
                                'name' => 'table_menu_muted_text_color',
                                'label' => 'Gedempte tekstkleur',
                                'description' => 'Beschrijvingen, statussen en subtiele teksten',
                                'value' => old('table_menu_muted_text_color', $restaurant->table_menu_muted_text_color ?? '#718096'),
                                'default' => '#718096',
                            ],
                            [
                                'name' => 'table_menu_header_text_color',
                                'label' => 'Header tekstkleur',
                                'description' => 'Logo-tekst, timers en headerknoppen',
                                'value' => old('table_menu_header_text_color', $restaurant->table_menu_header_text_color ?? '#FFFFFF'),
                                'default' => '#FFFFFF',
                            ],
                        ];
                    @endphp

                    @foreach($colors as $color)
                        <div class="branding-color-field">
                            <div class="branding-color-field__copy">
                                <label for="{{ $color['name'] }}">
                                    {{ $color['label'] }}
                                </label>

                                <small>{{ $color['description'] }}</small>
                            </div>

                            <div class="branding-color-field__controls">
                                <input
                                    id="{{ $color['name'] }}"
                                    type="color"
                                    value="{{ $color['value'] }}"
                                    data-color-picker="{{ $color['name'] }}"
                                    data-default-color="{{ $color['default'] }}"
                                >

                                <input
                                    type="text"
                                    name="{{ $color['name'] }}"
                                    value="{{ $color['value'] }}"
                                    maxlength="7"
                                    pattern="^#[0-9A-Fa-f]{6}$"
                                    required
                                    data-color-text="{{ $color['name'] }}"
                                    data-default-color="{{ $color['default'] }}"
                                >
                            </div>

                            @error($color['name'])
                                <small class="branding-field__error">{{ $message }}</small>
                            @enderror
                        </div>
                    @endforeach
                </div>
            </section>

            <section class="branding-card branding-card--actions">
                <div>
                    <span class="branding-card__eyebrow">Opslaan</span>
                    <h3>Klaar om te publiceren?</h3>
                    <p>
                        De branding wordt per restaurant toegepast op het publieke tafelmenu.
                    </p>
                </div>

                <button type="submit" class="secondary-btn" data-branding-submit>
                    <span data-branding-submit-default>
                        <i class="ri-save-line"></i>
                        Instellingen opslaan
                    </span>

                    <span data-branding-submit-loading hidden>
                        <i class="ri-loader-4-line"></i>
                        Opslaan...
                    </span>
                </button>
            </section>
        </div>

        <aside class="branding-preview-panel">
            <div class="branding-preview-panel__header">
                <div>
                    <span>Live preview</span>
                    <strong>Klantweergave</strong>
                </div>

                <span class="branding-preview-panel__status">
                    <span></span>
                    Realtime
                </span>
            </div>

            <div
                class="branding-device branding-device--tablet"
                data-branding-preview
                style="
                    --preview-primary: {{ old('table_menu_primary_color', $restaurant->table_menu_primary_color ?? '#062945') }};
                    --preview-secondary: {{ old('table_menu_secondary_color', $restaurant->table_menu_secondary_color ?? '#0A3B61') }};
                    --preview-accent: {{ old('table_menu_accent_color', $restaurant->table_menu_accent_color ?? '#BFA164') }};
                    --preview-background: {{ old('table_menu_background_color', $restaurant->table_menu_background_color ?? '#F4F7FB') }};
                    --preview-text: {{ old('table_menu_text_color', $restaurant->table_menu_text_color ?? '#0F172A') }};
                    --preview-button-text: {{ old('table_menu_button_text_color', $restaurant->table_menu_button_text_color ?? '#FFFFFF') }};
                    --preview-sidebar: {{ old('table_menu_sidebar_color', $restaurant->table_menu_sidebar_color ?? '#FFFFFF') }};
                    --preview-card: {{ old('table_menu_card_color', $restaurant->table_menu_card_color ?? '#FFFFFF') }};
                    --preview-border: {{ old('table_menu_border_color', $restaurant->table_menu_border_color ?? '#E2E7F0') }};
                    --preview-muted: {{ old('table_menu_muted_text_color', $restaurant->table_menu_muted_text_color ?? '#718096') }};
                    --preview-header-text: {{ old('table_menu_header_text_color', $restaurant->table_menu_header_text_color ?? '#FFFFFF') }};
                "
            >
                <div class="branding-device__speaker"></div>

                <div class="branding-device__screen">
                    <header class="branding-tablet-preview__header">
                        <div class="branding-tablet-preview__brand">
                            <div class="branding-menu-preview__logo" data-preview-logo>
                                @if($restaurant->table_menu_logo)
                                    <img
                                        src="{{ asset('storage/' . $restaurant->table_menu_logo) }}"
                                        alt="{{ $restaurant->name }}"
                                    >
                                @else
                                    <span>{{ strtoupper(substr($restaurant->name, 0, 1)) }}</span>
                                @endif
                            </div>

                            <div>
                                <span>Welkom bij</span>
                                <strong>{{ $restaurant->name }}</strong>
                            </div>
                        </div>

                        <div class="branding-tablet-preview__timers">
                            <span>
                                <i class="ri-timer-2-line"></i>
                                02:58:30
                            </span>

                            <span>
                                <i class="ri-hourglass-2-line"></i>
                                02:31
                            </span>
                        </div>

                        @if(old('ordering_mode', $restaurant->ordering_mode ?? 'restaurant_tablet') === 'restaurant_tablet')
                            <button type="button" aria-label="Personeel">
                                <i class="ri-shield-user-line"></i>
                            </button>
                        @else
                            <span class="branding-tablet-preview__qr-mode">
                                <i class="ri-qr-code-line"></i>
                            </span>
                        @endif
                    </header>

                    <div class="branding-tablet-preview__body">
                        <aside class="branding-tablet-preview__sidebar">
                            <button type="button">
                                <i class="ri-layout-grid-line"></i>
                                <span>Overzicht</span>
                            </button>

                            <button type="button" class="is-active">
                                <i class="ri-restaurant-2-line"></i>
                                <span>Eten</span>
                            </button>

                            <button type="button">
                                <i class="ri-cup-line"></i>
                                <span>Drank</span>
                            </button>

                            <div class="branding-tablet-preview__table-status">
                                <i class="ri-restaurant-line"></i>
                                <div>
                                    <strong>Tafel 12</strong>
                                    <small><b></b> Actief</small>
                                </div>
                            </div>
                        </aside>

                        <main class="branding-tablet-preview__content">
                            <div class="branding-tablet-preview__topbar">
                                <div>
                                    <span>Ontdek het menu</span>
                                    <h4>Eten</h4>
                                </div>

                                <label>
                                    <i class="ri-search-line"></i>
                                    <span>Zoek gerechten...</span>
                                </label>
                            </div>

                            <div class="branding-tablet-preview__categories">
                                <button type="button" class="is-active">Alles</button>
                                <button type="button">Voorgerechten</button>
                                <button type="button">Hoofdgerechten</button>
                                <button type="button">Desserts</button>
                            </div>

                            <div class="branding-tablet-preview__products">
                                <article>
                                    <div class="branding-tablet-preview__image">
                                        <i class="ri-restaurant-line"></i>
                                    </div>

                                    <div>
                                        <span>Sushi</span>
                                        <strong>Zalm nigiri</strong>
                                        <small>Vers bereid en direct aan tafel besteld.</small>

                                        <div>
                                            <b>€ 4,50</b>
                                            <button type="button">
                                                <i class="ri-add-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                </article>

                                <article>
                                    <div class="branding-tablet-preview__image">
                                        <i class="ri-bowl-line"></i>
                                    </div>

                                    <div>
                                        <span>Voorgerechten</span>
                                        <strong>Gyoza</strong>
                                        <small>Knapperige dumplings met huisgemaakte saus.</small>

                                        <div>
                                            <b>€ 6,50</b>
                                            <button type="button">
                                                <i class="ri-add-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                </article>
                            </div>

                            <button type="button" class="branding-tablet-preview__checkout">
                                <span>
                                    <i class="ri-shopping-bag-3-line"></i>
                                    2 items in bestelling
                                </span>

                                <strong>€ 11,00</strong>
                            </button>
                        </main>
                    </div>
                </div>
            </div>

            <p class="branding-preview-panel__note">
                Voorbeeldweergave. Kleuren en logo worden direct bijgewerkt; producten dienen als voorbeeld.
            </p>
        </aside>
    </form>
</section>
@endsection

@push('scripts')
    <script src="{{ asset('js/pages/table-menu-branding.js') }}?v={{ filemtime(public_path('js/pages/table-menu-branding.js')) }}"></script>
@endpush