@php
    $edit = !empty($about->id);
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} About
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>{{ $edit ? 'Edit' : 'Create' }} About</h4>
                        </div>

                        <form
                            action="{{ $edit ? route('admin.about.update', $about) : route('admin.about.store') }}"
                            method="POST" class="user-edit-add-form" id="user-edit-add-form">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="title">Title <span style="color: red"> * </span></label>
                                    <input type="text" class="form-control" name="title" id="title"
                                           value="{{ old('title', $edit ? $about->title : '') }}"
                                           placeholder="Title">
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="content">Content <span style="color: red"> * </span></label>
                                    <textarea class="form-control" name="content" id="content"
                                              placeholder="Content">{{ old('content', $edit ? $about->content : '') }}</textarea>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <!-- Include CKEditor CDN -->
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>

    <x-generic-validation-error-toastr/>
    <script>
        $(document).ready(function() {
            const EDIT = {{ $edit ? 'true' : 'false' }};

            // Initialize CKEditor
            CKEDITOR.replace('content', {
                height: 300,
                // Customize toolbar according to your needs
                toolbar: [
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
                    { name: 'links', items: ['Link', 'Unlink'] },
                    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] },
                    { name: 'styles', items: ['Styles', 'Format'] },
                    { name: 'tools', items: ['Maximize'] }
                ]
            });

            $('#user-edit-add-form').validate({
                rules: {
                    title: {
                        required: 'true'
                    },
                    content: {
                        required: 'true'
                    },
                },
                messages: {
                    title: {
                        required: 'Please Enter Content Title'
                    },
                    content: {
                        required: 'Please Enter Content'
                    },
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('.overlay').show();
                    // Update the textarea with CKEditor content before submission
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                    const formData = new FormData(form);

                    $.ajax({
                        url: form.action,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            $('.overlay').hide();
                            if (response.alertType && response.message) {
                                toastr[response.alertType](response.message);
                            }
                            if (response.redirectTo) {
                                setTimeout(() => {
                                    window.location.href = response.redirectTo;
                                }, 1000);
                            }
                        },
                        error: function(xhr) {
                            $('.overlay').hide();
                            if (xhr.status === 422) {
                                const errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, messages) {
                                    messages.forEach(message => toastr.error(message));
                                });
                            } else {
                                toastr.error('An unexpected error occurred.');
                            }
                        }
                    });
                }
            });
        });
    </script>
@endpush