@extends('dashboard.admin.layouts.master')

@section('title', 'Template Settings')

@section('content')
<div class="d-flex flex-column flex-column-fluid">
    {{-- Toolbar --}}
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                    <i class="ki-duotone ki-palette fs-2 me-2"><span class="path1"></span><span class="path2"></span></i>
                    Template Settings
                </h1>
            </div>
        </div>
    </div>

    {{-- Content --}}
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            @if(session('success'))
                <div class="alert alert-success d-flex align-items-center mb-5">
                    <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                    <div>{{ session('success') }}</div>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger mb-5">
                    <ul class="mb-0 ps-5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            {{-- Shared delete-image / reset forms (kept OUTSIDE the main form below — forms cannot be nested in
                 HTML, and nesting them previously caused their action/method to leak into the main form's submission). --}}
            <form method="POST" id="delete-image-form" action="">
                @csrf
                @method('DELETE')
            </form>
            <form method="POST" id="reset-defaults-form" action="{{ route('admin.template-settings.reset') }}">
                @csrf
            </form>

            <form method="POST" action="{{ route('admin.template-settings.update') }}" enctype="multipart/form-data">
                @csrf

                <div class="card">
                    <div class="card-header border-0 pt-5">
                        <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-6 fw-bold" id="ts-tabs">
                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-layout">Layout</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-sidebar">Sidebar</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-header">Header</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-toolbar">Toolbar</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-footer">Footer</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-aside">Aside</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-colors">Colors</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-images">Images</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-font">Font & CSS</a></li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="tab-content">

                            {{-- ─── Tab: Layout ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade show active" id="tab-layout">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Layout Variant</label>
                                        <select name="app_layout" class="form-select">
                                            @foreach(['dark-sidebar' => 'Dark Sidebar','light-sidebar' => 'Light Sidebar','dark-header' => 'Dark Header','light-header' => 'Light Header'] as $val => $label)
                                                <option value="{{ $val }}" @selected($settings->app_layout === $val)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Theme Mode</label>
                                        <select name="theme_mode" class="form-select">
                                            <option value="light" @selected($settings->theme_mode === 'light')>Light</option>
                                            <option value="dark"  @selected($settings->theme_mode === 'dark')>Dark</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Width Mode</label>
                                        <select name="width_mode" class="form-select">
                                            <option value="default" @selected($settings->width_mode === 'default')>Default</option>
                                            <option value="fluid"   @selected($settings->width_mode === 'fluid')>Fluid</option>
                                            <option value="fixed"   @selected($settings->width_mode === 'fixed')>Fixed</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Icon Style (KeenIcons)</label>
                                        <select name="icon_style" class="form-select">
                                            <option value="duotone" @selected($settings->icon_style === 'duotone')>Duotone</option>
                                            <option value="outline" @selected($settings->icon_style === 'outline')>Outline</option>
                                            <option value="solid"   @selected($settings->icon_style === 'solid')>Solid</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Page Loader</label>
                                        <select name="page_loader" class="form-select">
                                            <option value="none"    @selected($settings->page_loader === 'none')>None</option>
                                            <option value="default" @selected($settings->page_loader === 'default')>Default</option>
                                            <option value="message" @selected($settings->page_loader === 'message')>Message</option>
                                            <option value="logo"    @selected($settings->page_loader === 'logo')>Logo</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">RTL Mode</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="rtl_mode" value="1" id="rtl-toggle" @checked($settings->rtl_mode)>
                                            <label class="form-check-label" for="rtl-toggle">Enable RTL (Right-to-Left)</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Scroll-to-Top Button</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="scrolltop_enabled" value="1" id="scrolltop-enabled" @checked($settings->scrolltop_enabled)>
                                            <label class="form-check-label" for="scrolltop-enabled">Show scroll-to-top button</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Sidebar ────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-sidebar">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Minimize Mode</label>
                                        <select name="sidebar_minimize_mode" class="form-select">
                                            <option value="toggle"    @selected($settings->sidebar_minimize_mode === 'toggle')>Toggle</option>
                                            <option value="hoverable" @selected($settings->sidebar_minimize_mode === 'hoverable')>Hoverable</option>
                                            <option value="minimized" @selected($settings->sidebar_minimize_mode === 'minimized')>Always Minimized</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Fixed Sidebar</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="sidebar_fixed" value="1" id="sidebar-fixed" @checked($settings->sidebar_fixed)>
                                            <label class="form-check-label" for="sidebar-fixed">Sidebar Fixed</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Sidebar Background Color</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="color" name="sidebar_bg_color" class="form-control form-control-color" value="{{ $settings->sidebar_bg_color }}" style="width:60px;height:40px">
                                            <input type="text" id="sidebar-bg-text" class="form-control" value="{{ $settings->sidebar_bg_color }}" maxlength="20" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Sidebar Active Item Background</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="color" name="sidebar_active_bg_color" class="form-control form-control-color" value="{{ $settings->sidebar_active_bg_color }}" style="width:60px;height:40px">
                                            <input type="text" id="sidebar-active-bg-text" class="form-control" value="{{ $settings->sidebar_active_bg_color }}" maxlength="20" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Sidebar Active Item Text</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="color" name="sidebar_active_text_color" class="form-control form-control-color" value="{{ $settings->sidebar_active_text_color }}" style="width:60px;height:40px">
                                            <input type="text" id="sidebar-active-text-color" class="form-control" value="{{ $settings->sidebar_active_text_color }}" maxlength="20" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12"><div class="separator separator-dashed my-2"></div></div>
                                    <div class="col-12">
                                        <h6 class="text-muted fw-semibold mb-0">
                                            <i class="ki-duotone ki-color-swatch fs-6 me-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
                                            Sidebar Menu Colours
                                        </h6>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Normal Link Text Colour</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <input type="text" name="sidebar_text_color" class="form-control font-monospace"
                                                   value="{{ $settings->sidebar_text_color }}" maxlength="30"
                                                   placeholder="rgba(255,255,255,0.7)">
                                        </div>
                                        <div class="text-muted fs-8 mt-1">Hex or rgba — e.g. <code>rgba(255,255,255,0.7)</code></div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Section Heading Colour</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <input type="color" name="sidebar_heading_color" class="form-control form-control-color" value="{{ $settings->sidebar_heading_color }}" style="width:60px;height:40px">
                                            <input type="text" id="sidebar-heading-color-text" class="form-control" value="{{ $settings->sidebar_heading_color }}" maxlength="20" readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Hover Background Colour</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <input type="text" name="sidebar_hover_bg_color" class="form-control font-monospace"
                                                   value="{{ $settings->sidebar_hover_bg_color }}" maxlength="30"
                                                   placeholder="rgba(255,255,255,0.1)">
                                        </div>
                                        <div class="text-muted fs-8 mt-1">Hex or rgba — e.g. <code>rgba(255,255,255,0.1)</code></div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Hover Text Colour</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <input type="color" name="sidebar_hover_text_color" class="form-control form-control-color" value="{{ $settings->sidebar_hover_text_color }}" style="width:60px;height:40px">
                                            <input type="text" id="sidebar-hover-text-color-text" class="form-control" value="{{ $settings->sidebar_hover_text_color }}" maxlength="20" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Header ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-header">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Header Content Type</label>
                                        <select name="header_content_type" class="form-select">
                                            <option value="menu"       @selected($settings->header_content_type === 'menu')>Menu</option>
                                            <option value="page-title" @selected($settings->header_content_type === 'page-title')>Page Title</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Header Title Layout</label>
                                        <select name="header_title_layout" class="form-select">
                                            <option value="column" @selected($settings->header_title_layout === 'column')>Column</option>
                                            <option value="row"    @selected($settings->header_title_layout === 'row')>Row</option>
                                        </select>
                                    </div>
                                    <div class="col-12"><div class="separator separator-dashed my-2"></div></div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Fixed on Desktop</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="header_fixed_desktop" value="1" id="header-fixed-desk" @checked($settings->header_fixed_desktop)>
                                            <label class="form-check-label" for="header-fixed-desk">Sticky header on desktop</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Fixed on Mobile</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="header_fixed_mobile" value="1" id="header-fixed-mob" @checked($settings->header_fixed_mobile)>
                                            <label class="form-check-label" for="header-fixed-mob">Sticky header on mobile</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Toolbar ────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-toolbar">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Toolbar</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="toolbar_enabled" value="1" id="toolbar-enabled" @checked($settings->toolbar_enabled)>
                                            <label class="form-check-label" for="toolbar-enabled">Enable Toolbar</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Fixed on Desktop</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="toolbar_fixed_desktop" value="1" id="toolbar-desk" @checked($settings->toolbar_fixed_desktop)>
                                            <label class="form-check-label" for="toolbar-desk">Fixed Desktop</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Fixed on Mobile</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="toolbar_fixed_mobile" value="1" id="toolbar-mob" @checked($settings->toolbar_fixed_mobile)>
                                            <label class="form-check-label" for="toolbar-mob">Fixed Mobile</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Toolbar Width</label>
                                        <select name="toolbar_width" class="form-select">
                                            <option value="fluid" @selected($settings->toolbar_width === 'fluid')>Fluid</option>
                                            <option value="fixed" @selected($settings->toolbar_width === 'fixed')>Fixed</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Toolbar Layout</label>
                                        <select name="toolbar_layout" class="form-select">
                                            @foreach(['classic' => 'Classic', 'saas' => 'SaaS', 'accounting' => 'Accounting', 'extended' => 'Extended', 'reports' => 'Reports'] as $val => $label)
                                                <option value="{{ $val }}" @selected($settings->toolbar_layout === $val)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Footer ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-footer">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Fixed on Desktop</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="footer_fixed" value="1" id="footer-fixed" @checked($settings->footer_fixed)>
                                            <label class="form-check-label" for="footer-fixed">Sticky footer (desktop)</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Fixed on Mobile</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="footer_fixed_mobile" value="1" id="footer-fixed-mob" @checked($settings->footer_fixed_mobile)>
                                            <label class="form-check-label" for="footer-fixed-mob">Sticky footer (mobile)</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Footer Width</label>
                                        <select name="footer_width" class="form-select">
                                            <option value="fluid" @selected($settings->footer_width === 'fluid')>Fluid</option>
                                            <option value="fixed" @selected($settings->footer_width === 'fixed')>Fixed</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Aside ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-aside">
                                <div class="row g-5 mt-2">
                                    <div class="col-12">
                                        <div class="notice d-flex bg-light-info rounded border border-info border-dashed p-4 mb-2">
                                            <i class="ki-duotone ki-information-5 fs-2tx text-info me-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                            <div class="d-flex flex-stack flex-grow-1">
                                                <div>
                                                    <div class="fw-bold">Aside Panel</div>
                                                    <div class="fs-7 text-gray-700">The aside is a secondary right-hand panel. Enable it and add <code>#kt_app_aside</code> HTML to your layout to use it.</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Enable Aside Panel</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="aside_enabled" value="1" id="aside-enabled" @checked($settings->aside_enabled)>
                                            <label class="form-check-label" for="aside-enabled">Show aside panel</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Fixed Aside</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-3">
                                            <input class="form-check-input" type="checkbox" name="aside_fixed" value="1" id="aside-fixed" @checked($settings->aside_fixed)>
                                            <label class="form-check-label" for="aside-fixed">Sticky aside panel</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ─── Tab: Colors ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-colors">
                                <div class="row g-5 mt-2">
                                    {{-- Color pickers column --}}
                                    <div class="col-xl-7">
                                        <div class="row g-5">
                                        @php
                                        $colorFields = [
                                            'color_primary'    => ['Primary',    '#3E97FF'],
                                            'color_success'    => ['Success',    '#50CD89'],
                                            'color_info'       => ['Info',       '#7239EA'],
                                            'color_warning'    => ['Warning',    '#FFC700'],
                                            'color_danger'     => ['Danger',     '#F1416C'],
                                            'color_dark'       => ['Dark',       '#181C32'],
                                            'color_secondary'  => ['Secondary',  '#7E8299'],
                                            'color_light'      => ['Light',      '#F9F9F9'],
                                            'color_header_bg'  => ['Header Background',  '#ffffff'],
                                            'color_body_bg'    => ['Body Background',    '#f5f8fa'],
                                            'color_content_bg' => ['Content Background', '#f5f8fa'],
                                            'color_header_text'=> ['Header Text',        '#181C32'],
                                            'color_body_text'  => ['Body Text',          '#071437'],
                                            'color_border'     => ['Border',             '#F1F1F4'],
                                            'color_heading'    => ['Headings (h1–h6)',   '#071437'],
                                        ];
                                        @endphp
                                        @foreach($colorFields as $field => [$label, $default])
                                        <div class="col-sm-6">
                                            <label class="form-label fw-semibold">{{ $label }}</label>
                                            <div class="d-flex align-items-center gap-2">
                                                <input type="color" name="{{ $field }}" id="color-{{ $field }}"
                                                       class="form-control form-control-color color-picker"
                                                       value="{{ $settings->$field }}"
                                                       data-text="text-{{ $field }}"
                                                       style="width:50px;height:40px">
                                                <input type="text" id="text-{{ $field }}" class="form-control form-control-sm"
                                                       value="{{ $settings->$field }}" maxlength="20" readonly>
                                                <button type="button" class="btn btn-xs btn-light-secondary reset-color flex-shrink-0"
                                                        data-target="{{ $field }}" data-default="{{ $default }}"
                                                        title="Reset to default">
                                                    <i class="ki-duotone ki-arrows-circle fs-6"><span class="path1"></span><span class="path2"></span></i>
                                                </button>
                                            </div>
                                        </div>
                                        @endforeach
                                        </div>
                                    </div>

                                    {{-- Live preview column --}}
                                    <div class="col-xl-5">
                                        <label class="form-label fw-semibold mb-3">Live Preview</label>
                                        <div id="color-preview-box" class="border rounded-3 p-5" style="background:#f9f9f9;">

                                            {{-- Sidebar strip --}}
                                            <div class="d-flex gap-3 mb-4" style="min-height:120px;">
                                                <div id="pv-sidebar" class="rounded-2 d-flex flex-column align-items-center py-3 px-2 gap-2"
                                                     style="width:52px; background:{{ $settings->sidebar_bg_color }};">
                                                    <div class="rounded-circle bg-white bg-opacity-25" style="width:28px;height:28px;"></div>
                                                    @foreach([1,2,3,4] as $_)
                                                    <div id="pv-sidebar-item-{{ $_ }}" class="rounded-1 w-100" style="height:8px; background:rgba(255,255,255,0.15);"></div>
                                                    @endforeach
                                                    <div id="pv-sidebar-active" class="rounded-1 w-100" style="height:8px; background:{{ $settings->sidebar_active_bg_color }}; color:{{ $settings->sidebar_active_text_color }};">
                                                        <span class="visually-hidden">Active item</span>
                                                    </div>
                                                </div>

                                                <div class="flex-grow-1 d-flex flex-column gap-2">
                                                    {{-- header strip --}}
                                                    <div class="rounded-2 bg-white d-flex align-items-center px-3 gap-2" style="height:32px; border:1px solid #eee;">
                                                        <div id="pv-primary-dot" class="rounded-circle" style="width:12px;height:12px;background:{{ $settings->color_primary }};"></div>
                                                        <div class="bg-light rounded flex-grow-1" style="height:8px;"></div>
                                                        <div id="pv-danger-dot" class="rounded-circle" style="width:10px;height:10px;background:{{ $settings->color_danger }};"></div>
                                                    </div>
                                                    {{-- content cards --}}
                                                    <div class="row g-2 flex-grow-1">
                                                        <div class="col-6">
                                                            <div class="rounded-2 bg-white p-2 h-100" style="border:1px solid #eee;">
                                                                <div id="pv-primary-bar" class="rounded mb-1" style="height:4px;width:60%;background:{{ $settings->color_primary }};"></div>
                                                                <div class="bg-light rounded" style="height:6px;width:80%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="rounded-2 bg-white p-2 h-100" style="border:1px solid #eee;">
                                                                <div id="pv-success-bar" class="rounded mb-1" style="height:4px;width:60%;background:{{ $settings->color_success }};"></div>
                                                                <div class="bg-light rounded" style="height:6px;width:80%;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Buttons row --}}
                                            <div class="d-flex flex-wrap gap-2 mb-3">
                                                <button type="button" id="pv-btn-primary" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_primary }};color:#fff;border:none;font-size:11px;">Primary</button>
                                                <button type="button" id="pv-btn-success" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_success }};color:#fff;border:none;font-size:11px;">Success</button>
                                                <button type="button" id="pv-btn-danger" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_danger }};color:#fff;border:none;font-size:11px;">Danger</button>
                                                <button type="button" id="pv-btn-warning" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_warning }};color:#fff;border:none;font-size:11px;">Warning</button>
                                                <button type="button" id="pv-btn-info" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_info }};color:#fff;border:none;font-size:11px;">Info</button>
                                                <button type="button" id="pv-btn-dark" class="btn btn-xs px-3 py-1 rounded"
                                                        style="background:{{ $settings->color_dark }};color:#fff;border:none;font-size:11px;">Dark</button>
                                            </div>

                                            {{-- Badges / alerts --}}
                                            <div class="d-flex gap-2 flex-wrap">
                                                @foreach(['primary','success','danger','warning','info'] as $c)
                                                <span id="pv-badge-{{ $c }}" class="badge rounded-pill px-3 py-1" style="font-size:10px;background:{{ $settings->{'color_' . $c} }}20;color:{{ $settings->{'color_' . $c} }};border:1px solid {{ $settings->{'color_' . $c} }}40;">
                                                    {{ ucfirst($c) }}
                                                </span>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="text-muted fs-8 mt-2 text-center">
                                            <i class="ki-duotone ki-eye fs-7 me-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                            Preview updates in real-time as you pick colors
                                        </div>
                                    </div>

                                </div>
                            </div>

                            {{-- ─── Tab: Images ─────────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-images">
                                <div class="row g-7 mt-2">

                                    {{-- Logo uploads --}}
                                    <div class="col-12">
                                        <h6 class="text-muted fw-semibold mb-0">
                                            <i class="ki-duotone ki-abstract-26 fs-6 me-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
                                            Logos
                                        </h6>
                                    </div>
                                    @foreach(['logo_light' => 'Sidebar Logo (Light / Dark layouts)', 'logo_dark' => 'Sidebar Logo (Dark text — Light layouts)', 'logo_icon' => 'Sidebar Icon (Minimized)'] as $field => $label)
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">{{ $label }}</label>
                                        @if($settings->$field)
                                            <div class="mb-3">
                                                <img src="{{ $settings->imageUrl($settings->$field) }}"
                                                     class="rounded border bg-dark p-2"
                                                     style="max-width:200px;max-height:80px;object-fit:contain"
                                                     alt="{{ $label }}">
                                            </div>
                                        @else
                                            <div class="mb-3 p-3 rounded border border-dashed d-flex align-items-center justify-content-center bg-light" style="height:80px;">
                                                <span class="text-muted fs-8">Using default logo</span>
                                            </div>
                                        @endif
                                        <div class="input-group">
                                            <input type="file" name="{{ $field }}" class="form-control" accept="image/*,image/svg+xml">
                                            @if($settings->$field)
                                                <button type="button" class="btn btn-light-danger delete-image-btn"
                                                        data-url="{{ route('admin.template-settings.delete-image', $field) }}" title="Remove">
                                                    <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                                    Remove
                                                </button>
                                            @endif
                                        </div>
                                        <div class="text-muted fs-8 mt-1">PNG/SVG/WEBP. Recommended: transparent background.</div>
                                    </div>
                                    @endforeach

                                    <div class="col-12"><div class="separator separator-dashed my-2"></div></div>

                                    {{-- Favicon + Header image --}}
                                    <div class="col-12">
                                        <h6 class="text-muted fw-semibold mb-0">
                                            <i class="ki-duotone ki-picture fs-6 me-1 text-info"><span class="path1"></span><span class="path2"></span></i>
                                            Branding
                                        </h6>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">Favicon</label>
                                        @if($settings->favicon)
                                            <div class="mb-3">
                                                <img src="{{ $settings->imageUrl($settings->favicon) }}"
                                                     class="rounded border p-1"
                                                     style="max-width:64px;max-height:64px;object-fit:contain"
                                                     alt="Favicon">
                                            </div>
                                        @else
                                            <div class="mb-3 p-3 rounded border border-dashed d-flex align-items-center justify-content-center bg-light" style="height:64px;">
                                                <span class="text-muted fs-8">Using default favicon</span>
                                            </div>
                                        @endif
                                        <div class="input-group">
                                            <input type="file" name="favicon" class="form-control" accept=".ico,.png,.svg">
                                            @if($settings->favicon)
                                                <button type="button" class="btn btn-light-danger delete-image-btn"
                                                        data-url="{{ route('admin.template-settings.delete-image', 'favicon') }}" title="Remove">
                                                    <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                                    Remove
                                                </button>
                                            @endif
                                        </div>
                                        <div class="text-muted fs-8 mt-1">ICO, PNG or SVG. Max 512 KB.</div>
                                    </div>
                                    <div class="col-md-8">
                                        <label class="form-label fw-semibold">Header Background Image</label>
                                        @if($settings->header_image)
                                            <div class="mb-3">
                                                <img src="{{ $settings->imageUrl($settings->header_image) }}"
                                                     class="rounded border"
                                                     style="max-width:400px;max-height:80px;object-fit:cover"
                                                     alt="Header Image">
                                            </div>
                                        @else
                                            <div class="mb-3 p-3 rounded border border-dashed d-flex align-items-center justify-content-center bg-light" style="height:80px;">
                                                <span class="text-muted fs-8">No header background image</span>
                                            </div>
                                        @endif
                                        <div class="input-group">
                                            <input type="file" name="header_image" class="form-control" accept="image/*">
                                            @if($settings->header_image)
                                                <button type="button" class="btn btn-light-danger delete-image-btn"
                                                        data-url="{{ route('admin.template-settings.delete-image', 'header_image') }}" title="Remove">
                                                    <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                                    Remove
                                                </button>
                                            @endif
                                        </div>
                                        <div class="text-muted fs-8 mt-1">Displayed as header background. Max 4 MB. JPEG/PNG/WEBP.</div>
                                    </div>

                                    <div class="col-12"><div class="separator separator-dashed my-2"></div></div>

                                    {{-- Page images --}}
                                    <div class="col-12">
                                        <h6 class="text-muted fw-semibold mb-0">
                                            <i class="ki-duotone ki-some-files fs-6 me-1 text-success"><span class="path1"></span><span class="path2"></span></i>
                                            Page Images
                                        </h6>
                                    </div>
                                    @foreach(['login_image' => 'Login Page Image', 'register_image' => 'Register Page Image', 'default_image' => 'Default Fallback Image'] as $field => $label)
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">{{ $label }}</label>
                                        @if($settings->$field)
                                            <div class="mb-3">
                                                <img src="{{ $settings->imageUrl($settings->$field) }}"
                                                     class="rounded border"
                                                     style="max-width:200px;max-height:130px;object-fit:cover"
                                                     alt="{{ $label }}">
                                            </div>
                                        @endif
                                        <div class="input-group">
                                            <input type="file" name="{{ $field }}" class="form-control" accept="image/*">
                                            @if($settings->$field)
                                                <button type="button" class="btn btn-light-danger delete-image-btn"
                                                        data-url="{{ route('admin.template-settings.delete-image', $field) }}" title="Remove">
                                                    <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                                    Remove
                                                </button>
                                            @endif
                                        </div>
                                        <div class="text-muted fs-8 mt-1">Max 4 MB. JPEG/PNG/WEBP.</div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            {{-- ─── Tab: Font & CSS ─────────────────────────────────────── --}}
                            <div class="tab-pane fade" id="tab-font">
                                <div class="row g-5 mt-2">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Font Family (English)</label>
                                        <select name="font_family" id="font-preview-select-en" class="form-select">
                                            @foreach(['Inter', 'Roboto', 'Open Sans', 'Poppins', 'Montserrat', 'Nunito'] as $font)
                                                <option value="{{ $font }}" @selected($settings->font_family === $font)>{{ $font }}</option>
                                            @endforeach
                                        </select>
                                        <div id="font-preview-en" class="mt-3 p-4 border rounded bg-light fs-5"
                                             style="font-family: '{{ $settings->font_family }}'" dir="ltr">
                                            The quick brown fox jumps over the lazy dog. — 0123456789
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Font Family (Arabic)</label>
                                        <select name="font_family_ar" id="font-preview-select-ar" class="form-select">
                                            @foreach(['Cairo', 'Tajawal', 'Almarai', 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Changa'] as $font)
                                                <option value="{{ $font }}" @selected($settings->font_family_ar === $font)>{{ $font }}</option>
                                            @endforeach
                                        </select>
                                        <div id="font-preview-ar" class="mt-3 p-4 border rounded bg-light fs-5"
                                             style="font-family: '{{ $settings->font_family_ar }}'" dir="rtl">
                                            الثعلب البني السريع يقفز فوق الكلب الكسول. — ٠١٢٣٤٥٦٧٨٩
                                        </div>
                                        <div class="text-muted fs-8 mt-1">Used on pages when the site language is Arabic — Latin fonts like Inter or Poppins don't render Arabic glyphs.</div>
                                    </div>
                                    <div class="col-12"><div class="separator separator-dashed my-2"></div></div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">Custom CSS</label>
                                        <textarea name="custom_css" class="form-control font-monospace" rows="10"
                                                  placeholder="/* inject custom CSS into the dashboard head */">{{ $settings->custom_css }}</textarea>
                                        <div class="text-muted fs-8 mt-1">Injected inside a <code>&lt;style&gt;</code> tag in <code>&lt;head&gt;</code>.</div>
                                    </div>
                                </div>
                            </div>

                        </div>{{-- /tab-content --}}
                    </div>{{-- /card-body --}}

                    <div class="card-footer d-flex justify-content-between align-items-center py-4">
                        <button type="button" id="reset-defaults-btn" class="btn btn-light-danger">
                            <i class="ki-duotone ki-arrows-circle fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                            Reset to Defaults
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="ki-duotone ki-check fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                            Save Settings
                        </button>
                    </div>
                </div>{{-- /card --}}
            </form>

        </div>
    </div>
</div>
@endsection

@section('js')
<script>
// ── Delete image buttons → submit the shared external form ────────────────
document.querySelectorAll('.delete-image-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        if (!confirm('Remove this image?')) return;
        const form = document.getElementById('delete-image-form');
        form.action = btn.dataset.url;
        form.submit();
    });
});

// ── Reset to defaults → submit the shared external form ────────────────────
document.getElementById('reset-defaults-btn')?.addEventListener('click', () => {
    if (!confirm('Reset ALL template settings to their defaults? This cannot be undone.')) return;
    document.getElementById('reset-defaults-form').submit();
});

// ── Sync color pickers → text labels ─────────────────────────────────────
document.querySelectorAll('.color-picker').forEach(picker => {
    const text = document.getElementById(picker.dataset.text);
    picker.addEventListener('input', () => {
        if (text) text.value = picker.value;
        updateColorPreview(picker.name, picker.value);
    });
});

// ── Sidebar color pickers ─────────────────────────────────────────────────
document.querySelector('[name=sidebar_bg_color]')?.addEventListener('input', function () {
    document.getElementById('sidebar-bg-text').value = this.value;
    const sidebar = document.getElementById('pv-sidebar');
    if (sidebar) sidebar.style.background = this.value;
});
document.querySelector('[name=sidebar_active_bg_color]')?.addEventListener('input', function () {
    document.getElementById('sidebar-active-bg-text').value = this.value;
    const el = document.getElementById('pv-sidebar-active');
    if (el) el.style.background = this.value;
});
document.querySelector('[name=sidebar_active_text_color]')?.addEventListener('input', function () {
    document.getElementById('sidebar-active-text-color').value = this.value;
    const el = document.getElementById('pv-sidebar-active');
    if (el) el.style.color = this.value;
});
document.querySelector('[name=sidebar_heading_color]')?.addEventListener('input', function () {
    const t = document.getElementById('sidebar-heading-color-text');
    if (t) t.value = this.value;
});
document.querySelector('[name=sidebar_hover_text_color]')?.addEventListener('input', function () {
    const t = document.getElementById('sidebar-hover-text-color-text');
    if (t) t.value = this.value;
});

// ── Reset to default ──────────────────────────────────────────────────────
document.querySelectorAll('.reset-color').forEach(btn => {
    btn.addEventListener('click', () => {
        const field = btn.dataset.target;
        const def   = btn.dataset.default;
        const picker = document.querySelector(`[name=${field}]`);
        picker.value = def;
        document.getElementById(`text-${field}`).value = def;
        updateColorPreview(field, def);
    });
});

// ── Live preview updater ──────────────────────────────────────────────────
function updateColorPreview(field, color) {
    const alpha20 = color + '33';
    const alpha40 = color + '66';

    switch (field) {
        case 'color_primary':
            setStyle('pv-primary-dot', 'background', color);
            setStyle('pv-primary-bar', 'background', color);
            setStyle('pv-btn-primary', 'background', color);
            setBadge('pv-badge-primary', color, alpha20, alpha40);
            break;
        case 'color_success':
            setStyle('pv-success-bar', 'background', color);
            setStyle('pv-btn-success', 'background', color);
            setBadge('pv-badge-success', color, alpha20, alpha40);
            break;
        case 'color_danger':
            setStyle('pv-danger-dot', 'background', color);
            setStyle('pv-btn-danger', 'background', color);
            setBadge('pv-badge-danger', color, alpha20, alpha40);
            break;
        case 'color_warning':
            setStyle('pv-btn-warning', 'background', color);
            setBadge('pv-badge-warning', color, alpha20, alpha40);
            break;
        case 'color_info':
            setStyle('pv-btn-info', 'background', color);
            setBadge('pv-badge-info', color, alpha20, alpha40);
            break;
        case 'color_dark':
            setStyle('pv-btn-dark', 'background', color);
            break;
    }
}

function setStyle(id, prop, val) {
    const el = document.getElementById(id);
    if (el) el.style[prop] = val;
}

function setBadge(id, color, bg, border) {
    const el = document.getElementById(id);
    if (!el) return;
    el.style.color = color;
    el.style.background = bg;
    el.style.borderColor = border;
}

// ── Font live preview (English + Arabic) ───────────────────────────────────
function wireFontPreview(selectId, previewId) {
    document.getElementById(selectId)?.addEventListener('change', function () {
        const preview = document.getElementById(previewId);
        preview.style.fontFamily = `'${this.value}'`;
        const link = document.createElement('link');
        link.rel  = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(this.value)}:wght@300;400;500;600;700&display=swap`;
        document.head.appendChild(link);
    });
}
wireFontPreview('font-preview-select-en', 'font-preview-en');
wireFontPreview('font-preview-select-ar', 'font-preview-ar');
</script>
@endsection