@extends('layouts.admin')
@section('title', '✏️ Edit 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">✏️ Edit Berita</h1>

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

        <div>
            <label class="font-medium text-sm">Judul</label>
            <input type="text" id="title" name="title" value="{{ old('title', $news->title) }}" class="form-input w-full dark:bg-gray-700 dark:text-white" required>
        </div>

        <div>
            <label class="font-medium text-sm">Slug</label>
            <input type="text" name="slug" id="slug" value="{{ old('slug', $news->slug) }}" class="form-input w-full dark:bg-gray-700 dark:text-white" required>
            <small class="text-xs text-gray-500">Slug digunakan untuk URL berita</small>
        </div>

        <div>
            <label class="font-medium text-sm">Kategori</label>
            <input type="text" name="category" value="{{ old('category', $news->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" rows="6" class="form-textarea w-full dark:bg-gray-700 dark:text-white" required>{{ old('content', $news->content) }}</textarea>
        </div>

        <div>
            <label class="font-medium text-sm">Tanggal Publikasi</label>
            <input type="date" name="publish_date"
                   value="{{ old('publish_date', \Carbon\Carbon::parse($news->publish_date)->format('Y-m-d')) }}"
                   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" {{ $news->is_pinned ? 'checked' : '' }} class="form-checkbox text-[color:var(--primary-color)]">
            <label class="text-sm">Pin Berita</label>
        </div>

        <div>
            <label class="font-medium text-sm">Gambar Saat Ini</label><br>
            @if($news->image)
                <img src="{{ asset('storage/' . $news->image) }}" alt="Gambar" class="w-32 rounded shadow mt-1">
            @else
                <p class="text-gray-400 italic">Tidak ada gambar</p>
            @endif
        </div>

        <div>
            <label class="font-medium text-sm">Ganti Gambar</label>
            <input type="file" name="image" id="imageInput" accept="image/*" class="w-full border rounded dark:bg-gray-700 dark:text-white">
        </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">
                💾 Update
            </button>
            <a href="{{ route('admin.news.index') }}" class="ml-4 text-sm text-gray-500 hover:underline">← Batal</a>
        </div>
    </form>

    {{-- Preview --}}
    <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">{{ $news->title }}</h1>
        <p id="preview-date" class="text-sm text-gray-500 dark:text-gray-400">{{ $news->publish_date->format('Y-m-d') }}</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">
            @if ($news->image)
                <img src="{{ asset('storage/' . $news->image) }}" class="w-full h-full object-cover rounded" />
            @else
                Belum ada gambar
            @endif
        </div>

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

@push('scripts')
<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
    });
</script>

<script>
    function slugify(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }

    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');

    titleInput.addEventListener('input', () => {
        slugInput.value = slugify(titleInput.value);
        document.getElementById('preview-title').textContent = titleInput.value;
    });

    const updatePreview = () => {
        document.getElementById('preview-date').textContent =
            document.querySelector('input[name="publish_date"]').value || 'Tanggal belum dipilih';

        const fileInput = document.querySelector('input[name="image"]');
        const previewImage = document.getElementById('preview-image');

        if (fileInput?.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(fileInput.files[0]);
        }

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

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