@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 id="news-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 class="mt-2">
                <button type="button" id="generate-ai" class="text-sm text-blue-600 hover:underline">
                    🧠 Buat Konten Otomatis dengan AI
                </button>
                <span id="ai-loading" class="text-sm text-gray-500 hidden">⏳ Sedang membuat konten ilmiah...</span>
            </div>
        </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/Video (opsional)</label>
            <input type="file" name="media" id="mediaInput" accept="image/jpeg,image/png,video/mp4,video/webm,video/ogg" class="w-full" />
            <small class="text-xs text-gray-500 dark:text-gray-400">Format yang didukung: JPG, PNG, MP4, WEBM, OGG. Maks 10MB.</small>
        </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-media" class="w-full h-52 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-300 text-sm italic">
            Belum ada media
        </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 lists', // tambahkan 'lists'
        toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image link media | code', // tambahkan 'numlist bullist'
        menubar: false,
        branding: false,
        setup: function (editor) {
            editor.on('change keyup', function () {
                updatePreview();
            });
        }
    });
</script>

<script>
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');
    const mediaInput = document.getElementById('mediaInput');
    const previewMedia = document.getElementById('preview-media');

    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();
    });

    document.querySelector('input[name="publish_date"]').addEventListener('input', updatePreview);
    mediaInput.addEventListener('change', 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 editor = tinymce.get('content');
        document.getElementById('preview-content').innerHTML = editor ? editor.getContent() : '';

        const file = mediaInput.files[0];
        previewMedia.innerHTML = 'Belum ada media';
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                if (file.type.startsWith('video')) {
                    previewMedia.innerHTML = `<video src="${e.target.result}" class="w-full h-52 object-cover rounded" autoplay muted loop playsinline></video>`;
                } else if (file.type.startsWith('image')) {
                    previewMedia.innerHTML = `<img src="${e.target.result}" class="w-full h-52 object-cover rounded">`;
                } else {
                    previewMedia.innerHTML = `<div class="text-sm text-red-500">Format tidak didukung.</div>`;
                }
            };
            reader.readAsDataURL(file);
        }
    }

    document.getElementById('generate-ai').addEventListener('click', async function () {
        const judul = document.getElementById('title').value;
        const loading = document.getElementById('ai-loading');
        if (!judul) return alert('Masukkan judul berita terlebih dahulu.');

        loading.classList.remove('hidden');

        try {
            const response = await fetch(`{{ route('admin.news.generate') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ title: judul })
            });

            const result = await response.json();

            if (result?.konten) {
                tinymce.get('content').setContent(result.konten);
                updatePreview();
            } else {
                alert('Konten tidak berhasil dibuat.');
            }
        } catch (err) {
            console.error(err);
            alert('Terjadi kesalahan saat memuat konten dari AI.');
        }

        loading.classList.add('hidden');
    });
</script>
@endpush