@extends('layouts.dashboard')

@section('content')
@php
/**
 * Appearance → Sub-header: the storefront "page band" shown above CMS pages and blog posts.
 * A style per content type (classic / modern / hidden), plus per-style breadcrumb /
 * description toggles and an optional background image or video. Defaults reproduce the
 * shipped storefront (posts → modern, pages → classic). Built from existing components only.
 */
$shStyle = static function (string $slot): string {
    $v = setting('subheader_' . $slot . '_style', '');
    return in_array($v, ['hidden', 'classic', 'modern'], true) ? $v : ($slot === 'posts' ? 'modern' : 'classic');
};
@endphp
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('admin.subheader.content_heading') }}</h2>
    </div>
</div>

<form method="post" action="{{ route('admin.subheader') }}" enctype="multipart/form-data" id="subheader">
    @csrf

    <div class="qm-card">
        <div class="row g-4">
            @foreach (['pages', 'posts'] as $slot)
@php $cur = $shStyle($slot); @endphp
            <div class="col-12 col-lg-6">
                <label class="form-label" for="sh-{{ $slot }}">{{ t_raw('admin.subheader.' . $slot . '_style') }}</label>
                <select class="form-select" id="sh-{{ $slot }}" name="subheader_{{ $slot }}_style">
                    <option value="classic"{{ $cur === 'classic' ? ' selected' : '' }}>{{ t_raw('admin.subheader.style_classic') }}</option>
                    <option value="modern"{{ $cur === 'modern' ? ' selected' : '' }}>{{ t_raw('admin.subheader.style_modern') }}</option>
                    <option value="hidden"{{ $cur === 'hidden' ? ' selected' : '' }}>{{ t_raw('admin.subheader.style_hidden') }}</option>
                </select>
            </div>
            @endforeach
        </div>
    </div>

    <div class="accordion qm-acc" id="shStyles">
        @foreach (['classic' => 'admin.subheader.style_classic', 'modern' => 'admin.subheader.style_modern'] as $st => $lbl)
@php $bgType   = setting('subheader_' . $st . '_bg_type', 'none');
            $bgType   = in_array($bgType, ['none', 'image', 'video'], true) ? $bgType : 'none';
            $bgImage  = trim((string) setting('subheader_' . $st . '_bg_image', ''));
            $bgVideo  = trim((string) setting('subheader_' . $st . '_bg_video', ''));
            $crumbsOn = setting('subheader_' . $st . '_breadcrumbs', '1') === '1';
            $descOn   = setting('subheader_' . $st . '_description', '1') === '1';
            $open     = $st === 'classic'; @endphp
        <div class="accordion-item">
            <h3 class="accordion-header" id="shH-{{ $st }}">
                <button class="accordion-button{{ $open ? '' : ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#shC-{{ $st }}" aria-expanded="{{ $open ? 'true' : 'false' }}" aria-controls="shC-{{ $st }}">{{ t_raw($lbl) }}</button>
            </h3>
            <div id="shC-{{ $st }}" class="accordion-collapse collapse{{ $open ? ' show' : '' }}" aria-labelledby="shH-{{ $st }}" data-bs-parent="#shStyles">
                <div class="accordion-body">
                    <label class="qm-switch-row">
                        <span><strong>{{ t_raw('admin.subheader.show_breadcrumbs') }}</strong></span>
                        <input class="form-check-input" type="checkbox" role="switch" name="subheader_{{ $st }}_breadcrumbs" value="1"{{ $crumbsOn ? ' checked' : '' }}>
                    </label>
                    <label class="qm-switch-row">
                        <span><strong>{{ t_raw('admin.subheader.show_description') }}</strong></span>
                        <input class="form-check-input" type="checkbox" role="switch" name="subheader_{{ $st }}_description" value="1"{{ $descOn ? ' checked' : '' }}>
                    </label>
                    <div class="mb-3 mt-3">
                        <label class="form-label" for="sh-{{ $st }}-bg">{{ t_raw('admin.subheader.background') }}</label>
                        <select class="form-select" id="sh-{{ $st }}-bg" name="subheader_{{ $st }}_bg_type" data-subhead-bg="{{ $st }}">
                            <option value="none"{{ $bgType === 'none' ? ' selected' : '' }}>{{ t_raw('admin.subheader.bg_none') }}</option>
                            <option value="image"{{ $bgType === 'image' ? ' selected' : '' }}>{{ t_raw('admin.subheader.bg_image') }}</option>
                            <option value="video"{{ $bgType === 'video' ? ' selected' : '' }}>{{ t_raw('admin.subheader.bg_video') }}</option>
                        </select>
                    </div>
                    <div class="mb-3{{ $bgType === 'image' ? '' : ' d-none' }}" data-subhead-field="{{ $st }}-image">
                        <label class="form-label" for="sh-{{ $st }}-image">{{ t_raw('admin.subheader.bg_image') }}</label>
                        {!! media_field_html($st . '_bg_image', $bgImage, ['accept' => 'image', 'allowClear' => true, 'id' => 'sh-' . $st . '-image']) !!}
                    </div>
                    <div class="mb-0{{ $bgType === 'video' ? '' : ' d-none' }}" data-subhead-field="{{ $st }}-video">
                        <label class="form-label" for="sh-{{ $st }}-video">{{ t_raw('admin.subheader.bg_video') }}</label>
                        {!! media_field_html($st . '_bg_video', $bgVideo, ['accept' => 'video', 'allowClear' => true, 'id' => 'sh-' . $st . '-video']) !!}
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="d-flex justify-content-end mt-3">
        <button type="submit" class="qm-btn"><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('admin.subheader.save_btn') }}</button>
    </div>
</form>

<script>
/* Sub-header background: reveal the image OR video field for the chosen type — mirrors the
   vendor about-media switcher. One handler covers both style accordions. */
(function () {
    document.querySelectorAll('[data-subhead-bg]').forEach(function (sel) {
        var st = sel.getAttribute('data-subhead-bg');
        function sync() {
            ['image', 'video'].forEach(function (k) {
                var f = document.querySelector('[data-subhead-field="' + st + '-' + k + '"]');
                if (f) { f.classList.toggle('d-none', sel.value !== k); }
            });
        }
        sel.addEventListener('change', sync);
        sync();
    });
})();
</script>
@endsection