@extends('layouts.dashboard')

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

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

@section('content')
<section class="branding-page" data-branding-page>
    <div class="branding-page__header">
        <div>
            <span class="branding-page__eyebrow">
                <i class="ri-palette-line"></i>
                Klantbeleving
            </span>

            <h2>Personaliseer het tafelmenu</h2>

            <p>
                Stel het logo en de kleuren in die klanten zien wanneer ze via een QR-code of restauranttablet bestellen.
            </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">
                <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>
                        Deze branding wordt gebruikt zodra de publieke tafelmenupagina wordt gekoppeld.
                    </p>
                </div>

                <button type="submit" class="secondary-btn" data-branding-submit>
                    <span data-branding-submit-default>
                        <i class="ri-save-line"></i>
                        Branding 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>

                        <button type="button" aria-label="Personeel">
                            <i class="ri-shield-user-line"></i>
                        </button>
                    </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">
                Dit is een visuele preview. De echte productdata wordt later gekoppeld aan het publieke tafelmenu.
            </p>
        </aside>
    </form>
</section>
@endsection

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


<style>
.branding-device--tablet {
    width: min(100%, 760px);
    aspect-ratio: 16 / 10;
    padding: 15px;
    border-radius: 34px;
}

.branding-device--tablet .branding-device__speaker {
    width: 56px;
    height: 5px;
    margin: 0 auto 10px;
}

.branding-device--tablet .branding-device__screen {
    height: calc(100% - 15px);
    overflow: hidden;
    border-radius: 23px;
    background: var(--preview-background);
}

.branding-tablet-preview__header {
    min-height: 58px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    background: var(--preview-primary);
    color: var(--preview-header-text);
}

.branding-tablet-preview__brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.branding-tablet-preview__brand .branding-menu-preview__logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.branding-tablet-preview__brand > div:last-child {
    display: grid;
}

.branding-tablet-preview__brand span {
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .8;
}

.branding-tablet-preview__brand strong {
    font-size: 10px;
}

.branding-tablet-preview__timers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branding-tablet-preview__timers span {
    min-height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--preview-header-text) 24%, transparent);
    border-radius: 8px;
    font-size: 7px;
    font-weight: 800;
}

.branding-tablet-preview__header > button {
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--preview-header-text) 24%, transparent);
    border-radius: 9px;
    background: transparent;
    color: var(--preview-header-text);
}

.branding-tablet-preview__body {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    height: calc(100% - 58px);
}

.branding-tablet-preview__sidebar {
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-right: 1px solid var(--preview-border);
    background: var(--preview-sidebar);
}

.branding-tablet-preview__sidebar > button {
    min-height: 34px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--preview-text);
    font-size: 7px;
    font-weight: 800;
}

.branding-tablet-preview__sidebar > button.is-active {
    border-color: var(--preview-border);
    background: var(--preview-secondary);
    color: var(--preview-button-text);
}

.branding-tablet-preview__table-status {
    margin-top: auto;
    padding: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--preview-border);
    border-radius: 9px;
    background: var(--preview-card);
    color: var(--preview-text);
}

.branding-tablet-preview__table-status > i {
    color: var(--preview-accent);
}

.branding-tablet-preview__table-status div {
    display: grid;
}

.branding-tablet-preview__table-status strong {
    font-size: 7px;
}

.branding-tablet-preview__table-status small {
    color: var(--preview-muted);
    font-size: 6px;
}

.branding-tablet-preview__table-status b {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
}

.branding-tablet-preview__content {
    position: relative;
    min-width: 0;
    padding: 14px 15px 55px;
    background: var(--preview-background);
}

.branding-tablet-preview__topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.branding-tablet-preview__topbar > div > span {
    color: var(--preview-accent);
    font-size: 6px;
    font-weight: 900;
    text-transform: uppercase;
}

.branding-tablet-preview__topbar h4 {
    margin: 3px 0 0;
    color: var(--preview-text);
    font-size: 14px;
}

.branding-tablet-preview__topbar label {
    min-width: 150px;
    min-height: 30px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--preview-border);
    border-radius: 9px;
    background: var(--preview-card);
    color: var(--preview-muted);
    font-size: 6px;
}

.branding-tablet-preview__categories {
    margin-top: 10px;
    display: flex;
    gap: 7px;
}

.branding-tablet-preview__categories button {
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-card);
    color: var(--preview-text);
    font-size: 6px;
    font-weight: 800;
}

.branding-tablet-preview__categories button.is-active {
    border-color: transparent;
    background: var(--preview-accent);
    color: var(--preview-button-text);
}

.branding-tablet-preview__products {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.branding-tablet-preview__products article {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    border: 1px solid var(--preview-border);
    border-radius: 11px;
    background: var(--preview-card);
}

.branding-tablet-preview__image {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--preview-secondary) 18%, var(--preview-card));
    color: var(--preview-accent);
    font-size: 22px;
}

.branding-tablet-preview__products article > div:last-child {
    min-width: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.branding-tablet-preview__products span {
    color: var(--preview-accent);
    font-size: 5px;
    font-weight: 900;
    text-transform: uppercase;
}

.branding-tablet-preview__products strong {
    margin-top: 3px;
    color: var(--preview-text);
    font-size: 8px;
}

.branding-tablet-preview__products small {
    margin-top: 4px;
    color: var(--preview-muted);
    font-size: 5px;
    line-height: 1.45;
}

.branding-tablet-preview__products article > div:last-child > div {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.branding-tablet-preview__products b {
    color: var(--preview-text);
    font-size: 7px;
}

.branding-tablet-preview__products button {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 8px;
    background: var(--preview-accent);
    color: var(--preview-button-text);
}

.branding-tablet-preview__checkout {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 12px;
    min-height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 10px;
    background: var(--preview-accent);
    color: var(--preview-button-text);
    font-size: 7px;
    font-weight: 900;
}

@media (max-width: 1200px) {
    .branding-device--tablet {
        width: 100%;
    }
}
</style>