@extends('layouts.app')

@section('title', 'Buat Berita')

@section('page-style')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<style>
    .ql-editor {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
    }
    .ql-editor p {
        margin-bottom: 1rem;
    }
    .ql-editor p:has(> br:only-child) {
        margin-bottom: 0;
    }
    .ql-container.ql-snow {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .ql-toolbar.ql-snow {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
</style>
@endsection

@section('content')
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Admin / Berita /</span> Buat Berita
    </h4>

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Berita Baru</h5>
            <a href="{{ route('admin.news.index') }}" class="btn btn-outline-secondary">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
        <div class="card-body">
            <form id="news-form" action="{{ route('admin.news.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="title" class="form-label">Judul</label>
                        <input
                            type="text"
                            name="title"
                            id="title"
                            value="{{ old('title') }}"
                            class="form-control @error('title') is-invalid @enderror"
                            placeholder="Judul Berita"
                            required
                            autofocus
                        >
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="slug" class="form-label">Slug</label>
                        <input
                            type="text"
                            name="slug"
                            id="slug"
                            value="{{ old('slug') }}"
                            class="form-control @error('slug') is-invalid @enderror"
                            placeholder="judul-berita"
                            required
                        >
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="category_id" class="form-label">Kategori</label>
                        <select name="category_id" id="category_id" class="form-select select2 @error('category_id') is-invalid @enderror">
                            <option value="">Pilih Kategori</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="tags" class="form-label">Tag</label>
                        <select name="tags[]" id="tags" class="form-select select2 @error('tags') is-invalid @enderror" multiple>
                            @foreach($tags as $tag)
                                <option value="{{ $tag->id }}" @selected(is_array(old('tags')) && in_array($tag->id, old('tags')))>{{ $tag->name }}</option>
                            @endforeach
                        </select>
                        @error('tags')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-select select2 @error('status') is-invalid @enderror" required>
                            <option value="draft" @selected(old('status', 'draft') === 'draft')>Draft</option>
                            <option value="published" @selected(old('status') === 'published')>Dipublikasikan</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="featured_image" class="form-label">Gambar Utama (Featured Image)</label>
                        <input
                            type="file"
                            name="featured_image"
                            id="featured_image"
                            class="form-control @error('featured_image') is-invalid @enderror"
                            accept="image/*"
                        >
                        @error('featured_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label for="excerpt" class="form-label">Kutipan Singkat (Excerpt)</label>
                        <textarea
                            name="excerpt"
                            id="excerpt"
                            rows="2"
                            class="form-control @error('excerpt') is-invalid @enderror"
                            placeholder="Ringkasan singkat berita..."
                        >{{ old('excerpt') }}</textarea>
                        @error('excerpt')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label">Isi Berita (Body)</label>
                        <input type="hidden" name="body" id="body" value="{{ old('body') }}">
                        <div id="editor-container" class="form-control @error('body') is-invalid @enderror" style="height: 350px;"></div>
                        @error('body')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary me-2">Buat Berita</button>
                    <a href="{{ route('admin.news.index') }}" class="btn btn-outline-secondary">Batal</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('page-script')
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
    // Initialize Quill
    const quill = new Quill('#editor-container', {
        theme: 'snow',
        placeholder: 'Tulis berita lengkap di sini...',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['link', 'blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['clean']
            ]
        }
    });

    // Load old input if exists
    const oldContent = document.getElementById('body').value;
    if (oldContent) {
        quill.root.innerHTML = oldContent;
    }

    // Synchronize content on submit
    const form = document.getElementById('news-form');
    form.addEventListener('submit', function() {
        document.getElementById('body').value = quill.root.innerHTML;
    });

    document.getElementById('title').addEventListener('input', function() {
        const titleVal = this.value;
        const slugInput = document.getElementById('slug');
        if (slugInput.dataset.manual !== 'true') {
            slugInput.value = titleVal.toLowerCase()
                .replace(/[^a-z0-9 -]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');
        }
    });

    document.getElementById('slug').addEventListener('input', function() {
        this.dataset.manual = 'true';
    });
</script>
@endsection