@extends('backend.layout.app')

<!-- title go hear -->
@section('title' , 'IndexPage' )
<!-- content go hear -->
@section('head')
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css">
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<div class="card ">
    <div class="card-header d-flex pb-2  bg-light">
        <a href="{{ route('backend.indexPage.index') }}" class="btn btn-r"><i class="fas fa-arrow-left"></i></a>
        <a href="{{ route('backend.indexPage.createOrupdate') }}" class="btn  btn-r"><i class="fas fa-plus"></i></a>
        @if( $result->id)
        <a class=' btn btn-r ' href="{{route('backend.indexPage.show',['id'=>$result->id])}}"><i class="fas fa-laptop"></i> </a>
        <a class=' btn btn-r '
            onclick='deleteMe({
			"url":"{{route("backend.indexPage.destroy")}}",
			"id":"{{$result->id}}",
			"redirect":"{{route("backend.indexPage.index")}}"})'>
            <i class='fas fa-trash-alt'></i>
        </a>
        @endif
    </div>
    <div class="card-body   ">
        <!-- row start -->
        <form id="formId">
            @if( $result->id)
            <input type="hidden" name="id" value="{{ $result->id }}">
            @else
            <input type="hidden" name="id" value="0">
            @endif
            <div class="card card-default ">
                <div class="card-header">
                    <h3 class="card-title pt-2 text-capitalize">Basic Details</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class=" row">
                        <div class="col-12 col-md-3 mb-3 mb-md-0 ">
                            <h6 class="label-t">Footer Content</h6>
                        </div>
                        <div class="col-12 col-md-8">
                            <!-- item -->
                            <div class=" mb-3  ">
                                <div><label for="footer_content" class=" form-label text-capitalize">Content</label></div>
                                <div> <textarea name="footer_content" id="editor">{{ old('footer_content',$result->footer_content ) }}</textarea></div>
                            </div>
                            <!-- item -->
                            <div class=" mb-3">
                                <div><label for="text" class=" form-label text-capitalize"> is published</label></div>
                                <div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input name="is_published" id="radio_0" type="radio" class="custom-control-input" value="1" @if($result->is_published == 1 ) checked @endif>
                                        <label for="radio_0" class="custom-control-label text-capitalize">active</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input name="is_published" id="radio_1" type="radio" class="custom-control-input" value="0" @if($result->is_published == 0 ) checked @endif >
                                        <label for="radio_1" class="custom-control-label text-capitalize">draft</label>
                                    </div>
                                </div>
                            </div>
                            <!-- item end -->
                        </div>
                    </div>
                    <!-- row end -->
                </div>
            </div>

            <div class="form-group row">
                <div class="offset-3 col-12 col-md-8">
                    <input type="submit" type="submit" id="submitBtn" class="btn btn-md btn-r btn-dark" value="Submit">
                </div>
            </div>
        </form>
        <!-- row end -->
    </div>
</div>
@endsection

@push('footer-script')
<script type="text/javascript">
    // store
    formId = document.getElementById('formId');
    formId.addEventListener('submit', async (event) => {
        event.preventDefault();
        window.editor.updateSourceElement(); 
        // Disable the submit button before making the Axios request
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        const formData = new FormData(formId);
        console.log(formData);
        const url = '{{ route('backend.indexPage.store') }}';
        const config = {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            }
        };

        for (let [key, value] of formData.entries()) {
            console.log(`${key}: ${value}`);
        }
        try {
            const response = await axios.post(url, formData, config);
            toastr.success(response.data.message);
            if (response.data.redirect) {
                setTimeout(function() {
                    window.location.href = response.data.redirect;
                }, 1000);
            }
        } catch (error) {
            handleErrorResponse(error);
        } finally {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = false;
        }
    });
</script>
<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.0.0/"
        }
    } 
</script>
<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Link, 
        Paragraph,
        Bold,
        Italic,
        Font,
        Heading
    } from 'ckeditor5';

    ClassicEditor
        .create(document.querySelector('#editor'), {
            plugins: [Essentials, Paragraph, Bold, Italic, Link, Font, Heading], 
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', 'link', '|', // Link added to the toolbar
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'heading'
            ],
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
                ]
            }
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>
@endpush