@extends('admin.layouts.index')

@push('style')
<!-- third party css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KzY5v3Z/y2mc6TBx1+YpwwBR2cM5GRFd4iEQjIqtsydLb9ncppntq62GK6ad4CCekfT0HTl4Z5BjUdgHmR4vww==" crossorigin="anonymous" />
<script src="https://cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>
@endpush

@section('content')
<section class="content home">
     <div class="block-header">

          <!-- Start Content-->
          <div class="container-fluid">

               <!-- start page title -->

               <div class="row">
                    <div class="col-12">
                         <div class="page-title-box">
                              <div class="page-title-right">
                                   <ol class="breadcrumb mb-4">
                                        <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Language Cafe</a></li>
                                        <li class="breadcrumb-item">Manage Content</li>
                                        <li class="breadcrumb-item active">About Us</li>
                                   </ol>
                              </div>
                              <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                         </div>
                    </div>
               </div>

               @include('admin.common.flash')

               <div class="row">
                    <div class="col-12">
                         <div class="card">
                              <div class="card-body">

                                   <form class="form" name="createAboutUsContent" id="createAboutUsContent" method="post" action="{{route('admin.about_us_post')}}" enctype="multipart/form-data">
                                        @csrf

                                        <div class="form-group form-float">
                                             <div class="form-line">
                                                  <textarea id="editor" name="content" class="form-control">@if($aboutUs){{ $aboutUs->content }}@endif</textarea>

                                             </div>
                                        </div>

                                        <div>
                                             <input type="submit" class="btn btn-success" value="Add">
                                        </div>
                                   </form>


                              </div>
                         </div> <!-- end card-->
                    </div> <!-- end col-->
               </div>
          </div> <!-- container -->

     </div> <!-- content -->

     </div>

     @endsection

     @push('script')
     <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>

     <script>
          CKEDITOR.replace('editor');
          var table;

          $('#createAboutUsContent,#updateAboutUsContent').validate({
               rules: {
                    'content': {
                         'required': true
                    }
               },
               messages: {
                    'content': {
                         'required': 'Please enter Content here.'
                    },
               },

               highlight: function(input) {
                    $(input).parents('.form-line').addClass('error');
               },
               unhighlight: function(input) {
                    $(input).parents('.form-line').removeClass('error');
               },
               errorPlacement: function(error, element) {
                    $(element).parents('.form-group').append(error);
               }
          });
     </script>
     @endpush