@extends('layouts.master')

@section('title')
LT-168 :: FIREBASE
@endsection

@section('content')

<div class="card">
  <div class="card-header border-0">
      <div class="row align-items-center">
          <div class="col">
              <h3 class="mb-0">ตาราง</h3>
          </div>
      </div>
  </div>
  <div class="card-body table-responsive py-3">

    <table id="table-example" class="table">
    </table>

  </div>
</div>
@endsection

@section('scripts')

<script type="text/javascript">
$(document).ready(function(){

  var url = "{{ url('/') }}/api/district";
  //CALL AJAX
  $.get(url, {}, function(result){

    var dataSet = [];
    var row_id = 0;
    result.forEach(function(element,index) {
      row_id++;
      var row = [
        row_id,
        element.district,
        element.amphoe,
        element.province,
        element.zipcode,
      ];
      dataSet.push(row);
    }); //END FOREACH
    //console.log(dataSet);
    var table = $('#table-example').DataTable({
      "data": dataSet,
      "deferRender" : true,
      "columns": [
        { title: "id" },
        { title: "ตำบล" },
        { title: "อำเภอ" },
        { title: "จังหวัด" },
        { title: "zipcode" },
      ],
      "columnDefs": [
        { className: "align-middle text-center font-weight-bold", "targets": '_all' }
      ]
    }); // END DATATABLE
    table.draw();

  });

});

</script>

@endsection