@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('customersdatasave')}}" autocomplete="off">
                @csrf
                    <div class="card-body">
                         <div class="row"> 
                         <div class="col-md-12"> 

                            <div class="form-group">
                                <label>{{ __('Company Name') }}</label>
                                
                                <input type="text" name="fullname" id="fullname" class="form-control" placeholder="{{ __(' Company Name') }}" >
                                          @error('fullname')
                                                <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>{{ __(' contact number') }}</label>
                                <input type="text" name="landline"  id="landline" class="form-control" placeholder="{{ __('Contact Number') }}" >
                                         @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" 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" 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" class="form-control" placeholder="{{ __('email') }}" >
                                            @error('email')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('GSTIN DETAILS') }}</label>
                                <input type="text" name="gstin_detail" id="gstin_detail" class="form-control" placeholder="{{ __('gstin_detail') }}" >
                                         @error('gstin_detail')
                                                <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" class="form-control">
                                        <option value="">Select</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>{{ __('Delivery Address') }}</label>
                                <textarea id="service_address" name="service_address" class="form-control" onkeyup="myFunction()">
                                </textarea>
                                          @error('service_address')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>

                            <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('BILLING ADDRESS') }}</label>
                                <textarea id="billing_address" name="billing_address" class="form-control" >
                                </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="stateBox" class="form-control textbox" id="stateBox" onChange="getCities(this.value)" >
                                                <option value="">Please Select 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="cityBox" class="form-control textbox" id="cityBox" >
                                            <option value="">Please Select 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="">Please Select 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="">Please Select 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">Add</button>
                    </div>
                </form>
            </div>

        
        </div>
       
    </div>
   

<!-- <script>
    function sendform_Data()
{
    alert("hi");
}
</script> -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

<script>

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

        }

//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="">Select State Name</option>';
                for(i=0; i<data.data.states.length; i++){
                    select += '<option value="' + data.data.states[i].name + '">' + data.data.states[i].name + '</option>';
                }
                $("#stateBox").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="">Select City Name</option>';
                for(i=0; i<data.data.length; i++){
                    select +='<option value="' + data.data[i] + '">' + data.data[i] + '</option>';
                }
                $("#cityBox").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="">Select State Name</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="">Select City Name</option>';
                for(i=0; i<data.data.length; i++){
                    select +='<option value="' + data.data[i] + '">' + data.data[i] + '</option>';
                }
                $("#billing_city").html(select);
            }
        });
    }
</script>
@endsection