@extends('layouts.admin_main')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">New Section</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">New Section</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card card-primary">
                    @if(session('status'))
                        <h5 class="alert alert-success text-center">{{ session('status') }}</h5>
                    @endif
                    <div class="card-header">
                        <h3 class="card-title">New Section</h3>
                    </div>
                    <form method="post" action="{{ route('add_section') }}" enctype="multipart/form-data">
                        <div class="card-body">
                            <div class="form-group col-8">
                                <label for="title">Title</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" required>
                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group col-8">
                                <label for="add_section_content">Content</label>
                                <textarea name="content" class="form-control" id="add_section_content" hidden required>{{ old('content') }}</textarea>
                                <div id="editor-container" style="height: 500px; border: 1px solid #ccc;"></div>
                                @error('content')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        @csrf
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>

    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor-container'), {
                toolbar: [
                    'heading', '|', 'bold', 'italic', 'underline', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload',
                    'undo', 'redo'
                ],
                simpleUpload: {
                    uploadUrl: '{{ route('upload') }}',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    }
                },
                image: {
                    toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side']
                }
            })
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error('There was a problem initializing CKEditor: ', error);
            });
    </script>
@endsection