@extends('layouts.app')

@section('title', 'Add Customer')

@section('content')

<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Add Customer</h1>
        <a href="{{route('customerlist.index')}}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                class="fas fa-arrow-left fa-sm text-white-50"></i> Back</a>
    </div>

    {{-- Alert Messages --}}
    @include('common.alert')
   
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Add New Customer</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{route('customerlist.storecustomer')}}">
                @csrf
                <div class="form-group row">
                {{-- descriptions --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>ContactName</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('descriptions') is-invalid @enderror" 
                            id="descriptions"
                            placeholder="ContactName" 
                            name="descriptions" 
                            value="{{ old('descriptions') }}">

                        @error('descriptions')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- CustomerName --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Customer Name</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('Customer_name') is-invalid @enderror" 
                            id="Customer_name"
                            placeholder="Customer_name" 
                            name="Customer_name" 
                            value="{{ old('Customer_name') }}">

                        @error('Customer_name')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- EMAIL --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Email</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('email') is-invalid @enderror" 
                            id="email"
                            placeholder="email" 
                            name="email" 
                            value="info@customer.com">

                        @error('email')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- Mobile Number --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Mobile Number</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('mobile_number') is-invalid @enderror" 
                            id="mobile_number"
                            placeholder="mobile_number" 
                            name="mobile_number" 
                            value="{{ old('mobile_number') }}">

                        @error('mobile_number')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                   
                    {{-- fixed_number --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Fixed Number</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('fixed_number') is-invalid @enderror" 
                            id="fixed_number"
                            placeholder="fixed_number" 
                            name="fixed_number" 
                            value="{{ old('fixed_number') }}">

                        @error('fixed_number')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- street --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>street</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('street') is-invalid @enderror" 
                            id="street"
                            placeholder="street" 
                            name="street" 
                            value="{{ old('street') }}">

                        @error('street')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- room_suite_floor --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Room_Suite_Floor</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('room_suite_floor') is-invalid @enderror" 
                            id="room_suite_floor"
                            placeholder="room_suite_floor" 
                            name="room_suite_floor" 
                            value="{{ old('room_suite_floor') }}">

                        @error('room_suite_floor')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- country --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                    <label for="country-dropdown">Country:</label>
                                 <select id="country" name="country"   class="form-control form-control-user @error('country') is-invalid @enderror" >
                            <option value="0" selected disabled >Select Country.....</option>
                           
                            @foreach ($countries as $data) 
                            <option value="{{$data->id}}">{{$data->name}}
                            </option>
                            @endforeach
                           </select>
                           @error('country')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                    </div>
                   
                    {{-- state --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <!-- //State -->
                        <label for="state-dropdown">State:</label>
                                 <select id="state" name="state" class="form-control form-control-user @error('state') is-invalid @enderror">
                                 <!-- <option value="0" selected disabled >Select State.....</option> -->
                                 <!-- @foreach ($states as $data) 
                            <option value="{{$data->id}}">{{$data->name}}
                            </option>
                            @endforeach -->
                                </select>
                                @error('state')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                    </div>
                   
                    {{-- city --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                    <label for="city-dropdown">City:</label>
                                 <select id="city" name="city" class="form-control form-control-user @error('city') is-invalid @enderror">
                                 <option value="0" selected disabled >Select City.....</option>
                                 <!-- @foreach ($cities as $data) 
                            <option value="{{$data->id}}">{{$data->name}}
                            </option>
                            @endforeach -->
                               
                               
                                </select>

                                @error('city')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                    </div>
                    {{-- postalcode --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>postalcode</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('postalcode') is-invalid @enderror" 
                            id="postalcode"
                            placeholder="postalcode" 
                            name="postalcode" 
                            value="{{ old('postalcode') }}">

                        @error('postalcode')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- customer_type --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Customer Type</label>
                        <select class="form-control form-control-user @error('customer_type') is-invalid @enderror" name="customer_type" id="customer_type">
                            <option selected disabled>Select Type</option>
                            <option value="1" selected>Platinum</option>
                            <option value="2">Gold</option>
                            <option value="3">Silver</option>
                        </select>
                        @error('customer_type')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                  
                   
                   
                    
                    

                    
                    
                   
                    {{-- Status --}}
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <span style="color:red;">*</span>Status</label>
                        <select class="form-control form-control-user @error('status') is-invalid @enderror" name="status" id="status">
                            <option selected disabled>Select Status</option>
                            <option value="1" selected>YES</option>
                            <option value="0">NO</option>
                        </select>
                        @error('status')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

           
                </div>
           
                {{-- Save Button --}}
                <button type="submit" class="btn btn-success btn-user btn-block">
                    Save
                </button>

            </form>
        </div>
    </div>

</div>


@endsection
@section('scripts')
<script>
        $(document).ready(function () {
  
            /*------------------------------------------
            --------------------------------------------
            Country Dropdown Change Event
            --------------------------------------------
            --------------------------------------------*/
            $('#country').on('change', function () {
                var idCountry = this.value;
                $("#state").html('');
                $.ajax({
                    
                 
                    url: "{{ url('orderlist/fetchState/') }}" ,
                  type: "POST",
                   dataType: 'json',
                //    url: "{{url('routes/fetchState')}}",
                //    const url = "{{ url('routes/edit-route/{id}') }}"
                    // url: '/fetchState/',
                  //  url: "{{url('fetchState')}}",
                    data: {
                        country_id: idCountry,
                        _token: '{{csrf_token()}}'
                    },
                   
                    success: function (result) {
                        $('#state').html('<option value="">-- Select State --</option>');
                        $.each(result.states, function (key, value) {
                            $("#state").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                            
                            // $("#state-dropdown").append('<option value=' + key + '>' + value + '</option>');
                        });



                        $('#city').html('<option value="">-- Select City --</option>');
                    }
                });
            });
  
            /*------------------------------------------
            --------------------------------------------
            State Dropdown Change Event
            --------------------------------------------
            --------------------------------------------*/
            $('#state').on('change', function () {
                var idState = this.value;
                $("#city").html('');
                $.ajax({
                    url: "{{ url('orderlist/fetchCity/') }}" ,
                    type: "POST",
                    data: {
                        state_id: idState,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                        $('#city').html('<option value="">-- Select City --</option>');
                        $.each(res.cities, function (key, value) {
                            $("#city").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                        });
                    }
                });
            });
  
        });
    </script>
@endsection