@extends('admin.layouts.app', ['title' => __('Zipcode')])

@section('content')
<!-- Header -->
<div class="header bg-primary pb-6 pt-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><i class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{route('zipcode')}}">Zipcode</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ (isset($zipcode) && $zipcode->id > 0) ? 'Update': 'Add' }} Zipcode</li>
                        </ol>
                    </nav>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Page content -->


<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">{{ (isset($zipcode) && $zipcode->id > 0) ? 'Update' : 'Add' }} Tag</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form id="zipcode-form" name="zipcode-form" action="@if($zipcode->id > 0) {{route('zipcode-update', ['id' => $zipcode->id])}} @else {{route('zipcode-create')}} @endif " method="post" autocomplete="off" enctype="multipart/form-data">
                        @csrf

                        <h6 class="heading-small text-muted mb-4">{{ __('Zipcode information') }}</h6>

                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="code">{{ __('Code') }}</label>
                                        <input type="text" name="code" id="code" class="form-control form-control-alternative" placeholder="{{ __('Code') }}" value="{{ old('code', $zipcode->code) }}" autofocus>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="country_code">{{ __('Country') }}</label>
                                        <select name="country_id" id="country_code" class="form-control form-control-alternative">
                                            <option value="" selected disabled>Please Select Country</option>
                                            @foreach($countries as $country)
                                            <option value="{{$country->id}}" {{(old('country_id', $zipcode->country_id) == $country->id ? 'selected':'')}}> {{$country->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="state_code">{{ __('State') }}</label>
                                        <select name="state_id" id="state_code" class="form-control form-control-alternative">
                                            <option value="" selected disabled>Please Select State</option>
                                            @if(isset($states))
                                            @foreach($states as $state)
                                            <option value="{{$state->id}}" {{(old('state_id', $zipcode->state_id) == $state->id ? 'selected':'')}}> {{$state->name}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="city_code">{{ __('City') }}</label>
                                        <select name="city_id" id="city_code" class="form-control form-control-alternative">
                                            <option value="" selected disabled>Please Select City</option>
                                            @if(isset($cities))
                                            @foreach($cities as $city)
                                            <option value="{{$city->id}}" {{(old('city_id', $zipcode->city_id) == $city->id ? 'selected':'')}}> {{$city->name}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-success mt-4" onclick="save()"> {{ (isset($zipcode) && $zipcode->id > 0) ? 'Update' : 'Add' }} </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('admin.layouts.footers.auth')
</div>
@endsection
@push('js')

<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

{!! JsValidator::formRequest(\App\Http\Requests\Admin\ZipCodeRequest::class, '#zipcode-form'); !!}
<script>
    function save() {
        let form = $("form[name='zipcode-form']");

        if (form.valid()) {
            $('form#zipcode-form').submit();
        }
    }
    $(document).ready(function() {
        $('#country_code').on('change', function() {

            let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "post",
                url: "{{ route('get-states')}}",
                data: {
                    _token: CSRF_TOKEN,
                    country_id: $(this).val()
                },
                success: function(data) {

                    $('#state_code').html(data.html);

                }
            });
        });
    });
    $(document).ready(function() {
        $('#state_code').on('change', function() {

            let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "post",
                url: "{{ route('get-cities')}}",
                data: {
                    _token: CSRF_TOKEN,
                    state_id: $(this).val()
                },
                success: function(data) {

                    $('#city_code').html(data.html);

                }
            });
        });
    });
    
</script>

@endpush