@extends('admin.layouts.app')

@section('title', 'Tambah Berita')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <!-- Fallback CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
    <style>
        .soft-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .required::after {
            content: " *";
            color: #dc3545;
        }

        .preview-image {
            max-width: 200px;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

        /* Fix Summernote dropdown issues */
        .note-editor .note-dropdown-menu {
            z-index: 9999 !important;
            position: absolute !important;
            display: block !important;
        }

        .note-editor .note-btn-group .note-dropdown-menu {
            z-index: 9999 !important;
        }

        .note-editor .note-fontname .note-dropdown-menu,
        .note-editor .note-fontsize .note-dropdown-menu,
        .note-editor .note-color .note-dropdown-menu,
        .note-editor .note-para .note-dropdown-menu,
        .note-editor .note-height .note-dropdown-menu {
            z-index: 9999 !important;
            position: absolute !important;
            display: block !important;
        }

        /* Ensure dropdowns are visible */
        .note-editor .note-dropdown-menu.show {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Fix for Bootstrap 4 compatibility */
        .note-editor .dropdown-menu {
            z-index: 9999 !important;
        }

        /* Additional fixes for dropdown positioning */
        .note-editor .note-btn-group {
            position: relative !important;
        }

        .note-editor .note-dropdown-menu {
            top: 100% !important;
            left: 0 !important;
            min-width: 100px !important;
        }

        /* Ensure color picker works */
        .note-editor .note-color .note-dropdown-menu {
            min-width: 200px !important;
        }

        /* Fix font size dropdown */
        .note-editor .note-fontsize .note-dropdown-menu {
            min-width: 80px !important;
        }

        /* Fix paragraph dropdown */
        .note-editor .note-para .note-dropdown-menu {
            min-width: 120px !important;
        }

        /* Fix height dropdown */
        .note-editor .note-height .note-dropdown-menu {
            min-width: 100px !important;
        }

        /* Ensure dropdowns are hidden by default */
        .note-editor .note-dropdown-menu {
            display: none !important;
        }

        /* Show dropdowns only when they have the 'show' class */
        .note-editor .note-dropdown-menu.show {
            display: block !important;
        }

        /* Prevent multiple dropdowns from showing */
        .note-editor .note-dropdown-menu:not(.show) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* Ensure all toolbar buttons are clickable */
        .note-editor .note-btn {
            cursor: pointer !important;
            pointer-events: auto !important;
        }

        .note-editor .note-btn:hover {
            background-color: #e9ecef !important;
        }

        .note-editor .note-btn.active {
            background-color: #007bff !important;
            color: white !important;
        }

        /* Fix link dialog */
        .note-editor .note-link-dialog {
            z-index: 9999 !important;
        }

        /* Fix fullscreen mode */
        .note-editor.note-editing-area.note-frame.fullscreen {
            z-index: 9999 !important;
        }
    </style>
@endpush

@section('content')
    <div class="card soft-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-0">Tambah Berita Baru</h4>
                    <small class="text-success">Buat berita baru untuk desa</small>
                </div>
                <a href="{{ route('admin.berita.index') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-left"></i> Kembali
                </a>
            </div>

            <form action="{{ route('admin.berita.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-lg-8">
                        <!-- Judul -->
                        <div class="mb-3">
                            <label for="title" class="form-label required">Judul Berita</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                                name="title" value="{{ old('title') }}" placeholder="Masukkan judul berita" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div class="mb-3">
                            <label for="slug" class="form-label">Slug URL</label>
                            <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug"
                                name="slug" value="{{ old('slug') }}" placeholder="slug-berita-otomatis">
                            <small class="text-muted">Biarkan kosong untuk generate otomatis dari judul</small>
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Content -->
                        <div class="mb-3">
                            <label for="content" class="form-label required">Konten Berita</label>
                            <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="15"
                                placeholder="Tulis konten berita disini...">{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <!-- Kategori -->
                        <div class="mb-3">
                            <label for="category" class="form-label required">Kategori</label>
                            <select class="form-select @error('category') is-invalid @enderror" id="category"
                                name="category" required>
                                <option value="">Pilih kategori</option>
                                <option value="Infrastruktur" {{ old('category') == 'Infrastruktur' ? 'selected' : '' }}>
                                    Infrastruktur</option>
                                <option value="Ekonomi" {{ old('category') == 'Ekonomi' ? 'selected' : '' }}>Ekonomi
                                </option>
                                <option value="Kesehatan" {{ old('category') == 'Kesehatan' ? 'selected' : '' }}>Kesehatan
                                </option>
                                <option value="Budaya" {{ old('category') == 'Budaya' ? 'selected' : '' }}>Budaya</option>
                                <option value="Pemerintahan" {{ old('category') == 'Pemerintahan' ? 'selected' : '' }}>
                                    Pemerintahan</option>
                                <option value="Pendidikan" {{ old('category') == 'Pendidikan' ? 'selected' : '' }}>
                                    Pendidikan</option>
                                <option value="Lingkungan" {{ old('category') == 'Lingkungan' ? 'selected' : '' }}>
                                    Lingkungan</option>
                                <option value="Teknologi" {{ old('category') == 'Teknologi' ? 'selected' : '' }}>Teknologi
                                </option>
                                <option value="Umum" {{ old('category') == 'Umum' ? 'selected' : '' }}>Umum</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="mb-3">
                            <label for="status" class="form-label required">Status</label>
                            <select class="form-select @error('status') is-invalid @enderror" id="status" name="status"
                                required>
                                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published
                                </option>
                                <option value="archived" {{ old('status') == 'archived' ? 'selected' : '' }}>Archived
                                </option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Image -->
                        <div class="mb-3">
                            <label for="image" class="form-label">Gambar</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" id="image"
                                name="image" accept="image/*" onchange="previewImage(this)">
                            <small class="text-muted">Format: JPG, PNG, GIF. Maks: 2MB</small>
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            <!-- Preview Image -->
                            <div id="imagePreview" class="mt-2" style="display: none;">
                                <img id="preview" class="preview-image" src="" alt="Preview">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('admin.berita.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-x"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="ti ti-device-floppy"></i> Simpan Berita
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('Document ready, initializing Summernote...');
            
            // Check if Summernote is loaded
            if (typeof $.fn.summernote === 'undefined') {
                console.error('Summernote not loaded!');
                return;
            }
            
            // Initialize Summernote
            $('#content').summernote({
                height: 400,
                toolbar: [
        
                    ['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color', 'backcolor']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['insert', ['link']],
                    ['view', ['fullscreen',  'help']]
                ],
                fontNames: [
                    'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 
                    'Impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana',
                    'Georgia', 'Palatino', 'Garamond', 'Bookman', 'Comic Sans MS',
                    'Trebuchet MS', 'Arial Black', 'Impact', 'Lucida Sans Unicode',
                    'Tahoma', 'Lucida Grande'
                ],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48', '64'],
                colorNames: [
                    'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Pink',
                    'Brown', 'Black', 'White', 'Gray', 'Light Gray', 'Dark Gray',
                    'Cyan', 'Magenta', 'Lime', 'Navy', 'Teal', 'Maroon', 'Olive'
                ],
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized successfully!');
                        
                        // Fix dropdown behavior
                        setTimeout(function() {
                            // Remove all existing click handlers
                            $('.note-fontname, .note-fontsize, .note-color, .note-para, .note-height').off('click');
                            
                            // Add proper click handlers for all dropdowns
                            $('.note-fontname, .note-fontsize, .note-color, .note-para, .note-height').on('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                
                                var $currentDropdown = $(this).find('.note-dropdown-menu');
                                var isOpen = $currentDropdown.hasClass('show');
                                
                                // Close all dropdowns first
                                $('.note-dropdown-menu').removeClass('show');
                                
                                // Toggle current dropdown only if it wasn't open
                                if (!isOpen) {
                                    $currentDropdown.addClass('show');
                                }
                            });
                            
                            // Close dropdowns when clicking on dropdown items
                            $('.note-dropdown-menu a').on('click', function() {
                                $(this).closest('.note-dropdown-menu').removeClass('show');
                            });
                            
                            // Close dropdowns when clicking outside
                            $(document).on('click', function(e) {
                                if (!$(e.target).closest('.note-btn-group').length) {
                                    $('.note-dropdown-menu').removeClass('show');
                                }
                            });
                            
                            // Close dropdowns when pressing Escape key
                            $(document).on('keydown', function(e) {
                                if (e.key === 'Escape') {
                                    $('.note-dropdown-menu').removeClass('show');
                                }
                            });
                            
                            // Ensure all buttons are clickable
                            $('.note-btn').on('click', function() {
                                console.log('Button clicked:', $(this).attr('data-original-title') || $(this).text());
                            });
                            
                            // Test link functionality
                            $('.note-link-btn').on('click', function() {
                                console.log('Link button clicked');
                            });
                            
                            // Debug dropdown buttons
                            console.log('Found dropdown buttons:');
                            $('.note-btn-group').each(function() {
                                var $btn = $(this).find('.note-btn');
                                var title = $btn.attr('data-original-title') || $btn.text();
                                var classes = $btn.attr('class');
                                console.log('Button:', title, 'Classes:', classes);
                            });
                            
                        }, 500);
                    },
                    onFocus: function() {
                        console.log('Editor focused');
                    },
                    onChange: function(contents, $editable) {
                        console.log('Content changed');
                    },
                    onPaste: function(e) {
                        console.log('Content pasted');
                    }
                }
            });

            // Auto generate slug from title
            $('#title').on('keyup', function() {
                let title = $(this).val();
                let slug = title.toLowerCase()
                    .replace(/[^a-z0-9 -]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim('-');
                $('#slug').val(slug);
            });
            
            // Test if editor is working
            setTimeout(function() {
                if ($('#content').next('.note-editor').length > 0) {
                    console.log('Summernote editor is properly initialized');
                } else {
                    console.error('Summernote editor failed to initialize');
                }
            }, 1000);
        });

        // Image preview function
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                    $('#imagePreview').show();
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $('#imagePreview').hide();
            }
        }
    </script>
@endpush