@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4">
    <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-newspaper mr-3"></i>
                        Tambah Berita Baru
                    </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

        @if (session('error'))
            <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>
                        <h3 class="text-red-800 font-semibold">Kesalahan:</h3>
                        <p class="text-red-700">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if (session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div>
                        <h3 class="text-green-800 font-semibold">Berhasil:</h3>
                        <p class="text-green-700">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif


        <!-- Form Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <form action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data" id="newsForm">
                @csrf
                <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') }}" 
                                   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>
                            <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('category_id') border-red-500 @enderror" 
                                    id="category_id" 
                                    name="category_id" 
                                    required>
                                <option value="">Pilih Kategori</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row 2: Gambar Utama -->
                    <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 Utama
                        </label>
                        <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. Maksimal 500MB.</p>
                                <span id="imageValidationMessage" class="text-sm"></span>
                            </div>
                        </div>
                        
                        @error('image')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Row 3: Status & Featured -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <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 <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') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="featured" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-star mr-2 text-purple-600"></i>Berita Unggulan
                            </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('featured') border-red-500 @enderror" 
                                    id="featured" 
                                    name="featured">
                                <option value="0" {{ old('featured') == '0' ? 'selected' : '' }}>Tidak</option>
                                <option value="1" {{ old('featured') == '1' ? 'selected' : '' }}>Ya</option>
                            </select>
                            @error('featured')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <input type="hidden" id="published_at" name="published_at">

                    <!-- Row 4: 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 <span class="text-red-500">*</span>
                        </label>
                        <div id="content-editor" style="min-height: 400px;">{!! old('content', '') !!}</div>
                        <textarea class="hidden" id="content" name="content">{{ old('content', '') }}</textarea>
                        <div id="content-error" class="hidden mt-1 text-sm text-red-600"></div>
                        @error('content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-end pt-6 border-t border-gray-200">
                        <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" id="submitBtn">
                            <i class="fas fa-save mr-2"></i>
                            Simpan
                        </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 iframe.ql-video {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
        border: 0;
    }
    .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', 'code-block'],
        ['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');
        }
    });

    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('Format file tidak didukung. 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);
    });
    
    contentQuill.on('text-change', function() {
        const contentText = contentQuill.getText().trim();
        if (contentText.length > 0) {
            $('#content-error').addClass('hidden').removeClass('block');
            $('#content-editor').css('border', '');
        }
    });

    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.change(function() {
        const file = this.files[0];
        const messageElement = $('#imageValidationMessage');
        
        if (!file) {
            messageElement.text('').removeClass('text-red-600 text-green-600');
            return;
        }

        const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (!validTypes.includes(file.type)) {
            messageElement.text('❌ Format file tidak didukung. Gunakan JPG, PNG, atau GIF.').addClass('text-red-600').removeClass('text-green-600');
            this.value = '';
            return;
        }

        const maxSize = 500 * 1024 * 1024;
        if (file.size > maxSize) {
            messageElement.text('❌ Ukuran file terlalu besar. Maksimal 500MB.').addClass('text-red-600').removeClass('text-green-600');
            this.value = '';
            return;
        }

        messageElement.text('✅ File valid').addClass('text-green-600').removeClass('text-red-600');

        const reader = new FileReader();
        reader.onload = function(ev) {
            $previewImg.attr('src', ev.target.result);
            $previewImg.removeClass('hidden');
        };
        reader.readAsDataURL(file);
    });

    function uploadImage(file, quill) {
        let 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 || 'Terjadi kesalahan saat mengupload gambar.'));
                }
            },
            error: function(xhr) {
                let errorMessage = 'Gagal mengupload gambar. Silakan coba lagi.';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.status === 413) {
                    errorMessage = 'Ukuran file terlalu besar untuk diupload.';
                } else if (xhr.status === 422) {
                    errorMessage = 'Format file tidak valid atau tidak didukung.';
                } else if (xhr.status === 500) {
                    errorMessage = 'Terjadi kesalahan server. Silakan coba lagi nanti.';
                }
                
                alert(errorMessage);
            }
        });
    }

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

    $('#newsForm').submit(function(e) {
        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);
        
        const submitBtn = $('#submitBtn');
        const originalText = submitBtn.html();
        
        if (!validateForm()) {
            e.preventDefault();
            return false;
        }

        submitBtn.html('<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...');
        submitBtn.prop('disabled', true);
    });

    function validateForm() {
        let isValid = true;
        let errorMessages = [];

        const title = $('#title').val().trim();
        if (!title) {
            errorMessages.push('Judul berita harus diisi');
            isValid = false;
        } else if (title.length > 255) {
            errorMessages.push('Judul berita maksimal 255 karakter');
            isValid = false;
        }

        const category = $('#category_id').val();
        if (!category) {
            errorMessages.push('Kategori harus dipilih');
            isValid = false;
        }

        const contentText = contentQuill.getText().trim();
        if (!contentText || contentText.length === 0) {
            errorMessages.push('Konten berita harus diisi');
            isValid = false;
            $('#content-error').text('Konten wajib diisi').removeClass('hidden').addClass('block');
            $('#content-editor').css('border', '2px solid #ef4444');
        } else {
            $('#content-error').addClass('hidden').removeClass('block');
            $('#content-editor').css('border', '');
        }

        const status = $('#status').val();
        if (!status) {
            errorMessages.push('Status harus dipilih');
            isValid = false;
        }

        if (!isValid) {
            alert('Validasi Form Gagal\n\n' + errorMessages.join('\n'));
        }

        return isValid;
    }

    $('#status').trigger('change');
});
</script>
@endpush
@endsection