@extends('layouts.admin-app')

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


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


@section('content')

        @include('partial.top-menu')  

<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">How it works Article</h1>
        <a href="{{ route('admin.how-it-works-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-how-it-works') }}" 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"></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>

@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 );
        } );

       
</script>
@endsection