@extends('admin.layouts.master')

@section('title', isset($post) ? 'Edit News' : 'Create News')

@section('css')
<style>
/* ══════════════════════════════════════════
   Global Form Theme
══════════════════════════════════════════ */
.nc-wrap { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
@media(max-width:900px){ .nc-wrap { grid-template-columns:1fr; } }

.nc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-bottom:16px; border-bottom:2px solid var(--line); }
.nc-header-left h1 { font-size:20px; font-weight:800; color:var(--ink); margin:0 0 4px; letter-spacing:-.4px; display:flex; align-items:center; gap:10px; }
.nc-header-left h1 i { color:var(--acc); font-size:17px; }
.nc-header-left p  { font-size:13px; color:var(--muted); margin:0; font-weight:500; }
.nc-header-right   { display:flex; align-items:center; gap:10px; }

.nl-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all .18s; text-decoration:none; white-space:nowrap; }
.nl-btn-primary   { background:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(90,103,216,.35); }
.nl-btn-primary:hover { background:var(--acc-dark); color:#fff; transform:translateY(-1px); }
.nl-btn-secondary { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.nl-btn-secondary:hover { background:var(--sb-hover-bg); border-color:var(--acc-mid); color:var(--acc); }
.nl-btn-ghost { background:transparent; color:var(--muted); border:1.5px solid var(--line); }
.nl-btn-ghost:hover { background:var(--sb-hover-bg); color:var(--ink); }

.nc-card { background:var(--panel); border:1.5px solid var(--line); border-radius:12px; overflow:visible; margin-bottom:18px; position:relative; }
.nc-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1.5px solid var(--line); background:var(--surface); }
.nc-card-title { font-size:13px; font-weight:800; color:var(--ink); margin:0; display:flex; align-items:center; gap:8px; }
.nc-card-title i { color:var(--acc); font-size:13px; }
.nc-card-body { padding:18px; }

.nc-label { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; display:block; }
.nc-input,.nc-textarea,.nc-select { width:100%; background:var(--surface) !important; border:1.5px solid var(--line) !important; color:var(--ink) !important; border-radius:8px !important; font-size:13.5px !important; font-weight:500 !important; padding:9px 13px !important; outline:none !important; transition:border-color .18s,box-shadow .18s; font-family:inherit; }
.nc-input:focus,.nc-textarea:focus,.nc-input::placeholder,.nc-textarea::placeholder { color:var(--muted); opacity:.7; font-style:italic; }
.nc-textarea { resize:vertical; min-height:80px; }
.nc-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; padding-right:32px !important; }

.nc-form-row { display:grid; gap:14px; margin-bottom:14px; }
.nc-form-row.cols-2 { grid-template-columns:1fr 1fr; }
.nc-form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:600px){ .nc-form-row.cols-2,.nc-form-row.cols-3 { grid-template-columns:1fr; } }
.nc-form-group { margin-bottom:14px; }

.note-editor.note-frame { border:1.5px solid var(--line) !important; border-radius:8px !important; overflow:hidden; }
.note-toolbar { background:var(--surface) !important; border-bottom:1.5px solid var(--line) !important; }
.note-editable { background:var(--panel) !important; color:var(--ink) !important; min-height:260px; }
.note-statusbar { background:var(--surface) !important; border-top:1.5px solid var(--line) !important; }

.nc-upload-box { position:relative; width:100%; border:2px dashed var(--line); border-radius:10px; overflow:hidden; background:var(--surface); transition:border-color .2s,background .2s; cursor:pointer; }
.nc-upload-box:hover { border-color:var(--acc); background:var(--acc-soft); }
.nc-upload-box.has-image { border-style:solid; border-color:var(--acc-mid); }
.nc-upload-box input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; }
.nc-upload-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; gap:10px; }
.nc-upload-placeholder i { font-size:28px; color:var(--muted); opacity:.5; }
.nc-upload-placeholder span { font-size:12.5px; font-weight:600; color:var(--muted); }
.nc-upload-placeholder small { font-size:11px; color:var(--muted); opacity:.7; }
.nc-upload-preview { width:100%; height:180px; object-fit:cover; display:none; }
.nc-upload-box.has-image .nc-upload-placeholder { display:none; }
.nc-upload-box.has-image .nc-upload-preview { display:block; }
.nc-upload-cancel { position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:11px; display:none; align-items:center; justify-content:center; transition:background .15s; }
.nc-upload-box.has-image .nc-upload-cancel { display:flex; }
.nc-upload-cancel:hover { background:rgba(239,68,68,.85); }

.nc-collapse-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:7px; font-size:12px; font-weight:700; border:1.5px solid var(--acc-mid); background:var(--acc-soft); color:var(--acc); cursor:pointer; transition:all .18s; }
.nc-collapse-btn:hover { background:var(--acc); color:#fff; border-color:var(--acc); }
.nc-collapse-panel { overflow:hidden; max-height:0; transition:max-height .3s ease,padding .3s ease; }
.nc-collapse-panel.open { max-height:1000px; overflow:visible; }
.nc-collapse-inner { padding:14px 0 4px; }

.nc-pos-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nc-pos-item { background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:12px; transition:border-color .18s; }
.nc-pos-item:focus-within { border-color:var(--acc); }
.nc-pos-label { font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.nc-pos-label i { font-size:10px; }
.nc-pos-input { width:100%; background:transparent !important; border:none !important; border-bottom:1.5px solid var(--line) !important; border-radius:0 !important; padding:4px 0 !important; font-size:18px !important; font-weight:800 !important; color:var(--ink) !important; outline:none !important; }
.nc-pos-input:focus { border-bottom-color:var(--acc) !important; box-shadow:none !important; }

.ts-wrapper { position:relative; z-index:1; }
.ts-wrapper.focus,.ts-wrapper.dropdown-active { z-index:99999 !important; }
.ts-wrapper .ts-control { background:var(--surface) !important; border:1.5px solid var(--line) !important; border-radius:8px !important; color:var(--ink) !important; font-size:13px !important; font-weight:500 !important; min-height:40px !important; box-shadow:none !important; padding:4px 10px !important; }
.ts-wrapper.focus .ts-control { border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(90,103,216,.14) !important; }
.ts-wrapper .ts-control .item { background:var(--acc-soft) !important; color:var(--acc) !important; border:1.5px solid var(--acc-mid) !important; border-radius:6px !important; padding:2px 8px !important; font-size:12px !important; font-weight:600 !important; }
.ts-wrapper .ts-control .item .remove { color:var(--acc) !important; border-left:1px solid var(--acc-mid) !important; }
.ts-dropdown { background:var(--panel) !important; border:1.5px solid var(--line) !important; border-radius:10px !important; box-shadow:0 10px 36px rgba(0,0,0,.16) !important; z-index:99999 !important; position:absolute !important; }
.ts-dropdown .option { color:var(--ink) !important; font-size:13px !important; padding:9px 14px !important; }
.ts-dropdown .option.selected { background:var(--acc-soft) !important; color:var(--acc) !important; }
.ts-dropdown .option:hover,.ts-dropdown .option.active { background:var(--sb-hover-bg) !important; }
.ts-dropdown .optgroup-header { background:var(--surface) !important; color:var(--muted) !important; font-size:10.5px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:1px !important; padding:8px 14px 4px !important; }
.ts-dropdown-content { max-height:220px !important; }
.ts-wrapper .clear-button { color:var(--muted) !important; opacity:.7; }

.nc-location-grid { display:grid; gap:12px; }

.nc-save-fixed { position:fixed; right:28px; bottom:28px; z-index:9999; display:flex; align-items:center; gap:8px; padding:12px 24px; border-radius:50px; background:var(--acc); color:#fff; font-size:14px; font-weight:700; border:none; cursor:pointer; box-shadow:0 6px 24px rgba(90,103,216,.45); transition:all .25s; opacity:0; transform:translateY(20px); pointer-events:none; }
.nc-save-fixed.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.nc-save-fixed:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 10px 30px rgba(90,103,216,.55); }
.nc-save-fixed i { font-size:14px; }
@media(max-width:576px){ .nc-save-fixed { right:16px; bottom:16px; padding:11px 20px; font-size:13px; } }

.nc-error { font-size:11.5px; color:#ef4444; margin-top:4px; font-weight:600; display:flex; align-items:center; gap:4px; }
.nc-error i { font-size:11px; }
.nc-hint { font-size:11px; color:var(--muted); margin-top:4px; display:block; font-style:italic; }
.nc-divider { height:1px; background:var(--line); margin:16px 0; }
.nc-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; }
.nc-badge-acc { background:var(--acc-soft); color:var(--acc); border:1px solid var(--acc-mid); }

.nc-counter { font-size:11px; color:var(--muted); font-weight:600; margin-top:4px; display:flex; justify-content:flex-end; }
.nc-counter span.ok   { color:#10b981; }
.nc-counter span.warn { color:#f59e0b; }
.nc-counter span.bad  { color:#ef4444; }

/* ── AI Button ── */
.ai-gen-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:linear-gradient(135deg,var(--acc) 0%,var(--acc-dark) 100%); color:#fff; box-shadow:0 3px 10px rgba(90,103,216,.3); transition:all .18s ease; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.ai-gen-btn:hover { transform:translateY(-2px); box-shadow:0 5px 16px rgba(90,103,216,.4); }
.ai-gen-btn i { font-size:14px; }

/* ── AI Modal ── */
.ai-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); display:none; z-index:99999; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.ai-modal-overlay.show { display:flex; opacity:1; }
.ai-modal { background:var(--panel); border:1.5px solid var(--line); border-radius:16px; width:90%; max-width:560px; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.35); animation:modalPopIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalPopIn { from{opacity:0;transform:scale(.85) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.ai-modal-header { padding:20px 24px; border-bottom:1.5px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.ai-modal-header h2 { margin:0; font-size:16px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:10px; letter-spacing:-.3px; flex-wrap:wrap; }
.ai-modal-header h2 i { font-size:18px; color:var(--acc); }
.ai-provider-badge { font-size:10px; background:var(--acc-soft); color:var(--acc); padding:2px 10px; border-radius:20px; border:1px solid var(--acc-mid); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.ai-modal-close { width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .18s ease; flex-shrink:0; }
.ai-modal-close:hover { background:var(--acc-soft); color:var(--acc); transform:rotate(90deg); }

.ai-modal-body { padding:24px; overflow-y:auto; overflow-x:hidden; flex:1; }
.ai-modal-body::-webkit-scrollbar { width:6px; }
.ai-modal-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }

.ai-alert { display:flex; gap:12px; padding:14px 16px; border-radius:10px; background:var(--acc-soft); border:1.5px solid var(--acc-mid); margin-bottom:20px; align-items:flex-start; }
.ai-alert i { color:var(--acc); font-size:16px; margin-top:2px; flex-shrink:0; }
.ai-alert-text { font-size:13px; color:var(--ink); line-height:1.6; }
.ai-alert-text strong { color:var(--acc); font-weight:700; }

.ai-form-group { margin-bottom:18px; }
.ai-form-group:last-child { margin-bottom:0; }
.ai-label { display:flex; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-bottom:8px; align-items:center; gap:6px; }
.ai-label i { color:var(--acc); font-size:12px; }
.ai-label .required { color:#ef4444; font-weight:900; }
.ai-input,.ai-select { width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; font-family:inherit; outline:none; transition:all .18s ease; }
.ai-input::placeholder { color:var(--muted); opacity:.6; }
.ai-input:focus,.ai-select:focus { border-color:var(--acc); background:var(--panel); box-shadow:0 0 0 3px rgba(90,103,216,.1); }
.ai-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234a5578' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:35px; }
.ai-hint { font-size:12px; color:var(--muted); margin-top:6px; display:block; font-style:italic; }

.ai-loader { display:none; text-align:center; padding:44px 20px; }
.ai-loader.show { display:block; }
.ai-spinner { width:48px; height:48px; border:3px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:aiSpin .8s linear infinite; margin:0 auto 16px; }
@keyframes aiSpin { to{transform:rotate(360deg)} }
.ai-loader-text { color:var(--ink); font-weight:700; font-size:15px; margin-bottom:6px; }
.ai-loader-sub { color:var(--muted); font-size:12px; opacity:.8; }

/* Progress steps */
.ai-steps { display:flex; flex-direction:column; gap:8px; margin-top:20px; text-align:left; }
.ai-step { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; background:var(--surface); border:1.5px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); transition:all .3s; }
.ai-step.active { border-color:var(--acc-mid); background:var(--acc-soft); color:var(--acc); }
.ai-step.done { border-color:#10b981; background:rgba(16,185,129,.08); color:#10b981; }
.ai-step i { font-size:13px; width:16px; text-align:center; }

.ai-modal-footer { padding:16px 24px; border-top:1.5px solid var(--line); background:var(--surface); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; }
.ai-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:none; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; transition:all .18s ease; white-space:nowrap; text-decoration:none; font-family:inherit; }
.ai-btn-secondary { background:var(--panel); color:var(--ink); border:1.5px solid var(--line); }
.ai-btn-secondary:hover { background:var(--acc-soft); border-color:var(--acc-mid); color:var(--acc); }
.ai-btn-primary { background:var(--acc); color:#fff; box-shadow:0 4px 12px rgba(90,103,216,.3); }
.ai-btn-primary:hover:not(:disabled) { background:var(--acc-dark); transform:translateY(-2px); box-shadow:0 6px 16px rgba(90,103,216,.4); }
.ai-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.ai-btn i { font-size:13px; }

.ai-form-wrapper { display:none; }
.ai-form-wrapper.show { display:block; }
</style>
@endsection


@section('content')

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

    {{-- AI image hidden input --}}
    <input type="hidden" name="ai_image_path" id="aiImagePathInput" value="">

    {{-- Page Header --}}
    <div class="nc-header">
        <div class="nc-header-left">
            <h1>
                <i class="fas {{ isset($post) ? 'fa-edit' : 'fa-plus-circle' }}"></i>
                {{ isset($post) ? 'Edit News' : 'Create News' }}
            </h1>
            <p>{{ isset($post) ? 'Update existing news article' : 'Write and publish a new news article' }}</p>
        </div>
        <div class="nc-header-right">
            <a href="{{ route('news.index') }}" class="nl-btn nl-btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
            <button type="button" class="ai-gen-btn" onclick="openAIModal()">
                <i class="fas fa-robot"></i> AI Generate
            </button>
        </div>
    </div>

    @include('admin.partial.validation-error')

    <div class="nc-wrap">

        {{-- ══════════════ LEFT COLUMN ══════════════ --}}
        <div>

            {{-- Article Content --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-file-alt"></i> Article Content</span>
                    <span class="nc-badge nc-badge-acc"><i class="fas fa-pen"></i> Editor</span>
                </div>
                <div class="nc-card-body">

                    <div class="nc-form-row cols-2">
                        <div>
                            <label class="nc-label">Sub Title</label>
                            <input type="text" name="sub_title" id="fieldSubTitle" class="nc-input"
                                   value="{{ old('sub_title', $post->sub_title ?? '') }}"
                                   placeholder="Enter sub title...">
                        </div>
                        <div>
                            <label class="nc-label">Credit Line</label>
                            <input type="text" name="creadit_line" id="fieldCreditLine" class="nc-input"
                                   value="{{ old('creadit_line', $post->creadit_line ?? '') }}"
                                   placeholder="নিজস্ব প্রতিবেদক">
                        </div>
                    </div>

                    <div class="nc-form-group">
                        <label class="nc-label">Title <span style="color:#ef4444">*</span></label>
                        <input type="text" name="title" id="fieldTitle" class="nc-input"
                               value="{{ old('title', $post->title ?? '') }}"
                               placeholder="Write the main headline...">
                        @error('title')<span class="nc-error"><i class="fas fa-exclamation-circle"></i>{{ $message }}</span>@enderror
                    </div>

                    <input type="hidden" name="news_type_id" value="0">

                    <div class="nc-form-group">
                        <label class="nc-label">Article Details <span style="color:#ef4444">*</span></label>
                        <textarea name="details" id="summernote">{{ old('details', $post->details ?? '') }}</textarea>
                    </div>

                </div>
            </div>

            {{-- SEO --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-search"></i> SEO Settings</span>
                    <span class="nc-badge nc-badge-acc"><i class="fas fa-robot"></i> Intelligence</span>
                </div>
                <div class="nc-card-body">

                    <div class="nc-form-group">
                        <label class="nc-label">Meta Title</label>
                        <input type="text" name="meta_title" id="metaTitle" class="nc-input"
                               value="{{ old('meta_title', $post->meta_title ?? '') }}"
                               placeholder="SEO title for search engines..." maxlength="70">
                        <div class="nc-counter"><span id="metaTitleCount" class="ok">0 / 70</span></div>
                    </div>

                    <div class="nc-form-group">
                        <label class="nc-label">Meta Description</label>
                        <textarea name="meta_description" id="metaDesc" class="nc-textarea" rows="3"
                                  placeholder="Brief description for search engines..." maxlength="160">{{ old('meta_description', $post->meta_description ?? '') }}</textarea>
                        <div class="nc-counter"><span id="metaDescCount" class="ok">0 / 160</span></div>
                    </div>

                    <div class="nc-form-group">
                        <label class="nc-label">Meta Image</label>
                        <div class="nc-upload-box" id="metaImageBox">
                            <input type="file" name="meta_image" id="newsMetaImage" accept="image/*">
                            <div class="nc-upload-placeholder">
                                <i class="fas fa-image"></i>
                                <span>Click to upload meta image</span>
                                <small>Recommended: 1200×630px · JPG, PNG</small>
                            </div>
                            <img class="nc-upload-preview" id="NewsMetaImagePreview"
                                 src="{{ isset($post) && $post->meta_image ? asset($post->meta_image) : '' }}"
                                 alt="Meta preview">
                            <button type="button" class="nc-upload-cancel" id="MetaImageCancel">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        @if(isset($post) && $post->meta_image)
                            <script>document.getElementById('metaImageBox').classList.add('has-image');</script>
                        @endif
                    </div>

                </div>
            </div>

        </div>{{-- end left --}}


        {{-- ══════════════ RIGHT SIDEBAR ══════════════ --}}
        <div>

            {{-- Thumbnail --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-image"></i> Featured Image</span>
                </div>
                <div class="nc-card-body">
                    <div class="nc-upload-box" id="thumbBox">
                        <input type="file" name="pictures[]" id="NewsPicture" accept="image/*">
                        <div class="nc-upload-placeholder">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload thumbnail</span>
                            <small>JPG, PNG, WebP · Max 5MB</small>
                        </div>
                        <img class="nc-upload-preview" id="NewsPicturePreview"
                             src="{{ isset($post) && $post->thumbnail ? asset($post->thumbnail) : '' }}"
                             alt="Thumbnail preview">
                        <button type="button" class="nc-upload-cancel" id="NewsPictureCancel">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    @if(isset($post) && $post->thumbnail)
                        <script>document.getElementById('thumbBox').classList.add('has-image');</script>
                    @endif
                    <div class="nc-form-group" style="margin-top:12px;margin-bottom:0">
                        <label class="nc-label">Image Caption</label>
                        <input type="text" name="caption" id="fieldCaption" class="nc-input"
                               value="{{ old('caption', $post->caption ?? '') }}"
                               placeholder="Describe the image...">
                    </div>
                </div>
            </div>

            {{-- Lead / Main Position --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-sort-numeric-up"></i> Lead / Main Position</span>
                    <button type="button" class="nc-collapse-btn" data-target="leadMainPanel">
                        <i class="fas fa-plus"></i> Set
                    </button>
                </div>
                <div class="nc-collapse-panel" id="leadMainPanel">
                    <div class="nc-collapse-inner" style="padding:0 18px 16px;">
                        <div class="nc-pos-grid">
                            <div class="nc-pos-item">
                                <div class="nc-pos-label"><i class="fas fa-star" style="color:#f59e0b"></i> Lead Position</div>
                                <input type="number" name="lead_position" class="nc-pos-input nc-input"
                                       value="{{ old('lead_position', isset($post) ? $post->lead_position : '') }}"
                                       placeholder="—" min="1">
                                @error('lead_position')<span class="nc-error">{{ $message }}</span>@enderror
                            </div>
                            <div class="nc-pos-item">
                                <div class="nc-pos-label"><i class="fas fa-newspaper" style="color:var(--acc)"></i> Main Position</div>
                                <input type="number" name="main_news_position_no" class="nc-pos-input nc-input"
                                       value="{{ old('main_news_position_no', isset($post) ? $post->main_news_position_no : '') }}"
                                       placeholder="—" min="1">
                                @error('main_news_position_no')<span class="nc-error">{{ $message }}</span>@enderror
                            </div>
                        </div>
                        <span class="nc-hint"><i class="fas fa-info-circle" style="color:var(--acc)"></i> Leave empty to skip.</span>
                    </div>
                </div>
            </div>

            {{-- Categories --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-folder-open"></i> Category</span>
                    <button type="button" class="nc-collapse-btn" data-target="categoryPanel">
                        <i class="fas fa-plus"></i> New
                    </button>
                </div>
                <div class="nc-collapse-panel" id="categoryPanel">
                    <div class="nc-collapse-inner" style="padding:0 18px 12px;">
                        <div class="nc-form-group">
                            <label class="nc-label">New Category Name</label>
                            <input type="text" id="categories-add-input" class="nc-input" placeholder="Category name...">
                        </div>
                        <div class="nc-form-group">
                            <label class="nc-label">Parent Category</label>
                            <select id="category" name="parent_id" class="nc-select">
                                <option value="" disabled selected>Select parent...</option>
                                @forelse(categories() as $category)
                                    <optgroup label="{{ $category->name . ' | ' . $category->bn_name }}">
                                        <option value="{{ $category->id }}">{{ $category->name . ' | ' . $category->bn_name }}</option>
                                        @if($category->categories->count() > 0)
                                            @foreach($category->categories as $child)
                                                @include('admin.news.partials.sub-categories-list', ['children_category' => $child])
                                            @endforeach
                                        @endif
                                    </optgroup>
                                @empty @endforelse
                            </select>
                        </div>
                        <div style="text-align:right;">
                            <button type="button" id="categories-add-btn" class="nl-btn nl-btn-primary" style="padding:7px 16px;font-size:12.5px;">
                                <i class="fas fa-plus"></i> Add Category
                            </button>
                        </div>
                    </div>
                </div>
                <div class="nc-card-body" style="padding-top:0;">
                    <label class="nc-label">Select Categories</label>
                    <select id="categories" name="category_id[]" multiple class="nc-select">
                        @forelse(categories() as $category)
                            <optgroup label="{{ $category->name . ' | ' . $category->bn_name }}">
                                <option value="{{ $category->id }}"
                                    {{ isset($news_categories) && in_array($category->id, $news_categories) ? 'selected' : '' }}>
                                    {{ $category->name . ' | ' . $category->bn_name }}
                                </option>
                                @if($category->categories->count() > 0)
                                    @foreach($category->categories as $child)
                                        @include('admin.news.partials.sub-categories-list', ['children_category' => $child])
                                    @endforeach
                                @endif
                            </optgroup>
                        @empty @endforelse
                    </select>
                </div>
            </div>

            {{-- Tags --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-tags"></i> Tags</span>
                    <button type="button" class="nc-collapse-btn" data-target="tagsPanel">
                        <i class="fas fa-plus"></i> New
                    </button>
                </div>
                <div class="nc-collapse-panel" id="tagsPanel">
                    <div class="nc-collapse-inner" style="padding:0 18px 12px;">
                        <div style="display:flex;gap:8px;">
                            <input type="text" id="tags-add-input" class="nc-input" placeholder="New tag name...">
                            <button type="button" id="tags-add-btn" class="nl-btn nl-btn-primary" style="padding:9px 14px;white-space:nowrap;flex-shrink:0;">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="nc-card-body" style="padding-top:0;">
                    <label class="nc-label">Select Tags</label>
                    <select id="tags" name="tag_id[]" multiple class="nc-select">
                        @if(isset($news_tags))
                            @foreach($news_tags as $tagId => $tagName)
                                <option value="{{ $tagId }}" selected>{{ $tagName }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>

            {{-- Location --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-map-marker-alt"></i> Location</span>
                    <button type="button" class="nc-collapse-btn" data-target="locationPanel">
                        <i class="fas fa-map"></i> Set
                    </button>
                </div>
                <div class="nc-collapse-panel" id="locationPanel">
                    <div class="nc-collapse-inner" style="padding:0 18px 16px;">
                        <div class="nc-location-grid">
                            <div>
                                <label class="nc-label">Division</label>
                                <select name="division_id" class="nc-select" id="divisionId" onchange="getSelectedData()">
                                    <option value="">Select Division</option>
                                    @foreach(divisions() as $division)
                                        <option value="{{ $division->id }}"
                                            {{ isset($divisions_array) && array_key_exists($division->id, $divisions_array) ? 'selected' : '' }}>
                                            {{ $division->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="nc-label">City / District</label>
                                <select name="city_id" class="nc-select" id="cityId">
                                    <option value="">Select City</option>
                                    @if(isset($cities_array))
                                        @foreach($cities_array as $id => $name)
                                            <option value="{{ $id }}" selected>{{ $name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div>
                                <label class="nc-label">Upazila / Thana</label>
                                <select name="upazila_id[]" id="upazilaId" multiple class="nc-select">
                                    @if(isset($upazillas_array))
                                        @foreach($upazillas_array as $id => $name)
                                            <option value="{{ $id }}" selected>{{ $name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Extra --}}
            <div class="nc-card">
                <div class="nc-card-header">
                    <span class="nc-card-title"><i class="fas fa-sliders-h"></i> Extra Options</span>
                </div>
                <div class="nc-card-body">
                    <div class="nc-form-group">
                        <label class="nc-label"><i class="fab fa-youtube" style="color:#ef4444"></i> Video Link</label>
                        <input type="text" name="video_link" class="nc-input"
                               value="{{ old('video_link', $post->video_link ?? '') }}"
                               placeholder="https://youtube.com/...">
                    </div>
                    <div class="nc-form-group" style="margin-bottom:0;">
                        <label class="nc-label"><i class="fas fa-calendar-alt" style="color:var(--acc)"></i> Schedule Date</label>
                        <input type="date" name="date" class="nc-input"
                               value="{{ old('date', isset($post) && $post->date ? date('Y-m-d', strtotime($post->date)) : '') }}">
                        <span class="nc-hint">Leave empty to publish immediately.</span>
                    </div>
                </div>
            </div>

            <button type="submit" class="nl-btn nl-btn-primary" style="width:100%;justify-content:center;padding:13px;font-size:14px;">
                <i class="fas fa-save"></i> {{ isset($post) ? 'Update News' : 'Publish News' }}
            </button>

        </div>{{-- end right --}}

    </div>{{-- end nc-wrap --}}

    <button type="submit" class="nc-save-fixed" id="ncSaveFixed">
        <i class="fas fa-save"></i> {{ isset($post) ? 'Update' : 'Publish' }}
    </button>

</form>


{{-- ════════════════════════════════════════
     AI GENERATE MODAL
════════════════════════════════════════ --}}
<div id="aiGenerateModalOverlay" class="ai-modal-overlay">
    <div class="ai-modal">

        {{-- Header --}}
        <div class="ai-modal-header">
            <h2>
                <i class="fas fa-magic"></i>
                AI Generate News
                <span class="ai-provider-badge" id="aiProviderBadge" style="display:none;"></span>
            </h2>
            <button type="button" class="ai-modal-close" id="aiModalClose">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {{-- Body --}}
        <div class="ai-modal-body">

            <div class="ai-alert">
                <i class="fas fa-lightbulb"></i>
                <div class="ai-alert-text">
                    <strong>কীভাবে কাজ করে:</strong> শিরোনাম ও ক্যাটাগরি দিন।
                    AI স্বয়ংক্রিয়ভাবে <strong>Title, Sub Title, Content, SEO, Caption ও Thumbnail</strong> সব পূরণ করবে।
                </div>
            </div>

            {{-- Form --}}
            <div class="ai-form-wrapper show" id="aiFormWrapper">
                <div class="ai-form-group">
                    <label class="ai-label">
                        <i class="fas fa-heading"></i>
                        News Title <span class="required">*</span>
                    </label>
                    <input type="text" id="aiTitle" class="ai-input"
                           placeholder="সংবাদের শিরোনাম লিখুন..." required>
                    <span class="ai-hint">যত বিস্তারিত লিখবেন, তত ভালো কন্টেন্ট পাবেন</span>
                </div>

                <div class="ai-form-group">
                    <label class="ai-label">
                        <i class="fas fa-folder-open"></i>
                        Category <span class="required">*</span>
                    </label>
                    <select id="aiCategory" class="ai-select" required>
                        <option value="">-- ক্যাটাগরি নির্বাচন করুন --</option>
                        @forelse(categories() as $cat)
                            <option value="{{ $cat->bn_name }}">{{ $cat->bn_name }}</option>
                            @if($cat->categories->count() > 0)
                                @foreach($cat->categories as $child)
                                    <option value="{{ $child->bn_name }}">&nbsp;&nbsp;→ {{ $child->bn_name }}</option>
                                @endforeach
                            @endif
                        @empty
                            <option value="" disabled>No categories available</option>
                        @endforelse
                    </select>
                </div>
            </div>

            {{-- Loader --}}
            <div class="ai-loader" id="aiLoader">
                <div class="ai-spinner"></div>
                <div class="ai-loader-text" id="aiLoaderText">কন্টেন্ট তৈরি হচ্ছে...</div>
                <div class="ai-loader-sub" id="aiLoaderSub">AI আপনার সংবাদ লিখছে, একটু অপেক্ষা করুন</div>

                {{-- Progress Steps --}}
                <div class="ai-steps">
                    <div class="ai-step" id="step1">
                        <i class="fas fa-pen-nib"></i>
                        <span>AI দিয়ে সংবাদ লেখা হচ্ছে...</span>
                    </div>
                    <div class="ai-step" id="step2">
                        <i class="fas fa-image"></i>
                        <span>Thumbnail তৈরি হচ্ছে...</span>
                    </div>
                    <div class="ai-step" id="step3">
                        <i class="fas fa-check-circle"></i>
                        <span>সব field পূরণ হচ্ছে...</span>
                    </div>
                </div>
            </div>

        </div>

        {{-- Footer --}}
        <div class="ai-modal-footer">
            <button type="button" class="ai-btn ai-btn-secondary" id="aiModalCancelBtn">
                <i class="fas fa-times"></i> বন্ধ করুন
            </button>
            <button type="button" class="ai-btn ai-btn-primary" id="aiGenerateBtn">
                <i class="fas fa-robot"></i> Generate করুন
            </button>
        </div>

    </div>
</div>

@endsection


@section('script')
<script>

/* ══════════════════════════════════════════
   Summernote
══════════════════════════════════════════ */
$('#summernote').summernote({
    height: 280,
    placeholder: 'Write your news content here...',
    toolbar: [
        ['style', ['bold','italic','underline','clear']],
        ['font',  ['strikethrough']],
        ['para',  ['ul','ol','paragraph']],
        ['insert',['link','picture','video']],
        ['view',  ['fullscreen','codeview']],
    ]
});

/* ══════════════════════════════════════════
   Collapse
══════════════════════════════════════════ */
document.querySelectorAll('[data-target]').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var panel = document.getElementById(this.dataset.target);
        if (!panel) return;
        panel.classList.toggle('open');
        var icon = this.querySelector('i');
        if (icon) icon.className = panel.classList.contains('open') ? 'fas fa-minus' : 'fas fa-plus';
    });
});

/* ══════════════════════════════════════════
   Image Upload Preview
══════════════════════════════════════════ */
function setupUpload(inputId, previewId, cancelId, boxId) {
    var input   = document.getElementById(inputId);
    var preview = document.getElementById(previewId);
    var cancel  = document.getElementById(cancelId);
    var box     = document.getElementById(boxId);
    if (!input || !preview || !cancel || !box) return;
    input.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) { preview.src = e.target.result; box.classList.add('has-image'); };
            reader.readAsDataURL(this.files[0]);
        }
    });
    cancel.addEventListener('click', function(e) {
        e.stopPropagation();
        preview.src = ''; input.value = '';
        box.classList.remove('has-image');
    });
}
setupUpload('NewsPicture',   'NewsPicturePreview',   'NewsPictureCancel', 'thumbBox');
setupUpload('newsMetaImage', 'NewsMetaImagePreview', 'MetaImageCancel',   'metaImageBox');

/* ══════════════════════════════════════════
   SEO Counters
══════════════════════════════════════════ */
function setupCounter(inputId, counterId, max) {
    var el = document.getElementById(inputId);
    var sp = document.getElementById(counterId);
    if (!el || !sp) return;
    function update() {
        var len = el.value.length;
        sp.textContent = len + ' / ' + max;
        sp.className   = len > max ? 'bad' : (len > max * .8 ? 'warn' : 'ok');
    }
    el.addEventListener('input', update); update();
}
setupCounter('metaTitle', 'metaTitleCount', 70);
setupCounter('metaDesc',  'metaDescCount',  160);

/* ══════════════════════════════════════════
   Floating Save Button
══════════════════════════════════════════ */
$(window).on('scroll', function() {
    $('#ncSaveFixed').toggleClass('show', $(this).scrollTop() > 200);
});

/* ══════════════════════════════════════════
   TomSelect
══════════════════════════════════════════ */
$(document).ready(function() {
    initUniversalSelect('#tags', {
        multiple: true,
        ajaxSearchRoute: "{{ route('tags.search') }}",
        ajaxStoreRoute:  "{{ route('tags.store') }}"
    });
    initUniversalSelect('#categories', {
        multiple: true,
        ajaxSearchRoute: false,
        ajaxStoreRoute:  "{{ route('category.store') }}"
    });
    ['#divisionId','#upazilaId','#cityId','#category'].forEach(function(sel) {
        initUniversalSelect(sel, { multiple: false, plugins: ['clear_button'] });
    });
});

window.initUniversalSelect = function(selector, options) {
    options = options || {};
    var selectEl = document.querySelector(selector);
    if (!selectEl) return;
    if (selectEl.tomselect) return selectEl.tomselect;
    selectEl.style.display = 'none';
    var isMultiple      = options.multiple ?? true;
    var ajaxSearchRoute = options.ajaxSearchRoute ?? null;
    var ajaxStoreRoute  = options.ajaxStoreRoute  ?? null;
    var tsOptions = {
        valueField: 'id', labelField: 'name', searchField: 'name',
        maxItems: isMultiple ? null : 1, create: false,
        plugins: options.plugins ?? (isMultiple ? ['remove_button'] : ['clear_button']),
        allowEmptyOption: !isMultiple,
        sortField: { field: 'name', direction: 'asc' }
    };
    if (ajaxSearchRoute) {
        tsOptions.load = function(query, callback) {
            fetch(ajaxSearchRoute + '?search=' + encodeURIComponent(query))
                .then(r => r.json())
                .then(data => { this.clearOptions(); data.forEach(item => this.addOption(item)); callback(data); })
                .catch(() => callback());
        };
    }
    var ts = new TomSelect(selectEl, tsOptions);
    if (ajaxStoreRoute) {
        $(selector + '-add-btn').off('click').on('click', function(e) {
            e.preventDefault();
            var name      = $(selector + '-add-input').val().trim();
            var parent_id = $('#category').val() || null;
            if (!name) return alert('Please enter a name');
            $.ajax({
                url: ajaxStoreRoute, type: 'POST', dataType: 'json',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                data: { name, parent_id },
                success: function(data) {
                    if (data.id) {
                        ts.addOption({ id: data.id, name: data.name });
                        ts.addItem(data.id);
                        $(selector + '-add-input').val('');
                        var panel = document.getElementById('categoryPanel');
                        if (panel) panel.classList.remove('open');
                    }
                },
                error: () => alert('Failed to add item')
            });
        });
    }
    return ts;
};

/* ══════════════════════════════════════════
   Location
══════════════════════════════════════════ */
function getSelectedData() {
    var divisionId = $('#divisionId').val();
    $.ajax({
        url: "{{ route('area') }}", type: 'GET', data: { division_id: divisionId },
        success: function(response) {
            var cityTS    = document.querySelector('#cityId').tomselect;
            var upazilaTS = document.querySelector('#upazilaId').tomselect;
            cityTS.clearOptions(); cityTS.clear();
            upazilaTS.clearOptions(); upazilaTS.clear();
            $(response.city_option).each(function() {
                var val = $(this).val(), text = $(this).text();
                if (val) cityTS.addOption({ id: val, name: text });
            });
            cityTS.refreshOptions(false);
        }
    });
}
$('#cityId').on('change', function() {
    var divisionId = $('#divisionId').val();
    var cityId     = $(this).val();
    $.ajax({
        url: "{{ route('area') }}", type: 'GET', data: { division_id: divisionId, city_id: cityId },
        success: function(response) {
            var upazilaTS = document.querySelector('#upazilaId').tomselect;
            upazilaTS.clearOptions(); upazilaTS.clear();
            $(response.upazila_option).each(function() {
                var val = $(this).val(), text = $(this).text();
                if (val) upazilaTS.addOption({ id: val, name: text });
            });
            upazilaTS.refreshOptions(false);
        }
    });
});


/* ══════════════════════════════════════════════════════════
   AI MODAL
══════════════════════════════════════════════════════════ */
$(document).ready(function() {

    const overlay      = $('#aiGenerateModalOverlay');
    const closeBtn     = $('#aiModalClose');
    const cancelBtn    = $('#aiModalCancelBtn');
    const generateBtn  = $('#aiGenerateBtn');
    const titleInput   = $('#aiTitle');
    const catSelect    = $('#aiCategory');
    const formWrapper  = $('#aiFormWrapper');
    const loader       = $('#aiLoader');
    const loaderText   = $('#aiLoaderText');
    const loaderSub    = $('#aiLoaderSub');
    const providerBadge = $('#aiProviderBadge');

    /* ── Steps ── */
    function setStep(n) {
        $('#step1, #step2, #step3').removeClass('active done');
        for (var i = 1; i < n; i++) $('#step' + i).addClass('done');
        if (n <= 3) $('#step' + n).addClass('active');
    }

    /* ── Open / Close ── */
    function openModal() {
        overlay.addClass('show');
        setTimeout(() => titleInput.focus(), 300);
    }

    function closeModal() {
        overlay.removeClass('show');
        setTimeout(resetForm, 300);
    }

    function resetForm() {
        formWrapper.addClass('show');
        loader.removeClass('show');
        generateBtn.prop('disabled', false).html('<i class="fas fa-robot"></i> Generate করুন');
        loaderText.text('কন্টেন্ট তৈরি হচ্ছে...');
        loaderSub.text('AI আপনার সংবাদ লিখছে, একটু অপেক্ষা করুন');
        $('#step1,#step2,#step3').removeClass('active done');
    }

    window.openAIModal = openModal;

    closeBtn.on('click', closeModal);
    cancelBtn.on('click', closeModal);
    overlay.on('click', function(e) { if (this === e.target) closeModal(); });
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && overlay.hasClass('show')) closeModal();
    });

    /* ══════════════════════════════════════════
       GENERATE BUTTON CLICK
    ══════════════════════════════════════════ */
    generateBtn.on('click', function() {
        const title    = titleInput.val().trim();
        const category = catSelect.val();

        if (!title)    { alert('⚠️ শিরোনাম দিন!');              titleInput.focus(); return; }
        if (!category) { alert('⚠️ ক্যাটাগরি নির্বাচন করুন!'); catSelect.focus();  return; }

        /* UI: loading start */
        formWrapper.removeClass('show');
        loader.addClass('show');
        generateBtn.prop('disabled', true);
        setStep(1);

        /* ── Step 1: AI Content Generate ── */
        $.ajax({
            url:      "{{ route('news.generateAI') }}",
            type:     'POST',
            dataType: 'json',
            headers:  { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data:     { title, category },

            success: function(res) {
                if (!res.success) {
                    alert('❌ ' + (res.message || 'Generate হয়নি'));
                    resetForm();
                    return;
                }

                /* Provider badge দেখাও */
                if (res.provider) {
                    providerBadge.text(res.provider.toUpperCase()).show();
                }

                /* সব text field fill করো */
                fillTextFields(res);

                setStep(2);
                loaderText.text('Thumbnail তৈরি হচ্ছে...');
                loaderSub.text('Pollinations AI থেকে ছবি আনা হচ্ছে...');

                /* ── Step 2: Image Download ── */
                if (res.image_url) {
                    $.ajax({
                        url:      "{{ route('news.downloadAIImage') }}",
                        type:     'POST',
                        dataType: 'json',
                        headers:  { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        data:     { image_url: res.image_url },

                        success: function(imgRes) {
                            if (imgRes.success && imgRes.local_path) {
                                fillImage(imgRes.preview_url, imgRes.local_path);
                            }
                            setStep(3);
                            loaderText.text('সম্পন্ন!');
                            loaderSub.text('সব field পূরণ হয়েছে');
                            setTimeout(function() {
                                closeModal();
                                showToast('✅ সফল! সব field পূরণ হয়েছে। যাচাই করে Save করুন।', 'success');
                            }, 800);
                        },

                        error: function() {
                            setStep(3);
                            setTimeout(function() {
                                closeModal();
                                showToast('✅ কন্টেন্ট তৈরি হয়েছে। ছবি আসেনি — manually upload করুন।', 'warning');
                            }, 500);
                        }
                    });
                } else {
                    setStep(3);
                    setTimeout(function() {
                        closeModal();
                        showToast('✅ কন্টেন্ট তৈরি হয়েছে।', 'success');
                    }, 500);
                }
            },

            error: function(xhr) {
                var msg = 'Generate হয়নি';
                if (xhr.status === 422) msg = 'সব field সঠিকভাবে পূরণ করুন';
                else if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
                alert('❌ Error: ' + msg);
                resetForm();
            }
        });
    });

    /* ══════════════════════════════════════════
       FILL TEXT FIELDS
    ══════════════════════════════════════════ */
    function fillTextFields(data) {
        /* Title */
        if (data.title)       $('#fieldTitle').val(data.title);

        /* Sub Title */
        if (data.sub_title)   $('#fieldSubTitle').val(data.sub_title);

        /* Credit Line */
        if (data.credit_line) $('#fieldCreditLine').val(data.credit_line);

        /* Caption */
        if (data.caption)     $('#fieldCaption').val(data.caption);

        /* Summernote content */
        if (data.content && $('#summernote').length) {
            $('#summernote').summernote('code', data.content);
        }

        /* Meta Title */
        if (data.meta_title) {
            $('#metaTitle').val(data.meta_title).trigger('input');
        }

        /* Meta Description */
        if (data.meta_description) {
            $('#metaDesc').val(data.meta_description).trigger('input');
        }
    }

    /* ══════════════════════════════════════════
       FILL IMAGE
    ══════════════════════════════════════════ */
    function fillImage(previewUrl, localPath) {
        /* Thumbnail preview */
        $('#NewsPicturePreview').attr('src', previewUrl);
        $('#thumbBox').addClass('has-image');

        /* Meta image preview */
        $('#NewsMetaImagePreview').attr('src', previewUrl);
        $('#metaImageBox').addClass('has-image');

        /* Hidden input — server path */
        $('#aiImagePathInput').val(localPath);
    }

    /* ══════════════════════════════════════════
       TOAST NOTIFICATION
    ══════════════════════════════════════════ */
    function showToast(msg, type) {
        var color = type === 'success' ? '#10b981' : '#f59e0b';
        var $t = $('<div>').css({
            position: 'fixed', bottom: '28px', left: '50%',
            transform: 'translateX(-50%) translateY(20px)',
            background: color, color: '#fff',
            padding: '12px 24px', borderRadius: '50px',
            fontWeight: '700', fontSize: '14px',
            boxShadow: '0 6px 24px rgba(0,0,0,.25)',
            zIndex: 99999, opacity: 0,
            transition: 'all .3s ease',
            maxWidth: '90vw', textAlign: 'center'
        }).text(msg).appendTo('body');

        setTimeout(() => $t.css({ opacity: 1, transform: 'translateX(-50%) translateY(0)' }), 50);
        setTimeout(() => $t.css({ opacity: 0, transform: 'translateX(-50%) translateY(20px)' }), 4000);
        setTimeout(() => $t.remove(), 4400);
    }

    /* ── Enter key ── */
    titleInput.on('keypress', function(e) { if (e.which === 13) { e.preventDefault(); generateBtn.click(); } });
    catSelect.on('keypress',  function(e) { if (e.which === 13) { e.preventDefault(); generateBtn.click(); } });
});
</script>
@endsection