@extends('layouts.app-admin')
@section('content')

<!-- [ content ] Start -->
<!-- [ content ] Start -->
<div class="container-fluid flex-grow-1 container-p-y">
        <h4 class="font-weight-bold py-3 mb-0">Add Area</h4>
        <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item">Location</li>
                <li class="breadcrumb-item active">Manage Area</li>
            </ol>
        </div>

        <div class="card mb-4">
            <h6 class="card-header bg-dark text-white">Add Area</h6>
            <div class="card-body">

                <form class="form-horizontal form-label-left" action="{{ url('admin/area') }}" method="post" enctype="multipart/form-data">
                    {!! csrf_field() !!}
                    <div class="form-row">   
                       
                       <div class="form-group col-md-6">
                           <label class="form-label">State <span class="error">*</span></label>
                           <select class="form-control State" name="state" required>
                               <option value="">Select State</option>
                               @foreach($state as $val)
                               <option value="{{$val->id}}">{{$val->name}}</option>
                               @endforeach
                           </select>
                           <div class="clearfix"></div>
                       </div>
                      
                   </div>   
                   <div class="form-row">   
                       
                       <div class="form-group col-md-6">
                           <label class="form-label">City <span class="error">*</span></label>
                           <select class="form-control City" name="city" required>
                               <option value="">Select City</option>
                               @foreach($city as $val)
                               <option value="{{$val->id}}">{{$val->name}}</option>
                               @endforeach
                           </select>
                           <div class="clearfix"></div>
                       </div>
                      
                   </div>   
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="form-label">Name <span class="error">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Name" name="name" required>
                            <div class="clearfix"></div>
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div> 
                        </div> 
                       
                        <div class="form-row">   
                       
                       <div class="form-group col-md-6">
                           <label class="form-label">Status <span class="error">*</span></label>
                           <select class="form-control" name="status">
                               <option value="active">Active</option>
                               <option value="inactive">In-Active</option>
                           </select>
                           <div class="clearfix"></div>
                       </div>
                      
                   </div>      
                   <input type="hidden" name="is_show" value="active">             
                    
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <!-- [ content ] End -->
<!-- [ content ] End -->
@endsection
@section('script')
<script>
       $(document).on('change', ".State", function () {
        var cate_id = $(".State :selected").val();
        cate_id = cate_id ? cate_id : 0;
        $.ajax({
       type : "GET",
       url  : "{{url('admin/city_list')}}",
       dataType : "json",
       data : {"cate_id":cate_id},
       success : function(data) {
        $('.City').find('option').remove();
           $.each(data, function(index, value) {
               $('.City').append('<option value="' + value['id'] + '">' + value['name'] + '</option>');
           });
   
       },
       error : function(e) {
        // alert(e);
       }
     });
    })
</script>
@endsection