@extends('layouts.admin-app')

@section('title')
  <title>Create</title>
@endsection


@section('styles')
   <style type="text/css">
       .ck-editor__editable {
            height: 500px;
        }
   </style>
@endsection


@section('content')

        @include('partial.top-menu')     
        <!-- Begin Page Content -->
        <div class="container-fluid">

            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">News Article</h1>
                <a href="{{ route('admin.news-list') }}" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm"><i
                        class="fas fa-arrow-left fa-sm text-white-50"></i> Back</a>
            </div>

            <!-- Content Row -->
            <div class="row">

                
                <div class="col-xl-12 col-md-12 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <form action="{{ route('admin.add-news') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row  align-items-center">

                                    <div class="col-md-6">
                                         <div class="mb-3"><label class="form-label" for="title">Title</label><input class="form-control" id="title" type="text" name="title" value=""></div>   
                                    </div>

                                    <div class="col-md-6">
                                         <div class="mb-3"><label class="form-label" for="feature_img">Feature Image</label><input class="form-control" id="feature_img" type="file" name="feature_img" ></div>   
                                    </div>

                                    <div class="col-md-12">
                                        <div class="mb-3"><label class="form-label" for="body">Body</label>
                                            <textarea class="form-control" id="body" type="text" placeholder="write your article here.." name="body" ></textarea></div>
                                    </div>
                                    
                                    <div class="col-md-2 mt-3">
                                        <div class="mb-0">
                                            
                                            <button class="btn btn-success me-1 mb-0 float-end" type="submit">Publish</button>
                                        </div>
                                    </div>
                                </div>
                           </form>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <!-- /.container-fluid -->

@endsection


@section('scripts')
   <!-- <script src="https://cdn.ckeditor.com/4.19.1/standard/ckeditor.js"></script>
   <script>
        CKEDITOR.replace('body');
    </script> -->
    <script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
    <script>
    ClassicEditor
        .create(document.querySelector("#body"),{
            ckfinder: {
                uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
            }
        })
        .catch(error => {
            console.error( error );
        } );

        // ClassicEditor
        // .create( document.querySelector( '#body' ),{
        //     ckfinder: {
        //         uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
        //     }
        // })
        // .catch( error => {
              
        // } );
</script>
@endsection