@extends('admin.layouts.master')

@section('title', isset($widget) ? trans('Edit Widget') : trans('Create Widget'))

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs4.min.css">
<style>
/* ══════════════════════════════════════════════════════════════
   WIDGET FORM — NC THEME INTEGRATED
   Uses: --acc, --acc-dark, --acc-soft, --acc-mid
         --panel, --surface, --line, --ink, --muted
         --sb-hover-bg, --sb-active-bg, --font-main
══════════════════════════════════════════════════════════════ */

/* ── BASE ── */
.wf-wrap {
    padding: 0;
    margin: 0 auto;
}

/* ── PAGE HEADER ── */
.wf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.wf-page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wf-page-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--acc-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--acc);
    border: 1.5px solid var(--acc-mid);
    flex-shrink: 0;
}

.wf-page-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.2px;
}

.wf-page-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin: 2px 0 0;
}

.wf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s;
}

.wf-back-btn:hover {
    background: var(--sb-hover-bg);
    border-color: var(--acc-mid);
    color: var(--acc);
}

/* ── FORM LAYOUT ── */
.wf-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
}

@media(max-width: 1024px) {
    .wf-grid { grid-template-columns: 1fr; }
}

/* ── CARD ── */
.wf-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
    margin-bottom: 14px;
}

.wf-card:last-child { margin-bottom: 0; }

.wf-card:hover { border-color: var(--acc-mid); }

.wf-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.wf-card-head-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--acc-soft);
    color: var(--acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid var(--acc-mid);
    flex-shrink: 0;
}

.wf-card-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .1px;
    text-transform: uppercase;
}

.wf-card-body {
    padding: 16px;
}

/* ── FORM ROW ── */
.wf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.wf-row.full { grid-template-columns: 1fr; }
.wf-row:last-child { margin-bottom: 0; }

@media(max-width: 600px) {
    .wf-row { grid-template-columns: 1fr; }
}

/* ── FORM GROUP ── */
.wf-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wf-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wf-label .req {
    color: #ef4444;
    font-size: 13px;
    line-height: 1;
}

/* ── INPUTS ── */
.wf-input,
.wf-select,
.wf-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 13px;
    font-family: var(--font-main, inherit);
    color: var(--ink);
    background: var(--surface);
    transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.wf-input:focus,
.wf-select:focus,
.wf-textarea:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(90,103,216,.12);
    background: var(--panel);
}

.wf-input::placeholder,
.wf-textarea::placeholder {
    color: var(--muted);
    opacity: .55;
    font-size: 12.5px;
}

.wf-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.wf-select {
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.wf-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── HINT TEXT ── */
.wf-hint {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    margin-top: 2px;
}

/* ── HIDDEN SECTIONS ── */
.wf-hidden-section { display: none; }
.wf-hidden-section.active { display: block; }

/* ── FILE INPUT ── */
.wf-file-area {
    border: 2px dashed var(--line);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all .18s;
    background: var(--surface);
}

.wf-file-area:hover {
    border-color: var(--acc-mid);
    background: var(--acc-soft);
}

.wf-file-area input[type="file"] {
    width: 100%;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--muted);
}

.wf-file-area .wf-file-icon {
    font-size: 24px;
    color: var(--acc);
    margin-bottom: 6px;
    opacity: .7;
}

.wf-file-area .wf-file-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.wf-banner-preview {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.wf-banner-preview img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── CHECKBOX TOGGLE ── */
.wf-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .18s;
}

.wf-toggle-row:last-child { margin-bottom: 0; }

.wf-toggle-row:hover {
    background: var(--sb-hover-bg);
    border-color: var(--acc-mid);
}

.wf-toggle-info { flex: 1; }

.wf-toggle-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

.wf-toggle-desc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}

/* iOS-style toggle switch */
.wf-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.wf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.wf-slider {
    position: absolute;
    inset: 0;
    background: var(--line);
    border-radius: 22px;
    cursor: pointer;
    transition: background .25s;
    border: 1px solid var(--line);
}

.wf-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    left: 2px;
    top: 2px;
    transition: transform .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.wf-switch input:checked + .wf-slider {
    background: var(--acc);
    border-color: var(--acc);
}

.wf-switch input:checked + .wf-slider::before {
    transform: translateX(16px);
}

/* ── DATETIME INPUT ── */
.wf-input[type="datetime-local"] {
    font-size: 12.5px;
    color: var(--ink);
}

/* ── SIDEBAR ── */
.wf-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 20px;
}

/* ── SUBMIT BUTTON ── */
.wf-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--acc);
    color: white;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .2px;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(90,103,216,.25);
}

.wf-btn-submit:hover:not(:disabled) {
    background: var(--acc-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(90,103,216,.35);
}

.wf-btn-submit:active:not(:disabled) {
    transform: translateY(0);
}

.wf-btn-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── STATUS BADGE (type indicator) ── */
.wf-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--acc-soft);
    color: var(--acc);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--acc-mid);
    letter-spacing: .2px;
    margin-left: auto;
}

/* ── DIVIDER ── */
.wf-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

/* ── TOAST ── */
.wf-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.wf-toast {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--acc);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 340px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    animation: wf-slide-in .28s cubic-bezier(.4,0,.2,1);
    pointer-events: auto;
}

@keyframes wf-slide-in {
    from { transform: translateX(360px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.wf-toast.success { border-left-color: #22c55e; }
.wf-toast.success .wf-toast-icon { color: #22c55e; }
.wf-toast.error   { border-left-color: #ef4444; }
.wf-toast.error   .wf-toast-icon { color: #ef4444; }
.wf-toast.warning { border-left-color: #f59e0b; }
.wf-toast.warning .wf-toast-icon { color: #f59e0b; }

.wf-toast-icon { font-size: 15px; flex-shrink: 0; }
.wf-toast-msg  { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.wf-toast-close {
    background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 16px; padding: 0; line-height: 1;
    opacity: .6; transition: opacity .15s;
}
.wf-toast-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   SUMMERNOTE - Theme Integrated
══════════════════════════════════════════════════════════════ */
.note-editor { border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--panel) !important; }
.note-toolbar { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; padding: 8px !important; border-radius: 8px 8px 0 0 !important; }
.note-toolbar .btn, .note-toolbar .btn-default { background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; height: 30px !important; font-size: 12px !important; padding: 5px 8px !important; border-radius: 5px !important; }
.note-toolbar .btn:hover { background: var(--sb-hover-bg) !important; border-color: var(--acc-mid) !important; color: var(--acc) !important; }
.note-toolbar .btn.active { background: var(--acc) !important; border-color: var(--acc) !important; color: white !important; }
.note-editable { background: var(--panel) !important; color: var(--ink) !important; padding: 14px !important; min-height: 220px !important; font-size: 13.5px !important; border-radius: 0 0 8px 8px !important; }
.dropdown-menu { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,.14) !important; }
.dropdown-menu > li > a { color: var(--ink) !important; font-size: 12.5px !important; padding: 8px 14px !important; }
.dropdown-menu > li > a:hover { background: var(--acc-soft) !important; color: var(--acc) !important; }

/* ── RESPONSIVE ── */
@media(max-width: 768px) {
    .wf-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .wf-grid { grid-template-columns: 1fr; }
    .wf-row { grid-template-columns: 1fr; }
}
</style>
@endsection

@section('content')

<div class="wf-toast-container" id="wfToast"></div>

<div class="wf-wrap">

    {{-- PAGE HEADER --}}
    <div class="wf-page-header">
        <div class="wf-page-header-left">
            <div class="wf-page-icon">
                <i class="fas {{ isset($widget) ? 'fa-pen' : 'fa-plus' }}"></i>
            </div>
            <div>
                <h1 class="wf-page-title">{{ isset($widget) ? trans('Edit Widget') : trans('Create Widget') }}</h1>
                <p class="wf-page-sub">{{ isset($widget) ? 'Update widget settings and configuration' : 'Create a new widget for your website' }}</p>
            </div>
        </div>
        <a href="{{ route('widgets.index') }}" class="wf-back-btn">
            <i class="fas fa-arrow-left" style="font-size:11px"></i> Back
        </a>
    </div>

    <form action="{{ isset($widget) ? route('widgets.update', $widget->id) : route('widgets.store') }}"
          method="POST" enctype="multipart/form-data" id="wfForm">
        @csrf
        @if(isset($widget)) @method('PUT') @endif

        <div class="wf-grid">

            {{-- ═══ LEFT COLUMN ═══ --}}
            <div class="wf-left">

                {{-- BASIC SETTINGS --}}
                <div class="wf-card">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-sliders"></i></div>
                        <span class="wf-card-title">Basic Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-row">
                            <div class="wf-group">
                                <label class="wf-label">
                                    {{ trans('Widget Title') }}
                                    <span class="req">*</span>
                                </label>
                                <input type="text" name="title" class="wf-input"
                                    value="{{ old('title', $widget->title ?? '') }}"
                                    placeholder="e.g., Featured News"
                                    required>
                            </div>
                            <div class="wf-group">
                                <label class="wf-label">{{ trans('Widget Type') }}</label>
                                <select name="type" id="wfType" class="wf-select">
                                    <option value="">— Select Type —</option>
                                    @foreach ($widgetsFile as $label)
                                        <option value="{{ $label }}"
                                            {{ old('type', $widget->type ?? '') == $label ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="wf-row full">
                            <div class="wf-group">
                                <label class="wf-label">{{ trans('Short Description') }}</label>
                                <textarea name="description" class="wf-textarea" rows="2"
                                    placeholder="Brief description of this widget">{{ old('description', $widget->description ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CATEGORY BASED --}}
                <div class="wf-card wf-hidden-section category_based">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-folder"></i></div>
                        <span class="wf-card-title">Category Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <label class="wf-label">{{ trans('Select Category') }}</label>
                            <select name="settings[category_id]" class="wf-select">
                                <option value="">— Choose a category —</option>
                                @foreach (categories() as $info)
                                    <option value="{{ $info->id }}"
                                        {{ old('settings.category_id', $widget->settings['category_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                        {{ $info->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- TAG BASED --}}
                <div class="wf-card wf-hidden-section tag_based">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-tag"></i></div>
                        <span class="wf-card-title">Tag Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <label class="wf-label">{{ trans('Select Tag') }}</label>
                            <select name="settings[tag_id]" class="wf-select">
                                <option value="">— Choose a tag —</option>
                                @foreach (tags() as $info)
                                    <option value="{{ $info->id }}"
                                        {{ old('settings.tag_id', $widget->settings['tag_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                        {{ $info->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- SLIDER SETTINGS --}}
                <div class="wf-card wf-hidden-section slider_news_widgets">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-film"></i></div>
                        <span class="wf-card-title">Slider Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <label class="wf-label">{{ trans('Select Category') }}</label>
                            <select name="settings[category_id]" class="wf-select">
                                <option value="">— Choose a category —</option>
                                @foreach (categories() as $info)
                                    <option value="{{ $info->id }}"
                                        {{ old('settings.category_id', $widget->settings['category_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                        {{ $info->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- NEWS TAB SETTINGS --}}
                <div class="wf-card wf-hidden-section news_tab_widgets">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-table-columns"></i></div>
                        <span class="wf-card-title">Tab Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-row">
                            <div class="wf-group">
                                <label class="wf-label">Tab 1</label>
                                <select name="settings[option1]" class="wf-select">
                                    <option value="">— Select option —</option>
                                    <option value="latest_news" {{ old('settings.option1', $widget->settings['option1'] ?? '') == 'latest_news' ? 'selected' : '' }}>Latest News</option>
                                    <option value="popular_news" {{ old('settings.option1', $widget->settings['option1'] ?? '') == 'popular_news' ? 'selected' : '' }}>Popular News</option>
                                    @foreach (categories() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.option1', $widget->settings['option1'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="wf-group">
                                <label class="wf-label">Tab 2</label>
                                <select name="settings[option2]" class="wf-select">
                                    <option value="">— Select option —</option>
                                    <option value="latest_news" {{ old('settings.option2', $widget->settings['option2'] ?? '') == 'latest_news' ? 'selected' : '' }}>Latest News</option>
                                    <option value="popular_news" {{ old('settings.option2', $widget->settings['option2'] ?? '') == 'popular_news' ? 'selected' : '' }}>Popular News</option>
                                    @foreach (categories() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.option2', $widget->settings['option2'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- POST TYPE SETTINGS --}}
                <div class="wf-card wf-hidden-section post_type_based">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-file-lines"></i></div>
                        <span class="wf-card-title">Post Type Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <label class="wf-label">Select Post Type</label>
                            <select name="settings[news_type]" class="wf-select">
                                <option value="">— Choose post type —</option>
                                <option value="standerd" {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'standerd' ? 'selected' : '' }}>Standard</option>
                                <option value="gallery"  {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'gallery'  ? 'selected' : '' }}>Gallery</option>
                                <option value="video"    {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'video'    ? 'selected' : '' }}>Video</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- AD SPACE SETTINGS --}}
                <div class="wf-card wf-hidden-section add_space">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-rectangle-ad"></i></div>
                        <span class="wf-card-title">Ad Space Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <label class="wf-label">Select Ad Space</label>
                            <select name="settings[add_space]" class="wf-select">
                                <option value="">— Choose ad space —</option>
                                @forelse (adSpace() as $info)
                                    <option value="{{ $info->id }}"
                                        {{ old('settings.add_space', $widget->settings['add_space'] ?? '') == $info->id ? 'selected' : '' }}>
                                        {{ $info->title }}
                                    </option>
                                @empty @endforelse
                            </select>
                        </div>
                    </div>
                </div>

                {{-- BANNER SETTINGS --}}
                <div class="wf-card wf-hidden-section banner_widgets">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-image"></i></div>
                        <span class="wf-card-title">Banner Settings</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-row full">
                            <div class="wf-group">
                                <label class="wf-label">Upload Banner</label>
                                <div class="wf-file-area">
                                    <div class="wf-file-icon"><i class="fas fa-cloud-arrow-up"></i></div>
                                    <div class="wf-file-label">Click or drag image here</div>
                                    <input type="file" name="settings[banner_image]" accept="image/*" style="margin-top:8px">
                                </div>
                                @if(!empty($widget->settings['banner_image']))
                                    <div class="wf-banner-preview">
                                        <img src="{{ asset($widget->settings['banner_image']) }}" alt="Banner">
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="wf-row" style="margin-top:14px">
                            <div class="wf-group">
                                <label class="wf-label">Banner Caption</label>
                                <input type="text" name="settings[banner_caption]" class="wf-input"
                                    value="{{ old('settings.banner_caption', $widget->settings['banner_caption'] ?? '') }}"
                                    placeholder="Caption text">
                            </div>
                            <div class="wf-group">
                                <label class="wf-label">Banner Link</label>
                                <input type="text" name="settings[banner_link]" class="wf-input"
                                    value="{{ old('settings.banner_link', $widget->settings['banner_link'] ?? '') }}"
                                    placeholder="https://example.com">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CUSTOM HTML --}}
                <div class="wf-card wf-hidden-section custom_html">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-code"></i></div>
                        <span class="wf-card-title">Custom HTML Content</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group">
                            <textarea name="content" id="summernote" class="wf-textarea" rows="8"
                                placeholder="Write your custom HTML content here...">{{ old('content', $widget->content ?? '') }}</textarea>
                            <p class="wf-hint">💡 You can use HTML, CSS, and JavaScript</p>
                        </div>
                    </div>
                </div>

            </div>

            {{-- ═══ RIGHT SIDEBAR ═══ --}}
            <div class="wf-sidebar">

                {{-- PUBLISH CARD --}}
                <div class="wf-card">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-rocket"></i></div>
                        <span class="wf-card-title">Publish</span>
                    </div>
                    <div class="wf-card-body">
                        <button type="submit" class="wf-btn-submit" id="wfSubmitBtn">
                            <i class="fas fa-save"></i>
                            {{ isset($widget) ? trans('Update Widget') : trans('Create Widget') }}
                        </button>
                    </div>
                </div>

                {{-- STATUS CARD --}}
                <div class="wf-card">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-circle-check"></i></div>
                        <span class="wf-card-title">Status</span>
                    </div>
                    <div class="wf-card-body">
                        <label class="wf-toggle-row" for="wfIsActive">
                            <div class="wf-toggle-info">
                                <div class="wf-toggle-name">Active Widget</div>
                                <div class="wf-toggle-desc">Show this widget on site</div>
                            </div>
                            <label class="wf-switch">
                                <input type="checkbox" name="is_active" id="wfIsActive"
                                    {{ old('is_active', $widget->is_active ?? true) ? 'checked' : '' }}>
                                <span class="wf-slider"></span>
                            </label>
                        </label>
                    </div>
                </div>

                {{-- SCHEDULE CARD --}}
                <div class="wf-card">
                    <div class="wf-card-head">
                        <div class="wf-card-head-icon"><i class="fas fa-clock"></i></div>
                        <span class="wf-card-title">Schedule</span>
                    </div>
                    <div class="wf-card-body">
                        <div class="wf-group" style="margin-bottom:12px">
                            <label class="wf-label">Show From</label>
                            <input type="datetime-local" name="show_from" class="wf-input"
                                value="{{ old('show_from', isset($widget->show_from) ? \Carbon\Carbon::parse($widget->show_from)->format('Y-m-d\TH:i') : '') }}">
                        </div>
                        <div class="wf-group" style="margin-bottom:12px">
                            <label class="wf-label">Show Till</label>
                            <input type="datetime-local" name="show_till" class="wf-input"
                                value="{{ old('show_till', isset($widget->show_till) ? \Carbon\Carbon::parse($widget->show_till)->format('Y-m-d\TH:i') : '') }}">
                        </div>
                        <label class="wf-toggle-row" for="wfDateActive">
                            <div class="wf-toggle-info">
                                <div class="wf-toggle-name">Enable Schedule</div>
                                <div class="wf-toggle-desc">Use date range above</div>
                            </div>
                            <label class="wf-switch">
                                <input type="checkbox" name="settings[date_active]" id="wfDateActive"
                                    {{ old('settings.date_active', $widget->settings['date_active'] ?? false) ? 'checked' : '' }}>
                                <span class="wf-slider"></span>
                            </label>
                        </label>
                    </div>
                </div>

                {{-- HELP CARD --}}
                <div class="wf-card" style="border-color: var(--acc-mid); background: var(--acc-soft);">
                    <div class="wf-card-body" style="padding: 14px;">
                        <div style="display:flex; align-items:flex-start; gap:10px;">
                            <i class="fas fa-circle-info" style="color:var(--acc); font-size:14px; margin-top:2px; flex-shrink:0"></i>
                            <div>
                                <div style="font-size:12px; font-weight:700; color:var(--ink); margin-bottom:4px;">Widget Types</div>
                                <div style="font-size:11.5px; color:var(--muted); line-height:1.6">
                                    Select a widget type to reveal its specific settings. Different types control different parts of your site.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </form>
</div>

@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs4.min.js"></script>
<script>
// ── TOAST ──
function wfToast(type, msg) {
    var c = document.getElementById('wfToast');
    var icons = { success: 'fa-check-circle', error: 'fa-times-circle', warning: 'fa-exclamation-circle' };
    var t = document.createElement('div');
    t.className = 'wf-toast ' + type;
    t.innerHTML = '<i class="fas ' + (icons[type]||'fa-info-circle') + ' wf-toast-icon"></i>' +
                  '<span class="wf-toast-msg">' + msg + '</span>' +
                  '<button class="wf-toast-close" onclick="this.parentElement.remove()">×</button>';
    c.appendChild(t);
    setTimeout(function() { if (t.parentElement) { t.style.opacity='0'; t.style.transform='translateX(360px)'; t.style.transition='all .3s'; setTimeout(function(){ t.remove(); }, 300); }}, 4000);
}

$(document).ready(function () {

    // ── SECTION TOGGLE ──
    var sections = ['category_based','tag_based','post_type_based','add_space','banner_widgets','custom_html','news_tab_widgets','slider_news_widgets'];

    function toggleSections(type) {
        sections.forEach(function(s) {
            var el = $('.' + s);
            if (s === type) {
                el.addClass('active').find('input,select,textarea').prop('disabled', false);
            } else {
                el.removeClass('active').find('input,select,textarea').prop('disabled', true);
            }
        });
    }

    var currentType = $('#wfType').val();
    @if(!isset($widget))
        $('.custom_html').addClass('active');
    @else
        if (currentType) { toggleSections(currentType); }
    @endif

    $('#wfType').on('change', function () { toggleSections($(this).val()); });

    // ── SUMMERNOTE ──
    if (typeof $.fn.summernote !== 'undefined') {
        $('#summernote').summernote({
            height: 260,
            placeholder: '✏️ Write your content here...',
            toolbar: [
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table', 'hr']],
                ['insert', ['link', 'picture', 'code']],
                ['view', ['fullscreen', 'codeview']]
            ],
            callbacks: {
                onInit: function () {
                    $('.note-toolbar').css('background', 'var(--surface)');
                    $('.note-editable').css({ 'background': 'var(--panel)', 'color': 'var(--ink)' });
                }
            }
        });
    }

    // ── FORM SUBMIT ──
    $('#wfForm').on('submit', function (e) {
        var title = $('input[name="title"]').val().trim();
        if (!title) {
            e.preventDefault();
            wfToast('warning', 'Please enter a widget title!');
            $('input[name="title"]').focus();
            return false;
        }
        var btn = $('#wfSubmitBtn');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');
    });

});
</script>
@endsection