@extends('layouts.master')

@section('title') @lang('translation.Edit City') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

<div class="row content-panel-header">
    <div class="col-sm-4 page-title-box">
        <h4 class="mb-sm-0 font-size-18">city</h4>
    </div>
</div>

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="city_form" action="{{ route('cities.update', ['city' => $city->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
        <div class="card">
            <div class="card-body">
                <div class="card-title content-card-title">Edit Existing City</div>
                <div class="mb-3 row">
                    <label for="business_category" class="col-md-2 col-form-label">Business Category</label>
                    <div class="col-md-6">
                        <select name="zone_id" id="zone_id" class="form-select" required>
                                <option value='' >Select...</option>
                                @foreach($zones as $zone)
                                    <option value="{{ $zone->id }}" {{ (($zone->id == $city->zone_id) ? 'selected' : '') }} >{{ $zone->zone}}</option>
                                @endforeach 
                        </select>
                        <div  id="zone_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="state_id" class="col-md-2 col-form-label">State</label>
                    <div class="col-md-6">
                        <select name="state_id" id="state_id" class="form-select" required>
                                <option value='' >Select...</option>
                        </select>
                        <div  id="zone_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="district_id" class="col-md-2 col-form-label">District</label>
                    <div class="col-md-6">
                        <select name="district_id" id="district_id" class="form-select" required>
                                <option value='' >Select...</option>
                        </select>
                        <div  id="district_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="city" class="col-md-2 col-form-label">Name the City</label>
                    <div class="col-md-6">
                        <input id="city" name="city" type="text" class="form-control" placeholder="Name the City" value="{{ $city->city }}" required>
                        <div  id="state_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card btn-card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 btn-sm-end">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Update</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        updateState();
        updateDistrictOptions();


        $('#zone_id').change(function() {
            var zone_id = $(this).val();
            updateState();
        });
        $('#state_id').change(function() {
            var state_id = $(this).val();
            updateDistrictOptions();
        });
        function updateState() {
            var zone_id = $('#zone_id').val();
            var states = [];
            actionUrl = "{{ route('state.states-by-zone') }}";
            $.ajax({
                type: "POSt",
                url: actionUrl,
                data: {
                    "zone_id":zone_id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data){ 
                    if(data['data']){
                        var sel = $("#state_id");
                        sel.find('option').remove().end();
                        sel.append('<option value="">Select...</option>');
                        var selectedId = '{{ $city->state_id }}';
                        $.each(data['data'], function(index, item) {
                            if(selectedId == item.id){
                                selected = 'selected';
                                //$("#state_id").val('"'+item.id+'"').trigger('change');
                            }else{
                                selected = '';
                            }
                            if(item.state != ''){
                                sel.append('<option value="'+ item.id +'" '+ selected + '>'+ item.state +'</option>');
                            }
                        });
                    }
                },
                error: function (data) {
                    console.log(actionUrl+' Failes.');
                },
            });
        }
        
        function updateDistrictOptions(){
            var state_id =  $('#state_id').val();
            if(state_id == ''){
                state_id = '{{ $city->state_id }}';
            }
            var states = [];
            actionUrl = "{{ route('district.districts-by-state') }}";
            $.ajax({
                type: "POSt",
                url: actionUrl,
                data: {
                    "state_id":state_id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data){ 
                    if(data['data']){
                        var sel = $("#district_id");
                        sel.find('option').remove().end();
                        sel.append('<option value="">Select...</option>');
                        var selectedId = '{{ $city->district_id }}';
                        $.each(data['data'], function(index, item) {
                            if(selectedId == item.id){
                                selected = 'selected';
                            }else{
                                selected = '';
                            }
                            if(item.state != ''){
                                sel.append('<option value="'+ item.id +'" '+ selected + '>'+ item.district +'</option>');
                            }
                        });
                    }
                },
                error: function (data) {
                    console.log(actionUrl+' Failes.');
                },
            });
        }
        $( "#city_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('city.validate') }}";
            form = $( "#city_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection