@extends('layout.admin')

@section('content')



<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">MTF ACP</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">MTF ACP</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>

    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
            <div class="card-body">

            <table border="0" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
           <label for="pilihtgl">Pilih Kategori Tanggal : &nbsp; </label>
            <select id="pilihtgl">
                <option class="text-center" value=""> - Pilih - </option>
                <option value="Tgl_Awal"> Tgl Awal </option>
                <option value="Tgl_Trans"> Tgl Transaksi </option>
            </select>
            </tr>
          <tr>
            <td>Minimum date:</td>
            <td><input type="text" class="datepicker" id="startDate" name="startDate"></td>
          </tr>
          <tr>
            <td>Maximum date:</td>
            <td><input type="text" class="datepicker" id="endDate" name="endDate"></td>
          </tr>
        </tbody>
        </table>
        <br>

       

            <table class="table table-hover acp nowrap display bg-orange" style="width:100%" >
                  <thead>
                    <tr>
                        <!-- <th>No.</th> -->
                        <th>cabang</th>
                        <th>insrd_pr_nm</th>
                        <th>prm_pr_id</th>
                        <th>prm_pr_nm</th>
                        <th>insrd_pr_id</th>
                        <th>address</th>
                        <th>ahli_waris</th>
                        <th>commence_dt</th>
                        <th>expired_dt</th>
                        <th>crc_Id</th>
                        <th>si_amt</th>
                        <th>prm_pa</th>
                        <th>prm_jiwa</th>
                        <th>reg_num</th>
                        <th>noktp</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr>
                        <!-- <th>No.</th> -->
                        <th>cabang</th>
                        <th>insrd_pr_nm</th>
                        <th>prm_pr_id</th>
                        <th>prm_pr_nm</th>
                        <th>insrd_pr_id</th>
                        <th>address</th>
                        <th>ahli_waris</th>
                        <th>commence_dt</th>
                        <th>expired_dt</th>
                        <th>crc_Id</th>
                        <th>si_amt</th>
                        <th>prm_pa</th>
                        <th>prm_jiwa</th>
                        <th>reg_num</th>
                        <th>noktp</th>
                  </tr>
                </tfoot>
                </table>
                </div>
            </div>
        </div>
</div>
</div>
</div>


@push('js')
<script>

// var minDate, maxDate;

    $(document).ready(function () {
      $('.datepicker').datepicker({
        autoclose: true,
        clearBtn: true,
        dateFormat: 'YYYY-MM-DD'
        });
    // $('.datepicker').val('').datepicker('remove').datepicker();



       var acp = $(".acp").DataTable({
          initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;

                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },


        dom: 'Brtip',
        lengthMenu: [
                    [ 10, 25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                    ],
        buttons: [
              'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
        ],
        autoWidth: true,
        scrollX: true,
        searching: true,
        select: true,
        cache: true,
        destroy: true,
        processing: true,
	language: {
    		processing: ' <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> '
		},
        serverSide: true,
        deferRender: true,
        // stateSave: true,
        ajax: {
        type: 'GET',
        url: "{{ route('acp') }}",
        data: function (d) {
        // read start date from the element
        d.from = $('#startDate').val();
        // read end date from the element
        d.to = $('#endDate').val();
        d.kolomtgl = $('#pilihtgl').val();
    }
  },
        dataType: "json",
        columns: [
            // { "data": "id" },
            { "data": "cabang" },
            { "data": "insrd_pr_nm" },
            { "data": "prm_pr_id" },
            { "data": "prm_pr_nmt"},
            { "data": "insrd_pr_id"},
            { "data": "address"},
            { "data": "ahli_waris" },
            { "data": "commence_dt" },
            { "data": "expired_dt" },
            { "data": "crc_Id" },
            { "data": "si_amt" },
            { "data": "prm_pa" },
            { "data": "prm_jiwa" },
            { "data": "reg_num" },
            { "data": "noktp" }
        ],



    });

    // set on change date picker
$('.datepicker').on('change', function() {
  var from = $("#startDate").val();
  var to = $("#endDate").val();
  if(from && to) {
    acp.draw();
  }
});

   

    $('.acp tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Cari ' + title + '" />');
    });

});

</script>

@endpush


@endsection