@extends('layouts.master')
@section('title','States')
@section('breadcum')
<div class="breadcrumbbar">
    <div class="row align-items-center">
        <div class="col-md-8 col-lg-8">
            <h4 class="page-title">{{ __('States') }}</h4>
            <div class="breadcrumb-list">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('States') }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection
@section('maincontent')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">{{ __('Enter State name to get cities') }}</h5>
            </div>
            <div class="card-body">
                <div class="searchbar">
                    <form method="GET" action="{{ route('search.state') }}" class="form" novalidate="">
                        <div class="form-group">
                            <div class="input-group">
                                <input value="{{ old('state') }}" required="" name="state" autofocus="" type="search"
                                    class="@error('state') is-invalid @enderror form-control statesearch"
                                    placeholder="Search" aria-label="Search" aria-describedby="button-addonSearch">
                                @error('state')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-lg btn-primary"> <i class="feather icon-search"></i>
                                {{ __('Search') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<!-- script for state search start -->
<script>
    $(".statesearch").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '{{ route('autocomplete.city')  }}',
                data: {
                    term: request.term
                },
                type: 'GET',
                dataType: "json",
                success: function (data) {
                    var resp = $.map(data, function (obj) {
                        return {
                            label: obj.label,
                            value: obj.value,
                        }
                    });
                    response(resp);
                }
            });
        },
        select: function (event, ui) {

            if (ui.item.value == 'No Result found') {
                this.value = ui.item.value.replace(/\D/g, '');
                return false;
            }

        }
    });
</script>
<!-- script for state search end -->
@endsection