@extends('layouts.admin', [
    'title' => 'Tambah Pengumuman',
    'header' => 'Tambah Pengumuman'
])

@section('admin_content')
@php($editorValue = \App\Support\AnnouncementHtmlSanitizer::sanitize(old('isi')))
<div class="container-fluid">
    <div class="card form-shell border-0 shadow-sm">
        <div class="card-header bg-white border-0 form-shell__header">
            <span class="form-shell__eyebrow">Pengumuman</span>
            <h3 class="mb-1">Tambah Pengumuman</h3>
        </div>

        <form action="{{ route('admin.pengumuman.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-shell__body">
                @if($errors->any())
                    <div class="form-error">
                        <strong>Periksa kembali input form.</strong>
                        <div class="small mt-1">{{ $errors->first() }}</div>
                    </div>
                @endif

                <div class="form-section">
                    <span class="form-section__title">Informasi Utama</span>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label>Judul</label>
                            <input type="text" name="judul" class="form-control @error('judul') is-invalid @enderror" value="{{ old('judul') }}" placeholder="Masukkan judul pengumuman">
                            @error('judul') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group col-md-4">
                            <label>Tanggal</label>
                            <input type="date" name="tanggal" class="form-control @error('tanggal') is-invalid @enderror" value="{{ old('tanggal', now()->format('Y-m-d')) }}">
                            @error('tanggal') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group col-md-12 mb-0">
                            <label>Isi Pengumuman</label>
                            <textarea name="isi" rows="8" class="form-control @error('isi') is-invalid @enderror" data-announcement-editor="true" placeholder="Tulis isi pengumuman...">{{ $editorValue }}</textarea>
                            @error('isi') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <span class="form-section__title">Media dan Lampiran</span>
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label>Upload Gambar</label>
                            <input type="file" name="gambar" id="gambarInput" class="form-control @error('gambar') is-invalid @enderror" accept="image/*">
                            @error('gambar') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <small class="text-muted">Format: jpg, jpeg, png, webp. Maksimal 2MB.</small>

                            <div class="preview-panel mt-3" id="newImagePreviewWrapper" style="display:none;">
                                <span class="preview-panel__label">Preview Gambar</span>
                                <img id="newImagePreview" class="preview-panel__image" alt="Preview gambar baru">
                            </div>
                        </div>

                        <div class="form-group col-lg-6">
                            <label>Upload PDF</label>
                            <input type="file" name="file_pdf" class="form-control @error('file_pdf') is-invalid @enderror" accept="application/pdf">
                            @error('file_pdf') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <small class="text-muted d-block mb-3">Format: PDF. Maksimal 5MB.</small>

                            <label>Link Terkait</label>
                            <input type="url" name="link_url" class="form-control @error('link_url') is-invalid @enderror" value="{{ old('link_url') }}" placeholder="https://contoh.com">
                            @error('link_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>

                <div class="form-section mb-0">
                    <span class="form-section__title">Status Publish</span>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="is_published" class="custom-control-input" id="is_published" value="1" {{ old('is_published', true) ? 'checked' : '' }}>
                        <label class="custom-control-label" for="is_published">Publish</label>
                    </div>
                </div>
            </div>

            <div class="form-shell__footer">
                <a href="{{ route('admin.pengumuman.index') }}" class="btn btn-outline-secondary rounded-pill px-4">Kembali</a>
                <button type="submit" class="btn btn-primary rounded-pill px-4">Simpan</button>
            </div>
        </form>
    </div>
</div>

<style>
    .form-shell { border-radius: 24px; overflow: hidden; }
    .form-shell__header { padding: 2rem; background: radial-gradient(circle at top right, rgba(17, 138, 178, 0.12), transparent 32%), linear-gradient(180deg, #fbfcfe 0%, #f4f8fc 100%); }
    .form-shell__eyebrow { display: inline-block; margin-bottom: .55rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #118ab2; }
    .form-shell__body, .form-shell__footer { padding: 1.5rem 2rem; }
    .form-shell__footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid #edf2f7; background: #fcfdff; }
    .form-section { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid #e2edf4; border-radius: 20px; background: #fff; }
    .form-section__title { display: inline-block; margin-bottom: 1rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #6c7a89; }
    .form-group label { font-weight: 600; color: #243444; }
    .form-control { border-radius: 14px; border-color: #d9e6ef; min-height: 46px; box-shadow: none; }
    textarea.form-control { min-height: 140px; }
    .form-control:focus { border-color: #118ab2; box-shadow: 0 0 0 .2rem rgba(17, 138, 178, 0.12); }
    .invalid-feedback { display: block; }
    .form-error { border-radius: 18px; border: 0; background: #fff1f2; color: #9f1239; padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
    .preview-panel { padding: 1rem; border-radius: 18px; border: 1px solid #dbe7f1; background: #f8fbff; }
    .preview-panel__label { display: inline-block; margin-bottom: .75rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #6c7a89; }
    .preview-panel__image { width: 100%; max-width: 260px; border-radius: 18px; border: 1px solid #dbe7f1; object-fit: cover; }
    .custom-control-label { font-weight: 600; color: #243444; }
    .custom-control-input:checked ~ .custom-control-label::before { border-color: #118ab2; background-color: #118ab2; }
    @media (max-width: 767.98px) { .form-shell__header, .form-shell__body, .form-shell__footer { padding: 1.25rem; } }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const gambarInput = document.getElementById('gambarInput');
        const previewWrapper = document.getElementById('newImagePreviewWrapper');
        const previewImage = document.getElementById('newImagePreview');
        if (gambarInput) {
            gambarInput.addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (!file) {
                    previewWrapper.style.display = 'none';
                    previewImage.src = '';
                    return;
                }
                const reader = new FileReader();
                reader.onload = function (e) {
                    previewImage.src = e.target.result;
                    previewWrapper.style.display = 'block';
                };
                reader.readAsDataURL(file);
            });
        }
    });
</script>
@include('admin.pengumuman.partials.editor-assets')
@endsection