@extends('Admin.Layout.main_layout')
@section('main_container')
<!-- begin app-main -->
<div class="app-main" id="main">
   <!-- begin container-fluid -->
   <div class="container-fluid">
      <!-- begin row -->
      <div class="row">
         <div class="col-md-12 m-b-30">
            <!-- begin page title -->
            <div class="d-block d-sm-flex flex-nowrap align-items-center">
               <div class="page-title mb-2 mb-sm-0">
                  <h1>Category</h1>
               </div>
               <div class="ml-auto d-flex align-items-center">
                  <a class="btn btn-dark text-white" href="{{ route('category') }}">Manage Category</a>
               </div>
            </div>
            <!-- end page title -->
         </div>
      </div>
      <!-- end row -->
      <!--mail-Compose-contant-start-->
      @php
function categoryTree($parent_id = 0, $sub_mark = ''){

    $query =  DB::table('category')->where('parent_id','=', $parent_id)->get();
   
    if(count($query) > 0){
        foreach($query as $value){
            echo '<option value="'.$value->cat_id.'">'.$sub_mark.$value->cat_name.'</option>';
            categoryTree($value->cat_id, $sub_mark.'---');
        }
    }
}
@endphp

      <div class="row account-contant">
         <div class="col-12">
            <div class="card card-statistics">
               <div class="card-body p-0">
                  <!-- <div class="row no-gutters"> -->
                  <div class="page-account-form">
                     <div class="form-titel border-bottom p-3">
                        <h5 class="mb-0 py-2">Add Category</h5>
                     </div>
                     <div class="p-3">
                        <form role="form" method="POST" enctype="multipart/form-data" action="{{ route('createCategory') }}">
                           @csrf

                           <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Category Name<span style="color:#ff0000">*</span></label>
                                       <input class="form-control" value="{{ old('category_name') }}" name="category_name" placeholder="Enter Category Name" type="text" required>
                                       @error('category_name')
                                       <p class="text-danger"><small>{{ $message }}</small></p>
                                       @enderror
                                 </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Parent Category</label>
                                    <select name="parent_id" class="form-control  selectpicker "  data-show-subtext="true" data-live-search="true">
                                       <option value="">Please Select</option>
                                       @php
                                          echo categoryTree();
                                       @endphp
                                    </select>
                                 </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Category Order</label>
                                    <input class="form-control" name="cat_order"  placeholder="Enter Category Order" value="{{  old('cat_order') }}" type="text">
                                 </div>
                              </div>
                              
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Category Name HTML</label>
                                    <input class="form-control" name="cat_html"  placeholder="Enter Category HTML Name" value="{{  old('cat_html') }}" type="text">
                                 </div>
                              </div>
                              
                              
                              
                           </div>
                           </div>

                           <div class="row">
                                 <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group">
                                          <label>Sub Title</label>
                                          <input class="form-control" value="{{ old('subtitle') }}" name="subtitle" placeholder="Enter Sub Title" type="text">
                                    </div>
                                 </div>
                                 <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group">
                                          <label>Alt Tag</label>
                                          <input class="form-control" value="{{ old('alt_tag') }}" name="alt_tag" placeholder="Enter Alt Tag" type="text">
                                    </div>
                                 </div>
                              </div>

                           <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Catlog Image</label>
                                    <input class="form-control" name="category_image" type="file">
                                    @error('category_image')
                                    <p class="text-danger"><small>{{ $message }}</small></p>
                                    @enderror
                                 </div>
                              </div>

                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Banner Image</label>
                                    <input class="form-control" name="banner_image" type="file">
                                    @error('banner_image')
                                    <p class="text-danger"><small>{{ $message }}</small></p>
                                    @enderror
                                 </div>
                              </div>
                           </div>

                           <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                              <div class="form-group">
                              <label>Description</label>
                              <textarea  id="desc" class="ckeditor form-control" name="desc" cols="50" rows="15" style="width:100%;px; height:300px;" mce_editable="true">
                              </textarea>
                              </div>
                            </div>
                           </div>

                           <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                              <div class="form-group">
                              <label>Rubric Field</label>
                              <textarea  id="rubric_field" class="ckeditor form-control" name="rubric_field" cols="50" rows="15" style="width:100%;px; height:300px;" mce_editable="true">
                              </textarea>
                              </div>
                            </div>
                           </div>

                           <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                              <div class="form-group">
                              <label>FAQS</label>
                              <textarea  id="faq" class="ckeditor form-control" name="faq" cols="50" rows="15" style="width:100%;px; height:300px;" mce_editable="true">
                              </textarea>
                              </div>
                            </div>
                           </div>

                           <div class="form-titel border-bottom p-3">
                              <h2 class="mb-0 py-2">SEO Feilds</h2>
                           </div>
                           <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Meta Title</label>
                                    <input class="form-control" value="{{ old('meta_title') }}"  placeholder="Enter Meta Title" name="meta_title" type="text">
                                 </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Meta keyword</label>
                                    <input class="form-control" value="{{ old('meta_keyword') }}" name="meta_keyword" placeholder="Enter Keyword" type="text">
                                 </div>
                              </div>
                           </div>

                           <div class="row">
                              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Meta Description</label>
                                    <textarea class="form-control"  name="meta_desc" cols="50" rows="15" style="width:100%;px; height:300px;" mce_editable="true"></textarea>
                                 </div>
                              </div>
                           </div>
                           <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="text-left">
                                    <button type="submit" id="submit" class="btn btn-dark text-white my-4">Add</button>
                                    <a href="{{ route('category') }}"  class="btn btn-danger my-4">Cancel</a>
                                 </div>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>
                  <!-- </div> -->
               </div>
            </div>
         </div>
      </div>
      <!--mail-Compose-contant-end-->
   </div>
   <!-- end container-fluid -->
</div>
<!-- end app-main -->
</div>
<!-- end app-container -->
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

   <script type="text/javascript">

      $(document).ready(function () {

            var editorOptions = {
            allowedContent: true,
            extraAllowedContent: 'div(*)', // Allow div elements
            // Add additional allowed elements or classes by separating them with commas
            extraAllowedContent: 'div(col-md-*,container-fluid,row)',
         };

         var rubric_field = CKEDITOR.replace('rubric_field', editorOptions);
         var faq = CKEDITOR.replace('faq', editorOptions);
         var desc = CKEDITOR.replace('desc', editorOptions);
      });

   </script>
@endsection