@php
/**
 * Branding fields (identity, logos, fallback images) for Settings → General.
 * Each section uses the app's card anatomy — .qm-card-head (title + subtitle) over a
 * .qm-card-body — the same header/body split the Business-model and Split-gateway cards
 * use, so the section headings share one typography + spacing treatment across the product.
 * The General tab wraps these in its own multipart form so the whole tab keeps a single
 * "Save settings" button. Persisted by App\Services\BrandingService.
 */
// Every logo / favicon / fallback field below is the shared media-library picker
// (media_field_html → the same one used by My Account, vendor Settings and campaigns).
// Each renders as a self-contained card: title header, live-preview body, action footer.
// Clearing a field reverts it to the bundled default in BrandingService, never to blank.
// $fallbackDefault supplies the current image the picker shows when no custom one is set.
$fallbackDefault = ['fallback_food_image' => 'assets/admin/fallback/food-fallback.png', 'fallback_general_image' => 'assets/admin/fallback/general-fallback.png', 'fallback_avatar_image' => 'assets/admin/avatar-placeholder.svg', 'fallback_about_video' => 'assets/client/video/video.mp4', 'cuisines_panel_bg' => 'assets/client/promos/collection-2.png', 'ai_avatar' => 'assets/admin/favicon.png'];
@endphp
    <div class="qm-card">
        <div class="qm-card-head">
            <div>
                <h2 class="mb-0">{{ t_raw('admin.branding.h_identity') }}</h2>
                <p class="qm-hint mb-0">{{ t_raw('admin.branding.help_identity') }}</p>
            </div>
        </div>
        <div class="qm-card-body">
            <div class="row g-4">
                <div class="col-12 col-md-6">
                    <label class="form-label" for="b-name">{{ t_raw('admin.branding.field_site_name') }}</label>
                    <input type="text" id="b-name" name="site_name" placeholder="{{ t_raw('auth.restaurant_name_placeholder') }}" class="form-control" value="{{ setting('site_name', 'QuickMunch') }}">
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label" for="b-color">{{ t_raw('admin.branding.field_primary_color') }}</label>
                    @php /* The field first, THEN the swatches. With the swatch strip sitting
                             between the label and its input, this column's input rendered 38px
                             below the site-name input beside it — two labelled fields on one row
                             that lined up at the label and nowhere else. The swatches are a
                             shortcut for filling this field, so they belong under it. */
@endphp
                    <div class="qm-hexfield">
                        <span class="qm-hex-preview" id="brand-preview" aria-hidden="true"></span>
                        <input type="text" id="b-color" name="primary_color" class="form-control qm-input-upper" value="{{ setting('primary_color', '#ff003d') }}" pattern="#?[0-9A-Fa-f]{6}" maxlength="7" placeholder="#ff003d" autocomplete="off" spellcheck="false" aria-describedby="brand-hex-hint">
                        <input type="color" id="b-color-picker" class="qm-color-native" value="{{ setting('primary_color', '#ff003d') }}" aria-label="{{ t_raw('admin.branding.aria_color_picker') }}">
                    </div>
                    <div class="qm-swatches mt-2" id="brand-swatches" role="group" aria-label="{{ t_raw('admin.branding.aria_swatches') }}">
                        @foreach (['#ff003d', '#e8590c', '#f59e0b', '#16a34a', '#0f9b8e', '#2484c6', '#4f46e5', '#8a45b8', '#e64980', '#0f172a'] as $c)
                        <button type="button" class="qm-swatch" data-brand-swatch="{{ $c }}" style="--qm-sw: {{ $c }}" aria-label="{{ t_raw('admin.branding.aria_swatch_color', [':hex' => $c]) }}"></button>
                        @endforeach
                    </div>
                    <p class="qm-hint mt-1 mb-0" id="brand-hex-hint">{{ t_raw('admin.branding.hint_color') }}</p>
                </div>
                @php /* The address the site is reached by. Almost everything builds its links
                         from the request and never consults this — but a scheduled task and a
                         queued email have no request to read, so without it a password-reset
                         link sent by cron points wherever the site was INSTALLED from. Blank
                         means "work it out from the request", which is right up until the day
                         the domain moves. */
@endphp
                <div class="col-12 col-md-6">
                    <label class="form-label" for="b-url">{{ t_raw('admin.branding.field_site_url') }}</label>
                    <input type="url" id="b-url" name="site_url" class="form-control" value="{{ setting('site_url', '') }}" placeholder="{{ route('home') }}" autocomplete="off" spellcheck="false">
                    <p class="qm-hint mt-1 mb-0">{{ t_raw('admin.branding.hint_site_url') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="qm-card">
        <div class="qm-card-head">
            <div>
                <h2 class="mb-0">{{ t_raw('admin.branding.h_logos') }}</h2>
                <p class="qm-hint mb-0">{{ t_raw('admin.branding.help_logos') }}</p>
            </div>
        </div>
        <div class="qm-card-body">
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('favicon', setting('favicon'), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-favicon', 'title' => t_raw('admin.branding.field_favicon')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('logo', setting('logo'), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-logo', 'title' => t_raw('admin.branding.field_logo_light'), 'hint' => t_raw('admin.branding.hint_logo_light')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('logo_light', setting('logo_light'), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-logo-light', 'title' => t_raw('admin.branding.field_logo_dark'), 'hint' => t_raw('admin.branding.hint_logo_dark')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('ai_avatar', setting('ai_avatar', $fallbackDefault['ai_avatar']), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-ai-avatar', 'title' => t_raw('admin.branding.field_ai_avatar'), 'hint' => t_raw('admin.branding.hint_ai_avatar')]) !!}
                </div>
            </div>
        </div>
    </div>

    <div class="qm-card">
        <div class="qm-card-head">
            <div>
                <h2 class="mb-0">{{ t_raw('admin.branding.h_fallback') }}</h2>
                <p class="qm-hint mb-0">{{ t_raw('admin.branding.help_fallback') }}</p>
            </div>
        </div>
        <div class="qm-card-body">
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('fallback_food_image', setting('fallback_food_image', $fallbackDefault['fallback_food_image']), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-fb-food', 'title' => t_raw('admin.branding.field_fallback_food'), 'hint' => t_raw('admin.branding.hint_fallback_food')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('fallback_general_image', setting('fallback_general_image', $fallbackDefault['fallback_general_image']), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-fb-general', 'title' => t_raw('admin.branding.field_fallback_general'), 'hint' => t_raw('admin.branding.hint_fallback_general')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('fallback_avatar_image', setting('fallback_avatar_image', $fallbackDefault['fallback_avatar_image']), ['accept' => 'image', 'circle' => true, 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-fb-avatar', 'title' => t_raw('admin.branding.field_fallback_avatar'), 'hint' => t_raw('admin.branding.hint_fallback_avatar')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('fallback_about_video', setting('fallback_about_video', $fallbackDefault['fallback_about_video']), ['accept' => 'video', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-fb-video', 'title' => t_raw('admin.branding.field_fallback_video'), 'hint' => t_raw('admin.branding.hint_fallback_video')]) !!}
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    {!! media_field_html('cuisines_panel_bg', setting('cuisines_panel_bg', $fallbackDefault['cuisines_panel_bg']), ['accept' => 'image', 'endpoint' => '/account/media', 'allowClear' => true, 'id' => 'b-cuis-bg', 'title' => t_raw('admin.branding.field_cuisines_bg'), 'hint' => t_raw('admin.branding.hint_cuisines_bg')]) !!}
                </div>
            </div>
        </div>
    </div>

<script>
// Brand primary-colour control: preset swatches + a free hex field with a live
// preview, PLUS a native <input type="color"> for a full picker/eyedropper -
// all three stay in sync, but only #b-color (name="primary_color") submits.
(function () {
    var input = document.getElementById('b-color');
    var picker = document.getElementById('b-color-picker');
    var preview = document.getElementById('brand-preview');
    if (!input || !preview) { return; }
    var swatches = document.querySelectorAll('[data-brand-swatch]');
    function norm(v) { v = (v || '').trim(); if (v && v.charAt(0) !== '#') { v = '#' + v; } return v; }
    function sync() {
        var v = norm(input.value);
        if (/^#[0-9A-Fa-f]{6}$/.test(v)) {
            preview.style.background = v;
            if (picker) { picker.value = v; }
        }
        swatches.forEach(function (b) {
            b.classList.toggle('is-sel', b.getAttribute('data-brand-swatch').toLowerCase() === v.toLowerCase());
        });
    }
    swatches.forEach(function (b) {
        b.addEventListener('click', function () { input.value = b.getAttribute('data-brand-swatch'); sync(); });
    });
    if (picker) {
        picker.addEventListener('input', function () { input.value = picker.value; sync(); });
    }
    input.addEventListener('input', sync);
    input.addEventListener('change', function () { input.value = norm(input.value); sync(); });
    sync();
})();
</script>