@php
    $isEdit = filled($record);
    $isModal = isset($modalId);
    $modalId = $modalId ?? null;
    $titleId = $isModal ? $modalId . 'Label' : 'adminFormTitle';
    $namePrefix = $isModal ? $modalId . '_' : 'page_';
    $backRoute = $backRoute ?? null;
@endphp

@if ($isModal)
    <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $titleId }}" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content glass-panel admin-text border-0 rounded-4">
            @else
                <section class="glass-panel admin-text border-0 rounded-4 overflow-hidden">
@endif
<form class="admin-sectioned-content-form" method="POST" action="{{ $action }}">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    @if ($isModal)
        <div class="modal-header" style="border-color: var(--admin-border);">
        @else
            <div class="p-3 p-lg-4 border-bottom" style="border-color: var(--admin-border) !important;">
    @endif
    <div>
        <h2 class="modal-title fs-5 fw-bold" id="{{ $titleId }}">
            @if ($isEdit)
                Edit News/Announcement
            @else
                Create News/Announcement
            @endif
        </h2>
        <p class="small admin-muted mb-0">Save the record from this page.</p>
    </div>
    @if ($isModal)
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
    @endif
    </div>

    @if ($isModal)
        <div class="modal-body">
        @else
            <div class="p-3 p-lg-4">
    @endif
    <nav class="admin-section-form-tabs" aria-label="News and event form sections">
        <button class="admin-section-form-tab" type="button"
            data-admin-section-target="{{ $namePrefix }}EnglishSection">English</button>
        <button class="admin-section-form-tab" type="button"
            data-admin-section-target="{{ $namePrefix }}AssameseSection">Assamese</button>
        <button class="admin-section-form-tab" type="button"
            data-admin-section-target="{{ $namePrefix }}GeneralSection">General</button>
    </nav>

    <div class="admin-section-form-section" id="{{ $namePrefix }}EnglishSection">
        <div class="admin-section-form-heading">
            <span class="admin-section-form-step">01</span>
            <div>
                <h3>English Fields</h3>
                <p>Primary news or event content for the public site.</p>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_en">Title
                    (English) <span class="text-danger">*</span></label>
                <input class="form-control admin-input rounded-4 @error('title_en') is-invalid @enderror"
                    id="{{ $namePrefix }}title_en" type="text" name="title_en"
                    value="{{ old('title_en', $record?->title_en) instanceof \Illuminate\Support\Carbon ? old('title_en', $record?->title_en)->format('text' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('title_en', $record?->title_en) }}">
                @error('title_en')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}description_en">Description (English)</label>
                <textarea class="form-control admin-input rounded-4 @error('description_en') is-invalid @enderror"
                    id="{{ $namePrefix }}description_en" name="description_en" rows="4" data-ckeditor-field>{{ old('description_en', $record?->description_en) }}</textarea>
                @error('description_en')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}content_en">Content
                    (English)</label>
                <textarea class="form-control admin-input rounded-4 @error('content_en') is-invalid @enderror"
                    id="{{ $namePrefix }}content_en" name="content_en" rows="12" data-ckeditor-field data-ckeditor-toolbar="rich">{{ old('content_en', $record?->content_en) }}</textarea>
                @error('content_en')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}venue_en">Venue
                    (English)</label>
                <input class="form-control admin-input rounded-4 @error('venue_en') is-invalid @enderror"
                    id="{{ $namePrefix }}venue_en" type="text" name="venue_en"
                    value="{{ old('venue_en', $record?->venue_en) instanceof \Illuminate\Support\Carbon ? old('venue_en', $record?->venue_en)->format('text' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('venue_en', $record?->venue_en) }}">
                @error('venue_en')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="admin-section-form-section" id="{{ $namePrefix }}AssameseSection">
        <div class="admin-section-form-heading">
            <span class="admin-section-form-step">02</span>
            <div>
                <h3>Assamese Fields</h3>
                <p>Localized news or event content.</p>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_as">Title
                    (Assamese)</label>
                <input class="form-control admin-input rounded-4 @error('title_as') is-invalid @enderror"
                    id="{{ $namePrefix }}title_as" type="text" name="title_as"
                    value="{{ old('title_as', $record?->title_as) instanceof \Illuminate\Support\Carbon ? old('title_as', $record?->title_as)->format('text' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('title_as', $record?->title_as) }}">
                @error('title_as')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}description_as">Description (Assamese)</label>
                <textarea class="form-control admin-input rounded-4 @error('description_as') is-invalid @enderror"
                    id="{{ $namePrefix }}description_as" name="description_as" rows="4" data-ckeditor-field>{{ old('description_as', $record?->description_as) }}</textarea>
                @error('description_as')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}content_as">Content
                    (Assamese)</label>
                <textarea class="form-control admin-input rounded-4 @error('content_as') is-invalid @enderror"
                    id="{{ $namePrefix }}content_as" name="content_as" rows="12" data-ckeditor-field data-ckeditor-toolbar="rich">{{ old('content_as', $record?->content_as) }}</textarea>
                @error('content_as')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}venue_as">Venue
                    (Assamese)</label>
                <input class="form-control admin-input rounded-4 @error('venue_as') is-invalid @enderror"
                    id="{{ $namePrefix }}venue_as" type="text" name="venue_as"
                    value="{{ old('venue_as', $record?->venue_as) instanceof \Illuminate\Support\Carbon ? old('venue_as', $record?->venue_as)->format('text' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('venue_as', $record?->venue_as) }}">
                @error('venue_as')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="admin-section-form-section mb-0" id="{{ $namePrefix }}GeneralSection">
        <div class="admin-section-form-heading">
            <span class="admin-section-form-step">03</span>
            <div>
                <h3>General Details</h3>
                <p>Classification, schedule, image, publishing, and visibility settings.</p>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}type">Type <span
                        class="text-danger">*</span></label>
                <select class="form-select admin-input rounded-4 @error('type') is-invalid @enderror"
                    id="{{ $namePrefix }}type" name="type">
                    <option value="">Select type</option>
                    @foreach ($selectOptions['newsTypes'] ?? [] as $optionValue => $optionLabel)
                        <option value="{{ $optionValue }}" @selected((string) old('type', $record?->type) === (string) $optionValue)
                            data-admin-en="{{ $optionLabel }}"
                            data-admin-as="{{ $selectOptionLabelsAs[$optionValue] ?? $optionLabel }}">
                            {{ $optionLabel }}</option>
                    @endforeach
                </select>
                @error('type')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}slug">Slug</label>
                <input class="form-control admin-input rounded-4 @error('slug') is-invalid @enderror"
                    id="{{ $namePrefix }}slug" type="text" name="slug"
                    value="{{ old('slug', $record?->slug) instanceof \Illuminate\Support\Carbon ? old('slug', $record?->slug)->format('text' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('slug', $record?->slug) }}">
                <div class="form-text admin-muted">Leave blank to auto-generate.</div>
                @error('slug')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}image_id">Image</label>
                <x-admin.media-picker name="image_id" :id="$namePrefix.'image_id'" :value="$record?->image_id" :records="$selectOptions['mediaAssetRecords'] ?? []" type="image" />
                @error('image_id')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}document_id">Attached PDF (for newsletters)</label>
                <x-admin.media-picker name="document_id" :id="$namePrefix.'document_id'" :value="$record?->document_id" :records="$selectOptions['mediaAssetRecords'] ?? []" type="pdf" />
                @error('document_id')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}event_date">Event
                    Date</label>
                <input class="form-control admin-input rounded-4 @error('event_date') is-invalid @enderror"
                    id="{{ $namePrefix }}event_date" type="date" name="event_date"
                    value="{{ old('event_date', $record?->event_date) instanceof \Illuminate\Support\Carbon ? old('event_date', $record?->event_date)->format('date' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('event_date', $record?->event_date) }}">
                @error('event_date')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}event_time">Event
                    Time</label>
                <input class="form-control admin-input rounded-4 @error('event_time') is-invalid @enderror"
                    id="{{ $namePrefix }}event_time" type="time" name="event_time"
                    value="{{ old('event_time', $record?->event_time) instanceof \Illuminate\Support\Carbon ? old('event_time', $record?->event_time)->format('time' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('event_time', $record?->event_time) }}">
                @error('event_time')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}published_at">Published At</label>
                <input class="form-control admin-input rounded-4 @error('published_at') is-invalid @enderror"
                    id="{{ $namePrefix }}published_at" type="datetime-local" name="published_at"
                    value="{{ old('published_at', $record?->published_at) instanceof \Illuminate\Support\Carbon ? old('published_at', $record?->published_at)->format('datetime-local' === 'datetime-local' ? 'Y-m-d\TH:i' : 'Y-m-d') : old('published_at', $record?->published_at) }}">
                @error('published_at')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <input type="hidden" name="is_featured" value="0">
                <div class="form-check form-switch mt-4">
                    <input class="form-check-input" type="checkbox" role="switch"
                        id="{{ $namePrefix }}is_featured" name="is_featured" value="1"
                        @checked((bool) old('is_featured', $record?->is_featured))>
                    <label class="form-check-label fw-semibold" for="{{ $namePrefix }}is_featured">Featured</label>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}featured_order">Featured Order</label>
                <input class="form-control admin-input rounded-4 @error('featured_order') is-invalid @enderror"
                    id="{{ $namePrefix }}featured_order" type="number" min="0" name="featured_order"
                    value="{{ old('featured_order', $record?->featured_order ?? 0) }}">
                @error('featured_order')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label small fw-semibold admin-muted"
                    for="{{ $namePrefix }}status">Status</label>
                <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror"
                    id="{{ $namePrefix }}status" name="status">
                    <option value="">Select status</option>
                    @foreach ($selectOptions['statuses'] ?? [] as $optionValue => $optionLabel)
                        <option value="{{ $optionValue }}" @selected((string) old('status', $record?->status) === (string) $optionValue)
                            data-admin-en="{{ $optionLabel }}"
                            data-admin-as="{{ $selectOptionLabelsAs[$optionValue] ?? $optionLabel }}">
                            {{ $optionLabel }}</option>
                    @endforeach
                </select>
                @error('status')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
    </div>

    @if ($isModal)
        <div class="modal-footer" style="border-color: var(--admin-border);">
        @else
            <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 p-3 p-lg-4 border-top"
                style="border-color: var(--admin-border) !important;">
    @endif
    @if ($isModal)
        <button type="button" class="btn glass-card admin-text rounded-4 px-3"
            data-bs-dismiss="modal">Cancel</button>
    @elseif ($backRoute)
        <a class="btn glass-card admin-text rounded-4 px-3" href="{{ $backRoute }}">Cancel</a>
    @endif
    <button type="submit" class="btn btn-success rounded-4 px-4 fw-semibold">
        @if ($isEdit)
            Update
        @else
            Create
        @endif
    </button>
    </div>
</form>
@if ($isModal)
    </div>
    </div>
    </div>
@else
    </section>
@endif

@once
    <style>
        .admin-section-form-section {
            padding: 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .035);
        }

        .admin-section-form-heading {
            display: flex;
            align-items: flex-start;
            gap: .9rem;
            margin-bottom: 1rem;
        }

        .admin-section-form-heading h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
        }

        .admin-section-form-heading p {
            margin: .15rem 0 0;
            color: var(--admin-muted);
            font-size: .85rem;
        }

        .admin-section-form-step {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 2.4rem;
            border-radius: .85rem;
            background: rgba(34, 197, 94, .14);
            color: #86efac;
            font-weight: 800;
            border: 1px solid rgba(34, 197, 94, .28);
        }

        .admin-section-form-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: 1rem;
        }

        .admin-section-form-tab {
            border: 1px solid var(--admin-border);
            border-radius: 999px;
            padding: .55rem 1rem;
            background: rgba(255, 255, 255, .05);
            color: var(--admin-text);
            font-size: .85rem;
            font-weight: 800;
        }

        .admin-section-form-tab:hover {
            border-color: rgba(34, 197, 94, .55);
            background: rgba(34, 197, 94, .12);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-admin-section-target]').forEach((button) => {
                button.addEventListener('click', () => {
                    document.getElementById(button.dataset.adminSectionTarget)?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start',
                    });
                });
            });
        });
    </script>
@endonce

{{-- Must come before sectioned-form-assets: it registers the Media Library upload adapter the rich editors pick up. --}}
@include('admin.partials.rich-editor-media')
@include('admin.partials.sectioned-form-assets')