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

@section('admin_content')
@php($editorValue = \App\Support\AnnouncementHtmlSanitizer::sanitize(old('isi', $item->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">Edit Pengumuman</h3>
        </div>

        <form action="{{ route('admin.pengumuman.update', $item->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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', $item->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', \Carbon\Carbon::parse($item->tanggal)->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="10" 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="col-lg-6">
                            <div class="resource-card mb-4">
                                <span class="resource-card__label">Gambar Saat Ini</span>
                                @if($item->gambar)
                                    <img src="{{ $item->adminImageUrl() }}" alt="{{ $item->judul }}" class="preview-panel__image mb-3">
                                    <form action="{{ route('admin.pengumuman.remove-image', $item->id) }}" method="POST" onsubmit="return confirm('Hapus gambar ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger rounded-pill px-3">
                                            <i class="fas fa-trash-alt mr-1"></i> Hapus Gambar
                                        </button>
                                    </form>
                                @else
                                    <div class="resource-empty">Belum ada gambar.</div>
                                @endif
                            </div>

                            <div class="form-group mb-0">
                                <label>Upload Gambar Baru</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 Baru</span>
                                    <img id="newImagePreview" class="preview-panel__image" alt="Preview gambar baru">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="resource-card mb-4">
                                <span class="resource-card__label">PDF Saat Ini</span>
                                @if($item->file_pdf)
                                    <div class="d-flex flex-wrap align-items-center" style="gap:.75rem;">
                                        <a href="{{ $item->adminPdfUrl() }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary rounded-pill px-3">
                                            <i class="fas fa-file-pdf mr-1"></i> Lihat PDF
                                        </a>
                                        <form action="{{ route('admin.pengumuman.remove-pdf', $item->id) }}" method="POST" onsubmit="return confirm('Hapus file PDF ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger rounded-pill px-3">
                                                <i class="fas fa-trash-alt mr-1"></i> Hapus PDF
                                            </button>
                                        </form>
                                    </div>
                                @else
                                    <div class="resource-empty">Belum ada file PDF.</div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label>Upload PDF Baru</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">Format: PDF. Maksimal 5MB.</small>
                            </div>

                            <div class="form-group mb-0">
                                <label>Link Terkait</label>
                                <input type="url" name="link_url" class="form-control @error('link_url') is-invalid @enderror" value="{{ old('link_url', $item->link_url) }}" placeholder="https://contoh.com">
                                @error('link_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <small class="text-muted">Opsional. Bisa diisi link berita, drive, formulir, atau halaman terkait.</small>
                            </div>
                        </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', $item->is_published) ? 'checked' : '' }}>
                        <label class="custom-control-label" for="is_published">{{ old('is_published', $item->is_published) ? 'Publish' : 'Draft' }}</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">Update</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: 160px; }
    .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, .resource-card { padding: 1rem; border-radius: 18px; border: 1px solid #dbe7f1; background: #f8fbff; }
    .preview-panel__label, .resource-card__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; }
    .resource-empty { color: #6c7a89; padding: .5rem 0; }
    .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 publishSwitch = document.getElementById('is_published');
        const publishLabel = document.querySelector('label[for="is_published"]');
        const gambarInput = document.getElementById('gambarInput');
        const previewWrapper = document.getElementById('newImagePreviewWrapper');
        const previewImage = document.getElementById('newImagePreview');

        if (publishSwitch && publishLabel) {
            publishSwitch.addEventListener('change', function () {
                publishLabel.textContent = this.checked ? 'Publish' : 'Draft';
            });
        }
        if (gambarInput && previewWrapper && previewImage) {
            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