@extends('admin.layouts.master')

@section('title', 'Edit News')

@section('page_title')
    <i class="fas fa-edit"></i> Edit News
@endsection

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

/* ── Page Header ── */
.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: -0.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;
}

/* ── Buttons ── */
.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 0.18s;
    text-decoration: none;
    white-space: nowrap;
}
.nl-btn-primary {
    background: var(--acc);
    color: #fff;
    box-shadow: 0 2px 8px rgba(90, 103, 216, 0.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);
    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);
}

/* ── Cards ── */
.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;
}

/* ── Form Controls ── */
.nc-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.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 0.18s, box-shadow 0.18s;
    font-family: inherit;
}
.nc-input:focus,
.nc-textarea:focus,
.nc-select:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.14) !important;
}
.nc-input::placeholder,
.nc-textarea::placeholder {
    color: var(--muted);
    opacity: 0.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;
}

/* ── Summernote override ── */
.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;
}

/* ── Image Upload ── */
.nc-upload-box {
    position: relative;
    width: 100%;
    border: 2px dashed var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color 0.2s, background 0.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: 0.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: 0.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, 0.55);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.nc-upload-box.has-image .nc-upload-cancel {
    display: flex;
}
.nc-upload-cancel:hover {
    background: rgba(239, 68, 68, 0.85);
}

/* ── Collapse Toggle ── */
.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 0.18s;
}
.nc-collapse-btn:hover {
    background: var(--acc);
    color: #fff;
    border-color: var(--acc);
}
.nc-collapse-btn i {
    transition: transform 0.3s ease;
}
.nc-collapse-btn.active i {
    transform: rotate(180deg);
}

/* ── COLLAPSE PANEL - BY DEFAULT HIDDEN ── */
.nc-collapse-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.nc-collapse-panel.show {
    max-height: 1500px;
    padding: 14px 18px;
}

.nc-collapse-inner {
    padding: 0;
}

/* ── Position Inputs ── */
.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 0.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: 0.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;
}

/* ── TomSelect theme ── */
.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, 0.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, 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: 0.7;
}

/* ── Hide original select ── */
select.nc-select.ts-hidden-accessible {
    display: none !important;
}

/* ── Location Section ── */
.nc-location-grid {
    display: grid;
    gap: 12px;
}

/* ── Fixed Save Button ── */
.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, 0.45);
    transition: all 0.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, 0.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;
    }
}

/* ── Error messages ── */
.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;
}

/* ── Caption / small label ── */
.nc-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    display: block;
    font-style: italic;
}

/* ── Section divider ── */
.nc-divider {
    height: 1px;
    background: var(--line);
    margin: 16px 0;
}

/* ── Badge ── */
.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);
}

/* SEO preview chars counter */
.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; }
</style>
@endsection

@section('content')

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

    {{-- Page Header --}}
    <div class="nc-header">
        <div class="nc-header-left">
            <h1>
                <i class="fas fa-edit"></i>
                Edit News: {{ $post->title }}
            </h1>
            <p>
                Updated: {{ $post->updated_at->format('M d, Y @ h:i A') }} |
                Created: {{ $post->created_at->format('M d, Y') }}
            </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 to List
            </a>
        </div>
    </div>

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

    <div class="nc-wrap">

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

            {{-- Main Content Card --}}
            <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" 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" 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" 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" class="nc-textarea">{{ old('details', $post->details) }}</textarea>
                    </div>

                </div>
            </div>


            {{-- SEO Card --}}
            <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="{{ $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($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="{{ $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($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" 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" onclick="toggleCollapse(this, 'leadMainPanel')">
                        <i class="fas fa-chevron-down"></i> Edit
                    </button>
                </div>
                <div class="nc-collapse-panel" id="leadMainPanel">
                    <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', $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', $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" style="margin-top: 12px; display: block;"><i class="fas fa-info-circle" style="color:var(--acc)"></i> Leave empty to skip. Existing positions shift automatically.</span>
                </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" onclick="toggleCollapse(this, 'categoryPanel')">
                        <i class="fas fa-chevron-down"></i> Add
                    </button>
                </div>
                <div class="nc-collapse-panel" id="categoryPanel">
                    <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 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 }}"
                                    {{ $post->categories->contains('id', $category->id) ? '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" onclick="toggleCollapse(this, 'tagsPanel')">
                        <i class="fas fa-chevron-down"></i> Add
                    </button>
                </div>
                <div class="nc-collapse-panel" id="tagsPanel">
                    <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 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">
                        @foreach($news_tags as $tagId => $tagName)
                            <option value="{{ $tagId }}" selected>{{ $tagName }}</option>
                        @endforeach
                    </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" onclick="toggleCollapse(this, 'locationPanel')">
                        <i class="fas fa-chevron-down"></i> Edit
                    </button>
                </div>
                <div class="nc-collapse-panel" id="locationPanel">
                    <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>

            {{-- 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', $post->date ? date('Y-m-d', strtotime($post->date)) : '') }}">
                        <span class="nc-hint">Leave empty to publish immediately.</span>
                    </div>
                </div>
            </div>

            {{-- Submit inside sidebar (mobile) --}}
            <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> Update News
            </button>

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

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

    {{-- Fixed floating save --}}
    <button type="submit" class="nc-save-fixed" id="ncSaveFixed">
        <i class="fas fa-save"></i>
        Update News
    </button>

</form>

@endsection


@section('script')
<script>

// ════════════════════════════════
// COLLAPSE / TOGGLE FUNCTIONALITY
// ════════════════════════════════
function toggleCollapse(button, panelId) {
    const panel = document.getElementById(panelId);
    if (!panel) return;

    // Toggle the show class
    panel.classList.toggle('show');

    // Toggle button active state
    button.classList.toggle('active');
}

/* ── 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']],
    ]
});

/* ── 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 Character Counters ── */
function setupCounter(inputId, counterId, max) {
    var el   = document.getElementById(inputId);
    var span = document.getElementById(counterId);
    if (!el || !span) return;
    function update() {
        var len = el.value.length;
        span.textContent = len + ' / ' + max;
        span.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 Initialization ── */
$(document).ready(function () {

    initUniversalSelect('#tags', {
        multiple: true,
        storeData: [],
        searchData: [],
        ajaxSearchRoute: "{{ route('tags.search') }}",
        ajaxStoreRoute:  "{{ route('tags.store') }}"
    });

    initUniversalSelect('#categories', {
        multiple: true,
        storeData: [],
        searchData: [],
        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;

    var isMultiple     = options.multiple ?? true;
    var storeData      = options.storeData ?? [];
    var searchData     = options.searchData ?? [];
    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 (searchData.length) {
        tsOptions.onFocus = function () {
            if (!this.loadedOnce) {
                this.clearOptions();
                searchData.forEach(function (item, i) {
                    this.addOption({ id: item.id ?? 'search_' + i, name: item.name ?? item });
                }.bind(this));
                this.loadedOnce = true;
            }
        };
    }

    if (ajaxSearchRoute) {
        tsOptions.load = function (query, callback) {
            fetch(ajaxSearchRoute + '?search=' + encodeURIComponent(query))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    this.clearOptions();
                    data.forEach(function (item) { this.addOption(item); }.bind(this));
                    callback(data);
                }.bind(this))
                .catch(function () { callback(); });
        };
    }

    var ts = new TomSelect(selectEl, tsOptions);

    if (storeData.length) {
        storeData.forEach(function (item, i) {
            if (item && Object.keys(item).length) {
                ts.addOption({ id: item.id ?? 'store_' + i, name: item.name });
                ts.addItem(item.id ?? 'store_' + i);
            }
        });
    }

    if (ajaxStoreRoute) {
        var addBtn   = $(selector + '-add-btn');
        var addInput = $(selector + '-add-input');

        addBtn.off('click').on('click', function (e) {
            e.preventDefault();
            var name      = addInput.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: name, parent_id: parent_id },
                success: function (data) {
                    if (data.id) {
                        ts.addOption({ id: data.id, name: data.name });
                        ts.addItem(data.id);
                        addInput.val('');
                        var panelId = selector.replace('#', '') + 'Panel';
                        var panel = document.getElementById(panelId);
                        if (panel) panel.classList.remove('show');
                    }
                },
                error: function () { 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);
        }
    });
});
</script>
@endsection