@extends('layouts.admin')
@section('content') 
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ $title }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->
@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
<form id="page-form " enctype="multipart/form-data" @if($page->id != 1) class="edit-form" @endif action="{{ route('admin.pages.save', ['page' => str_replace(' ', '-', strtolower($title))]) }}" method="POST" autocomplete="off" class="needs-validation" novalidate>
    @csrf
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div>
                        <label>Title Arabic</label>
                        <input type="text"  id="title_ar" dir="rtl" name="title_ar" class="form-control" value="{{ $page->title_ar }}" required />
                        
                    </div>
                    <div>
                        <label>Content English</label>
                        <textarea  id="content" name="content" class="form-control" required>{{ $page->content }}</textarea>
                        
                    </div>
                    <div>
                        <label>Content Arabic</label>
                        <textarea id="content_ar" name="content_ar" class="form-control" required>{{ $page->content_ar }}</textarea>
                        
                    </div>

                </div>
            </div>
            <!-- end card -->
            <div class="text-end mb-3">
                <button type="submit" class="btn btn-success w-sm" id="submitBtn">Submit</button>
            </div>
        </div>
        <!-- end col -->

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Action</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="choices-publish-status-input" class="form-label">Status</label>

                        <select name="status" class="form-select" id="choices-publish-status-input" data-choices data-choices-search-false>
                            <option value="1" {{ (!empty($page->id) && $page->status == 1) ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ (!empty($page->id) && $page->status == 0) ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
</form>
@endsection
@section('script')
<script src="{{ asset('assets/libs/%40ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
<script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>
    <!-- filepond js -->
    <script src="{{ asset('assets/libs/filepond/filepond.min.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
<!-- dropzone js -->
<!-- <script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script> -->

<!-- <script src="{{ asset('assets/js/pages/ecommerce-product-create.init.js') }}"></script> -->

<script>
  // Initialize CKEditor
  let editor;
  ClassicEditor.create(document.querySelector('#content'))
    .then(newEditor => {
      editor = newEditor;

      // Listen for changes to the editor content
      editor.model.document.on('change:data', function () {
        // Enable the update button when content is changed
        var submitButton = document.getElementById('submitBtn');
        if (submitButton.disabled) {
            submitButton.disabled = false;  
        }

      });
    })
    .catch(error => {
      console.error('Error initializing CKEditor:', error);
    });

    ClassicEditor.create(document.querySelector('#content_ar'),{
        language: 'ar',
    })
    .then(newEditor => {
      editor = newEditor;

      // Listen for changes to the editor content
      editor.model.document.on('change:data', function () {
        // Enable the update button when content is changed
        var submitButton = document.getElementById('submitBtn');
        if (submitButton.disabled) {
            submitButton.disabled = false;  
        }

      });
    })
    .catch(error => {
      console.error('Error initializing CKEditor:', error);
    });
</script>
@endsection