@extends('common.dashboard')

@section('title','Area page')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
          <h4 class="mb-0 font-size-18">System covering geograpical locations</h4>
          <div class="page-title-right">
              <ol class="breadcrumb m-0">
                  <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                  <li class="breadcrumb-item active">Area</li>
              </ol>
          </div>
        </div>
    </div>
</div> 

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body row">
                               <div class="col-md-4">
                                   <p class="alert">Divisions</p><hr>
                                   <ul>@foreach($divisions as $div)
                                        <li><a href="#" class="div" data-id="{{$div->id}}">{{$div->name}}- {{$div->bn_name}}</a>
                                          <a data-toggle="modal" data-target="#editDiv" href="#" data-id="{{$div->id}}" class="float-right editDiv"><i class="fa fa-edit"></i></a>
                                        </li>
                                       @endforeach
                                   </ul>
                               </div>
                               <div class="col-md-4">
                                   <p class="alert">Districts</p><hr>
                                   <ul class="div_result"></ul>
                               </div>
                               <div class="col-md-4">
                                   <p class="alert">Sub-districts</p><hr>
                                   <ul class="diS_result"></ul>
                               </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editDiv" role="dialog">
  <div class="modal-dialog">
  
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit divisoin</h4>
      </div>
      <div class="modal-body">
        <div class="div_edit"></div>
      </div>
    </div>
  </div>
</div>

<script src="{{asset('back/assets/js/jquery.min.js')}}"></script>
<script type="text/javascript">
  $(function(){
    $('.div').on('click',function(){
        $.ajax({
            type:'get', url: '/common/div-id-districts-li',
            data: {id: $(this).data('id')},
            success: function (response) { $('.div_result').html(response);},
            error: function () {
                $('.div_result').html('<option value="">No data found</option>');
            },
        });
    })

    $('.editDiv').on('click',function(){
        $.ajax({
            type:'get', url: '/common/div-edit-form',
            data: {id: $(this).data('id')},
            success: function (response) { $('.div_edit').html(response);},
        });
    });

  })
</script>

@endsection