@extends('admin.layout')
@section('content')
<style type="text/css">
	.required-mark {
		color: red;
	}
	hr {
		margin-left: 15px;
		margin-bottom:-3px;
	}
	.hr-primary {
		border: 1px solid #3c8dbc;
	}
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}
	.my-current	{
		color: #00c0ef;
	}
    table, td, th{
        text-align: center;
    }

    #image_preview ul {
        display: flex;
        flex-direction: column;
        align-items: end;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #image_preview ul li span {
        float: left;
        padding-right: 10px;
        font-size: 10px;
        width: 18px;
        height: 18px;
        background: #7b7b7b;
        opacity: 1;
        margin: 0px 8px 4px 0px;
        text-align: center;
        display: block;
        border-radius: 100%;
        color: #fff;
        font-weight: normal;
        padding: 0;
        line-height: 18px;
    }
    .fglisting ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }
    .fglisting ul li{
        
    }
    .fglisting ul li span {
        padding-left: 8px;
    }
    .fglisting ul li span{

    }
    ._notes div + br, ._notes br {
        display: block;
    }


    ._subject .dropdown-menu {
        box-shadow: -1px 3px 13px 0 rgba(85, 85, 85, 0.52);
        border: 1px solid #b5b5b5;
        width: 100%;
    }
    
/*    CSS added by Dalip on 26-06-2020 for file upload*/
    div#upload-form input[type="file"] {
    position: absolute;
    top: 0;
    opacity: 0;
}

div#upload-form {
    position: relative;
}

div#upload-form label.control-label {
    padding: 6px 12px;
    border: 1px solid #d2d6de;
    width: 100%;
    display: flex;
    pointer-events: none;
        color: #666;
    font-weight: normal;
}
    div#upload-form label.control-label svg {
        margin-right: 5px;
    }

div#image_preview ul li span.close {
    margin: 0 0 0 5px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 12px;
    border-radius: 0;
    background: transparent;
}

div#image_preview {
    margin-top: 2px;
}

div#image_preview ul li a {
    font-size: 11px;
    color: #000;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

div#image_preview ul li {
    display: flex;
        background-color: #3c8dbc;
    border-color: #367fa9;
    padding: 1px 0 1px 4px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: calc(1rem * 0.875);
    position: relative;
    background: #ecf5fc;
    border: solid 1px #c2e0ff;
    padding-left: 4px;
    border-radius: 2px;
    margin-right: 4px;
    margin-bottom: calc(1rem * 0.375);
    color: #000;
    line-height: 1;
    font-size: 11px;
    align-self: center;
    margin: 0 0;
    margin-right: 4px;
    /* margin-bottom: calc(1rem * 0.375); */
    margin: 2px;
}
#image_preview ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: unset;
    margin: 0 -2px;
}
    div#image_preview ul li span.close i::before {
    content: "\00D7";
    font-size: 14px;
    color: #c70303;
        margin-right: 2px;
}
.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}  
.select2-container{
    max-width: 100%;
}
    
/*    CSS added for dropzone uploader by Dalip Sharma 21-09-2020*/
    div#dropzone {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed rgb(0 192 239);
        margin-top: 5px;
        flex-wrap: wrap;
        padding: 0;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dropzone .dz-message {
        text-align: center;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image{
        width: 100px;
        height: auto;
        border-radius: 5px;
        display: flex;
    }
    html .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom:0px;
        margin-top: 5px;
    }
    html .dropzone .dz-preview .dz-details {
        position: static;
        opacity: 1;
        line-height: 1.5;
        padding: 0;
    }
    html .dropzone .dz-preview {
        position: relative;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image img{

        width: 70px;
        height: 70px;
        object-fit: cover;
        display: block;
        margin: 0 auto;

    }
    .dropzone .dz-preview .dz-remove {
        position: absolute;
        top: 5px;
        right: 25px;
        z-index: 99;
        font-size: 0;
        line-height: 1;
    }

    .dropzone .dz-preview .dz-remove:after {
        font-size: 20px;
        content: "\00D7";
        color: #fff;
        background: #f00;
        width: 20px;
        height: 20px;
        display: block;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
    }
    html .dropzone .dz-preview .dz-remove {
        font-size: 0;
    }
    html .dropzone .dz-preview:hover .dz-image img {-webkit-transform: scale(1.05, 1.05);-moz-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);-webkit-filter: blur(0px);filter: blur(0px);transition: all 0.5s ease-in-out;}

    html .dropzone .dz-preview .dz-image img {
        transition: all 0.5s ease-in-out;
        display: block;
        border-radius: 5px;
    }
    div#dropzone.dz-started:after {
        content: "\002B";
        display: block;
        height: 115px;
        font-size: 100px;
        font-weight: 100;
        color: #bbb;
        border: 1px solid #f0f0f0;
        line-height: 70px;
        text-align: center;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 15px 0;
        vertical-align: top;
    }
    .dz-messagebottom{
        display: none;
    }
    div#dropzone.dz-started + .dz-messagebottom{
        display: block;
    }
   html .dropzone .dz-preview .dz-success-mark, html .dropzone .dz-preview .dz-error-mark {
        top: 50px;
       left:78px;
    }

    html .dropzone .dz-preview.dz-error.dz-complete .dz-error-mark g[id="Check-+-Oval-2"] {
        fill: #f00 !important;
    }
    html .dropzone .dz-preview.dz-success.dz-complete .dz-success-mark svg path {
        fill: #1a801a !important;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        border-radius: 5px;
    }
    html .dropzone .dz-preview .dz-success-mark svg, html .dropzone .dz-preview .dz-error-mark svg{
        width: 30px;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        background: transparent;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image img {
        border-radius: 5px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
    }
    html .dropzone .dz-preview .dz-error-message {
        top: 80px!important;
    }
    html .dropzone .dz-preview .dz-error-message{
        left: -4px;
        text-align: center;
    }
    #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
  <section class="content-header">
    <h1> {{ trans('Add Customer') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Add Customer') }}</li>
    </ol>
  </section>
    @php
        $getUserRoleData                = userRoleData();
        $RhysleyCustomers               = explode(",",$getUserRoleData->RhysleyCustomers);
    @endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info"> 
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
              		<div class="">                        
						<div class="row">
							@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
							@endif
							@if(session()->has('error'))
								<div class="alert alert-warning alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
									{{ session()->get('error') }}
								</div>
							@endif
						</div>
                         <div class="box-body">				 	
                        	{!! Form::open(array('url' => route('rhysley-customers.store'), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addRhysleyCustomer', 'enctype'=>'multipart/form-data')) !!}
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                        <a href="{{URL('admin/rhysley-customers')}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                                    </div>
                                </div>
                         	    <div class="row">
                                    <hr class="hr-primary" />
                                    <div class="col-md-2">
                                        <strong style="color: #00c0ef;">Customer Information</strong>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="full_name" class="control-label">{{ trans('Full Name') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="full_name" id="full_name"  class="form-control"  required>
                                            </div>
                                        </div>
                                    </div>               
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="company_name" class="control-label">{{ trans('Company Name') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="company_name" id="company_name"  class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="email_address" class="control-label">{{ trans('Email Address') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="email" name="email_address" id="email_address"  class="form-control"  required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="telephone" class="control-label">{{ trans('Telephone') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="telephone" id="telephone"  class="form-control" oninput="validate(this)" required>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="clearfix"></div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="alternate_mobile" class="control-label">{{ trans('Alternate Mobile No') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="alternate_mobile" oninput="validate(this)" id="alternate_mobile"  class="form-control"  required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="gst_no" class="control-label">{{ trans('GST No') }}</label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="gst_no" id="gst_no" maxlength="15" minlength="15" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="pan_no" class="control-label">{{ trans('Pan No') }}</label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="pan_no" id="pan_no" maxlength="10" minlength="10" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="note" class="control-label">{{ trans('Note') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <textarea name="note" id="note"  class="form-control"  required></textarea>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="clearfix"></div>

                                    <hr class="hr-primary" />
                                    <div class="col-md-2">
                                        <strong style="color: #00c0ef;">Address Information</strong>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_address1" class="control-label">{{ trans('Billing Address') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="billing_address1" id="billing_address1"  class="form-control billing" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_address2" class="control-label">{{ trans('Billing Address2') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="billing_address2" id="billing_address2"  class="form-control billing">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_country_id" class="control-label">{{ trans('Country') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="billing_country_id" id="billing_country_id"  class="form-control billing"  required multiple onchange="get_billing_zones(this.value)">
                                                    <option value="">Select Country</option>
                                                    @foreach($result['Countries'] as $Country)
                                                        <option value="{{$Country->countries_id}}">{{$Country->countries_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_zone_id" class="control-label">{{ trans('Province') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="billing_zone_id" id="billing_zone_id"  class="form-control billing"  required multiple>
                                                    <option value="">Select Province</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_city" class="control-label">{{ trans('Town/City') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="billing_city" id="billing_city"  class="form-control billing"  required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="billing_postal_code" class="control-label">{{ trans('Postal Code') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="billing_postal_code" oninput="validate(this)" id="billing_postal_code"  class="form-control billing"  required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-4">
                                        <div class="form-group">                                                
                                            <div class="col-sm-4 col-md-12">
                                                <label for="same_as" class="control-label">
                                                    <input type="checkbox" autocomplete="off" value="Yes" name="same_as" id="same_as">
                                                    {{ trans('Same as Billing Address') }} 
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_address1" class="control-label">{{ trans('Shiping Address') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="shipping_address1" id="shipping_address1"  class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_address2" class="control-label">{{ trans('Shiping Address2') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="shipping_address2" id="shipping_address2"  class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_country_id" class="control-label">{{ trans('Country') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="shipping_country_id" id="shipping_country_id"  class="form-control"  required multiple onchange="get_shipping_zones(this.value)">
                                                    <option value="">Select Country</option>
                                                    @foreach($result['Countries'] as $Country)
                                                        <option value="{{$Country->countries_id}}">{{$Country->countries_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_zone_id" class="control-label">{{ trans('Province') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="shipping_zone_id" id="shipping_zone_id"  class="form-control"  required multiple>
                                                    <option value="">Select Province</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_city" class="control-label">{{ trans('Town/City') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="shipping_city" id="shipping_city"  class="form-control"  required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="shipping_postal_code" class="control-label">{{ trans('Postal Code') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="shipping_postal_code" id="shipping_postal_code"  class="form-control" oninput="validate(this)" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <hr class="hr-primary" />
                                    <div class="col-md-2">
                                        <strong style="color: #00c0ef;">Attachments</strong>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <!-- <div class="col-sm-3 col-md-12">
                                                <label for="attachment" class="control-label">{{ trans('Attachments') }} </label>
                                            </div> -->
                                            <div class="col-sm-4 col-md-12">
                                                <input type="hidden" name="images_name" id="images_name" value="">
                                                <div id="dropzone" class="dropzone dz-clickable">
                                                    <div class="dz-message">Drop files here or click to upload.</div>
                                                </div>
                                                <div class="dz-messagebottom">Drop files in the box or click on "+" to upload.</div>
                                            </div>                                    
                                        </div>
                                    </div> 
                                    <div class="clearfix"></div>

                                    <div class="col-md-12">
                                        <div class="box-footer text-center">
                                            <button type="submit" id="sub" class="btn btn-primary">{{ trans('Submit') }}</button>
                                            <a href="{{URL('admin/rhysley-customers')}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                                        </div>
                                    </div>
                                </div>
                        	{!! Form::close() !!}	
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
        </div>

      </div>
    </div>
  </section>
</div>
</div>
@endsection 
@section('scripts')
<script src="{!! asset('assets/admin/dist/js/popper.min.js') !!}"></script>
<script src="{!! asset('assets/admin/dist/js/dropzone.min.js') !!}"></script>
<script src="{!! asset('assets/admin/dist/js/my-app.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/css/dropzone.min.css') !!}" rel="stylesheet" />
<script src="{!! asset('assets/admin/dist/js/datetimepicker/jquery.datetimepicker.full.min.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/js/datetimepicker/jquery.datetimepicker.min.css') !!}" rel="stylesheet" />

<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
<script type="text/javascript">

    // Email Check
    $.validator.addMethod("email", function(value) {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
    });

    function validate(elem)
    {
        elem.value = elem.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
    }

    //Select 2 for mask
    $(function () { 
        $("#billing_country_id, #billing_zone_id, #shipping_country_id, #shipping_zone_id").select2({
            placeholder: "--- Choose ---",
            maximumSelectionLength: 1,
            formatSelectionTooBig: function (limit) {
                return 'Too many selected items';
            },
        }).on("select2:select", function (e) {
           
        }).on('select2:unselect', function (e) {
            
        });
    });

    $("#full_name, #company_name, #telephone, #alternate_mobile, #gst_no, #pan_no").keypress(function(e) {
            if (e.which === 32 && !this.value.length) {
            e.preventDefault();
       }
       var inputValue = e.charCode;
       if(! (   (inputValue >= 65 && inputValue <= 90) || //A-Z
                (inputValue >= 95 && inputValue <= 122) || //a-z
                (inputValue >= 45 && inputValue <= 57) || //0-9,-,_,/
                (inputValue == 13) )  //Enter  
                && (inputValue != 32 && inputValue != 0)
            )
       {
           e.preventDefault();
       }     
    });

    $("#note, #email_address").keypress(function(e) {
            if (e.which === 32 && !this.value.length) {
            e.preventDefault();
        }
        var inputValue = e.charCode;
    });

    $(document).on('change','#same_as', function() {
        set_values();
    });

    $(document).on('change','.billing', function() {
        set_values();
    });

    // Teaxt area size
    const tx = document.getElementsByTagName('textarea');
    for (let i = 0; i < tx.length; i++) {
      tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
      tx[i].addEventListener("input", OnInput, false);
    }
    function OnInput() {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
    }

    function set_values()
    {
        if($('#same_as').is(":checked") == true) { 
            $('#shipping_address1').val($('#billing_address1').val()).attr('readonly', true);
            $('#shipping_address2').val($('#billing_address2').val()).attr('readonly', true);
            $('#shipping_country_id').val($('#billing_country_id').val()).trigger('change').attr('disabled', true);
            get_shipping_zones($('#billing_country_id').val());
            $('#shipping_zone_id').attr('disabled', true);
            $('#shipping_city').val($('#billing_city').val()).attr('readonly', true);
            $('#shipping_postal_code').val($('#billing_postal_code').val()).attr('readonly', true);
        }
        else
        {
            $('#shipping_address1').val('').attr('readonly', false);
            $('#shipping_address2').val('').attr('readonly', false);
            $('#shipping_country_id').val("-1").trigger('change').attr('disabled', false);
            $('#shipping_zone_id').attr('disabled', false);
            $('#shipping_city').val('').attr('readonly', false);
            $('#shipping_postal_code').val('').attr('readonly', false);
        }
    }

    //Billing Zones
    function get_billing_zones(countries_id)
    {
        var result = ``;
        if(countries_id) 
        { 
            $.ajax({
                url: "{{URL('admin/rhysley-customers/get-zones')}}/"+countries_id,
                type: 'GET',
                data: {},
                success: function(res) 
                {
                    for(var i = 0 ; i < res.length; i++)
                    {
                        result += `<option value="${res[i]['zone_id']}">${res[i]['zone_name']}</option>`;
                    }
                    $('#billing_zone_id').html(result);
                },
                error: function(res) 
                {
                    console.log(res);
                }
            });
        }
        else
        {
            $('#billing_zone_id').html(result).trigger('change');
        }
    }

    //Shipping Zones
    function get_shipping_zones(countries_id)
    {
        var result = ``;
        if(countries_id) 
        {
            $.ajax({
                url: "{{URL('admin/rhysley-customers/get-zones')}}/"+countries_id,
                type: 'GET',
                data: {},
                success: function(res) 
                {
                    for(var i = 0 ; i < res.length; i++)
                    {
                        result += `<option value="${res[i]['zone_id']}">${res[i]['zone_name']}</option>`;
                    }
                    $('#shipping_zone_id').html(result);
                    $('#shipping_zone_id').val($('#billing_zone_id').val()).trigger('change')
                },
                error: function(res) 
                {
                    console.log(res);
                }
            });
        }
        else
        {
            $('#shipping_zone_id').html(result).trigger('change');
        }
    }

	$( "#addRhysleyCustomer" ).validate( {
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				error.addClass( "help-block" );
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );
				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			success: function ( label, element ) {
				if ( !$( element ).next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			}
		} );	

</script>
@endsection