@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4 relative">
    <div class="absolute inset-0 opacity-5 pointer-events-none">
        <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="news-edit-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
                    <circle cx="20" cy="20" r="1.5" fill="#2563eb"/>
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#news-edit-pattern)"/>
        </svg>
    </div>
    <div class="max-w-5xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="bg-gradient-to-r from-purple-600 to-purple-700 rounded-t-xl shadow-lg px-6 py-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-edit mr-3"></i>
                        Edit Berita
                    </h2>
                    <a href="{{ route('news.index') }}" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>

        <!-- Alert Errors -->
        @if ($errors->any())
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <h3 class="text-red-800 font-semibold mb-2">Terjadi kesalahan saat menyimpan data:</h3>
                        <ul class="list-disc list-inside text-red-700 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <!-- Form Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <form action="{{ route('news.update', $news) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="p-6 space-y-6">
                    <!-- Row 1: Judul & Kategori -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-1">
                            <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-heading mr-2 text-purple-600"></i>Judul Berita <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('title') border-red-500 @enderror" 
                                   id="title" 
                                   name="title" 
                                   value="{{ old('title', $news->title) }}" 
                                   placeholder="Masukkan judul berita"
                                   required>
                            @error('title')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="md:col-span-1">
                            <label for="category_id" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-tag mr-2 text-purple-600"></i>Kategori <span class="text-red-500">*</span>
                            </label>
                            @if(isset($categories))
                                <select name="category_id" 
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('category_id') border-red-500 @enderror" 
                                        required>
                                    <option value="">Pilih Kategori</option>
                                    @forelse($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id', $news->category_id) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @empty
                                        <option disabled>Tidak ada kategori tersedia</option>
                                    @endforelse
                                </select>
                            @else
                                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800">
                                    Data kategori tidak tersedia
                                </div>
                            @endif
                            @error('category_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row 2: Konten -->
                    <div>
                        <label for="content" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-align-left mr-2 text-purple-600"></i>Konten Berita <span class="text-red-500">*</span>
                        </label>
                        <div id="content-editor" style="min-height: 400px;">{!! old('content', $news->content) !!}</div>
                        <textarea class="hidden" id="content" name="content">{{ old('content', $news->content) }}</textarea>
                        <div id="content-error" class="hidden mt-1 text-sm text-red-600"></div>
                        <div id="video-preview" class="mt-3 hidden">
                            <div id="video-preview-inner" style="position:relative;width:100%;padding-top:56.25%;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#000"></div>
                        </div>
                        @error('content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Row 3: Gambar & Status -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="image" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-image mr-2 text-purple-600"></i>Gambar Berita
                            </label>
                            @if($news->image)
                                <div class="mb-4">
                                    <img src="{{ asset('storage/'.$news->image) }}" 
                                         alt="Current image" 
                                         class="max-h-48 rounded-lg shadow-md border border-gray-200">
                                    </div>
                            @endif
                        <div id="news-image-upload-card" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-purple-400 transition-colors cursor-pointer" tabindex="0">
                            <div class="space-y-1 text-center">
                                <img id="news-image-preview" src="" alt="Preview" class="mx-auto mb-3 max-h-48 rounded-lg shadow-md border border-gray-200 hidden object-contain">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-purple-600 hover:text-purple-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-purple-500">
                                        <span>Upload file</span>
                                        <input type="file" 
                                               class="sr-only" 
                                               id="image" 
                                               name="image" 
                                               accept="image/jpeg,image/png,image/gif">
                                    </label>
                                    <p class="pl-1">atau drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500">Format: JPG, PNG, GIF (Max: 500MB)</p>
                            </div>
                        </div>
                        
                            @error('image')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-toggle-on mr-2 text-purple-600"></i>Status Publikasi <span class="text-red-500">*</span>
                        </label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('status') border-red-500 @enderror" 
                                    id="status" 
                                    name="status" 
                                    required>
                                <option value="draft" {{ old('status', $news->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ old('status', $news->status) == 'published' ? 'selected' : '' }}>Published</option>
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row 4: Featured & Published At -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <input class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500" 
                                       type="checkbox" 
                                       id="featured" 
                                       name="featured" 
                                       value="1" 
                                       {{ old('featured', $news->featured) ? 'checked' : '' }}>
                                <label class="ml-3 text-sm font-semibold text-gray-700" for="featured">
                                    <i class="fas fa-star mr-2 text-purple-600"></i>Jadikan Berita Unggulan
                                </label>
                            </div>
                        </div>

                        <div>
                            <label for="published_at" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-calendar-alt mr-2 text-purple-600"></i>Tanggal & Waktu Publikasi
                            </label>
                            <input type="datetime-local" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('published_at') border-red-500 @enderror" 
                                   id="published_at" 
                                   name="published_at" 
                                   value="{{ old('published_at', $news->published_at ? date('Y-m-d\TH:i', strtotime($news->published_at)) : '') }}">
                            @error('published_at')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-end gap-4 pt-6 border-t border-gray-200">
                        <button type="reset" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-semibold transition-all flex items-center">
                            <i class="fas fa-undo mr-2"></i>
                            Reset
                        </button>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all flex items-center">
                            <i class="fas fa-save mr-2"></i>
                            Simpan Perubahan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
    .ql-container {
        font-size: 14px;
        font-family: inherit;
        border-radius: 0 0 8px 8px;
        border: 1px solid #d1d5db;
    }
    
    .ql-toolbar {
        border-radius: 8px 8px 0 0;
        border: 1px solid #d1d5db;
        background: #f9fafb;
    }
    
    .ql-editor {
        min-height: 400px;
    }
    .ql-editor .ql-video {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
    }
    .ql-container .ql-tooltip { z-index: 10000; }
    .ql-container .ql-tooltip.ql-editing { left: 50% !important; transform: translateX(-50%); }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

<script>
$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    const quillToolbarOptions = [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'font': [] }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'script': 'sub'}, { 'script': 'super' }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],
        [{ 'align': [] }],
        ['link', 'image', 'video'],
        ['blockquote'],
        ['clean']
    ];

    const contentQuill = new Quill('#content-editor', {
        theme: 'snow',
        placeholder: 'Tulis konten berita di sini...',
        modules: {
            toolbar: quillToolbarOptions
        }
    });

    function extractVideoUrl(input) {
        var s = (input || '').trim();
        var m = s.match(/https?:\/\/[^\s'\"]+/i);
        if (m) return m[0];
        m = s.match(/src=["']([^"']+)["']/i);
        if (m) return m[1];
        m = s.match(/href=["']([^"']+)["']/i);
        if (m) return m[1];
        return s;
    }

    function toPlainVideoUrl(u) {
        var s = (u || '').trim();
        var m;
        m = s.match(/youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i);
        if (m) return 'https://youtu.be/' + m[1];
        m = s.match(/player\.vimeo\.com\/video\/(\d+)/i);
        if (m) return 'https://vimeo.com/' + m[1];
        m = s.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/i);
        if (m) return 'https://youtu.be/' + m[1];
        m = s.match(/vimeo\.com\/(\d+)/i);
        if (m) return 'https://vimeo.com/' + m[1];
        return s;
    }

    function toEmbedUrl(u) {
        var s = (u || '').trim();
        var m;
        m = s.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/i);
        if (m) return 'https://www.youtube.com/embed/' + m[1];
        m = s.match(/vimeo\.com\/(\d+)/i);
        if (m) return 'https://player.vimeo.com/video/' + m[1];
        return '';
    }

    contentQuill.root.addEventListener('paste', function(e) {
        var html = (e.clipboardData && e.clipboardData.getData('text/html')) || '';
        var text = (e.clipboardData && e.clipboardData.getData('text')) || '';
        var combined = html || text || '';
        if (/youtube\.com|youtu\.be|vimeo\.com/i.test(combined)) {
            e.preventDefault();
            var embed = toEmbedUrl(extractVideoUrl(combined));
            if (!embed) return;
            var range = contentQuill.getSelection(true) || { index: contentQuill.getLength() };
            contentQuill.insertEmbed(range.index, 'video', embed, 'user');
            contentQuill.setSelection(range.index + 1, 'silent');
        }
    });

    function updateVideoPreview() {
        if (contentQuill.root.querySelector('iframe.ql-video')) {
            document.getElementById('video-preview').classList.add('hidden');
            document.getElementById('video-preview-inner').innerHTML = '';
            return;
        }
        var html = contentQuill.root.innerHTML;
        var m = html.match(/https?:\/\/[^\s"']+/i);
        var url = m ? m[0] : '';
        if (!/youtube\.com|youtu\.be|vimeo\.com/i.test(url)) {
            document.getElementById('video-preview').classList.add('hidden');
            document.getElementById('video-preview-inner').innerHTML = '';
            return;
        }
        var embed = toEmbedUrl(url);
        if (!embed) {
            document.getElementById('video-preview').classList.add('hidden');
            document.getElementById('video-preview-inner').innerHTML = '';
            return;
        }
        document.getElementById('video-preview').classList.remove('hidden');
        document.getElementById('video-preview-inner').innerHTML = '<iframe src="'+embed+'" style="position:absolute;top:0;left:0;width:100%;height:100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
    }

    contentQuill.on('text-change', updateVideoPreview);
    updateVideoPreview();

    contentQuill.on('text-change', function(delta, oldDelta, source) {
        if (source !== 'user') return;
        var fullText = contentQuill.getText();
        var re = /(https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/watch\?v=[A-Za-z0-9_-]{6,}|youtube\.com\/shorts\/[A-Za-z0-9_-]{6,}|youtu\.be\/[A-Za-z0-9_-]{6,}|vimeo\.com\/\d+))/ig;
        var lastMatch = null; var match;
        while ((match = re.exec(fullText)) !== null) { lastMatch = { index: match.index, url: match[1] }; }
        if (!lastMatch) return;
        var embed = toEmbedUrl(lastMatch.url);
        if (!embed) return;
        contentQuill.deleteText(lastMatch.index, lastMatch.url.length, 'user');
        contentQuill.insertEmbed(lastMatch.index, 'video', embed, 'user');
        contentQuill.setSelection(lastMatch.index + 1, 'silent');
    });

    function convertExistingLinksToEmbeds() {
        var html = contentQuill.root.innerHTML;
        html = html.replace(/<a[^>]+href="([^"]+)"[^>]*>[\s\S]*?<\/a>/gi, function(m,u){
            var e = toEmbedUrl(extractVideoUrl(u));
            return e ? '<iframe class="ql-video" src="'+e+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : m;
        });
        html = html.replace(/(https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/watch\?v=[A-Za-z0-9_-]{6,}|youtube\.com\/shorts\/[A-Za-z0-9_-]{6,}|youtu\.be\/[A-Za-z0-9_-]{6,}|vimeo\.com\/\d+))/gi, function(m){
            var e = toEmbedUrl(m);
            return e ? '<iframe class="ql-video" src="'+e+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : m;
        });
        contentQuill.root.innerHTML = html;
    }

    convertExistingLinksToEmbeds();

    const imageHandler = function(quill) {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        
        input.onchange = function() {
            const file = input.files[0];
            if (file) {
                const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
                if (!validTypes.includes(file.type)) {
                    alert('Hanya file JPG, PNG, dan GIF yang diperbolehkan');
                    return;
                }
                
                if (file.size > 500 * 1024 * 1024) {
                    alert('Ukuran file maksimal 500MB');
                    return;
                }
                
                uploadImage(file, quill);
            }
        };
    };

    const contentToolbar = contentQuill.getModule('toolbar');
    contentToolbar.addHandler('image', function() {
        imageHandler(contentQuill);
    });

    contentToolbar.addHandler('video', function() {
        var input = prompt('Masukkan link video YouTube/Vimeo');
        if (!input) return;
        var embed = toEmbedUrl(extractVideoUrl(input));
        if (!embed) return;
        var range = contentQuill.getSelection(true) || { index: contentQuill.getLength() };
        contentQuill.insertEmbed(range.index, 'video', embed, 'user');
        contentQuill.setSelection(range.index + 1, 'silent');
    });

    function uploadImage(file, quill) {
        const formData = new FormData();
        formData.append('image', file);
        
        $.ajax({
            url: "{{ route('news.upload-image') }}",
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    const range = quill.getSelection(true);
                    quill.insertEmbed(range.index, 'image', response.url, 'user');
                    quill.setSelection(range.index + 1);
                } else {
                    alert('Gagal mengupload gambar: ' + response.message);
                }
            },
            error: function(xhr) {
                
                alert('Gagal mengupload gambar. Silakan coba lagi.');
            }
        });
    }
    const $card = $('#news-image-upload-card');
    const $input = $('#image');
    const $previewImg = $('#news-image-preview');

    $card.on('click', function(e) {
        if (!$(e.target).is('input[type="file"], label[for="image"], span')) {
            $input.trigger('click');
        }
    });
    $card.on('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            $input.trigger('click');
        }
    });
    $input.on('change', function() {
        const file = this.files && this.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(ev) {
            $previewImg.attr('src', ev.target.result);
            $previewImg.removeClass('hidden');
        };
        reader.readAsDataURL(file);
    });

    $('form').on('submit', function(e) {
        const contentText = contentQuill.getText().trim();
        if (!contentText || contentText.length === 0) {
            e.preventDefault();
            $('#content-error').text('Konten wajib diisi').removeClass('hidden').addClass('block');
            $('#content-editor').css('border', '2px solid #ef4444');
            setTimeout(function() {
                $('#content-editor').css('border', '');
            }, 3000);
            return false;
        } else {
            $('#content-error').addClass('hidden').removeClass('block');
            $('#content-editor').css('border', '');
        }
        
        let contentHtml = contentQuill.root.innerHTML;
        try {
            var container = document.createElement('div');
            container.innerHTML = contentHtml;
            container.querySelectorAll('iframe.ql-video').forEach(function(ifr){
                var plain = toPlainVideoUrl(ifr.getAttribute('src') || '');
                var textNode = document.createTextNode(plain);
                ifr.parentNode.replaceChild(textNode, ifr);
            });
            contentHtml = container.innerHTML;
        } catch($e) {}
        $('#content').val(contentHtml);
    });
    
    contentQuill.on('text-change', function() {
        const contentText = contentQuill.getText().trim();
        if (contentText.length > 0) {
            $('#content-error').addClass('hidden').removeClass('block');
            $('#content-editor').css('border', '');
        }
    });

    $('#image').change(function() {
        const file = this.files[0];
        if (!file) return;
        
        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (!validImageTypes.includes(file.type)) {
            alert('Hanya file JPG, PNG, dan GIF yang diperbolehkan');
            this.value = '';
            return;
        }
        
        const maxSize = 500 * 1024 * 1024;
        if (file.size > maxSize) {
            alert('Ukuran file maksimal 500MB');
            this.value = '';
            return;
        }
    });

    $('#status').change(function() {
        if ($(this).val() === 'published') {
            $('#published_at').val(new Date().toISOString().slice(0, 16));
        } else {
            $('#published_at').val('');
        }
    });

    $('#status').trigger('change');

    // Auto-embed video saat paste link YouTube/Vimeo ke editor
    function normalizeVideoUrl(u) {
        if (!u) return '';
        u = u.trim();
        var m;
        m = u.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
        if (m) return 'https://www.youtube.com/embed/' + m[1];
        m = u.match(/vimeo\.com\/(\d+)/);
        if (m) return 'https://player.vimeo.com/video/' + m[1];
        return '';
    }

    // Biarkan link tetap sebagai teks biasa di editor; server akan mengubah jadi embed saat simpan
});
</script>
@endpush
@endsection