@extends('layouts.apoteker')
@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('apoteker.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>
            <label class="font-medium text-sm">Media Saat Ini</label><br>
            @php
                $ext = pathinfo($news->image, PATHINFO_EXTENSION);
                $isVideo = in_array($ext, ['mp4', 'webm', 'ogg']);
            @endphp

            @if ($news->image)
                @if ($isVideo)
                    <video controls class="w-32 h-32 rounded shadow mt-1 object-cover">
                        <source src="{{ asset('storage/' . $news->image) }}" type="video/{{ $ext }}">
                        Browser tidak mendukung video.
                    </video>
                @else
                    <img src="{{ asset('storage/' . $news->image) }}" alt="Media" class="w-32 rounded shadow mt-1">
                @endif
            @else
                <p class="text-gray-400 italic">Tidak ada media</p>
            @endif
        </div>

        <div>
            <label class="font-medium text-sm">Ganti Media</label>
            <input type="file" name="media" id="mediaInput" accept="image/*,video/*" 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('apoteker.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)
                @if ($isVideo)
                    <video controls class="w-full h-full object-cover rounded">
                        <source src="{{ asset('storage/' . $news->image) }}" type="video/{{ $ext }}">
                    </video>
                @else
                    <img src="{{ asset('storage/' . $news->image) }}" class="w-full h-full object-cover rounded" />
                @endif
            @else
                Belum ada media
            @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 lists',
        toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image link media | code',
        menubar: false,
        branding: false,
        setup: function (editor) {
            editor.on('change keyup', function () {
                updatePreview();
            });
        }
    });
</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="media"]');
        const previewImage = document.getElementById('preview-image');

        if (fileInput?.files[0]) {
            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = e => {
                const type = file.type;
                if (type.startsWith("video/")) {
                    previewImage.innerHTML = `
                        <video controls class="w-full h-48 object-cover rounded">
                            <source src="${e.target.result}" type="${type}">
                        </video>`;
                } else {
                    previewImage.innerHTML = `<img src="${e.target.result}" class="w-full h-48 object-cover rounded">`;
                }
            };

            reader.readAsDataURL(file);
        }

        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="media"]').addEventListener('change', updatePreview);
    setInterval(updatePreview, 500);
</script>
@endpush