@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">@lang('user.addUser')</h1>
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@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.add')</li>
                </ol>
            </div><!-- /.col -->

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

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
            <div class="card pb-4 pt-3 px-3 w-100">
                <form method="post" action="{{route('user.store')}}" id="dataForm" class="form row mb-0 validate" enctype="multipart/form-data">
                    @csrf
                    <div class="brdr-btm row">
                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="firmname" name="firm" autocomplete="off" required value="{{old('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" autocomplete="off" required value="{{old('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">
                                <div class="select after-drp">
                                    <select class="select-text height_drp" name="user_type" required>
                                        
                                    </select>
                                    <label class="select-label"></label>
                                </div>
                            </div> -->
                            <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="user_type" class="order-td-input selectpicker select-text height_drp is-valid">
                                                        <option value="dealer">Dealer</option>
                                                        <option value="exclusive_dealer">Exclusive Dealer</option>
                                                        <option value="channel_partner">Channel Partner</option>
                                                        <option value="distributor">Distributor</option>
                                                        <option 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" name="profile_image" class="file-upload" autocomplete="off">
                                <label for="upload-profile">@lang('user.uploadProfileImage')</label>
                            </div>

                        </div>


                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="text" id="mobileno" name="mobile" maxlength="10" autocomplete="off" required value="{{old('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" name="gst_certificate" class="file-upload" autocomplete="off">
                                <label for="upload-gst-cert">@lang('user.uploadGSTCertification')</label>
                            </div>

                        </div>


                        <div class="col-md-6">
                            <div class="form-item form-float-style">
                                <input type="email" id="email-add-user" 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="text" id="genpass" name="password" autocomplete="off" required>
                                <label for="genpass">@lang('user.generatePassword') <span class="req-star">*</span></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>
                        </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 value="1" selected="">@lang('user.active')</option>
                                                        <option 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" 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" name="address" autocomplete="off" value="" 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" name="area" autocomplete="off" value="" 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" name="country" autocomplete="off" value="" 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" name="state" autocomplete="off" value="" 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" name="city" autocomplete="off" value="" 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" name="pincode" autocomplete="off" value="" 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-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="ref_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 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-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="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 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-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="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 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" autocomplete="off" name="website" value="">
                                    <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" autocomplete="off" name="company_gst_no" value="">
                                    <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" autocomplete="off" name="shop_name" value="">
                                    <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" name="company_certificate" autocomplete="off">
                                    <label for="upload-comp-cert">@lang('user.companyCertificate')</label>
                                </div>


                            </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" id="working_city" name="working_city" value="">
                                        <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" autocomplete="off" name="shop_gst_no" value="">
                                    <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" id="working_state" name="working_state" value="">
                                        <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());
    });
    
    //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,
            minlength:10,
            remote: {
                url: "{{route('admin.user.checkUser')}}",
                type: "post",
                data: {
                  mobile: function() {
                    return $("#mobileno").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();
                  },
                  "_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",
            minlength: "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) { 
              $("#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