@extends('layouts.app', ['page' => __('Customers'), 'pageSlug' => 'customerdetail'])

@section('content')

<style>
    .card form label+.form-control {
    margin-bottom: 5px;
}
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="title">{{ __('Add Customers') }}</h5>
                </div>
                <form method="post" action="{{route('Customers.customersupdate')}}" autocomplete="off">
                @csrf
                    <div class="card-body">
                         <div class="row"> 
                         <div class="col-md-12"> 

                            <div class="form-group">
                                <label>{{ __('Full Name') }}</label>
                                
                                <input type="text" name="fullname" value="{{ $users->fullname }}" id="fullname" class="form-control" placeholder="{{ __('Name') }}" >
                                <input type="hidden" name="id" value="{{ $users->id }}" >
                            </div>
                          </div>
                          </div>

      
                            <div class="row"> 
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('LAND LINE') }}</label>
                                <input type="text" name="landline" value="{{ $users->landline }}"  id="landline" class="form-control" placeholder="{{ __('landline') }}" >
                                         @error('landline')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('MOBILE') }}</label>
                                <input type="text" name="mobile" id="mobile"  value="{{ $users->mobile }}" class="form-control" placeholder="{{ __('mobile') }}" >
                                           @error('mobile')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('WHATSAPP') }}</label>
                                <input type="text" name="whatsapp" id="whatsapp" value="{{ $users->whatsapp }}" class="form-control" placeholder="{{ __('whatsapp') }}" >
                                         @error('whatsapp')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('EMAIL') }}</label>
                                <input type="text" name="email" id="email" value="{{ $users->email }}" class="form-control" placeholder="{{ __('email') }}" >
                                            @error('email')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
  {{-- gst --}}
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('GSTIN DETAILS') }}</label>
                                <input type="text" name="gstin_detail" id="gstin_detail" value="{{ $users->gstin_detail }}" class="form-control" placeholder="{{ __('gstin_detail') }}" >
                                         @error('gstin_detail')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>

  {{-- gst --}}
                            {{-- <div class="col-md-4">
                                <div class="form-group">
                                    <label>GSTIN DETAILS</label>
                                    <select name="gstin_detail" id="gstin_detail"  value="{{ $users->gstin_detail }}" class="form-control" placeholder="{{ $users->gstin_detail }}">
                                        <option value="{{ $users->gstin_detail }}">{{ $users->gstin_detail }}</option>
                                        <option>0</option>
                                        <option>18</option>
                                        <option>28</option>
                                    </select>               
                                                @error('customertype')
                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                @enderror
                                </div>
                                </div> --}}



                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Customer Type</label>
                                    <select name="customertype" id="customertype"  value="{{ $users->customertype }}" class="form-control" placeholder="{{ $users->customertype }}">
                                        <option value="{{ $users->customertype }}">{{ $users->customertype }}</option>
                                        <option>B to C</option>
                                        <option>B to B Direct</option>
                                        <option>B to B Dealers or SI</option>
                                    </select>               
                                                @error('customertype')
                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                @enderror
                                </div>
                                </div>
                            </div>

                            <div class="row"> 
                          <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('SERVICE ADDRESS') }}</label>
                                <textarea id="service_address" name="service_address" class="form-control" onkeyup="myFunction()">
                               {{ $users->service_address }}    
                            </textarea>
                                          @error('service_address')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>

                            <div class="col-md-5">
                            <div class="form-group">
                                {{-- <input type="checkbox" id="copy_billing" name="copy_billing"> --}}
                                <label>{{ __('BILLING ADDRESS') }}</label>
                                
                                <textarea id="billing_address" name="billing_address" class="form-control" >
                                {{ $users->billing_address }}     
                            </textarea>
                                        @error('billing_address')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            </div>


                            <div class="row">
                                <div class="col-md-6 ">
                                    <div class="form-group">
                                        <label>Select State</label>
                                        <select name="state" class="form-control textbox" id="state" onChange="getCities(this.value)" value="{{ $users->state }}">
                                            <option value="{{ $users->state }}">{{ $users->state }}</option>
                                        </select>
                                        <div id="state-error" style="display:none;" class="errorDiv">
                                        <label class="error-msg">Please select a State!</label></div>
                                    </div>
                                    <div class="form-group">
                                        <label>Select City</label>
                                        <select name="city" class="form-control textbox" id="city" >
                                        <option value="{{ $users->city }}">{{ $users->city }}</option>
                                        </select>
                                        <div id="city-error" style="display:none;" class="errorDiv"><label class="error-msg">Please Select a city!</label></div>
                                    </div>
                                   
                                </div>
                                <div class="col-md-6 col-lg-6 col-sm-6 ">
                                    <div class="form-group">
                                        <label>Select State</label>
                                        <select name="billing_state" class="form-control textbox" id="billing_state" onChange="getCity(this.value)" >
                                            <option value="{{ $users->billing_state }}">{{ $users->billing_state }}</option>
                                        </select>
                                        <div id="state-error" style="display:none;" class="errorDiv">
                                        <label class="error-msg">Please select a State!</label></div>
                                    </div>
                                    <div class="form-group">
                                        <label>Select City</label>
                                        <select name="billing_city" class="form-control textbox" id="billing_city">
                                        <option value="{{ $users->billing_city }}">{{ $users->billing_city }}</option>
                                        </select>
                                        <div id="city-error" style="display:none;" class="errorDiv"><label class="error-msg">Please Select a city!</label></div>
                                    </div>
                                    
                                </div>
                              </div>
                            
                    </div>
                    <div class="card-footer">
                        <button type="submit"  class="btn btn-fill btn-info">Update</button>
                    </div>
                </form>
            </div>

        
        </div>
       
    </div>
   
 
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

<script>
    $( document ).ready(function() {
            $.ajax({
            url: 'https://countriesnow.space/api/v0.1/countries/states',
            type: 'POST',
            data:{
                "country": "india"
            },
            success:function(data){    
                var select = '<option value="{{ $users->state }}">{{ $users->state }}</option>';
                for(i=0; i<data.data.states.length; i++){
                    select += '<option value="' + data.data.states[i].name + '">' + data.data.states[i].name + '</option>';
                }

                $("#state").html(select);
            }
        });
    });

//all city select box
    function getCities(name)
    {
        $.ajax({
            url: 'https://countriesnow.space/api/v0.1/countries/state/cities',
            type: 'POST',
            data:{

                "country": "India",
                "state": name
            },
            success:function(data){
                var select = '<option value="{{ $users->city }}">{{ $users->city }}</option>';
                for(i=0; i<data.data.length; i++){
                    select +='<option value="' + data.data[i] + '">' + data.data[i] + '</option>';
                }
                $("#city").html(select);
            }
        });
    }

//all state select box

$( document ).ready(function() {
            $.ajax({
            url: 'https://countriesnow.space/api/v0.1/countries/states',
            type: 'POST',
            data:{
                "country": "india"
            },
            success:function(data){    
                var select = '<option value="{{ $users->state }}">{{ $users->state }}</option>';
                for(i=0; i<data.data.states.length; i++){
                    select += '<option value="' + data.data.states[i].name + '">' + data.data.states[i].name + '</option>';
                }
                $("#billing_state").html(select);
            }
        });
    });

//all city select box
    function getCity(name)
    {
        $.ajax({
            url: 'https://countriesnow.space/api/v0.1/countries/state/cities',
            type: 'POST',
            data:{

                "country": "India",
                "state": name
            },
            success:function(data){
                var select = '<option value="{{ $users->billing_city }}">{{ $users->billing_city }}</option>';
                for(i=0; i<data.data.length; i++){
                    select +='<option value="' + data.data[i] + '">' + data.data[i] + '</option>';
                }
                $("#billing_city").html(select);
            }
        });
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const copyBillingCheckbox = document.getElementById('copy_billing');
        const deliveryName = document.getElementById('service_address');
        const billingName = document.getElementById('billing_address');

        copyBillingCheckbox.addEventListener('click', function () {
            if (this.checked) {
                billingName.value = deliveryName.value ;
            } else {
                deliveryName.value = '';
            }
        });
    });

    //auto matic typing
    function myFunction(){
     var result = document.getElementById("service_address");
     
     var s = result. value;
     document.getElementById("billing_address").value = s;

        }
</script>



@endsection