@extends('layouts.admin-apoteker')
@section('title', '📝 Tambah Berita')

@section('content')
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📝 Tambah Berita Baru</h1>

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

        <div>
            <label class="font-medium text-sm">Judul</label>
            <input type="text" name="title" id="title" class="form-input w-full dark:bg-gray-700 dark:text-white" required>
        </div>

        <div>
            <label class="font-medium text-sm">Slug (otomatis)</label>
            <input type="text" name="slug" id="slug" class="form-input w-full dark:bg-gray-700 dark:text-white" readonly>
            <small class="text-gray-500 text-xs">Slug digunakan untuk URL berita, dan bisa diubah jika perlu.</small>
        </div>

        <div>
            <label class="font-medium text-sm">Kategori</label>
            <input type="text" name="category" class="form-input w-full dark:bg-gray-700 dark:text-white" required>
        </div>

        <div>
            <label class="font-medium text-sm">Konten</label>
            <textarea id="content" name="content" class="form-textarea w-full dark:bg-gray-700 dark:text-white"></textarea>
        </div>

        <div>
            <label class="font-medium text-sm">Tanggal Publikasi</label>
            <input type="date" name="publish_date" class="form-input w-full dark:bg-gray-700 dark:text-white" required>
        </div>

        <div class="flex items-center space-x-2">
            <input type="checkbox" name="is_pinned" value="1" class="form-checkbox text-[color:var(--primary-color)]">
            <label class="text-sm">Pin Berita (tampilkan di atas)</label>
        </div>

        <div>
            <label class="font-medium text-sm">Upload Gambar (opsional)</label>
            <input type="file" name="image" id="imageInput" accept="image/*" class="w-full" />
        </div>

        <div class="pt-4">
            <button type="submit" class="bg-[color:var(--primary-color)] text-white px-5 py-2 rounded hover:brightness-110 transition">
                💾 Simpan
            </button>
            <a href="{{ route('admin.news.index') }}" class="ml-4 text-sm text-gray-500 hover:underline">← Kembali</a>
        </div>
    </form>

    <hr class="my-6 border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-700 dark:text-white mb-2">🔎 Preview Berita</h2>

    <article class="bg-white dark:bg-gray-900 p-6 rounded shadow space-y-4 border dark:border-gray-700">
        <h1 id="preview-title" class="text-2xl font-bold text-gray-800 dark:text-white">Judul akan tampil di sini</h1>
        <p id="preview-date" class="text-sm text-gray-500 dark:text-gray-400">Tanggal belum dipilih</p>

        <div id="preview-image" class="w-full h-48 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-300">
            Belum ada gambar
        </div>

        <div id="preview-content" class="prose dark:prose-invert max-w-full"></div>
    </article>
</div>
@endsection

@push('scripts')
{{-- TinyMCE --}}
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#content',
        height: 300,
        plugins: 'image link media code',
        toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | image link media | code',
        menubar: false,
        branding: false,
        setup: function (editor) {
            editor.on('change keyup', function () {
                updatePreview();
            });
        }
    });
</script>

{{-- Auto Slug & Preview --}}
<script>
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');

    const slugify = (text) =>
        text.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');

    titleInput.addEventListener('input', () => {
        slugInput.value = slugify(titleInput.value);
        updatePreview();
    });

    function updatePreview() {
        document.getElementById('preview-title').textContent = titleInput.value || 'Judul akan tampil di sini';
        document.getElementById('preview-date').textContent =
            document.querySelector('input[name="publish_date"]').value || 'Tanggal belum dipilih';

        const imageInput = document.querySelector('input[name="image"]');
        const previewImage = document.getElementById('preview-image');
        if (imageInput?.files[0]) {
            const reader = new FileReader();
            reader.onload = e => {
                previewImage.innerHTML = `<img src="${e.target.result}" class="w-full h-48 object-cover rounded">`;
            };
            reader.readAsDataURL(imageInput.files[0]);
        }

        const editor = tinymce.get('content');
        const content = editor ? editor.getContent() : '';
        document.getElementById('preview-content').innerHTML = content;
    }

    document.querySelector('input[name="publish_date"]').addEventListener('input', updatePreview);
    document.querySelector('input[name="image"]').addEventListener('change', updatePreview);
</script>
@endpush