@extends('admin.layouts.layout')
@section('title', 'تنظیمات ظاهری')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1">تنظیمات ظاهری</h4>
            <p class="text-muted mb-0 small">ظاهر و هویت بصری سایت را تنظیم کنید</p>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible mb-4" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible mb-4" role="alert">
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-4" id="appearanceTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-header" data-bs-toggle="tab" data-bs-target="#pane-header"
                    type="button" role="tab">
                <i class="ti ti-layout-navbar me-1"></i> هدر
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-features" data-bs-toggle="tab" data-bs-target="#pane-features"
                    type="button" role="tab">
                <i class="ti ti-layout-grid me-1"></i> باکس ویژگی زیر اسلایدر
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-home-cats" data-bs-toggle="tab" data-bs-target="#pane-home-cats"
                    type="button" role="tab">
                <i class="ti ti-category me-1"></i> دسته‌بندی‌های صفحه اصلی
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-slider" data-bs-toggle="tab" data-bs-target="#pane-slider"
                    type="button" role="tab">
                <i class="ti ti-slideshow me-1"></i> تنظیمات اسلایدر
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-banners" data-bs-toggle="tab" data-bs-target="#pane-banners"
                    type="button" role="tab">
                <i class="ti ti-photo me-1"></i> تنظیمات بنرهای صفحه اصلی
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-footer" data-bs-toggle="tab" data-bs-target="#pane-footer"
                    type="button" role="tab">
                <i class="ti ti-layout-bottombar me-1"></i> تنظیمات فوتر
            </button>
        </li>
    </ul>

    <div class="tab-content" id="appearanceTabContent">

        {{-- ══ Header Tab ══ --}}
        <div class="tab-pane fade show active" id="pane-header" role="tabpanel">
            <div class="row gy-4">

                {{-- Logo --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center gap-2">
                            <i class="ti ti-photo ti-md text-primary"></i>
                            <h5 class="mb-0">لوگو سایت</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-3">
                                این لوگو در هدر سایت (موبایل و دسکتاپ)، صفحات ورود و ثبت‌نام و پنل ادمین نمایش داده می‌شود.
                            </p>

                            <div class="d-flex align-items-center gap-4 mb-4 flex-wrap">
                                <div class="text-center">
                                    <p class="text-muted small mb-2">لوگوی فعلی</p>
                                    <div class="border rounded-3 p-3 bg-light" style="min-width:180px">
                                        <img src="{{ $config['current_logo'] }}" alt="لوگو" id="logoPreview"
                                             style="max-height:80px;max-width:200px;object-fit:contain">
                                    </div>
                                </div>
                            </div>

                            <form method="POST" action="{{ route('admin.settings.appearance.save') }}"
                                  enctype="multipart/form-data" id="logoForm">
                                @csrf
                                <input type="hidden" name="_section" value="logo">

                                <div class="col-lg-5">
                                    <label class="form-label" for="logoFile">آپلود لوگوی جدید</label>
                                    <input type="file" class="form-control @error('logo') is-invalid @enderror"
                                           id="logoFile" name="logo" accept="image/*">
                                    @error('logo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    <div class="form-text">فرمت‌های مجاز: PNG، JPG، SVG، WebP — حداکثر ۲ مگابایت</div>
                                </div>

                                <div class="mt-3 d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-upload me-1"></i>آپلود و ذخیره لوگو
                                    </button>
                                    @if($config['has_custom_logo'])
                                    <button type="submit" name="_reset_logo" value="1" class="btn btn-outline-secondary">
                                        <i class="ti ti-refresh me-1"></i>بازگشت به لوگوی پیش‌فرض
                                    </button>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Phone button --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center gap-2">
                            <i class="ti ti-phone-call ti-md text-success"></i>
                            <h5 class="mb-0">دکمه تلفن تماس در هدر</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-4">
                                در هدر سایت برای موبایل و دسکتاپ نمایش داده می‌شود.
                                اگر متن خالی باشد دکمه نمایش داده نمی‌شود.
                            </p>

                            <form method="POST" action="{{ route('admin.settings.appearance.save') }}">
                                @csrf
                                <input type="hidden" name="_section" value="phone">

                                <div class="row gy-3">
                                    <div class="col-lg-4">
                                        <label class="form-label" for="headerPhoneText">متن دکمه</label>
                                        <input type="text" class="form-control @error('header_phone_text') is-invalid @enderror"
                                               id="headerPhoneText" name="header_phone_text"
                                               value="{{ old('header_phone_text', $config['header_phone_text']) }}"
                                               placeholder="مثال: ۰۶۶-۹۱۰۱۰۹۲۰">
                                        @error('header_phone_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="form-label" for="headerPhoneLink">لینک دکمه</label>
                                        <input type="text" class="form-control @error('header_phone_link') is-invalid @enderror"
                                               id="headerPhoneLink" name="header_phone_link"
                                               value="{{ old('header_phone_link', $config['header_phone_link']) }}"
                                               placeholder="مثال: tel:06691010920" dir="ltr">
                                        @error('header_phone_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        <div class="form-text">برای شماره تلفن: <code>tel:09xxxxxxxxx</code></div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary mt-3">
                                    <i class="ti ti-device-floppy me-1"></i>ذخیره
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Header Nav Links --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center gap-2">
                            <i class="ti ti-menu-2 ti-md text-primary"></i>
                            <h5 class="mb-0">لینک‌های منوی هدر</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-3">
                                آیتم‌هایی که بعد از دکمه «دسته‌بندی محصولات» در منوی بالا نمایش داده می‌شوند.
                                آیکون از <a href="https://icons.getbootstrap.com" target="_blank">Bootstrap Icons</a> — فقط نام آیکون بدون پیشوند (مثال: <code>tag</code>، <code>house</code>، <code>stars</code>).
                            </p>

                            <form method="POST" action="{{ route('admin.settings.appearance.save') }}">
                                @csrf
                                <input type="hidden" name="_section" value="header_nav">

                                <div id="headerNavContainer">
                                    <div class="d-flex gap-2 mb-1 px-1">
                                        <span class="small text-muted" style="width:44px">آیکون</span>
                                        <span class="small text-muted flex-fill">متن لینک</span>
                                        <span class="small text-muted flex-fill">آدرس</span>
                                        <span style="width:38px"></span>
                                    </div>
                                    @foreach($config['header_nav_links'] as $item)
                                    @php $ni = $loop->iteration; $niIcon = $item['icon'] ?: 'link'; @endphp
                                    <div class="nav-menu-row d-flex align-items-center gap-2 mb-2">
                                        <div style="width:44px;flex-shrink:0">
                                            <input type="hidden" name="nav_icon[]" id="nav-icon-{{ $ni }}" value="{{ $item['icon'] }}">
                                            <button type="button"
                                                    class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center"
                                                    style="width:38px;height:38px"
                                                    onclick="openIconPickerFor('nav-icon-{{ $ni }}','nav-icon-preview-{{ $ni }}')"
                                                    title="انتخاب آیکون">
                                                <i id="nav-icon-preview-{{ $ni }}" class="ti ti-{{ $niIcon }} fs-5"></i>
                                            </button>
                                        </div>
                                        <input type="text" name="nav_title[]" class="form-control form-control-sm flex-fill"
                                               placeholder="متن لینک" value="{{ $item['title'] }}">
                                        <input type="text" name="nav_url[]" class="form-control form-control-sm flex-fill"
                                               placeholder="آدرس" dir="ltr" value="{{ $item['url'] }}">
                                        <button type="button" class="btn btn-outline-danger btn-sm nav-remove-btn" title="حذف">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </div>
                                    @endforeach
                                </div>

                                <button type="button" class="btn btn-outline-primary btn-sm mt-1" id="addHeaderNav">
                                    <i class="ti ti-plus me-1"></i>افزودن لینک
                                </button>

                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-device-floppy me-1"></i>ذخیره منوی هدر
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- ══ Features Tab ══ --}}
        <div class="tab-pane fade" id="pane-features" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-layout-grid ti-md text-primary"></i>
                    <h5 class="mb-0">باکس‌های ویژگی زیر اسلایدر</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-4">
                        ۴ باکس زیر اسلایدر اصلی سایت نمایش داده می‌شوند. برای هر باکس آیکون، عنوان و زیرعنوان تعیین کنید.
                        اگر عنوان یک باکس خالی باشد نمایش داده نمی‌شود.
                    </p>

                    <form method="POST" action="{{ route('admin.settings.appearance.save') }}">
                        @csrf
                        <input type="hidden" name="_section" value="features">

                        <div class="row gy-4">
                            @foreach($config['features'] as $idx => $feat)
                            @php $iconName = $feat['icon'] ?: 'star'; @endphp
                            <div class="col-12">
                                <div class="border rounded-3 p-3 bg-light">
                                    <h6 class="fw-bold mb-3">باکس {{ $idx + 1 }}</h6>
                                    <div class="row gy-3 align-items-end">
                                        <div class="col-lg-3">
                                            <label class="form-label fw-semibold">آیکون <small class="text-muted">(Tabler Icons)</small></label>
                                            <input type="hidden" name="feature_icon[]"
                                                   id="feat-icon-{{ $idx }}" value="{{ $feat['icon'] }}">
                                            <button type="button"
                                                    class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2"
                                                    data-icon-picker
                                                    data-icon-input="feat-icon-{{ $idx }}"
                                                    data-icon-preview="feat-icon-preview-{{ $idx }}">
                                                <i id="feat-icon-preview-{{ $idx }}" class="ti ti-{{ $iconName }}"></i>
                                                <span class="small" id="feat-icon-label-{{ $idx }}">{{ $feat['icon'] ?: 'انتخاب آیکون' }}</span>
                                            </button>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold">عنوان</label>
                                            <input type="text" class="form-control" name="feature_title[]"
                                                   value="{{ $feat['title'] }}" placeholder="مثال: ضمانت بازگشت وجه">
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold">زیرعنوان</label>
                                            <input type="text" class="form-control" name="feature_subtitle[]"
                                                   value="{{ $feat['subtitle'] }}" placeholder="مثال: در صورت عدم رضایت">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-primary mt-4">
                            <i class="ti ti-device-floppy me-1"></i>ذخیره باکس‌های ویژگی
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══ Homepage Categories Tab ══ --}}
        <div class="tab-pane fade" id="pane-home-cats" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-category ti-md text-primary"></i>
                    <h5 class="mb-0">دسته‌بندی‌های صفحه اصلی</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-1">
                        دسته‌بندی‌هایی را که می‌خواهید در صفحه اصلی نمایش داده شوند انتخاب کنید.
                    </p>
                    <div class="alert alert-info py-2 small mb-4" id="hc-count-alert">
                        <i class="ti ti-info-circle me-1"></i>
                        <span id="hc-selected-count">{{ count($config['homepage_category_ids']) }}</span> از ۴ دسته‌بندی انتخاب شده
                    </div>

                    <form method="POST" action="{{ route('admin.settings.appearance.save') }}">
                        @csrf
                        <input type="hidden" name="_section" value="homepage_categories">

                        <div class="hc-tree">
                            @foreach($categoryTree as $row)
                            @php
                                $cat     = $row['item'];
                                $depth   = $row['depth'];
                                $checked = in_array($cat->id, $config['homepage_category_ids']);
                                $imgUrl  = $cat->image ? asset('uploads/categories/' . $cat->image) : null;
                                $icon    = $cat->icon ?: 'folder';
                            @endphp
                            <div class="hc-row {{ $depth > 0 ? 'hc-child' : 'hc-parent' }}"
                                 style="padding-right: {{ $depth * 28 }}px">
                                <label class="hc-label {{ $checked ? 'hc-checked' : '' }}">
                                    <input type="checkbox"
                                           name="homepage_category_ids[]"
                                           value="{{ $cat->id }}"
                                           class="hc-checkbox"
                                           {{ $checked ? 'checked' : '' }}
                                           {{ !$cat->is_active ? 'disabled title=غیرفعال' : '' }}>

                                    {{-- thumbnail --}}
                                    <span class="hc-thumb">
                                        @if($imgUrl)
                                            <img src="{{ $imgUrl }}" alt="{{ $cat->name }}">
                                        @else
                                            <i class="ti ti-{{ $icon }}"></i>
                                        @endif
                                    </span>

                                    <span class="hc-name">{{ $cat->name }}</span>

                                    @if(!$cat->is_active)
                                        <span class="badge bg-secondary ms-1 small">غیرفعال</span>
                                    @endif
                                    @if($depth === 0)
                                        <span class="badge bg-light text-dark border ms-1 small">مادر</span>
                                    @endif
                                </label>
                            </div>
                            @endforeach
                        </div>

                        <div class="mt-4 d-flex align-items-center gap-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy me-1"></i>ذخیره دسته‌بندی‌های صفحه اصلی
                            </button>
                            <span class="text-muted small" id="hc-limit-msg" style="display:none">
                                <i class="ti ti-alert-triangle text-warning me-1"></i>حداکثر ۴ دسته می‌توانید انتخاب کنید
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══ Footer Tab ══ --}}
        <div class="tab-pane fade" id="pane-footer" role="tabpanel">
            <form method="POST" action="{{ route('admin.settings.appearance.save') }}">
                @csrf
                <input type="hidden" name="_section" value="footer">

                <div class="row gy-4">

                    {{-- About --}}
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-info-circle ti-md text-primary"></i>
                                <h5 class="mb-0">درباره فروشگاه</h5>
                            </div>
                            <div class="card-body">
                                <textarea class="form-control" name="footer_about" rows="3"
                                    placeholder="توضیح کوتاهی درباره فروشگاه...">{{ $config['footer']['about'] }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Social links --}}
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-share ti-md text-primary"></i>
                                <h5 class="mb-0">شبکه‌های اجتماعی</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">اگر لینک خالی باشد آن آیکون نمایش داده نمی‌شود.</p>
                                <div class="row gy-3">
                                    @foreach([
                                        'instagram' => ['اینستاگرام',  'bi bi-instagram',   'https://instagram.com/...'],
                                        'telegram'  => ['تلگرام',      'bi bi-telegram',     'https://t.me/...'],
                                        'whatsapp'  => ['واتساپ',      'bi bi-whatsapp',     'https://wa.me/...'],
                                        'youtube'   => ['یوتیوب',      'bi bi-youtube',      'https://youtube.com/...'],
                                        'twitter'   => ['ایکس / توییتر','bi bi-twitter-x',  'https://x.com/...'],
                                    ] as $key => [$label, $icon, $placeholder])
                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label fw-semibold">
                                            <i class="{{ $icon }} me-1"></i>{{ $label }}
                                        </label>
                                        <input type="text" class="form-control" name="footer_social_{{ $key }}"
                                               value="{{ $config['footer']['social_' . $key] }}"
                                               placeholder="{{ $placeholder }}" dir="ltr">
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Namads --}}
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-certificate ti-md text-primary"></i>
                                <h5 class="mb-0">کد اینماد</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-2">کد HTML که از سایت اینماد دریافت می‌کنید را اینجا بگذارید.</p>
                                <textarea class="form-control font-monospace" name="footer_enamad_code" rows="5"
                                    dir="ltr" placeholder="&lt;a referrerpolicy='origin' ...&gt;&lt;/a&gt;">{{ $config['footer']['enamad_code'] }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-certificate ti-md text-success"></i>
                                <h5 class="mb-0">کد ساماندهی</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-2">کد HTML که از سایت ساماندهی دریافت می‌کنید را اینجا بگذارید.</p>
                                <textarea class="form-control font-monospace" name="footer_samandehi_code" rows="5"
                                    dir="ltr" placeholder="&lt;img src='...' /&gt;">{{ $config['footer']['samandehi_code'] }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Quick links menu --}}
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-list ti-md text-primary"></i>
                                <h5 class="mb-0">منوی دسترسی سریع</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">آیتم‌های منو را تعریف کنید. برای تغییر ترتیب، ردیف‌ها را جابه‌جا کنید.</p>
                                <div class="menu-builder" id="quickLinksContainer">
                                    <div class="menu-builder-head d-flex gap-2 mb-1 px-1">
                                        <span class="small text-muted flex-fill" style="flex:1">متن لینک</span>
                                        <span class="small text-muted flex-fill" style="flex:1">آدرس</span>
                                        <span style="width:38px"></span>
                                    </div>
                                    @foreach($config['footer']['quick_links'] as $item)
                                    <div class="menu-row d-flex gap-2 mb-2">
                                        <input type="text" name="quick_link_title[]" class="form-control form-control-sm"
                                               placeholder="متن لینک" value="{{ $item['title'] }}">
                                        <input type="text" name="quick_link_url[]" class="form-control form-control-sm"
                                               placeholder="آدرس" dir="ltr" value="{{ $item['url'] }}">
                                        <button type="button" class="btn btn-outline-danger btn-sm menu-remove-btn" title="حذف">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addQuickLink">
                                    <i class="ti ti-plus me-1"></i>افزودن آیتم
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Services menu --}}
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-headset ti-md text-primary"></i>
                                <h5 class="mb-0">منوی خدمات مشتریان</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">آیتم‌های منو را تعریف کنید.</p>
                                <div class="menu-builder" id="servicesContainer">
                                    <div class="menu-builder-head d-flex gap-2 mb-1 px-1">
                                        <span class="small text-muted flex-fill" style="flex:1">متن لینک</span>
                                        <span class="small text-muted flex-fill" style="flex:1">آدرس</span>
                                        <span style="width:38px"></span>
                                    </div>
                                    @foreach($config['footer']['services'] as $item)
                                    <div class="menu-row d-flex gap-2 mb-2">
                                        <input type="text" name="service_title[]" class="form-control form-control-sm"
                                               placeholder="متن لینک" value="{{ $item['title'] }}">
                                        <input type="text" name="service_url[]" class="form-control form-control-sm"
                                               placeholder="آدرس" dir="ltr" value="{{ $item['url'] }}">
                                        <button type="button" class="btn btn-outline-danger btn-sm menu-remove-btn" title="حذف">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addService">
                                    <i class="ti ti-plus me-1"></i>افزودن آیتم
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Contact info note --}}
                    <div class="col-12">
                        <div class="alert alert-info d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-info-circle fs-5"></i>
                            <span class="small">
                                اطلاعات تماس (تلفن، ایمیل، آدرس، ساعات کاری) از
                                <a href="{{ route('admin.settings.contact-page') }}" target="_blank" class="fw-bold">تنظیمات صفحه تماس با ما</a>
                                خوانده می‌شود.
                            </span>
                        </div>
                    </div>

                    {{-- Copyright + links --}}
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center gap-2">
                                <i class="ti ti-copyright ti-md text-primary"></i>
                                <h5 class="mb-0">نوار کپی‌رایت</h5>
                            </div>
                            <div class="card-body">
                                <div class="row gy-3">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">متن کپی‌رایت</label>
                                        <input type="text" class="form-control" name="footer_copyright"
                                               value="{{ $config['footer']['copyright'] }}"
                                               placeholder="تمامی حقوق این وب‌سایت متعلق به فروشگاه می‌باشد.">
                                    </div>
                                    <div class="col-lg-5">
                                        <label class="form-label fw-semibold">لینک قوانین و مقررات</label>
                                        <input type="text" class="form-control" name="footer_terms_link"
                                               value="{{ $config['footer']['terms_link'] }}"
                                               placeholder="/terms" dir="ltr">
                                    </div>
                                    <div class="col-lg-5">
                                        <label class="form-label fw-semibold">لینک حریم خصوصی</label>
                                        <input type="text" class="form-control" name="footer_privacy_link"
                                               value="{{ $config['footer']['privacy_link'] }}"
                                               placeholder="/privacy" dir="ltr">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <button type="submit" class="btn btn-primary mt-4">
                    <i class="ti ti-device-floppy me-1"></i>ذخیره تنظیمات فوتر
                </button>
            </form>
        </div>

        {{-- ══ Slider Tab ══ --}}
        <div class="tab-pane fade" id="pane-slider" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-slideshow ti-md text-primary"></i>
                    <h5 class="mb-0">تنظیمات اسلایدر هدر</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-4">
                        تصاویر و لینک اسلایدهای صفحه اصلی را تنظیم کنید. اسلایدهایی که تصویر ندارند نمایش داده نمی‌شوند.
                    </p>

                    <form method="POST" action="{{ route('admin.settings.appearance.save') }}"
                          enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="_section" value="slider">

                        <div class="row gy-4">
                            @for($i = 1; $i <= 5; $i++)
                            @php
                                $imgFile = $config['slider'][$i]['image'] ?? '';
                                $imgUrl  = $imgFile ? asset('uploads/slider/' . $imgFile) : null;
                                $lnk     = $config['slider'][$i]['link'] ?? '';
                            @endphp
                            <div class="col-12">
                                <div class="border rounded-3 p-3 bg-light">
                                    <h6 class="fw-bold mb-3">اسلاید {{ $i }}</h6>
                                    <div class="row gy-3 align-items-end">
                                        <div class="col-lg-5">
                                            @if($imgUrl)
                                            <div class="mb-2">
                                                <img src="{{ $imgUrl }}" class="img-thumbnail" style="max-height:90px">
                                            </div>
                                            @endif
                                            <label class="form-label fw-semibold">تصویر</label>
                                            <input type="file" class="form-control" name="slider_image_{{ $i }}" accept="image/*">
                                            <div class="form-text">JPG، PNG، WebP — حداکثر ۳ مگابایت</div>
                                            @if($imgFile)
                                            <div class="form-check mt-2">
                                                <input class="form-check-input" type="checkbox"
                                                       name="slider_remove_{{ $i }}" value="1"
                                                       id="slider-remove-{{ $i }}">
                                                <label class="form-check-label small text-danger" for="slider-remove-{{ $i }}">
                                                    حذف تصویر
                                                </label>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="col-lg-5">
                                            <label class="form-label fw-semibold">لینک</label>
                                            <input type="text" class="form-control" name="slider_link_{{ $i }}"
                                                   value="{{ $lnk }}" placeholder="مثال: /shop یا https://..." dir="ltr">
                                            <div class="form-text">اگر خالی باشد کلیک روی اسلاید کاری انجام نمی‌دهد.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endfor
                        </div>

                        <button type="submit" class="btn btn-primary mt-4">
                            <i class="ti ti-device-floppy me-1"></i>ذخیره تنظیمات اسلایدر
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══════ BANNERS PANE ══════ --}}
        <div class="tab-pane fade" id="pane-banners" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-photo ti-md text-primary"></i>
                    <h5 class="mb-0">تنظیمات بنرهای صفحه اصلی</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-4">
                        ۴ بنری که زیر بخش «آخرین محصولات فروشگاه» نمایش داده می‌شوند را تنظیم کنید.
                        برای هر بنر می‌توانید تصویر و لینک مشخص کنید. اگر تصویری انتخاب نشود، بنر پیش‌فرض نمایش داده می‌شود.
                    </p>

                    <form method="POST" action="{{ route('admin.settings.appearance.save') }}"
                          enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="_section" value="banners">

                        <div class="row gy-4">
                            @for($i = 1; $i <= 4; $i++)
                            @php
                                $bImgFile = $config['banners'][$i]['image'] ?? '';
                                $bImgUrl  = $bImgFile
                                    ? asset('uploads/banners/' . $bImgFile)
                                    : asset('theme/assets/image/banner-' . $i . '.webp');
                                $bLnk     = $config['banners'][$i]['link'] ?? '';
                            @endphp
                            <div class="col-12">
                                <div class="border rounded-3 p-3 bg-light">
                                    <h6 class="fw-bold mb-3">بنر {{ $i }}</h6>
                                    <div class="row gy-3 align-items-end">
                                        <div class="col-lg-5">
                                            <div class="mb-2">
                                                <img src="{{ $bImgUrl }}" class="img-thumbnail" style="max-height:90px">
                                            </div>
                                            <label class="form-label fw-semibold">تصویر</label>
                                            <input type="file" class="form-control" name="banner_image_{{ $i }}" accept="image/*">
                                            <div class="form-text">JPG، PNG، WebP — حداکثر ۳ مگابایت</div>
                                            @if($bImgFile)
                                            <div class="form-check mt-2">
                                                <input class="form-check-input" type="checkbox"
                                                       name="banner_remove_{{ $i }}" value="1"
                                                       id="banner-remove-{{ $i }}">
                                                <label class="form-check-label small text-danger" for="banner-remove-{{ $i }}">
                                                    حذف تصویر و بازگشت به پیش‌فرض
                                                </label>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="col-lg-5">
                                            <label class="form-label fw-semibold">لینک</label>
                                            <input type="text" class="form-control" name="banner_link_{{ $i }}"
                                                   value="{{ $bLnk }}" placeholder="مثال: /shop یا https://..." dir="ltr">
                                            <div class="form-text">اگر خالی باشد کلیک روی بنر کاری انجام نمی‌دهد.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endfor
                        </div>

                        <button type="submit" class="btn btn-primary mt-4">
                            <i class="ti ti-device-floppy me-1"></i>ذخیره تنظیمات بنرها
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

@include('admin.products._icon-picker')
@endsection

@section('customjs')
<style>
.hc-tree { display: flex; flex-direction: column; gap: 4px; }
.hc-row { border-radius: 10px; transition: background .15s; }
.hc-row:hover { background: #f5f5f8; }
.hc-parent > .hc-label { font-weight: 600; }
.hc-child > .hc-label { color: #555; }
.hc-label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer; border-radius: 10px;
    user-select: none;
}
.hc-label.hc-checked { background: #fff3f3; border: 1.5px solid #f26161; }
.hc-label:not(.hc-checked) { border: 1.5px solid transparent; }
.hc-checkbox { width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; accent-color: var(--bs-danger, #dc3545); }
.hc-thumb {
    width: 36px; height: 36px; border-radius: 8px;
    background: #f0f1f5;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.hc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hc-thumb i { font-size: 1.1rem; color: #888; }
.hc-name { flex: 1; font-size: .9rem; }
</style>
<script>
document.getElementById('logoFile')?.addEventListener('change', function () {
    var file = this.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function (e) {
        document.getElementById('logoPreview').src = e.target.result;
    };
    reader.readAsDataURL(file);
});

/* ── Homepage Category Picker: max 4 ── */
(function () {
    const MAX = 4;
    const boxes   = document.querySelectorAll('.hc-checkbox');
    const countEl = document.getElementById('hc-selected-count');
    const limitEl = document.getElementById('hc-limit-msg');

    function refresh() {
        const checked = document.querySelectorAll('.hc-checkbox:checked').length;
        if (countEl) countEl.textContent = checked;
        if (limitEl) limitEl.style.display = checked >= MAX ? 'inline' : 'none';

        boxes.forEach(cb => {
            const lbl = cb.closest('.hc-label');
            if (lbl) lbl.classList.toggle('hc-checked', cb.checked);
            if (!cb.checked && checked >= MAX) {
                cb.disabled = true;
            } else if (!cb.dataset.disabled) {
                cb.disabled = false;
            }
        });
    }

    boxes.forEach(cb => {
        if (cb.disabled) cb.dataset.disabled = '1';
        cb.addEventListener('change', refresh);
    });

    refresh();
})();
</script>
<script src="{{ url('theme/admin') }}/js/icon-names.js"></script>
<script src="{{ url('theme/admin') }}/js/icon-picker.js"></script>
<script>
/* ── Header nav menu builder ── */
var _navCounter = {{ count($config['header_nav_links']) }};

document.querySelectorAll('.nav-remove-btn').forEach(function (btn) {
    btn.addEventListener('click', function () { btn.closest('.nav-menu-row').remove(); });
});

document.getElementById('addHeaderNav')?.addEventListener('click', function () {
    _navCounter++;
    var n = _navCounter;
    var row = document.createElement('div');
    row.className = 'nav-menu-row d-flex align-items-center gap-2 mb-2';
    row.innerHTML =
        '<div style="width:44px;flex-shrink:0">' +
            '<input type="hidden" name="nav_icon[]" id="nav-icon-' + n + '" value="">' +
            '<button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center" style="width:38px;height:38px" ' +
                'onclick="openIconPickerFor(\'nav-icon-' + n + '\',\'nav-icon-preview-' + n + '\')" title="انتخاب آیکون">' +
                '<i id="nav-icon-preview-' + n + '" class="ti ti-link fs-5"></i>' +
            '</button>' +
        '</div>' +
        '<input type="text" name="nav_title[]" class="form-control form-control-sm flex-fill" placeholder="متن لینک">' +
        '<input type="text" name="nav_url[]" class="form-control form-control-sm flex-fill" placeholder="آدرس" dir="ltr">' +
        '<button type="button" class="btn btn-outline-danger btn-sm nav-remove-btn" title="حذف"><i class="ti ti-trash"></i></button>';
    document.getElementById('headerNavContainer').appendChild(row);
    row.querySelector('.nav-remove-btn').addEventListener('click', function () { row.remove(); });
});

/* ── Footer menu builder ── */
function makeMenuRow(titleName, urlName, titleVal, urlVal) {
    var row = document.createElement('div');
    row.className = 'menu-row d-flex gap-2 mb-2';
    row.innerHTML =
        '<input type="text" name="' + titleName + '" class="form-control form-control-sm" placeholder="متن لینک" value="' + (titleVal || '') + '">' +
        '<input type="text" name="' + urlName   + '" class="form-control form-control-sm" placeholder="آدرس" dir="ltr" value="' + (urlVal || '') + '">' +
        '<button type="button" class="btn btn-outline-danger btn-sm menu-remove-btn" title="حذف"><i class="ti ti-trash"></i></button>';
    row.querySelector('.menu-remove-btn').addEventListener('click', function () { row.remove(); });
    return row;
}

document.querySelectorAll('.menu-remove-btn').forEach(function (btn) {
    btn.addEventListener('click', function () { btn.closest('.menu-row').remove(); });
});

document.getElementById('addQuickLink')?.addEventListener('click', function () {
    document.getElementById('quickLinksContainer').appendChild(
        makeMenuRow('quick_link_title[]', 'quick_link_url[]', '', '')
    );
});

document.getElementById('addService')?.addEventListener('click', function () {
    document.getElementById('servicesContainer').appendChild(
        makeMenuRow('service_title[]', 'service_url[]', '', '')
    );
});
</script>
@endsection
