@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'town-plan'
])

@section('content')
    <div class="content">      
        <div class="row">
          <div class="col-md-12">
            @if($message = Session::get('success'))
              <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{$message}}</strong>
              </div>
            @endif
            <div class="pull-right">
            <a href="{{ route('admin.town-plan.create') }}" class="btn btn-primary">Create New Plan</a>
            </div>
          </div>

          <div class="col-md-12">
            <div class="row">
              <div class="form-group col-md-5">                
                <input type="text" placeholder="Search..." name="keyword" id="keyword" class="form-control">
              </div>
              <div class="form-group col-md-3">
                <select class="form-control" id="filter_region_id">
                  <option value=""> Choose State / Region </option>
                  @foreach ($stateOrRegions as $stateOrRegion)
                      <option value="{{ $stateOrRegion->id }}" >{{ $stateOrRegion->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-3">
                <select class="form-control" id="filter_township_id">
                  <option value=""> Choose Township </option>
                </select>
              </div>
              <div class="form-group col-md-1">
                <select class="form-control" id="limits" name="limits">
                    <option value="10" > 10 </option>
                    <option value="20" > 20 </option>
                    <option value="50" > 50 </option>
                    <option value="100" > 100 </option>
                    <option value="500" > 500 </option>
                </select>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="card ">
              <div class="card-header">
                <h2>Town Plan List</h2>
              </div>
              <div class="card-body" id="dynamic_data">
                <table class="table table-striped table-bordered table-responsive-md">
                  <thead class="text-primary">
                    <th>No#</th>
                    <th>Title</th>
                    <th>Attachement</th>
                    <th>State or Region</th>
                    <th>Created At</th>
                    <th width="160">Actions</th>
                  </thead>
                  <tbody>
                    <tr id="loader" style="display: none; height: 50px;">
                      <td colspan="10"> <div class="text-center">Processing...</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    </div>
@endsection

@push('scripts')
  <script>
    $(function(){
      
      // on load
      fetch_records();

      $(document).on('click', '.pagination a', function(event){
        event.preventDefault(); 
        let page = $(this).attr('href').split('page=')[1];
        fetch_records(page);
       });
      // Search by keyword
      $('#keyword').keyup(function(){
        fetch_records();
      });

      $(document).on('change', '#filter_township_id, #limits', function(){
        fetch_records();
      });
      $(document).on('change', '#filter_region_id', function(){
        fetch_township_by_region();
      });

    });

      // fetch data
      function fetch_records(page = ""){
        let data = getRequestData();
        data.page = page;
        console.log(data)
        $.ajax({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url:"/en/admin/town-plan",
          data: data,
          type: "get",
          datatype: "html",
          beforeSend: function(){
            $("#loader").show();
          },
          success:function(data)
           {
            $('#dynamic_data').html(data);
            $("#loader").hide();
           },
           complete:function(data){
            // Hide image container
           }
        });
      }
      // get filter request values
      function getRequestData(){
        return {
          keyword : $('#keyword').val(),
          filter_region_id : $('#filter_region_id').val(),
          filter_township_id : $('#filter_township_id').val(),
          limits : $('#limits').val(),
        }
       }

      // fetch township by region code
      function fetch_township_by_region(){
        let state_or_region_id = $('#filter_region_id').val()
        $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "/en/ajax/townships-by-region",
            type: 'post',
            dataType: 'json',
            data: { state_or_region_id :  state_or_region_id},
            success: function(result){
                $('#filter_township_id').empty();
                $('#filter_township_id').append('<option value=""> Choose Township </option>');
                if (Array.isArray(result) && result.length) {
                        $.each(result, function(key, value){
                            let option = '<option value="'+value.id+'">'+value.name+'</option>';
                            $('#filter_township_id').append(option);
                        });
                }
                // fetch records
                fetch_records();
            }
        });
      }
  </script>
@endpush