@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 d-flex breadcrumb-style">
              <h1 class="m-0">{{ $header['title'] }}</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="dashboard.html">@lang('user.dashboard') </a></li>
                <li class="breadcrumb-item"><a href="{{ route('user.index') }}">@lang('user.moduleHeading')</a></li>
                <li class="breadcrumb-item active">@lang('user.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 method="post" action="{{route('user.update',$userDetail['id'])}}" id="dataForm" class="form row mb-0 validate" enctype="multipart/form-data">
                    @csrf
                    
                     @method('PUT')
                     <input type="hidden" name="app_user_id" id="app_user_id" value="{{$userDetail['id']}}" />
                     <input type="hidden" name="app_user_address_id" id="app_user_address_id" value="{{$userDetail['app_user_address_id']}}" />
                    <div class="brdr-btm row">
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="firmname" name="firm" class="is-valid" autocomplete="off" required value="{{$userDetail['firm']}}">
                                <label for="firmname">@lang('user.firmName') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="ownername" name="owner_name" class="is-valid" autocomplete="off" required value="{{$userDetail['owner_name']}}">
                                <label for="ownername">@lang('user.ownerName') <span class="req-star">*</span></label>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <!-- <div class="form-item"> -->
                           
                            <div class="form-floating 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="slect_finish" name="user_type" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option @if($userDetail['user_type']=='dealer') selected="selected" @endif value="dealer">Dealer</option>
                                                        <option @if($userDetail['user_type']=='exclusive_dealer') selected="selected" @endif value="exclusive_dealer">Exclusive Dealer</option>
                                                        <option @if($userDetail['user_type']=='channel_partner') selected="selected" @endif value="channel_partner">Channel Partner</option>
                                                        <option @if($userDetail['user_type']=='distributor') selected="selected" @endif value="distributor">Distributor</option>
                                                        <option @if($userDetail['user_type']=='contractor') selected="selected" @endif value="contractor">Contractor</option>
                                                    </select>
                                                    <label class="select-label searchable-drp">@lang('user.userType')</label>
                                                  </div>                        
                                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="file" id="upload-profile" class="is-valid" name="profile_image" class="file-upload" autocomplete="off">
                                <label for="upload-profile">@lang('user.uploadProfileImage')</label>
                                <!-- {{$userDetail['profile_image']}} -->
                                @if($userDetail['profile_image'] != "")
                                    <div id='profile_image_section'>
                                        <img src="{{$userDetail['profile_image']}}" id='user_profile_image' width="150" height="150" class="img_prev" />
                                        <!--<a href="javascript:void(0);" onclick="removeProfileImage()">Remove Image</a>-->
                                        <input type="hidden" id="old_profile_image" name="old_profile_image" value="{{$userDetail['profile_image']}}"/>
                                    </div>
                                @endif
                            </div>

                        </div>


                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input readonly="" type="text" id="mobileno" name="mobile" class="is-valid" maxlength="10" autocomplete="off" required value="{{$userDetail['mobile']}}"  onkeypress="return isNumber(event)">
                                <label for="mobileno">@lang('user.mobileNumber') <span class="req-star">*</span></label>
                                @error('mobile')
                                    <span id="mobileno-error" class="error invalid-feedback">{{ $message }}</span>                                        
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="file" id="upload-gst-cert" class="is-valid" name="gst_certificate" class="file-upload" autocomplete="off">
                                <label for="upload-gst-cert">@lang('user.uploadGSTCertification')</label>
                                @if($userDetail['gst_certificate'] != "")
                                    <img src="{{$userDetail['gst_certificate']}}" width="150" height="150" class="img_prev" />
                                    <input type="hidden" id="old_gst_certificate" name="old_gst_certificate" value="{{$userDetail['gst_certificate']}}"/>
                                @endif
                            </div>

                        </div>


                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="email" value="{{$userDetail['email']}}" id="email-add-user" class="is-valid" name="email" autocomplete="off">
                                <label for="email-add-user">@lang('user.emailAddress')</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-item form-float-style generator">
                                <input type="hidden" id="password" value="{{$userDetail['password']}}">
                                <input type="text" id="genpass" class="is-valid" name="password" autocomplete="off">
                                <label for="genpass">@lang('user.generatePassword')</label>
                                <button type="button" class="pass-gen-btn" id="genp">@lang('user.generate')</button>
                                <button type="button" class="copy-pass-btn" id="btncp">@lang('user.copy')</button>
                            </div>
                            <!-- <label>Leave blank if not want to change password</label> -->
                        </div>

                        <div class="col-md-6">
                           
                            <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" id="slect_finish" name="status" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option @if($userDetail['status']=='1') selected="selected" @endif value="1" selected="">@lang('user.active')</option>
                                                        <option @if($userDetail['status']=='0') selected="selected" @endif value="0">@lang('user.inActive')</option>
                                                    </select>
                                                    <label class="select-label searchable-drp">@lang('user.status')</label>
                                                  </div>                        
                                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row brdr-btm mt-3 mb-3">
                        <div class="discount">
                            <h5>@lang('user.addressInformation')</h5>
                        </div>
                        <div class="col-md-12">
                            <div class="form-item form-float-style mb-2s">
                                <input type="text" id="setting-search-add" class="autocomplete is-valid" name="searchAddress" value="" id="searchAddress">
                                <label for="setting-search-add">@lang('general.searchAddress')</label>
                                <div id="menu-container"></div>
                            </div>
                            <div class="form-check filter-check sub-check mb-3">                      
                                <input class="form-check-input" type="checkbox" value="" id="searchAddressChecked" name="searchAddress">
                                <label class="form-check-label" for="flexCheckDefault1">
                                @lang('general.enterManualAddress')
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="address" class="is-valid" name="address" autocomplete="off" value="{{$userDetail['address']}}" required readonly>
                                <label for="address">@lang('user.address1') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6" style="display: none;">
                            <div class="form-item form-float-style">
                                <input type="text" id="area" class="is-valid" name="area" autocomplete="off" value="{{$userDetail['country']}}" required readonly>
                                <label for="area">@lang('user.country') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="country" class="is-valid" name="country" autocomplete="off" value="{{$userDetail['country']}}" required readonly>
                                <label for="country">@lang('user.country') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="state" class="is-valid" name="state" autocomplete="off" value="{{$userDetail['state']}}" required readonly>
                                <label for="state">@lang('user.state') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="city" class="is-valid" name="city" autocomplete="off" value="{{$userDetail['city']}}" required readonly>
                                <label for="city">@lang('user.city') <span class="req-star">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-item form-float-style mb-2">
                                <input type="number" id="pincode" class="is-valid" name="pincode" autocomplete="off" value="{{$userDetail['pincode']}}" required readonly>
                                <label for="pincode">@lang('user.pincode') <span class="req-star">*</span></label>
                            </div>
                        </div>


                    </div>

                    <div class="row mb-0">
                        <div class="discount">
                            <h5>@lang('user.additionalInformation')</h5>
                        </div>

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" name="distributor" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option value="0">Select @lang('user.distributor')</option>
                                                        @foreach($distributors as $distributor)
                                                        <option @if($userDetail['distributor']==$distributor['id']) selected="selected" @endif value="{{$distributor['id']}}">{{$distributor['owner_name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label class="select-label searchable-drp">@lang('user.distributor')</label>
                                                  </div>                        
                                                </div>
                                </div>
                                <!-- </div> -->
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating 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" name="ref_distributor" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option value="0">Select @lang('user.refDistributor')</option>
                                                        @foreach($distributors as $distributor)
                                                        <option @if($userDetail['ref_distributor']==$distributor['id']) selected="selected" @endif value="{{$distributor['id']}}">{{$distributor['owner_name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label class="select-label searchable-drp">@lang('user.refDistributor')</label>
                                                  </div>                        
                                                </div>
                                </div>
                                <!-- </div> -->
                            </div>
                        </div>

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="form-floating 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" name="ref_dealer" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option value="0">Select @lang('user.refDealer')</option>
                                                        @foreach($dealers as $dealer)
                                                            <option @if($userDetail['ref_dealer']==$dealer['id']) selected="selected" @endif value="{{$dealer['id']}}">{{$dealer['owner_name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label class="select-label searchable-drp">@lang('user.refDealer')</label>
                                                  </div>                        
                                                </div>
                                </div>
                                <!-- </div> -->
                            </div>
                            <div class="col-md-6">
                                <div class="form-item form-float-style">
                                    <input type="text" id="uercompweb" class="is-valid" autocomplete="off" name="website" value="{{$userDetail['website']}}">
                                    <label for="uercompweb">@lang('user.companyWebsite')
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="form-item form-float-style">
                                    <input type="text" id="usergstno" class="is-valid" autocomplete="off" name="company_gst_no" value="{{$userDetail['company_gst_no']}}">
                                    <label for="usergstno">@lang('user.companyGSTNumber')</label>
                                    <span style="font-size: 10px; color: #121010; font-style: italic;">Example: 24AAFFG8339R1ZQ</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-item form-float-style">
                                    <input type="text" id="usershopname" class="is-valid" autocomplete="off" name="shop_name" value="{{$userDetail['shop_name']}}">
                                    <label for="usershopname">@lang('user.shopName')</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="form-item form-float-style">
                                    <input type="file" id="upload-comp-cert" class="file-upload is-valid" name="company_certificate" autocomplete="off">
                                    <label for="upload-comp-cert">@lang('user.companyCertificate')</label>
                                </div>
                                @if($userDetail['company_certificate'] != "")
                                    <img src="{{$userDetail['company_certificate']}}" width="150" height="150" />
                                    <input type="hidden" id="old_company_certificate" name="old_company_certificate" value="{{$userDetail['company_certificate']}}"/>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <!-- <div class="form-item"> -->
                                <div class="form-floating">
                                    <div class="form-item form-float-style mb-2">
                                        <input type="text" class="workingCityAutocomplete is-valid" id="working_city" name="working_city" value="{{$userDetail['working_city']}}">
                                        <label class="select-label">@lang('user.workingCity')</label>                                        
                                        <div id="menu-container"></div>
                                    </div>
                                </div>
                                <!-- </div> -->
                            </div>
                        </div>

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="form-item form-float-style mb-2">
                                    <input type="text" id="userpackeg-gst" class="is-valid" autocomplete="off" name="shop_gst_no" value="{{$userDetail['shop_gst_no']}}">
                                    <label for="userpackeg-gst">@lang('user.shopGSTNumber')
                                    </label>
                                    <span style="font-size: 10px; color: #121010; font-style: italic;">Example: 24AAFFG8339R1ZQ</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <div class="form-item form-float-style mb-2">
                                        <input type="text" class="workingCityAutocomplete is-valid" id="working_state" name="working_state" value="{{$userDetail['working_state']}}">
                                        <label class="select-label">@lang('user.workingState')</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="cards-btn mt-3">
                        <button type="submit" id="disBtn" class="btn btn-success form-btn-success">@lang('user.submit')</button>
                        <a href="{{ route('user.index') }}" type="button" class="btn btn-danger form-btn-danger">@lang('user.cancel')</a>
                    </div>
                </form>

            </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>
        //make GST value uppercase
        $('#usergstno').keyup(function(){
            $(this).val($(this).val().toUpperCase());
        });
        $('#userpackeg-gst').keyup(function(){
            $(this).val($(this).val().toUpperCase());
        });
        
        $("#genpass").keyup(function(){
            $("#password").val($().val())
        });

        //on change profile set old_profile_image blank
        $('#upload-profile').change(function(){
            $("#old_profile_image").val('');
        });
        //on change profile set old_gst_certificate blank
        $('#upload-gst-cert').change(function(){
            $("#old_gst_certificate").val('');
        });
        //on change profile set old_company_certificate blank
        $('#upload-comp-cert').change(function(){
            $("#old_company_certificate").val('');
        });
        
        //remove profile image
        function removeProfileImage(){
            $('#profile_image_section').hide();
            $("#old_profile_image").val('');
        }
        
        //address readonly event script
        $('#searchAddressChecked').change(function(){
           if(this.checked){
               $("#setting-search-add").attr('readonly',true);
               $("#address").attr('readonly',false);
               $("#country").attr('readonly',false);
               $("#state").attr('readonly',false);
               $("#city").attr('readonly',false);
               $("#pincode").attr('readonly',false);
           }else{
               $("#setting-search-add").attr('readonly',false);
               $("#address").attr('readonly',true);
               $("#country").attr('readonly',true);
               $("#state").attr('readonly',true);
               $("#city").attr('readonly',true);
               $("#pincode").attr('readonly',true);
           }
        });


        // Password Genrate
        let pass = document.getElementById("genpass");
        let btn = document.getElementById("genp");
        let btncp = document.getElementById("btncp");

        function generatePass() {
            let chars =
                "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+[]{}?><";
            let passLength = 20;
            let password = "";

            for (let i = 0; i < passLength; i++)
                password += chars[Math.floor(Math.random() * chars.length)];

            return password;
        }
        btn.addEventListener("click", () => {
    //        pass.value = generatePass();
            $("#genpass").val(generatePass());
            $("#genpass").focus();
            $("#genpass").focusout();
        });

        //To Copy Generated Password
        btncp.addEventListener("click", () => {
            if (pass.value != "") {
                navigator.clipboard.writeText(pass.value);
                pass.classList.add("active");
                setTimeout(() => {
                    pass.classList.remove("active");
                }, 1000);
            }
        });

        jQuery.validator.addMethod("lettersonly", function(value, element) 
        {
          return this.optional(element) || /^[a-z ]+$/i.test(value);
        }, "Letters only please");
        
            // gst validation
        jQuery.validator.addMethod("companyGst", function(value3, element3) {
            var gst_value = value3.toUpperCase();
            //var reg = /^([0-9]{2}[a-zA-Z]{4}([a-zA-Z]{1}|[0-9]{1})[0-9]{4}[a-zA-Z]{1}([a-zA-Z]|[0-9]){3}){0,15}$/;
	    var reg = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;

            if (this.optional(element3)) {
              return true;
            }
            if (gst_value.match(reg)) {
              return true;
            } else {
              return false;
            }

        }, "Please enter a valid Company GST Number");

      jQuery.validator.addMethod("shopGst", function(value3, element3) {
        var gst_value = value3.toUpperCase();
        //var reg = /^([0-9]{2}[a-zA-Z]{4}([a-zA-Z]{1}|[0-9]{1})[0-9]{4}[a-zA-Z]{1}([a-zA-Z]|[0-9]){3}){0,15}$/;
        var reg = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;
        if (this.optional(element3)) {
          return true;
        }
        if (gst_value.match(reg)) {
          return true;
        } else {
          return false;
        }

      }, "Please enter a valid Shop GST Number");
  
        $.validator.addMethod("email_regex", function(value, element, regexpr) {          
            return this.optional(element) || regexpr.test(value);
        }, "Please enter a valid Email Address.");

        $.validator.addMethod("website_regex", function(value, element, regexpr) {          
            return this.optional(element) || regexpr.test(value);
        }, "Please enter a valid website.");

        $.validator.addMethod("validateUserMobile", function(value, element)
        {
            var data = { 
                    "_token": '{{ csrf_token() }}', 
                    "mobile" : value
                },
                eReport = ''; //error report

                $.ajax(
                {
                    type: "POST",
                    url: "{{route('admin.user.checkUser')}}",
                    dataType: "json",
                    data: data,
                    success: function(data)
                    {
                        //console.log(data.status);
                        if (data !== 'true')
                        {
                          return false;
                        }
                        else
                        {
                           return true;
                        }
                    },
                    error: function(xhr, textStatus, errorThrown)
                    {
                        //console.log('ajax loading error... ... '+textStatus);
                        return false;
                    }
                });

               // return r;

        }, 'already taken');

        $(function () {        
          //jquery Form validation
          $('#dataForm').validate({
              onkeyup: false, //turn off auto validate whilst typing
            rules: {
              firm: {
                required: true,
                noSpace:true
                // lettersonly: true
              },
              owner_name: {
                required: true,
                // lettersonly: true
              },
              mobile: {
                required: true,
                digits: true,
                min:10,
                remote: {
                    url: "{{route('admin.user.checkUser')}}",
                    type: "post",
                    data: {
                      mobile: function() {
                        return $("#mobileno").val();
                      },
                      app_user_id: function() {
                        return $("#app_user_id").val();
                      },                      
                      "_token": '{{ csrf_token() }}'
                    }
                  }
                //validateUserMobile: true
              },
              email: {
                required: false,
                email: true,
                email_regex: /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i,
                remote: {
                    url: "{{route('admin.user.checkUser')}}",
                    type: "post",
                    data: {
                      email: function() {
                        return $("#email-add-user").val();
                      },
                      app_user_id: function() {
                        return $("#app_user_id").val();
                      }, 
                      "_token": '{{ csrf_token() }}'
                    }
                  }

              },
              profile_image: {            
                extension: "jpg|jpeg|png",
                maxsize: 2000000

              },
              company_gst_no:{
                  companyGst: true,
              },
              shop_gst_no:{
                  shopGst: true,
              },
              gst_certificate: {            
                extension: "jpg|jpeg|png",
                maxsize: 2000000

              },
              company_certificate: {            
                extension: "jpg|jpeg|png",
                maxsize: 2000000

              },
              website: {
                  website_regex: /^(http|https)?:\/\/[a-zA-Z0-9-\.]+\.[a-z]{2,4}/
              }
              // "mail|smtp|port": {
              //   required: true,
              //   digits: true
              // }
            },


            messages: {
              firm: {
                required: "Please enter a Firm Name"

              },
              owner_name: {
                required: "Please enter an Owner Name"
              },
              mobile: {
                required: "Please enter a Mobile Number",
                min: "Please enter valid Mobile Number",
                remote: "Mobile number is already taken.",
               // validateUserMobile: jQuery.validator.format("Mobile number is already taken.")
              },
              email: {
                email : "Please enter a valid Email Address",
                remote: "Email address is already taken."
              },
              profile_image: {
                extension: "Please select image format must be .jpg, .jpeg or .png",

                maxsize: "Please upload image size less than 2MB"

              },
              gst_certificate: {
                extension: "Please select image format must be .jpg, .jpeg or .png",

                maxsize: "Please upload image size less than 2MB"

              },
              password: {
                  required: "Please enter a Password"
              },
              address: {
                  required: "Please enter an Address"
              },
              country: {
                  required: "Please enter a Country"
              },
              state: {
                  required: "Please enter a State"
              },
              city: {
                  required: "Please enter a City"
              },
              pincode: {
                  required: "Please enter a Pincode"
              },
              company_certificate: {
                extension: "Please select image format must be .jpg, .jpeg or .png",

                maxsize: "Please upload image size less than 2MB"

              },

            },
            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,event) { 
                var user_pass = $("#password").val();
                var gen_pass = $("#genpass").val();
                if(user_pass == "" && gen_pass == ""){
                    // alert("User register first time so password is required. Please generat password.");
                    var confirm_pass = confirm("Want to continue without generat password? User register first time so password is required to login into application.");
                    if(confirm_pass){
                        $("#disBtn").attr("disabled", true);
                        form.submit();
                    }else{
                        event.preventDefault();
                        return false;
                    }
                }
                $("#disBtn").attr("disabled", true);
                form.submit();
            }
          });
        });

    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);
        });
    });
    </script>

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

@append