@extends('admin.layout.main')
@section('title', $header['title'])
  
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 align-items-center d-flex breadcrumb-style">
              <h1 class="m-0">{{ $header['title'] }}</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{  route('admin.dashboard') }}">@lang('product.dashboard') </a></li>
                <li class="breadcrumb-item"><a href="{{ route('product.index') }}">@lang('product.moduleHeading') </a></li>
                <li class="breadcrumb-item active">@lang('product.add')</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 pt-3 px-3 w-100">
              <form action="{{route('product.store')}}" id="dataForm" class="form row mb-0 validate" enctype="multipart/form-data" method="post">
                <div class="discount my-2">
                  <h5>Product Information</h5>
                </div>

                  @csrf
                <div class="col-md-6">
                  <!-- <div class="form-item"> -->
                  <div class="form-floating">
                    <!-- <div class="form-item select after-drp">
                        <select id="SelExample" class="select-text height_drp" name="category_id" required>
                            <option value="">Select Category</option>
                            @foreach($parentCategories as $category)                                
                                <optgroup class="level_0" value="{{$category['id']}}" label="@if($category['parent_category_name'] != "") {{$category['parent_category_name']}} >> @endif {{$category['name']}}">
                                @if(!empty($category['child_category']))
                                    @foreach($category['child_category'] as $childCategory)
                                        @if($childCategory['is_parent']==0)
                                            <option class="level_1" value="{{ @$childCategory['id'] }}">{{ucwords(@$childCategory['name'])}}</option>
                                        @endif
                                    @endforeach                     
                                @endif
                                </optgroup>
                            @endforeach
                        </select>
                      <label class="select-label">Select Category <span class="req-star">*</span></label>
                    </div> -->
                    <div class="select top-space-rem after-drp form-item form-float-style rem-scrl ">
                        <!--<select id="mySelect" class="select2 form-control" style="width:400px;"></select>-->
                        <select data-live-search="true" class="selectpicker select-text is-valid" name="category_id" id="category_id" required>
                             <option value="">Select Category</option> 
                            @foreach($parentCategories as $category)
                            <option value="{{$category['id']}}" disabled=""> @if($category['parent_category_name'] != "") {{$category['parent_category_name']}} >> @endif {{$category['name']}}</option>
                                
                                @if(!empty($category['child_category']))
                                
                                @foreach($category['child_category'] as $childCategory)
                                
                                    @if($childCategory['is_parent']==0)
                                            
                                        <option class="level_1" value="{{ @$childCategory['id'] }}">{{ucwords(@$childCategory['name'])}}</option>
                                            
                                              
                                        @endif
                                       
                                    @endforeach                     
                                    
                                @endif
                            </optgroup>
                            @endforeach
                         

                        </select>
                        <label class="select-label searchable-drp">Select Category <span class="req-star">*</span></label>
                    </div>
                  </div>
                  <!-- </div> -->
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input name="sort_order" type="number" id="sort" autocomplete="off" required value=""
                      onkeypress="return isNumber(event)">
                    <label for="sort">Sort Order <span class="req-star">*</span></label>
                  </div>
                </div>


                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input name="product_name" type="text" id="product_name" autocomplete="off" required value="">
                    <label for="product_name">Product Name <span class="req-star">*</span></label>
                  </div>
                </div>
                <!-- <div class="col-md-6">
                  <div class="form-floating">
                    <div class="form-item select after-drp">
                        <select class="select-text height_drp" name="gst" id="gst">
                       
                      </select>
                      <label class="select-label"> </label>
                    </div>
                  </div>
                </div> -->
                <div class="col-md-6">
                      <!-- <div class="form-item"> -->
                      <div class="form-item form-float-style serach-rem">
                        <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" id="gst" name="gst" class="selectpicker select-text height_drp is-valid" required>
                                    <option value="">Select GST</option>
                                @foreach($gstPercent AS $key=>$gst)
                                    <option value="{{$key}}">{{$gst}}</option>
                                @endforeach
                            </select>
                          <label  class="select-label searchable-drp">GST <span class="req-star">*</span></label>

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

                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input name="product_code" type="text" id="product_code" autocomplete="off" required value="">
                    <label for="product_code">Product Code <span class="req-star">*</span></label>
                  </div>
                </div>
                <!-- <div class="col-md-6">
                  <div class="form-floating">
                    <div class="select after-drp">
                        <select name="status" class="select-text height_drp">
                        
                      </select>
                      <label class="select-label">Status</label>
                    </div>
                  </div>
                </div> -->

                <div class="col-md-6">
                      <!-- <div class="form-item"> -->
                      <div class="form-item form-float-style serach-rem">
                        <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" id="SelExample" name="status" class="selectpicker select-text height_drp is-valid" required>
                                <option value="1" selected>Active</option>
                                <option value="0">In-Active</option>
                            </select>
                          <label  class="select-label searchable-drp">Status</label>

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


                <!-- Content Wrapper. Contains page content -->
                <div class="editable mb-4">
                  <label for="">Product Description</label>
                  <textarea name="description"></textarea>
                </div>


                <div class="col-md-6">
                  <div class="form-item form-float-style">
                      <input type="text" name="video_link" id="ytlink" autocomplete="off" value="">
                    <label for="ytlink">Product Installation Video Link <i class="italic-form">(Only YouTube
                        Link)</i></label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                      <input type="text" name="pdf_link" id="pdflink" autocomplete="off" value="">
                    <label for="pdflink">Product Installation PDF Link</label>
                  </div>
                </div>



                <div class="filter-form main-form-checkbox sub-check filter-check">
                  <div class="form-check form-checkbox-list">
                      <input class="form-check-input" type="checkbox" name="is_drawer_system" id="flexCheckDefault1">
                    <label class="form-check-label" for="flexCheckDefault1">
                      Is drawer system connector?
                    </label>
                  </div>
                </div>
                <div class="filter-form main-form-checkbox sub-check filter-check">
                  <div class="form-check form-checkbox-list">
                      <input class="form-check-input" type="checkbox" name="send_notification" id="flexCheckDefault2">
                    <label class="form-check-label" for="flexCheckDefault2">
                      Do You Want to Send Notification
                    </label>
                  </div>
                </div>
                <div class="filter-form main-form-checkbox sub-check filter-check">
                  <div class="form-check form-checkbox-list">
                      <input class="form-check-input" type="checkbox" name="hot_products" id="flexCheckDefault3">
                    <label class="form-check-label" for="flexCheckDefault3">
                      Hot Products
                    </label>
                  </div>
                </div>


                <div class="brdr-btm pt-3">
                  <div class="discount">
                    <h5>Product Images</h5>
                  </div>

                  <div class="col-md-12 pl-0">
                    <div class="col-md-6 pl-0">
                      <div class="form-item form-float-style mb-0">
                        <input name="product_image" type="file" id="file" class="file-upload" autocomplete="off"
                          required>
                        <label for="file">Upload Product Image <span class="req-star">*</span></label>

                      </div>
                      <p class="upload-img-des mb-0">These images are visible in the product details page gallery.
                        Support jpg, jpeg, png files Use Maximum size of 2 MB sizes images for better
                        quality. But try to keep file size low as it'll increase page load time.
                      </p>
                    </div>
                  </div>
                </div>

                <div class=" brdr-btm pt-3">
                  <div class="col-md-12 row">
                    <div class="discount">
                      <h5>Product Specifications</h5>
                    </div>


                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" name="box_weight" id="boxweight" autocomplete="off" value="" />
                        <label for="boxweight">Box Weight
                        </label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" name="extra_info" id="productinfo" autocomplete="off" value="">
                        <label for="productinfo">Product Extra Info.</label>
                      </div>
                    </div>



                    <div class="col-md-6">
                      <div class="form-item form-float-style mb-0">
                          <input type="text" name="packing_detail" id="Packingdet" autocomplete="off" value="">
                        <label for="Packingdet">Packing Details
                        </label>
                      </div>
                    </div>
                    <!-- <div class="col-md-6">
                      <div class="form-floating">
                        <div class="form-item select after-drp">
                            <select class="select-text height_drp" name="price_type">
                            
                          </select>
                          <label class="select-label"></label>
                        </div>
                      </div>
                    </div> -->
                    <div class="col-md-6">
                        <!-- <div class="form-item"> -->
                        <div class="form-item form-float-style serach-rem">
                          <div class="select top-space-rem after-drp form-float-style ">
                              <select data-live-search="true" id="SelExample" name="price_type" class="selectpicker select-text height_drp is-valid" required>
                                  <option value="">Select Price Type</option>
                                @foreach($priceTypes as $price_key=>$price_type)
                                    <option value="{{$price_key}}">{{$price_type}}</option>
                                @endforeach
                              </select>
                            <label  class="select-label searchable-drp">Product Price Type <span class="req-star">*</span></label>

                          </div>                        
                        </div>
                        <!-- </div> -->
                    </div>
                  </div>
                </div>
                <div class=" brdr-btm pt-3">
                  <div class="col-md-12 row">
                    <div class="discount">
                      <h5>Product Visible For</h5>
                    </div>
                  <div class="main-filter">
                    <div class="filter-form  sub-check filter-check">
                      <div class="form-check form-checkbox-list">
                          <input class="form-check-input" type="checkbox" name="dealer" id="flexCheckDefault4" checked>
                        <label class="form-check-label" for="flexCheckDefault14">
                          Dealer
                        </label>
                      </div>
                    </div>
                    <div class="filter-form  sub-check filter-check">
                      <div class="form-check form-checkbox-list">
                          <input class="form-check-input" type="checkbox" name="exclusive_dealer" id="flexCheckDefault5" checked>
                        <label class="form-check-label" for="flexCheckDefault5">
                          Exclusive Dealer
                        </label>
                      </div>
                    </div>
                    <div class="filter-form  sub-check filter-check">
                      <div class="form-check form-checkbox-list">
                          <input class="form-check-input" type="checkbox" name="channel_partner" id="flexCheckDefault6" checked>
                        <label class="form-check-label" for="flexCheckDefault6">
                          Channel Partner
                        </label>
                      </div>
                    </div>
                    <div class="filter-form  sub-check filter-check">
                      <div class="form-check form-checkbox-list">
                          <input class="form-check-input" type="checkbox" name="distributor" id="flexCheckDefault7" checked>
                        <label class="form-check-label" for="flexCheckDefault7">
                          Distributor
                        </label>
                      </div>
                    </div>
                    <div class="filter-form  sub-check filter-check">
                      <div class="form-check form-checkbox-list">
                          <input class="form-check-input" type="checkbox" name="contractor" id="flexCheckDefault8" checked>
                        <label class="form-check-label" for="flexCheckDefault8">
                          Contractor
                        </label>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>

                <div class="discount pt-2">
                  <h3 class="mb-3">SEO Meta Tags</h3>
                  <div class="col-md-12 row p-0">
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" id="metatitle" name="meta_title" autocomplete="off" value="">
                        <label for="metatitle">Meta Title</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" id="slug" name="slug_url" autocomplete="off" value="">
                        <label for="slug">Slug URL</label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-12 row p-0">
                    <div class="col-md-6">
                      <div class="form-item form-float-style mb-3">
                          <textarea type="text" id="comment" name="meta_description" autocomplete="off" value=""></textarea>
                        <label for="comment">Meta Description</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" id="keyword" name="keywords" autocomplete="off" value="">
                        <label for="keyword">Keywords</label>
                      </div>
                    </div>
                  </div>

                </div>

                <div class="cards-btn">
                  <button type="submit" id="disBtn" class="btn btn-success form-btn-success">Submit</button>
                  <a href="{{ route('product.index') }}" class="btn btn-danger form-btn-danger">Cancel</a>
                </div>
              </form>
            </div>



          </div>
          <!-- /.row -->
        </div>
        <!--/. container-fluid -->
      </section>
  @endsection 
  @section('js')
  <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
  <!-- Page specific script -->
  <script>
    // valid in input materila js

    const inputs = document.querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("blur", (event) => {
        if (event.target.value) {
          input.classList.add("is-valid");
        } else {
          input.classList.remove("is-valid");
        }
      });
    });

    const textareas = document.querySelectorAll("textarea");

    textareas.forEach((textarea) => {
      textarea.addEventListener("blur", (event) => {
        if (event.target.value) {
          textarea.classList.add("is-valid");
        } else {
          textarea.classList.remove("is-valid");
        }
      });
    });
    // //////

    CKEDITOR.replace('description');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });


    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {
      //jquery Form validation
      $('#dataForm').validate({
        rules: {
          category_id:{
            required: true,
            // remote: {
            //     url: "{{route('admin.product.checkExist')}}",
            //     type: "post",
            //     data: {
            //       category_id: function() {
            //         return $("#category_id").val();
            //       },
            //       product_code: function() {
            //         return $("#product_code").val();
            //       },
            //       "_token": '{{ csrf_token() }}'
            //     }
            //   }  
          },
          product_name: {
            required: true,
            /*remote: {
                url: "{{route('admin.product.checkExist')}}",
                type: "post",
                data: {
                  product_name: function() {
                    return $("#product_name").val();
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }*/
            //lettersonly: true
          },
          sort_order: {
            required: true,
            digits: true
          },
          gst: {
            required: true
          },
          product_image: {
            required: true,
            extension: "jpg|jpeg|png",
            maxsize: 2000000
          },
          product_code: {
            required: true,
            remote: {
                url: "{{route('admin.product.checkExist')}}",
                type: "post",
                data: {
                  product_code: function() {
                    return $("#product_code").val();
                  },
                  category_id: function() {
                    return $("#category_id").val();
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }
          },
          // box_weight:{
          //     required: true
          // },
          price_type: {
              required: true
          }
        },


        messages: {
          category_id: {
            required: "Please select Category"
            // remote: "Category already exist with same product code"
          },
          product_name: {
            required: "Please enter a Product Name",
            //remote: "Product name already exist"
          },
          sort_order: {
            required: "Please enter a Sort Order"
          },
          gst: {
            required: "Please select GST value"
          },
          product_image: {
            required: "Please Upload Product Image",
            extension: "Please select image format must be .jpg, .jpeg or .png",
            maxsize: "Please upload image size less than 2MB"

          },
          product_code: {
            required: "Please enter a Product Code",
            // remote: "Product Code already exist"
            remote:"Product code already exist with same category"
          },
          // box_weight:{
          //     required: "Please enter Box Weight"
          // },
          price_type: {
            required: "Please select Price Type"
          }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) { 
              $("#disBtn").attr("disabled", true);
              form.submit();
        }
      });
    });



    // Check all fields on submit
    document.addEventListener('submit', function (event) {

      // Only run on forms flagged for validation
      if (!event.target.classList.contains('validate')) return;

      // Get all of the form elements
      var fields = event.target.elements;

      // Validate each field
      // Store the first field with an error to a variable so we can bring it into focus later
      var error, hasErrors;
      for (var i = 0; i < fields.length; i++) {
        error = hasError(fields[i]);
        if (error) {
          showError(fields[i], error);
          if (!hasErrors) {
            hasErrors = fields[i];
          }
        }
      }

      // If there are errrors, don't submit form and focus on first element with error
      if (hasErrors) {
        event.preventDefault();
        hasErrors.focus();
      }

      // Otherwise, let the form submit normally
      // You could also bolt in an Ajax form submit process here

    }, false);
    
   
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

@append