@extends('admin.layout.main')
@section('title', $header['title'])
  
@section('content')
      <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('productAttribute.dashboard') </a></li>
                <li class="breadcrumb-item"><a href="{{ route('product-attribute.index',['product_id'=>@$_GET['product_id']]) }}">@lang('productAttribute.moduleHeading') </a></li>
                <li class="breadcrumb-item active">@lang('productAttribute.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-attribute.update',$productAttributeDetail['id'])}}"  id="dataForm" class="form row mb-0 validate" enctype="multipart/form-data" method="post">
                      @csrf
                      <div class="brdr-btm mb-3 product_name_title">
                          <h5 class="p-0 m-0">Product Name : {{$product_data->name}}</h5>
                            
                        </div>
                      @method('PUT')
                      <div class="discount mb-3 pt-3">
                          <input type="hidden" name="id" required id="id" value="" />
                          <input type="hidden" name="product_id" required id="product_id" value="" />
                          <h5>Product Attributes</h5>
                          <div class="row mt-3">
                              <div class="col-md-12">
                                  <div>
                                      <div class="product-data">
                                          <div class="top-part">
                                              <!-- top part -->
                                          </div>
                                          <div class="row">
                                              <div class="col-md-6">
                                                  <div class="form-item form-float-style">
                                                      <input type="text" name="size" class="is-valid" id="prdsize" autocomplete="off" value="{{$productAttributeDetail['size']}}" tabindex="1" />
                                                      <label for="prdsize">Product Size</label>
                                                  </div>
                                                  <div>
                                                      <h6 class="mb-2">Product Dimensions</h6>
                                                      <div class="d-flex justify-content-between">
                                                          <div class="form-item form-float-style product-dimensions">
                                                              <input type="text" name="code" id="code" autocomplete="off" class="is-valid" value="{{$productAttributeDetail['code']}}" tabindex="3">
                                                              <label for="code" class="font-reduce">Code</label>
                                                          </div>
                                                          <div class="form-item form-float-style product-dimensions">
                                                              <input type="text" name="width" id="pwidth" autocomplete="off" class="is-valid" value="{{$productAttributeDetail['width']}}" tabindex="4">
                                                              <label for="pwidth" class="font-reduce">Width</label>
                                                          </div>
                                                          <div class="form-item form-float-style product-dimensions">
                                                              <input type="text" name="depth" id="depth" autocomplete="off" class="is-valid" value="{{$productAttributeDetail['depth']}}" tabindex="5">
                                                              <label for="depth" class="font-reduce">Depth</label>
                                                          </div>
                                                          <div class="form-item form-float-style product-dimensions">
                                                              <input type="text" name="height" id="height" autocomplete="off" class="is-valid" value="{{$productAttributeDetail['height']}}" tabindex="6">
                                                              <label for="height" class="font-reduce">Height</label>
                                                          </div>
                                                          <div class="form-item form-float-style product-dimensions">
                                                              <input type="text" name="dimension" id="mm" autocomplete="off" class="is-valid" value="{{$productAttributeDetail['dimension']}}" tabindex="7">
                                                              <label for="mm" class="font-reduce">MM</label>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <div class="row">
                                                      <div class="col-md-12">
                                                          <h6>Dealer Discount/Price <span class="req-star">*</span></h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <input name="dealer_discount_percent" type="text" tabindex="9" maxlength="4" id="dealer_discount_price10"
                                                                         class="number-in per is-valid" autocomplete="off"   value="{{$productAttributeDetail['dealer_discount_percent']}}"
                                                                         onkeyup="calculateInputPrice(this,'result','0');">
                                                                  <label for="dealer_discount_price10" class="font-reduce">Enter Discount (%)
                                                                  </label>
                                                              </div>
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <input type="number" name="dealer_discount_price" tabindex="10" value="{{$productAttributeDetail['dealer_discount_price']}}" id="result" class="number-in per is-valid" autocomplete="off" readonly
                                                                         onkeypress="return isNumber(event)">
                                                                  <label for="result-blank" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Exclusive Dealer Discount/Price <span class="req-star">*</span></h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <input name="ex_dealer_discount_percent" type="text" tabindex="14" maxlength="4" value="{{$productAttributeDetail['ex_dealer_discount_percent']}}"
                                                                         id="exclusive_dealer_discount10" class="number-in per is-valid" autocomplete="off"
                                                                          value="" onkeyup="calculateInputPrice(this,'ex_dealer_discount','0');">
                                                                  <label for="exclusive_dealer_discount10" class="font-reduce">Enter Discount
                                                                      (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <!-- <div id="result-blank1" class="input-box result"></div> -->
                                                                  <input type="number" name="ex_dealer_discount_price" tabindex="15" id="ex_dealer_discount" class="number-in per is-valid"
                                                                         autocomplete="off" readonly onkeypress="return isNumber(event)" value="{{$productAttributeDetail['ex_dealer_discount_price']}}">
                                                                  <label for="ex_dealer_discount" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Channel Partner Discount/Price <span class="req-star">*</span></h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <input name="channel_partner_discount_percent" type="text" tabindex="19" maxlength="4" id="channel_partner10"
                                                                         autocomplete="off"  class="is-valid" value="{{$productAttributeDetail['channel_partner_discount_percent']}}"
                                                                         onkeyup="calculateInputPrice(this,'chnl_dealer_discount2','0');">
                                                                  <label for="channel_partner10" class="font-reduce">Enter Discount (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <!-- <div id="result-blank1" class="input-box result"></div> -->
                                                                  <input type="number" name="channel_partner_discount_price" tabindex="20" id="chnl_dealer_discount2" class="number-in per is-valid"
                                                                         autocomplete="off" readonly onkeypress="return isNumber(event)" value="{{$productAttributeDetail['channel_partner_discount_price']}}">
                                                                  <label for="chnl_dealer_discount2" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Distributor Discount/Price <span class="req-star">*</span></h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <input name="distributor_discount_percent" type="text" tabindex="24" maxlength="4" id="distributor_discount10"
                                                                         autocomplete="off"  value="{{$productAttributeDetail['distributor_discount_percent']}}"  class="is-valid"
                                                                         onkeyup="calculateInputPrice(this,'dist_dealer_discount3','0');">
                                                                  <label for="distributor_discount10" class="font-reduce">Enter Discount (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dicount-input">
                                                                  <!-- <div id="result-blank1" class="input-box result"></div> -->
                                                                  <input type="number" name="distributor_discount_price" tabindex="25" id="dist_dealer_discount3" class="number-in per is-valid"
                                                                         autocomplete="off" readonly onkeypress="return isNumber(event)" value="{{$productAttributeDetail['distributor_discount_price']}}">
                                                                  <label for="dist_dealer_discount3" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>

                                              </div>
                                              <div class="col-md-6">
                                                  <div class="form-floating">
                                                    <div class="select top-space-rem after-drp form-item form-float-style width-adju-inp">
                                                        <!-- <label for="">xyz</label> -->
                                                        <select data-live-search="true" name="finish[]" class="js-select2  select-text selectpicker select-text height_drp is-valid"  tabindex="2">
                                                            @foreach($finishMasters as $finish)   
                                                                                                                        <option value="{{$finish['id']}}" @if($product_attribute_finish[$matchKey]['product_finish_id'] == $finish['id']) selected @endif >{{$finish['name']}}</option>
                                                            @endforeach
                                                        </select>
                                                        <label class="select-label searchable-drp">Select Finish <span class="req-star">*</span></label>
                                                    </div>  
                                                  </div>
                                                  <div class="form-item form-float-style" style="margin-top: 2.5rem;">
                                                      <input name="mrp" type="number" id="product_mrp10" tabindex="8" class="number-in value-in is-valid" autocomplete="off"  value="{{$productAttributeDetail['mrp']}}" onblur="recalculatediscount();" onkeypress="return isNumber(event)">
                                                      <label for="product_mrp10">Product MRP <span class="req-star">*</span></label>
                                                  </div>
                                                  <div class="row">
                                                      <div class="col-md-12">
                                                          <h6>Dealer Offer/Price</h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style  dealer-offer-price">
                                                                  <input type="number" name="dealer_offer_qty" tabindex="11" class="is-valid" id="dealerr_offer_price1" autocomplete="off" value="{{$productAttributeDetail['dealer_offer_qty']}}">
                                                                  <label for="dealerr_offer_price1" class="font-reduce">Enter Quantity</label>
                                                              </div>
                                                              <div class="form-item form-float-style remove-error dealer-offer-price">
                                                                  <input type="number" name="dealer_offer_discount_percent" tabindex="12" class="is-valid" id="dealer_offer_discount10" autocomplete="off" value="{{$productAttributeDetail['dealer_offer_discount_percent']}}"
                                                                         onkeyup="calculateInputPrice(this,'dealer_offer_price1','0');">
                                                                  <label for="dealer_offer_discount10" class="font-reduce">Enter Discount
                                                                      (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <!-- <div id="result-blank1" class="input-box result"></div> -->
                                                                  <input type="number" name="dealer_offer_price" id="dealer_offer_price1" tabindex="13" class="number-in per is-valid"
                                                                         autocomplete="off" readonly onkeypress="return isNumber(event)" value="{{$productAttributeDetail['dealer_offer_price']}}">
                                                                  <label for="dealer_offer_price1" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Exclusive Dealer Offer/Price</h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="ex_dealer_offer_qty" id="exclusive_dealer_offer1" tabindex="16" class="is-valid" autocomplete="off" value="{{$productAttributeDetail['ex_dealer_offer_qty']}}">
                                                                  <label for="exclusive_dealer_offer1" class="font-reduce">Enter Quantity</label>
                                                              </div>
                                                              <div class="form-item form-float-style remove-error dealer-offer-price">
                                                                  <input type="number" name="ex_dealer_offer_discount_percent" class="is-valid" tabindex="17" id="exclusive_dealer_offer_price10" autocomplete="off"
                                                                         value="{{$productAttributeDetail['ex_dealer_offer_discount_percent']}}" onkeyup="calculateInputPrice(this, 'ex_dealer_offer2', '0');">
                                                                  <label for="exclusive_dealer_offer_price10" class="font-reduce">Enter Discount
                                                                      (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="ex_dealer_offer_price" class="is-valid" tabindex="18" id="ex_dealer_offer2" autocomplete="off" readonly
                                                                         onkeypress="return isNumber(event)" value="{{$productAttributeDetail['ex_dealer_offer_price']}}">
                                                                  <label for="ex_dealer_offer2" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Channel Partner Offer/Price</h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="channel_partner_offer_qty" class="is-valid" tabindex="21" id="channel_partner_offer1" autocomplete="off" value="{{$productAttributeDetail['channel_partner_offer_qty']}}">
                                                                  <label for="channel_partner_offer1" class="font-reduce">Enter Quantity</label>
                                                              </div>
                                                              <div class="form-item form-float-style remove-error dealer-offer-price">
                                                                  <input type="number" name="channel_partner_offer_discount_percent" class="is-valid" tabindex="22" id="channel_partner_offer_price10" autocomplete="off"
                                                                         value="{{$productAttributeDetail['channel_partner_offer_discount_percent']}}" onkeyup="calculateInputPrice(this, 'chnl_dealer_offer3', '0');">
                                                                  <label for="channel_partner_offer_price10" class="font-reduce">Enter Discount
                                                                      (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="channel_partner_offer_price" class="is-valid" tabindex="23" id="chnl_dealer_offer3" autocomplete="off" readonly
                                                                         onkeypress="return isNumber(event)" value="{{$productAttributeDetail['channel_partner_offer_price']}}">
                                                                  <label for="chnl_dealer_offer3" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                      <div class="col-md-12">
                                                          <h6>Distributor Offer/Price</h6>
                                                          <div class="dis-text-field mt-2">
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="distributor_offer_qty" class="is-valid" tabindex="26" id="distributor_offer1" autocomplete="off" value="{{$productAttributeDetail['distributor_offer_qty']}}">
                                                                  <label for="distributor_offer1" class="font-reduce">Enter Quantity</label>
                                                              </div>
                                                              <div class="form-item form-float-style remove-error dealer-offer-price">
                                                                  <input type="number" name="distributor_offer_discount_percent" class="is-valid" tabindex="27" id="distributor_offer_price1" autocomplete="off" value="{{$productAttributeDetail['distributor_offer_discount_percent']}}"
                                                                         onkeyup="calculateInputPrice(this, 'distri_dealer_offer4', '0');">
                                                                  <label for="distributor_offer_price1" class="font-reduce">Enter Discount
                                                                      (%)</label>
                                                              </div>
                                                              <div class="form-item form-float-style dealer-offer-price">
                                                                  <input type="number" name="distributor_offer_price" class="is-valid" tabindex="28" id="distri_dealer_offer4" autocomplete="off" readonly
                                                                         onkeypress="return isNumber(event)" value="{{$productAttributeDetail['distributor_offer_price']}}">
                                                                  <label for="distri_dealer_offer4" class="font-reduce"></label>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div id="TextBoxContainer"></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-attribute.index',['product_id'=>$productAttributeDetail['product_id']])}}' 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 -->
   <!-- Page specific script -->
  <script>
       function calculateInputPrice(e, discount, count) {
      $('#' + discount).val('');
      const priceValue = $("#product_mrp1" + count).val();
      const percent = e.value;
      console.log(priceValue);
      console.log('hii');
      console.log(percent);
      var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
      if (numberRegex.test(percent) && numberRegex.test(priceValue)) {
        console.log('hii');
        const dec = (percent / 100); //its convert 10 into 0.10
        var mult = priceValue * dec; // gives the value for subtract from main value
        var finalValue = priceValue - mult;
        $('#' + discount).val(Math.round(finalValue));
        // var x= parseFloat(finalValue).toFixed(2);

      }



    }

    function recalculatediscount() {
      // alert("hello").
      calculateInputPrice($('#dealer_discount_price10')[0], 'result', '0')
      calculateInputPrice($('#exclusive_dealer_discount10')[0], 'ex_dealer_discount', '0')
      calculateInputPrice($('#channel_partner10')[0], 'chnl_dealer_discount2', '0')
      calculateInputPrice($('#distributor_discount10')[0], 'dist_dealer_discount3', '0')
      calculateInputPrice($('#dealer_offer_discount10')[0], 'dealer_offer_price1', '0')
      // calculateInputPrice($('#exclusive_dealer_offer_price10')[0], 'ex_dealer_offer2','0')
      calculateInputPrice($('#channel_partner_offer_price10')[0], 'chnl_dealer_offer3', '0')
      calculateInputPrice($('#exclusive_dealer_offer_price10')[0], 'ex_dealer_offer2', '0')
      calculateInputPrice($('#distributor_offer_price1')[0], 'distri_dealer_offer4', '0')
    }
  </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('editor1');
    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: {
            product_id: {
                required: true
            },
          product_name: {
            required: true,
            lettersonly: true
          },
          mrp:{
              required: true
            },
            dealer_discount_percent:{
              required: true,
              number:true
            },
            ex_dealer_discount_percent:{
              required: true,
              number:true
            },
            channel_partner_discount_percent:{
              required: true,
              number:true
            },
            distributor_discount_percent:{
              required: true,
              number:true
            },
          sort_order: {
            required: true,
            digits: true
          },
          product_image: {
            required: true,
            extension: "jpg|jpeg",

          },
          product_code: {
            required: true,
          }
        },


        messages: {
          product_id: {
            required: "Please select valid Product"

          },
          product_name: {
            required: "Please enter a Product Name"

          },
          mrp:{
            required: "Please enter a Product MRP"
          },
          dealer_discount_percent:{
            required: "Please enter a Discount"
          },
          ex_dealer_discount_percent:{
            required: "Please enter a Discount"
          },
          channel_partner_discount_percent:{
            required: "Please enter a Discount"
          },
          distributor_discount_percent:{
            required: "Please enter a Discount"
          },
          sort_order: {
            required: "Please enter a Sort Number"
          },
          product_image: {
            required: "Please Upload Product Images",
            extension: "Please select image format must be JPEG or JPG."
          },
          product_code: {
            required: "Please enter a Product Code"
          }
        },
        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 for prodcut finish -->
  <script>
        "use strict";

    $(document).ready(function domReady() {        
        $(".js-select2").select2({
            placeholder: "Product Finish",
            theme: "material"
        });
        
        $(".select2-selection__arrow")
            .addClass("material-icons")
            .html("arrow_drop_down");
    });
  </script>
@append