@extends('layouts.main')

@section('container')
<div class="card">
    <div class="card-header">
      <table width="100%">
        <tr>
          <td><h3 class="card-title">List</h3></td>
          <td align="right" style="margin-right: 5px"></td>
        </tr>
      </table>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
      <div class="scroll-x-table">
        <table class="table table-bordered table-striped table-condensed" id="dt_table" width="100%">
          <thead>
              <tr>
                <th>Nama showroom</th>
                <th>Pemilik</th>
                <th>Handphone</th>
                <th>Email</th>
              <th>Alamat</th>
              </tr>
          </thead>
          <tbody id="htmldata">

          </tbody>
        </table>
        <br>
      </div>
    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->


  <!-- /.modal -->
@endsection



@section('javascript')

<script>
  $(function () {
    showData();
  })




  // function showData(){
  //   $("#dt_table").dataTable().fnDestroy();
  //   $('#dt_table').DataTable({
  //       "lengthChange": true,
  //       "searching": true,
  //       // 'scrollX': true,
  //       // 'scrollCollapse' : true,
  //       'processing': true,
  //       'serverSide': true,
  //       "columnDefs": [{
  //           "targets"  : 'no-sort',
  //           "orderable": false,
  //       },
  //       { className: 'text-center', targets: [] },
  //       { className: 'text-left', targets: [] },
  //       { className: 'text-right', targets: [] },
  //       ],
  //       "order": [[ 1, "asc" ]],
  //       ajax: {
  //            cache : false,
  //            dataType : "jsonp",
  //           async : true,
  //           crossDomain : true,
  //           url: "https://carshow.accessdigital.id/carshow/showroom/list_showroom?limit=5&offset=0",
  //           type:'GET',
  //           headers: {
  //             accept: 'application/json',
  //             "Access-Control-Allow-Origin":"*"
  //         },
  //         dataSrc:'',


  //       },
  //       columns: [
  //           { data : "nama_showroom" },
  //           { data : "nama_pemilik" },
  //           { data : "handphone_pemilik" },
  //           { data : "email_pemilik" },
  //           { data : "alamat" },
  //       ],
  //   });
  // }




    // function showData() {

  //   var settings = {
  //         'cache': false,
  //         'dataType': "jsonp",
  //         "async": true,
  //         "crossDomain": true,
  //         "url": "https://carshow.accessdigital.id/carshow/showroom/list_showroom?limit=5&offset=0",
  //         "method": "GET",
  //         "headers": {
  //             "accept": "application/json",
  //             "Access-Control-Allow-Origin":"*"
  //         }
  //     }
  //     $.ajax(settings).done(function (response) {
  //         console.log(response);
  //     });


  //  }

  function showData() {
	  $.ajaxSetup({
	   headers: {
	    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
	   }
	  });
	  $.ajax({
	   url: "https://carshow.accessdigital.id/carshow/showroom/list_showroom?limit=1000&offset=0",
    cache : false,
    dataType : "jsonp",
    async : true,
    crossDomain : true,
    headers: {
              accept: 'application/json',
              "Access-Control-Allow-Origin":"*"
          },
	   success: function(json) {
	    if (json.status == "success") {
	     let data = json.result;
	     let html = '';
	     for (let index = 0; index < data.length; index++) {
	      console.log(data[index]);
        html +='<tr>'+
           '<td>'+ data[index].nama_showroom + '</td>'+
           '<td>'+ data[index].nama_pemilik + '</td>'+
           '<td>'+ data[index].handphone_pemilik + '</td>'+
          '<td>'+ data[index].email_pemilik + '</td>'+
          '<td>'+ data[index].alamat + '</td>'+
           '</tr>';
	     }
       $("#htmldata").append(html);
       $('#dt_table').dataTable();
	    } else {
	     toastr["error"](json.error_message)
	    }
	   },

	  })

	 }

</script>


@endsection