@extends('admin.layouts.admin')

@section('content')
    <div class="main-side">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="main-title mb-0">
                <div class="small">الرئيسية</div>
                <div class="large">إضافة مسودة</div>
            </div>
            <div class="btn-holder">
                <a href="{{ route('admin.contract-drafts.index') }}" class="main-btn bg-secondary">
                    رجوع <i class="fas fa-angle-left"></i>
                </a>
            </div>
        </div>

        <div class="card p-3">
            <form action="{{ route('admin.contract-drafts.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label>العنوان</label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" 
                               value="{{ old('title') }}">
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12">
                        <label>المحتوى</label>
                        <div wire:ignore>
                            <textarea id="editor" name="content" class="form-control @error('content') is-invalid @enderror" 
                                      style="min-height: 300px; direction: rtl">{{ old('content') }}</textarea>
                        </div>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-success">حفظ</button>
                    <a href="{{ route('admin.contract-drafts.index') }}" class="btn btn-secondary ms-2">إلغاء</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
    <style>
        /* CKEditor RTL styles */
        .ck.ck-editor {
            direction: rtl;
            text-align: right;
        }
        .ck.ck-toolbar {
            direction: rtl;
        }
        .ck.ck-editor__editable_inline {
            min-height: 300px;
            direction: rtl;
            text-align: right;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize CKEditor with RTL support
            ClassicEditor
                .create(document.querySelector('#editor'), {
                    language: 'ar',
                    direction: 'rtl',
                    toolbar: {
                        items: [
                            'heading', '|',
                            'bold', 'italic', 'underline', 'strikethrough', '|',
                            'alignment', '|',
                            'numberedList', 'bulletedList', '|',
                            'link', 'blockQuote', 'insertTable', '|',
                            'undo', 'redo'
                        ],
                        shouldNotGroupWhenFull: true
                    },
                    heading: {
                        options: [
                            { model: 'paragraph', title: 'فقرة', class: 'ck-heading_paragraph' },
                            { model: 'heading1', view: 'h1', title: 'عنوان رئيسي 1', class: 'ck-heading_heading1' },
                            { model: 'heading2', view: 'h2', title: 'عنوان رئيسي 2', class: 'ck-heading_heading2' },
                            { model: 'heading3', view: 'h3', title: 'عنوان رئيسي 3', class: 'ck-heading_heading3' }
                        ]
                    }
                })
                .then(editor => {
                    console.log('CKEditor initialized successfully');
                    
                    // Set minimum height
                    editor.editing.view.change(writer => {
                        writer.setStyle('min-height', '300px', editor.editing.view.document.getRoot());
                    });

                    // Handle form submission
                    document.querySelector('form').addEventListener('submit', function() {
                        document.querySelector('#editor').value = editor.getData();
                    });
                })
                .catch(error => {
                    console.error('CKEditor initialization error:', error);
                });
        });
    </script>
@endpush