@extends('layouts.admin')

@section('title', 'افزودن مقاله جدید')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">افزودن مقاله جدید</h1>
        <a href="{{ route('admin.blogs.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right ms-2"></i>
            بازگشت به لیست
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.blogs.store') }}" method="POST" enctype="multipart/form-data" id="blogForm">
                @csrf

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="title" class="form-label">عنوان مقاله</label>
                            <input type="text"
                                   class="form-control @error('title') is-invalid @enderror"
                                   id="title"
                                   name="title"
                                   value="{{ old('title') }}"
                                   required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">محتوای مقاله</label>
                            <div id="editor-container">
                            <textarea class="form-control @error('content') is-invalid @enderror"
                                      id="content"
                                      name="content"
                                      rows="10"
                                      required>{{ old('content') }}</textarea>
                            </div>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="excerpt" class="form-label">خلاصه مقاله</label>
                            <textarea class="form-control @error('excerpt') is-invalid @enderror"
                                      id="excerpt"
                                      name="excerpt"
                                      rows="3">{{ old('excerpt') }}</textarea>
                            @error('excerpt')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="category" class="form-label">دسته‌بندی</label>
                            <select class="form-select @error('category') is-invalid @enderror"
                                    id="category"
                                    name="category"
                                    required>
                                <option value="">انتخاب دسته‌بندی</option>
                                <option value="تکنولوژی" {{ old('category') == 'تکنولوژی' ? 'selected' : '' }}>تکنولوژی</option>
                                <option value="طراحی" {{ old('category') == 'طراحی' ? 'selected' : '' }}>طراحی</option>
                                <option value="برنامه‌نویسی" {{ old('category') == 'برنامه‌نویسی' ? 'selected' : '' }}>برنامه‌نویسی</option>
                                <option value="تجربه کاربری" {{ old('category') == 'تجربه کاربری' ? 'selected' : '' }}>تجربه کاربری</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="thumbnail" class="form-label">تصویر شاخص</label>
                            <div class="input-group">
                                <input type="file"
                                       class="form-control @error('thumbnail') is-invalid @enderror"
                                       id="thumbnail"
                                       name="thumbnail"
                                       accept="image/*">
                                <button type="button" 
                                        class="btn btn-outline-secondary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#mediaModal"
                                        data-type="thumbnail">
                                    <i class="fas fa-images ms-2"></i>
                                    انتخاب از کتابخانه
                                </button>
                            </div>
                            <div id="thumbnailPreview" class="mt-2"></div>
                            @error('thumbnail')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">گالری تصاویر</label>
                            <div class="input-group">
                                <input type="file"
                                       class="form-control"
                                       id="galleryInput"
                                       multiple
                                       accept="image/*">
                                <button type="button" 
                                        class="btn btn-outline-secondary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#mediaModal"
                                        data-type="gallery">
                                    <i class="fas fa-images ms-2"></i>
                                    انتخاب از کتابخانه
                                </button>
                            </div>
                            <div id="galleryPreview" class="row g-2 mt-2"></div>
                            <input type="hidden" name="gallery" id="galleryIds" value="{{ old('gallery', '[]') }}">
                        </div>

                        <div class="mb-3">
                            <label for="published_at" class="form-label">تاریخ انتشار</label>
                            <input type="datetime-local"
                                   class="form-control @error('published_at') is-invalid @enderror"
                                   id="published_at"
                                   name="published_at"
                                   value="{{ old('published_at') }}">
                            @error('published_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox"
                                       class="form-check-input @error('is_active') is-invalid @enderror"
                                       id="is_active"
                                       name="is_active"
                                       value="1"
                                       {{ old('is_active') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">فعال</label>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox"
                                       class="form-check-input @error('is_featured') is-invalid @enderror"
                                       id="is_featured"
                                       name="is_featured"
                                       value="1"
                                       {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">مقاله ویژه</label>
                                @error('is_featured')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save ms-2"></i>
                        ذخیره مقاله
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Media Modal -->
<div class="modal fade" id="mediaModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">انتخاب تصویر</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3" id="mediaGrid"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-primary" id="selectMediaBtn">انتخاب</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
    let editor;

    ClassicEditor
        .create(document.querySelector('#editor-container'), {
            toolbar: {
                items: [
                    'heading',
                    '|',
                    'bold',
                    'italic',
                    'link',
                    'bulletedList',
                    'numberedList',
                    '|',
                    'outdent',
                    'indent',
                    '|',
                    'blockQuote',
                    'insertTable',
                    'undo',
                    'redo'
                ]
            },
            language: 'fa',
            placeholder: 'محتوای مقاله را وارد کنید...'
        })
        .then(newEditor => {
            editor = newEditor;

            // Set initial content from textarea
            const textarea = document.querySelector('#content');
            editor.setData(textarea.value);

            // Update textarea on editor change
            editor.model.document.on('change:data', () => {
                textarea.value = editor.getData();
            });
        })
        .catch(error => {
            console.error(error);
        });

    // Handle form submission
    document.getElementById('blogForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Update textarea with current editor content
        const textarea = document.querySelector('#content');
        textarea.value = editor.getData();

        // Submit the form
        this.submit();
    });

    // Media handling
    let selectedMedia = [];
    let currentMediaType = null;

    // Handle media modal
    document.querySelectorAll('[data-bs-target="#mediaModal"]').forEach(button => {
        button.addEventListener('click', function() {
            currentMediaType = this.dataset.type;
            loadMedia();
        });
    });

    // Load media from server
    function loadMedia() {
        fetch('{{ route('admin.media.index') }}?type=image&category=blogs')
            .then(response => response.json())
            .then(data => {
                const grid = document.getElementById('mediaGrid');
                grid.innerHTML = '';
                
                data.media.forEach(media => {
                    const div = document.createElement('div');
                    div.className = 'col-md-3 col-lg-2';
                    div.innerHTML = `
                        <div class="card h-100">
                            <img src="${media.url}" class="card-img-top" alt="${media.title}">
                            <div class="card-body p-2">
                                <div class="form-check">
                                    <input type="checkbox" 
                                           class="form-check-input media-checkbox" 
                                           value="${media.id}"
                                           ${selectedMedia.includes(media.id) ? 'checked' : ''}>
                                </div>
                            </div>
                        </div>
                    `;
                    grid.appendChild(div);
                });
            });
    }

    // Handle media selection
    document.getElementById('selectMediaBtn').addEventListener('click', function() {
        const selected = Array.from(document.querySelectorAll('.media-checkbox:checked'))
            .map(checkbox => parseInt(checkbox.value));

        if (currentMediaType === 'thumbnail' && selected.length > 0) {
            // Handle thumbnail selection
            const mediaId = selected[0];
            const media = document.querySelector(`.media-checkbox[value="${mediaId}"]`)
                .closest('.card')
                .querySelector('img');
            
            document.getElementById('thumbnailPreview').innerHTML = `
                <div class="position-relative d-inline-block">
                    <img src="${media.src}" alt="Thumbnail" class="img-thumbnail" style="max-height: 150px;">
                    <input type="hidden" name="thumbnail_id" value="${mediaId}">
                    <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" 
                            onclick="clearThumbnail()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
        } else if (currentMediaType === 'gallery') {
            // Handle gallery selection
            selectedMedia = selected;
            updateGalleryPreview();
        }

        bootstrap.Modal.getInstance(document.getElementById('mediaModal')).hide();
    });

    // Update gallery preview
    function updateGalleryPreview() {
        const preview = document.getElementById('galleryPreview');
        const input = document.getElementById('galleryIds');
        
        input.value = JSON.stringify(selectedMedia);
        
        // Load selected media details
        Promise.all(selectedMedia.map(id => 
            fetch(`{{ route('admin.media.index') }}?id=${id}`)
                .then(response => response.json())
                .then(data => data.media[0])
        )).then(mediaItems => {
            preview.innerHTML = mediaItems.map(media => `
                <div class="col-md-3 col-lg-2">
                    <div class="position-relative">
                        <img src="${media.url}" alt="${media.title}" class="img-thumbnail w-100">
                        <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                onclick="removeFromGallery(${media.id})">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            `).join('');
        });
    }

    // Clear thumbnail
    function clearThumbnail() {
        document.getElementById('thumbnailPreview').innerHTML = '';
        document.querySelector('input[name="thumbnail_id"]')?.remove();
    }

    // Remove from gallery
    function removeFromGallery(mediaId) {
        selectedMedia = selectedMedia.filter(id => id !== mediaId);
        updateGalleryPreview();
    }

    // Handle file uploads
    document.getElementById('thumbnail').addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('thumbnailPreview').innerHTML = `
                    <div class="position-relative d-inline-block">
                        <img src="${e.target.result}" alt="Thumbnail" class="img-thumbnail" style="max-height: 150px;">
                        <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" 
                                onclick="clearThumbnail()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
            };
            reader.readAsDataURL(this.files[0]);
        }
    });

    document.getElementById('galleryInput').addEventListener('change', function(e) {
        if (this.files) {
            Array.from(this.files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('galleryPreview');
                    const div = document.createElement('div');
                    div.className = 'col-md-3 col-lg-2';
                    div.innerHTML = `
                        <div class="position-relative">
                            <img src="${e.target.result}" alt="Gallery" class="img-thumbnail w-100">
                            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                    onclick="this.closest('.col-md-3').remove()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                    preview.appendChild(div);
                };
                reader.readAsDataURL(file);
            });
        }
    });
</script>
@endpush
@endsection