@php
    $isEdit = filled($record);
    $p = 'newsletter_';
@endphp

<section class="glass-panel admin-text border-0 rounded-4 overflow-hidden">
    <form class="admin-sectioned-content-form" method="POST" action="{{ $action }}">
        @csrf
        @if ($method !== 'POST')
            @method($method)
        @endif

        <div class="p-3 p-lg-4 border-bottom" style="border-color: var(--admin-border) !important;">
            <h2 class="fs-5 fw-bold mb-1">{{ $isEdit ? 'Edit Newsletter' : 'Create Newsletter' }}</h2>
            <p class="small admin-muted mb-0">Each newsletter is a blog-style page: title, cover, a formatted story and an optional PDF, in English and Assamese.</p>
        </div>

        <div class="p-3 p-lg-4">
            <nav class="admin-section-form-tabs" aria-label="Newsletter form sections">
                <button class="admin-section-form-tab" type="button" data-admin-section-target="{{ $p }}EnglishSection">English</button>
                <button class="admin-section-form-tab" type="button" data-admin-section-target="{{ $p }}AssameseSection">Assamese</button>
                <button class="admin-section-form-tab" type="button" data-admin-section-target="{{ $p }}GeneralSection">General</button>
            </nav>

            <div class="admin-section-form-section" id="{{ $p }}EnglishSection">
                <div class="admin-section-form-heading">
                    <span class="admin-section-form-step">01</span>
                    <div>
                        <h3>English</h3>
                        <p>Title, short summary and the full newsletter story.</p>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label small fw-semibold admin-muted" for="{{ $p }}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="{{ $p }}title_en" type="text" name="title_en" maxlength="255" value="{{ 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="{{ $p }}summary_en">Short summary (English)</label>
                        <textarea class="form-control admin-input rounded-4 @error('summary_en') is-invalid @enderror" id="{{ $p }}summary_en" name="summary_en" rows="3" maxlength="1000">{{ old('summary_en', $record?->summary_en) }}</textarea>
                        <div class="form-text admin-muted">One or two lines. Shown under the title and on the newsletter archive. Plain text.</div>
                        @error('summary_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="{{ $p }}content_en">Newsletter story (English)</label>
                        <textarea class="form-control admin-input rounded-4 @error('content_en') is-invalid @enderror" id="{{ $p }}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>
            </div>

            <div class="admin-section-form-section" id="{{ $p }}AssameseSection">
                <div class="admin-section-form-heading">
                    <span class="admin-section-form-step">02</span>
                    <div>
                        <h3>Assamese</h3>
                        <p>Optional. Any field left empty falls back to the English text.</p>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label small fw-semibold admin-muted" for="{{ $p }}title_as">Title (Assamese)</label>
                        <input class="form-control admin-input rounded-4 @error('title_as') is-invalid @enderror" id="{{ $p }}title_as" type="text" name="title_as" maxlength="255" value="{{ 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="{{ $p }}summary_as">Short summary (Assamese)</label>
                        <textarea class="form-control admin-input rounded-4 @error('summary_as') is-invalid @enderror" id="{{ $p }}summary_as" name="summary_as" rows="3" maxlength="1000">{{ old('summary_as', $record?->summary_as) }}</textarea>
                        @error('summary_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="{{ $p }}content_as">Newsletter story (Assamese)</label>
                        <textarea class="form-control admin-input rounded-4 @error('content_as') is-invalid @enderror" id="{{ $p }}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>
            </div>

            <div class="admin-section-form-section mb-0" id="{{ $p }}GeneralSection">
                <div class="admin-section-form-heading">
                    <span class="admin-section-form-step">03</span>
                    <div>
                        <h3>General</h3>
                        <p>Issue month, cover, PDF, publishing and address of the page.</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="{{ $p }}issue_date">Issue date <span class="text-danger">*</span></label>
                        <input class="form-control admin-input rounded-4 @error('issue_date') is-invalid @enderror" id="{{ $p }}issue_date" type="date" name="issue_date" required value="{{ old('issue_date', $record?->issue_date?->format('Y-m-d')) }}">
                        <div class="form-text admin-muted">Any day of the month this issue belongs to. Used for the "Month Year" label, the order and the year/month filters.</div>
                        @error('issue_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="{{ $p }}status">Status <span class="text-danger">*</span></label>
                        <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror" id="{{ $p }}status" name="status">
                            @foreach ($selectOptions['statuses'] ?? [] as $optionValue => $optionLabel)
                                <option value="{{ $optionValue }}" @selected((string) old('status', $record?->status ?? 'draft') === (string) $optionValue)
                                    data-admin-en="{{ $optionLabel }}"
                                    data-admin-as="{{ $selectOptionLabelsAs[$optionValue] ?? $optionLabel }}">{{ $optionLabel }}</option>
                            @endforeach
                        </select>
                        <div class="form-text admin-muted">Only published newsletters appear on the website.</div>
                        @error('status')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold admin-muted" for="{{ $p }}image_id">Cover image</label>
                        <x-admin.media-picker name="image_id" :id="$p.'image_id'" :value="$record?->image_id" :records="$selectOptions['mediaAssetRecords'] ?? []" type="image" />
                        <div class="form-text admin-muted">Shown on the archive card and as the large photo at the top of the newsletter page.</div>
                        @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="{{ $p }}pdf_file_id">Newsletter PDF (optional)</label>
                        <x-admin.media-picker name="pdf_file_id" :id="$p.'pdf_file_id'" :value="$record?->pdf_file_id" :records="$selectOptions['mediaAssetRecords'] ?? []" type="pdf" />
                        <div class="form-text admin-muted">When attached, visitors get a "Download PDF" button on the archive and on the newsletter page.</div>
                        @error('pdf_file_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="{{ $p }}slug">Page address (slug)</label>
                        {{-- Display only: no name, so it is never submitted. The server generates the slug from the English title on create. --}}
                        <input class="form-control admin-input rounded-4" id="{{ $p }}slug" type="text" value="{{ $record?->slug }}" placeholder="Generated from the English title" readonly aria-readonly="true" @unless ($isEdit) data-slug-preview data-slug-source="#{{ $p }}title_en" @endunless>
                        <div class="form-text admin-muted">
                            @if ($isEdit)
                                /archives/monthly-newsletter/{{ $record->slug }} &middot; fixed after creation so existing links keep working.
                            @else
                                Generated automatically from the English title. A number is added if the address is already taken.
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label small fw-semibold admin-muted" for="{{ $p }}published_at">Publish date</label>
                        <input class="form-control admin-input rounded-4 @error('published_at') is-invalid @enderror" id="{{ $p }}published_at" type="datetime-local" name="published_at" value="{{ old('published_at', $record?->published_at?->format('Y-m-d\TH:i')) }}">
                        <div class="form-text admin-muted">Defaults to now when publishing. Issues are ordered by issue date first.</div>
                        @error('published_at')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>

        <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;">
            <a class="btn glass-card admin-text rounded-4 px-3" href="{{ $backRoute }}">Cancel</a>
            <button type="submit" class="btn btn-success rounded-4 px-4 fw-semibold">{{ $isEdit ? 'Update' : 'Create' }}</button>
        </div>
    </form>
</section>

@unless ($isEdit)
    <script>
        // Live slug preview. Mirrors Illuminate\Support\Str::slug() for English titles; the server makes the final slug.
        (() => {
            const field = document.querySelector('[data-slug-preview]');
            const source = field ? document.querySelector(field.dataset.slugSource) : null;

            if (!field || !source) return;

            const slugify = (text) => text
                .normalize('NFKD')
                .replace(/[̀-ͯ]/g, '')
                .toLowerCase()
                .replace(/_+/g, '-')
                .replace(/@@/g, '-at-')
                .replace(/[^-a-z0-9\s]+/g, '')
                .replace(/[-\s]+/g, '-')
                .replace(/^-+|-+$/g, '');

            const update = () => { field.value = slugify(source.value); };

            source.addEventListener('input', update);
            update();
        })();
    </script>
@endunless

@include('admin.partials.sectioned-form-styles')
@include('admin.partials.rich-editor-media')
@include('admin.partials.sectioned-form-assets')