@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>Product</h1>
               </div>
               <div class="ml-auto d-flex align-items-center">
                  <a class="btn btn-dark text-white" href="{{ route('product') }}">Manage Product</a>
               </div>
            </div>
         <!-- end page title -->
         </div>
      </div>
      <!-- end row -->

      @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){
                  $s="";
                  echo '<option value="'.$value->cat_id.'" '.$s.' >'.$sub_mark.$value->cat_name.'</option>';
                  categoryTree($value->cat_id, $sub_mark.'---');
               }
            }
         }
      @endphp

      <!--mail-Compose-contant-start-->
      <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 Product</h5>
                     </div>
                  <div class="p-3">
                     <form role="form" method="POST" enctype="multipart/form-data" action="{{ route('createProduct') }}">
                        @csrf

                           <div class="row">

                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Product Name<span style="color:#ff0000">*</span></label>
                                    <input class="form-control" value="{{ old('product_name') }}"  placeholder="Enter Product Name" name="product_name" type="text" required>
                                       @error('product_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>Subtitle</label>
                                    <input class="form-control" placeholder="Enter Sub Title"  name="subtitle" value="{{old('subtitle')}}"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>Model No:</label>
                                    <input class="form-control" placeholder="Enter Model No"  name="model_no" value="{{old('model_no')}}"type="text">
                                 </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group">
                                       <label>Product Sequence:</label>
                                          <input class="form-control" placeholder="Enter Order No"   name="product_order" value="{{old('product_order')}}" type="number">
                                    </div>
                                 </div>

                           </div>


                           <div class="row">

                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Product Category<span style="color:#ff0000">*</span></label>
                                    <select name="product_category" class="form-control  selectpicker "  data-show-subtext="true" data-live-search="true">
                                       <option value="">Please Select</option>
                                                                                </select>
                                 </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" placeholder="Enter Alt Tag"  name="alt_tag" value="{{old('alt_tag')}}"type="text">
                                 </div>
                              </div>
                              <!-- <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Home product Show</label>
                                    <select name="product_home" class="form-control  selectpicker"  data-show-subtext="true" data-live-search="true">
                                       <option value="">Please Select</option>
                                       <option value="1">Yes</option>
                                       <option value="2">No</option>
                                    </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>Catlog Image</label>
                                    <input class="form-control"   name="catlog_image" type="file">
                                       @error('catlog_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>Product Document</label>
                                    <input class="form-control"   name="product_pdf" type="file">
                                       @error('product_pdf')
                                       <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>Features</label>
                                       <textarea  id="features" class="ckeditor form-control" name="features" 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>Salient Features</label>
                                       <textarea  id="salient_features" class="ckeditor form-control" name="salient_features" 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>Short Description</label>
                                       <textarea  id="shrt_desc" class="ckeditor form-control" name="shrt_desc" cols="50" rows="15" style="width:100%;px; height:300px;" mce_editable="true">
                                       </textarea>
                                    </div>
                                 </div>

                                 <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>Drawing</label>
                                    <textarea  id="drawing" class="ckeditor form-control" name="drawing" 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="row">

                              <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                 <div class="form-group">
                                    <label>Product Image<span style="color:#ff0000">*</span></label>
                                       <div class="input-group hdtuto control-group lst increment" >
                                          <input type="file" name="product_image[]" class="myfrm form-control">
                                          <div class="input-group-btn">
                                             <button class="btn btn-success" type="button"><i class="fldemo glyphicon glyphicon-plus"></i>Add</button>
                                          </div>
                                       </div>
                                       <div class="clone hide">
                                          <div class="hdtuto control-group lst input-group" style="margin-top:10px">
                                             <input type="file" name="product_image[]" class="myfrm form-control">
                                             <div class="input-group-btn">
                                                <button class="btn btn-danger" type="button"><i class="fldemo glyphicon glyphicon-remove"></i> Remove</button>
                                             </div>
                                          </div>
                                       </div>
                                 </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 type="text" class="form-control" value="{{ old('meta_title') }}" placeholder="Enter Meta Title" name="meta_title">
                                 </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_keywords') }}"  placeholder="Enter Meta Keywords" name="meta_keywords" 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" value="{{ old('meta_description') }}" name="meta_description" 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('product') }}"  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>

   $(document).ready(function(){

      $(".btn-success").click(function(){
         var lsthmtl = $(".clone").html();
         $(".increment").after(lsthmtl);
      });

      $("body").on("click",".btn-danger",function(){
         $(this).parents(".hdtuto").remove();
      });

      $(".btn-success-3d").click(function(){
         var lsthmtl3d = $(".clone-3d").html();
         $(".increment-3d").after(lsthmtl3d);
      });

      $("body").on("click",".btn-danger",function(){
         $(this).parents(".hdtuto-3d").remove();
      });

   });

</script>

<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 my_desc = CKEDITOR.replace('editor_desc', editorOptions);
         var shrt_desc = CKEDITOR.replace('shrt_desc', editorOptions);
         var extra_desc = CKEDITOR.replace('extra_desc', editorOptions);
         var desc = CKEDITOR.replace('desc', editorOptions);
         var rubric_field = CKEDITOR.replace('rubric_field', editorOptions);
         var faq = CKEDITOR.replace('faq', editorOptions);
         var features = CKEDITOR.replace('features', editorOptions);
         var salient_features = CKEDITOR.replace('salient_features', editorOptions);
         var drawing = CKEDITOR.replace('drawing', editorOptions);
      });

   </script>

@endsection