@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          {{ strtoupper($title) }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Dashboard</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            {{ ucfirst($title) }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title"></h3>
      <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
        <i class="si si-size-fullscreen"></i>
      </button>
    </div>
    <div class="block-content block-content-full">
      @if ($message = Session::get('error'))
        <div class="alert alert-danger alert-dismissible">
          <p class="mb-0">{{ $message }}</p>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      @endif
      <div class="table-responsive">
				@csrf
        <table id="tbl-transaksi" class="table table-bordered table-striped table-vcenter table-sm" style="width:100%">
            <thead class="thead-light">
              <tr>
                <th class="dt-head-center">No</th>
                <th class="dt-head-center">No. Rekening</th>
                <th class="dt-head-center">Tgl Registrasi</th>
                <th class="dt-head-center">Nama</th>
                <th class="dt-head-center">Jumlah SIJAKA</th>
                <th class="dt-head-center">Print</th>
              </tr>
            </thead>
        </table>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-transaksi').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("transaksi/print-sijaka") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'REKDEP',
        name: 'REKDEP'
      },
      {
        data: 'TGLVAL',
        name: 'TGLVAL'
      },
			{
        data: 'NAMA',
        name: 'NAMA'
      },
      {
        data: 'VALDEP',
        name: 'VALDEP'
      },
      {
        data: 'REKDEP',
        name: 'PRINT'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 2,
        render: function(data) {
          const date = new Date(data);
          const result = date.toLocaleDateString('en-GB', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          });

          return result;
        }
      },
			{
				targets: 4,
				className: 'dt-body-right',
				render: function(data) {
					return app.numberSeparator(data);
				}
			},
      {
        targets: -1,
        className: 'dt-body-center',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<a href="{{ url("transaksi/print-sijaka/print-pdf-front") }}/{{ session()->get("kantor") }}/' + data + '" class="btn btn-sm btn-primary" target="_blank">';
            button += 'Depan';
            button += '</a>';
            button += '<a href="{{ url("transaksi/print-sijaka/print-pdf-back") }}/{{ session()->get("kantor") }}/' + data + '" class="btn btn-sm btn-success" target="_blank">';
            button += 'Belakang';
            button += '</a>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':first').addClass('fw-bold');
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

  // Handle Table On Draw
  table.on('draw', function() {
    reorderNumber();
  });

  // Handle Reorder Number
  function reorderNumber() {
    let i = 1;

    table.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
        this.data(i++);
    });
  };
</script>
@endsection