@extends('admin.layouts.app')
@section('content')
<div class="container-scroller">
    {{-- navbar - top --}}
    @include('admin.layouts.topbar')
    <div class="container-fluid page-body-wrapper">
        {{-- navbar - side --}}
        @include('admin.layouts.nav')
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin">
              <div class="row">
                <div class="col-12 col-xl-8 mb-2 mb-xl-0">
                    <h3 class="font-weight-bold">{{ __('Add New District') }}</h3>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-md-6 grid-margin">
                <div class="card shadow-lg">
                  <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <h4 class="card-title mt-2">{{ __('District Details') }}</h4>
                    </div>
                    <form action="{{ route('districts.insert') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label for="country_id">{{ __('Country') }}<span class="text-danger">*</span></label>
                            <select class="form-control form-select form-control-sm text-dark" name="country_id" id="country">
                                <option value="">Select Country</option>
                                @forelse(\App\Models\Country::orderBy('sortname')->get() as $type)
                                    <option @selected($type->id == old('country_id', 101)) value="{{ $type->id }}">{{ $type->name }}</option>
                                @empty
                                    {{-- --}}
                                @endforelse
                            </select>
                            @error('country_id')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="state_id">State<span class="text-danger">*</span></label>
                            <select class="form-control form-select form-control-sm text-dark" name="state_id" id="state">
                                <option value="">Select State</option>
                                @forelse(\App\Models\State::where('country_id', old('country_id', 101))->orderBy('name')->get() as $type)
                                    <option @selected($type->id == old('state_id', 35)) value="{{ $type->id }}">{{ $type->name }}</option>
                                @empty
                                    {{-- --}}
                                @endforelse
                            </select>
                            @error('state_id')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="name">{{ __('Name') }}<span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="name" name="name" placeholder="Name">
                            @error('name')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        {{-- <a href="{{ route('admin.product.edit',['id' => $product->id]) }}" class="btn btn-outline-primary mr-2">{{ __('Edit') }}</a> --}}
                        <button class="btn btn-outline-primary" type="submit">{{ __('Save') }}</button>
                        <a href="{{ URL::previous() }}" class="btn btn-outline-info mr-2">{{ __('Go Back') }}</a>
                    </form>
                  </div>
                </div>
            </div>
        </div>
</div>

@endsection
@extends('admin.layouts.footer')
@push('inline-scripts')
    <script type="text/javascript">
    $('#country').on('change', function() {
        console.log("Fetching states");
        get_state_by_country();
    });
        function get_state_by_country(){
            var country_id = $('#country').val();
            $.post('{{route('getStates')}}',{_token:'{{ csrf_token() }}', country_id:country_id}, function(data){
                $('#state').html(null);
                $('#state').append($('<option value="">Select State</option>', {
                }));
                for (var i = 0; i < data.length; i++) {
                    $('#state').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }
            });
        }
    $('#state').on('change', function() {
        get_city_by_state();
    });
    function get_city_by_state(){
        var state_id = $('#state').val();
        $.post('{{route('getCities')}}',{_token:'{{ csrf_token() }}', state_id:state_id}, function(data){
            $('#city').html(null);
            $('#city').append($('<option value="">Select City</option>', {
            }));
            for (var i = 0; i < data.length; i++) {
                $('#city').append($('<option>', {
                    value: data[i].id,
                    text: data[i].name
                }));
            }
        });
    }
</script>
@endpush