@extends('admin.layout.main')
@section('title', 'Product - Edit')
  
@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">Product - Edit</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Products</a></li>
                <li class="breadcrumb-item active">Edit</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.update',$productDetail['id'])}}" 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
                  @method('PUT')
                  <input type="hidden" value="{{$productDetail['id']}}" name="id" id="product_id" />
                <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  ">
                        <!--<select id="mySelect" class="select2 form-control" style="width:400px;"></select>-->
                        <select data-live-search="true" id="category_id" class="selectpicker select-text is-valid" name="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'] }}" @if($productDetail['category_id']==$childCategory['id']) selected="" @endif>
                                    <!-- <option class="level_1" value="{{ @$childCategory['id'] }}" @if(is_integer(array_search($childCategory['id'], array_column(json_decode($productDetail['productCategory'],true), 'category_id')))) selected="" @endif> -->
                                            {{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" class="is-valid" autocomplete="off" required value="{{$productDetail['sort_order']}}"
                      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" class="is-valid" id="product_name" autocomplete="off" required value="{{$productDetail['name']}}">
                    <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="" 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>
                              @foreach($gstPercent AS $key=>$gst)
                              <option value="{{$key}}" @if($productDetail['gst']==$gst) selected="" @endif>{{$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" class="is-valid" id="product_code" autocomplete="off" required value="{{$productDetail['code']}}">
                    <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 is-valid">
                            
                      </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 @if($productDetail['status']=='1') selected="" @endif value="1">Active</option>
                                <option @if($productDetail['status']=='0') selected="" @endif 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" class="is-valid" id="ytlink" autocomplete="off" value="{{$productDetail['video_link']}}">
                    <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" class="is-valid" id="pdflink" autocomplete="off" value="{{$productDetail['pdf_link']}}">
                    <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" @if($productDetail['is_drawer_system']==1) checked="" @endif 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" @if($productDetail['hot_products']==1) checked="" @endif 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">
                        <label for="file">Upload Product Image</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>
                      @if($productDetail['image'] != "")
                      <div class="col-md-6">
                          <div id='product_image_section' style="float: left">
                              <img src="{{$productDetail['image']}}" id='product_image' width="150" height="150" class="img_prev mt-0" />
                              <!--<a href="javascript:void(0);" onclick="removeProfileImage()">Remove Image</a>-->
                              <input type="hidden" id="old_product_image" name="old_product_image" value="{{$productDetail['image']}}"/>
                          </div>
                      </div>
                        @endif
                  </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" class="is-valid" id="boxweight" autocomplete="off" value="{{$productDetail['box_weight']}}" />
                        <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" class="is-valid" id="productinfo" autocomplete="off" value="{{$productDetail['extra_info']}}">
                        <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" class="is-valid" id="Packingdet" autocomplete="off" value="{{$productDetail['packing_detail']}}">
                        <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" required>
                            
                          </select>
                          <label class="select-label">Product Price Type <span class="req-star">*</span></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>
                                @foreach($priceTypes as $price_key=>$price_type)
                                  <option value="{{$price_key}}" @if($productDetail['price_type'] == $price_key) selected="" @endif >{{$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" @if($productDetail['dealer']==1) checked="" @endif name="dealer" id="flexCheckDefault4">
                        <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" @if($productDetail['exclusive_dealer']==1) checked="" @endif name="exclusive_dealer" id="flexCheckDefault5">
                        <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" @if($productDetail['channel_partner']==1) checked="" @endif name="channel_partner" id="flexCheckDefault6">
                        <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" @if($productDetail['distributor']==1) checked="" @endif name="distributor" id="flexCheckDefault7">
                        <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" @if($productDetail['contractor']==1) checked="" @endif name="contractor" id="flexCheckDefault8">
                        <label class="form-check-label" for="flexCheckDefault8">
                          Contractor
                        </label>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>
                <div class="discount">
                  <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" class="is-valid" name="meta_title" autocomplete="off" value="{{$productDetail['meta_title']}}">
                        <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" class="is-valid" name="slug_url" autocomplete="off" value="{{$productDetail['slug_url']}}">
                        <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="meta_description" name="meta_description" autocomplete="off">{{$productDetail['meta_description']}}</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" class="is-valid" name="keywords" autocomplete="off" value="{{$productDetail['keywords']}}">
                        <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

  
    // //////

    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 () {
      $('*[value=""]').removeClass('is-valid');

      //jquery Form validation
      $('#dataForm').validate({
        rules: {
          category_id:{
            required: true,  
          },
          /*product_name: {
            required: true,
            remote: {
                url: "{{route('admin.product.checkExist')}}",
                type: "post",
                data: {
                  product_name: function() {
                    return $("#product_name").val();
                  },
                  product_id: function(){
                    return $("#product_id").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();
                  },
                  product_id: function(){
                    return $("#product_id").val();  
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }
          },
          box_weight:{
              // required: true
          },
          price_type: {
              required: true
          }
        },


        messages: {
          category_id: {
            required: "Please select Category"
          },
          product_name: {
            required: "Please enter a Product Name",
            //remote: "Product name already exist"
          },
          sort_order: {
            required: "Please enter a Sort Number"
          },
          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 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