@extends('layouts.master')

@section('title', $title )


@section('main')
<div class="main-content">
    <section class="section">

        <x-backend.breadcrumb :title=$title :url="route('admin.city.index')" />

        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">

                    <x-backend.card>

                        @if(isset($editValue) && $editValue->id != '')
                        <form action="{{ route('admin.city.update', $editValue->id) }}" method="post"
                            enctype="multipart/form-data">
                            @method('PUT')
                            @else
                            <form action="{{ route('admin.city.store') }}" method="post" enctype="multipart/form-data">
                                @endif
                                @csrf
                                <div class="form-row">

                                    <x-select name="country_id" label="Country" id="country_id" :options=$countries
                                        value="{{old('country_id', isset($editValue->country_id) ? $editValue->country_id : '' )}}"
                                        required=true />

                                    <x-select name="state_id" label="State" id="state_id" required=true />

                                    <x-input-group type="text" label="City Name" id="name" name="name"
                                        value="{{old('name', isset($editValue->name) ? $editValue->name : '' )}}"
                                        required=true />

                                    <x-select name="status" label="Status"
                                        :options="['1'=> 'Active' , '0' => 'In-Active']"
                                        value="{{old('status', isset($editValue->status) ? $editValue->status : 1 )}}"
                                        required=true />

                                </div>
                                <x-common.button
                                    class="btn btn-{{ isset($editValue->id) ? 'warning' : 'primary' }} submit my-3">
                                    {{ isset($editValue->id) ? 'Update Record' : 'Create New' }}
                                </x-common.button>
                            </form>
                    </x-backend.card>
                </div>

            </div>
        </div>
    </section>
</div>
@endsection('main')

@push('scripts')
<script>
    $("#country_id").on('change', function(e){
        get_states(this.value)
    })

    function get_states(country_id, state_id = null) {
        $.post("{{ route('admin.get_states')}}", {
                _token: "{{ csrf_token() }}",
                country_id : country_id
            })
        .done((response) => {
           $("#state_id").html(response.data)
           if(state_id != null ){
            $("#state_id").val(state_id)
           }
        }).fail(() => {
            
        })
    }
</script>
@if (isset($editValue->id) &&  $editValue->id != '')
    <script>
        const state_id = "{{ $editValue->state_id }}"
        window.onload = get_states($("#country_id").val(),state_id)
    </script>
@endif
@endpush