@extends('layout')
@section('title','City')
@section('content')


               <ul class="breadcrumb">
                  <li><p>Dashboard</p></li>
                   <li><a href="#" class="active">Information Manager</a></li>
                  <li><a href="#" class="active">View Cities</a> </li>
               </ul>
               <div class="row-fluid">
                  <div class="span12">
                     <div class="grid simple ">
                        <div class="grid-title">
                           <h3><i class="fa fa-users"></i><span class="semi-bold"> Add City</span></h3>
                        </div>
                        <div class="grid-body ">
                           <form class="form-no-horizontal-spacing" id="form-condensed" action="{{ isset($city_edit) ? route('city.update', $city_edit->id) : route('city.create') }}" method="POST">
                              @csrf
                              <div class="row column-seperation">
                                 <div class="col-md-6">
                                    <div class="row form-row">
                                       <div class="col-md-4">
										   <select name="country_id" id="country_id" style="width:100%" onchange="get_country($(this),{{$city_edit->state_id ?? ''}})" required>
											  <option>Choose Country</option>
											  @foreach($country as $countrys)
											  @if(isset($city_edit) && $countrys->id == $city_edit->country_id)
											  <option value="{{$countrys->id}}" selected>{{$countrys->country_name}}</option>
											  @else
											  <option value="{{$countrys->id}}">{{$countrys->country_name}}</option>
											  @endif
											  
											  @endforeach
										   </select>
                                       </div>
                                       <input type="hidden" name="hidden_country" id="hidden_country" value="{{$city_edit->country_id ?? ''}}"/>
                                       <input type="hidden" name="hidden_state" id="hidden_state" value="{{$city_edit->state_id ?? ''}}"/>
                                       <div class="col-md-4">
										   <select name="state_id" id="state_id" style="width:100%" required>
											  <option>Choose State</option>
											  
										   </select>
                                       </div>
                                       <div class="col-md-4">
                                          <input name="name" id="name" type="text" class="form-control" value="{{$city_edit->name ?? ''}}" placeholder="Enter City Name">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="pull-right">
                                     @if(isset($city_edit))
                                        <button class="btn btn-danger btn-cons" type="submit"><i class="icon-ok"></i> Update</button>
                                     @else
                                        <button class="btn btn-danger btn-cons" type="submit"><i class="icon-ok"></i> Create City</button>
                                     @endif
                                    <button class="btn btn-white btn-cons" type="reset">Cancel</button>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
			   <div class="row-fluid">
                  <div class="span12">
                     <div class="grid simple ">
                        <div class="grid-title">
                           <h3><i class="fa fa-users"></i><span class="semi-bold"> Manage Cities</span></h3>
                        </div>
                        <div class="grid-body ">
                           <table class="table table-striped" id="example">
                              <thead>
                                 <tr>
                                     <th>S.No</th>
                                    <th>Country Name</th>
									<th>State</th>
									<th>City</th>
									<th>Status</th>
                                    <th>Action</th>
                                 </tr>
                              </thead>
                              <tbody>
                                    @php 
                                  $sn = 1;
                                  @endphp
                                  @foreach($city as $citys)
                                 <tr>
                                    <td>{{$sn++}}</td>
									<td>{{$citys->country_name}}</td>
									<td>{{$citys->state_title}}</td>
									<td>{{$citys->name}}</td>
									<td>
									    @if($citys->status == 1)
									    {{'Active'}}
									    @else
									    {{'Inactive'}}
									    @endif
									</td>
									
                                    <td class="center">
										<!--<button type="button" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</button>-->
										<a href="{{ route('city.edit', $citys->id) }}" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</a>
										<!--<a href="" class="btn btn-warning" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</a>-->
										@if($citys->status)
									
										<a href="{{ route('city.status', ['id' => $citys->id, 'actions' => 1]) }}" 
   class="btn btn-warning" style="border-radius:50px;">
   <i class="fa fa-paste"></i>&nbsp;Suspend
</a>
										
										@else
										<a href="{{ route('city.status', ['id' => $citys->id, 'actions' => 0]) }}" 
   class="btn btn-warning" style="border-radius:50px;">
   <i class="fa fa-paste"></i>&nbsp;Unsuspend
</a>
									
										<!--<button type="submit" value="unsuspend" name="action" class="btn btn-warning" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</button>-->
										@endif
									
										
									</td>
                                 </tr>
                                 @endforeach
         <!--                        <tr>-->
         <!--                           <td>India</td>-->
									<!--<td>Karnataka</td>-->
									<!--<td>Bangalore</td>-->
									<!--<td>Active</td>-->
         <!--                           <td class="center">-->
									<!--	<button type="button" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</button>-->
									<!--	<button type="button" class="btn btn-danger" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</button>-->
									<!--</td>-->
         <!--                        </tr>-->
         <!--                        <tr>-->
         <!--                           <td>India</td>-->
									<!--<td>Karnataka</td>-->
									<!--<td>Mysore</td>-->
									<!--<td>Active</td>-->
         <!--                           <td class="center">-->
									<!--	<button type="button" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</button>-->
									<!--	<button type="button" class="btn btn-danger" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</button>-->
									<!--</td>-->
         <!--                        </tr>-->
         <!--                        <tr>-->
         <!--                           <td>India</td>-->
									<!--<td>Karnataka</td>-->
									<!--<td>Mangalore</td>-->
									<!--<td>Active</td>-->
         <!--                           <td class="center">-->
									<!--	<button type="button" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</button>-->
									<!--	<button type="button" class="btn btn-danger" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</button>-->
									<!--</td>-->
         <!--                        </tr>-->
         <!--                        <tr>-->
         <!--                           <td>India</td>-->
									<!--<td>Karnataka</td>-->
									<!--<td>Kolar</td>-->
									<!--<td>Active</td>-->
         <!--                           <td class="center">-->
									<!--	<button type="button" class="btn btn-info" style="background:#885df1; border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Edit</button>-->
									<!--	<button type="button" class="btn btn-danger" style="border-radius:50px;"><i class="fa fa-paste"></i>&nbsp;Suspend</button>-->
									<!--</td>-->
         <!--                        </tr>-->
                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            

@endsection

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    get_country($('#hidden_country'),$('#hidden_state'));
    // $('#city_id').on('change',function(){
    // console.log($(this).val());
   
// })
});

    function get_country(val,id){
     console.log(id)
     $('#state_id').html('');
    var country_id = $(val).val();
    var state_id = $(id).val();
    console.log(state_id);
   
    $.ajax({
            url: "{{ url('city/get_country') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "country_id" :  country_id,
                
            },
            success: function(data) {
                console.log(data);
                // console.log(data['doneMessage']);
                 $('#state_id').append('<option>Select State</option>')
                 $(data).each(function(key, value) {
                      var select = '';
                      if(state_id == value.id){
                          select = 'selected';
                      }
                      else{
                          select = '';
                      }
                    // console.log(value.address);
                    $('#state_id').append('<option value='+value.id+' '+select+'>'+value.state_title+'</option>')
                });
              

            }
        });
    }
</script>