@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">
        <button type="button" id="btn-posting" class="btn btn-sm btn-primary" onclick="postingData(this)">
          <div id="spinner" style="display: none;">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
            Loading...
          </div>
          <div id="submit">{{ strtoupper("Setujui") }}</div>
        </button>
        <button type="button" id="btn-del-posting" class="btn btn-sm btn-danger" onclick="deleteData()">
          <div id="del-spinner" style="display: none;">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
            Loading...
          </div>
          <div id="del-submit">{{ strtoupper("Hapus") }}</div>
        </button>
      </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">
      <div class="d-flex justify-content-between">
        <div class="form-group">
          <select name="idinpt" id="filter-kdtelr" class="form-control form-select" onchange="filterByIdinpt(this.value)">
            <option class="fw-bold" value="">-- SEMUA USER --</option>
            @foreach($idinpt as $item)
            <option value="{{ $item['USERID'] }}">{{ $item['NMUSER'] }} ( {{ $item['USERID'] }} )</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="table-responsive">
        @csrf
        <table class="js-table-checkable table table-hover table-vcenter table-bordered table-sm" id="tbl" style="width:100%">
          <thead class="thead-light">
            <tr>
              <th class="dt-head-center">
                <div class="form-check d-inline-block">
                  <input class="form-check-input" type="checkbox" value="" id="check-all" name="check-all">
                  <label class="form-check-label" for="check-all"></label>
                </div>
              </th>
              <th class="dt-head-center">No</th>
              <th class="dt-head-center">Tanggal</th>
              <th class="dt-head-center">Rumpun</th>
              <th class="dt-head-center">Kas Petugas</th>
              <th class="dt-head-center">Absens</th>
              <th class="dt-head-center">Droping</th>
              <th class="dt-head-center">Angs. Produktif</th>
              <th class="dt-head-center">Mqs. Produktif</th>
              <th class="dt-head-center">Angs. Multiguna</th>
              <th class="dt-head-center">Mqs. Multiguna</th>
              <th class="dt-head-center">Angs. Qord</th>
              <th class="dt-head-center">Angs. Invest</th>
              <th class="dt-head-center">Mqs. Invest</th>
              <th class="dt-head-center">Idinpt</th>
              <th class="dt-head-center">Aksi</th>
            </tr>
          </thead>
          <tfoot>
            <tr class="table-success">
                <th colspan="5" class="dt-head-center">TOTALS</th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th class="dt-head-right"></th>
                <th></th>
                <th></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal Detail Transaksi -->
  <div class="modal fade" id="modal-detail-transaksi" tabindex="-1" aria-labelledby="modalDetailTransaksi" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content">
        <div id="block-detail-transaksi" class="block block-rounded block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Detail Transaksi Pembiayaan</h3>
            <div class="block-options">
              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                <i class="si si-size-fullscreen"></i>
              </button>
              <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="close">
                <i class="si si-close"></i>
              </button>
            </div>
          </div>
          <div class="block-content fs-sm">
            <div class="table-responsive">
              <table class="table table-bordered table-hover table-striped js-dataTable-buttons table-sm" id="tbl-detail">
                <thead class="thead-light">
                    <tr>
                      <th class="dt-head-center">No</th>
                      <th class="dt-head-center">ID</th>
                      <th class="dt-head-center">Nama</th>
                      <th class="dt-head-center">Absen</th>
                      <th class="dt-head-center">Droping</th>
                      <th class="dt-head-center">Cnt.Prodk</th>
                      <th class="dt-head-center">Angs.Prodk</th>
                      <th class="dt-head-center">Mqs.Prodk</th>
                      <th class="dt-head-center">Cnt.Multi</th>
                      <th class="dt-head-center">Angs.Multi</th>
                      <th class="dt-head-center">Mqs.Multi</th>
                      <th class="dt-head-center">Cnt.Qord</th>
                      <th class="dt-head-center">Angs.Qord</th>
                      <th class="dt-head-center">Cnt.Invest</th>
                      <th class="dt-head-center">Angs.Invest</th>
                      <th class="dt-head-center">Mqs.Invest</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="table-info">
                      <th colspan="3" class="dt-head-center">TOTALS</th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                      <th class="dt-head-right"></th>
                    </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Detail Transaksi -->
@endsection

@section('js')
<script src="{{ asset('assets/js/plugins/datatables-buttons/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons-jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons-pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons-pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/datatables-buttons/buttons.html5.min.js') }}"></script>
<script>One.helpersOnLoad(['one-table-tools-checkable']);</script>
<script type='text/javascript'>
  let table = $('#tbl').DataTable({
    processing: true,
    serverSide: false,
    pageLength: 10,
    order: [[2, 'asc']],
    ajax: '{{ url("posting/pembiayaan") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'NOTRAN',
        name: 'CHECKBOX'
      },
      {
        data: 'DT_RowIndex',
        name: 'ROWIDX',
      },
      {
        data: 'TGLBYR',
        name: 'TGLBYR'
      },
      {
        data: 'NAMAMAJELIS',
        name: 'NAMAMAJELIS'
      },
      {
        data: 'NMTELR',
        name: 'NMTELR'
      },
      {
        data: 'ABSENS',
        name: 'ABSENS'
      },
      {
        data: 'DEBDRP',
        name: 'DEBDRP'
      },
      {
        data: 'TOTANG01',
        name: 'TOTANG01'
      },
      {
        data: 'TOTMQS01',
        name: 'TOTMQS01'
      },
      {
        data: 'TOTANG02',
        name: 'TOTANG02'
      },
      {
        data: 'TOTMQS02',
        name: 'TOTMQS02'
      },
      {
        data: 'TOTANG03',
        name: 'TOTANG03'
      },
      {
        data: 'TOTANG06',
        name: 'TOTANG06'
      },
      {
        data: 'TOTMQS06',
        name: 'TOTMQS06'
      },
      {
        data: 'IDINPT',
        name: 'IDINPT'
      },
      {
        data: 'NOTRAN',
        name: 'ACTION'
      }
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false,
        render: function (data, type, full, meta){
          let elm = '<div class="form-check d-inline-block">';
              elm += '<input class="form-check-input checkbox-item" type="checkbox" value="" id="'
                  + ('row_' + meta.row)
                  + '" name="'
                  + ('row_' + meta.row)
                  + '">';
              elm += '<label class="form-check-label" for="'
                  + ('row_' + meta.row)
                  + '"></label>';
              elm += '</div>';

          return elm;
        }
      },
      {
        targets: 1,
        className: 'dt-body-center',
        orderable: false,
        searchable: false
      },
      {
        targets: [2],
        render: function(data) {
          const newDate = new Date(data);
          const date = newDate.toLocaleDateString('en-GB', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          });

          return date;
        }
      },
      {
        targets: [3, 4],
        className: 'dt-nowrap'
      },
      {
        targets: [5, 6, 7, 8, 9, 10, 11, 12, 13],
        className: 'dt-body-right',
        render: function(data) {
          return app.numberSeparator(data);
        }
      },
      {
        targets: 14,
        visible: false,
        orderable: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
        orderable: false,
        searchable: false,
        render: function(data) {
          let elm = '<button type="button" class="btn btn-sm btn-success btn-dtl" data-id="' + data + '">';
              elm += '<i class="fa fa-eye"></i>';
              elm += '</button>';
          
          return elm;
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':eq(1)').addClass('fw-bold');
    },
    footerCallback: function() {
      const api = this.api();

      setFooter(api);
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

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

  // Handle row click
  $(document).on('click', '#tbl tbody tr', function() {
    const row = $(this);
    const checked = row.hasClass('table-active');
    const elmCheck = row.find('input[type=checkbox]');

    if(!checked) {
      $(row).addClass('table-active');
      $(elmCheck).prop('checked', true);
    }
    else {
      $(row).removeClass('table-active');
      $(elmCheck).prop('checked', false);
    }

    handleCheckAll(!checked);
  });

  // Handle Event View Detail
  $(document).on('click', '.btn-dtl', function(e) {
    e.stopPropagation();

    const id = $(this).data('id');

    detailData(id);
  });

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

    table.cells(null, 1, { search: 'applied', order: 'applied' }).every(function (cell) {
        this.data(i++);
    });
  };

  // Handle Set Checked For Checkbox All
  function setChechkedAll() {
    table.rows({page: 'current'}).every(function() {
        const row = $(this.node());
        const checked = row.hasClass('table-active');
        const checkItem = $(row.find('.checkbox-item'));

        if(checked) {
          checkItem.prop('checked', true);
        }

        handleCheckAll(!checked);
      });
  }

  // Handle Set Footer
  function setFooter(api) {
    api.columns([5, 6, 7, 8, 9, 10, 11, 12, 13], { page: 'current' }).every( function () {
      if(this.data().length !== 0) {
        const sum = this
            .data()
            .reduce(function (a,b) {
                return parseInt(a) + parseInt(b);
            });
    
        $(this.footer()).text(app.numberSeparator(sum.toString()));
      }
      else {
        $(this.footer()).text('0');
      }
    });
  }

  // Handle Filter By Teler
  function filterByIdinpt(value) {
    table
      .columns(14)
      .search(value)
      .draw();
  };

  // Handle Reload Table
  function reloadTable() {
    table.ajax.reload(resetFilter, false);
  }

  // Handle Posting Transaksi
  function postingData(self) {
    const array = [];
    const token = $('input[name=_token]').val();
    const selData = table.rows('.table-active').data();
    const idInput = @json(session()->get('name'));
    const url = '{{ url("posting/pembiayaan/store") }}/{{ session()->get("kantor") }}';

    $.each(selData, function(idX, val) {
      const obj = {};

      obj.notran = val.NOTRAN;
      obj.idinpt = idInput;

      array.push(obj);
    });

    if(array.length === 0) {
      swal.fire(
          'Informasi',
          'Tidak Ada Data Yang Diposting!',
          'warning'
      );

      return;
    }

    swal.fire({
      title: "Lanjutkan Proses Otorisasi?",
      icon: "question",
      confirmButtonText: "YA",
      cancelButtonText: "BATAL",
      showCancelButton: true,
    }).then((result) => {
      if(result.isConfirmed) {
        app.showSpinner('#spinner', '#submit', true);

        $.ajax({
          type: 'POST',
          url: url,
          data: {_token: token, data: array},
          success: function(res) {
            // console.log(res);
            if(res.success) {
              const el = $('#check-all').get(0);
              
              table.rows('.table-active').remove().draw();
              $(el).prop('checked', false);
              el.indeterminate = false;

              swal.fire(
                'Sukses',
                res.message,
                'success'
              );
            }
            else {
              swal.fire(
                'Informasi',
                res.message + ' ' + res.detail,
                'warning'
              );
            }

            app.hideSpinner('#spinner', '#submit', false);
          }
        });
      }
    });
  };

  // Handle Delete Transaksi
  function deleteData() {
    const array = [];
    const token = $('input[name=_token]').val();
    const url = '{{ url("posting/pembiayaan/destroy") }}/{{ session()->get("kantor") }}';
    const selData = table.rows('.table-active').data();

    $.each(selData, function(idX, val) {
      array.push(val.NOTRAN);
    });

    if(array.length === 0) {
      swal.fire(
          'Informasi',
          'Tidak Ada Data Yang Dihapus!',
          'warning'
      );

      return;
    }

    swal.fire({
      title: "Yakin Mau Hapus Data Ini?",
      icon: "info",
      confirmButtonText: "YA",
      cancelButtonText: "BATAL",
      showCancelButton: true,
    }).then((result) => {
      if(result.isConfirmed) {
        app.showSpinner('#del-spinner', '#del-submit', true);

        $.ajax({
          type: 'POST',
          url: url,
          data: {_token: token, data: array},
          success: function(res) {
            if(res.success) {
              const el = $('#check-all').get(0);

              table.rows('.table-active').remove().draw();
              $(el).prop('checked', false);
              el.indeterminate = false;

              swal.fire(
                'Sukses',
                res.message,
                'success'
              )
            }
            else {
              swal.fire(
                'Informasi',
                res.message + ' ' + res.detail,
                'warning'
              )
            }

            app.hideSpinner('#del-spinner', '#del-submit', false);
          }
        });
      }
    });
  };

  // Handle Checkbox Checked Check All
  function handleCheckAll(checked) {
    const el = $('#check-all').get(0);
    const elmLength = $('.checkbox-item').length;
    const checkLength = $('.checkbox-item:checked').length;

    if(elmLength === checkLength) {
      $(el).prop('checked', true);
      el.indeterminate = false;
    }
    else if(checkLength === 0) {
      $(el).prop('checked', false);
      el.indeterminate = false;
    }
    else {
      el.indeterminate = true;
    }
  }

  // Handle Reload Data
  function afterReloadData() {
    const el = $('#check-all').get(0);

    $(el).prop('checked', false);
    el.indeterminate = false;
  }

  /*
  * Detail Transaksi
  */
  // Init Datatable Detail
  let tableDetail = $('#tbl-detail').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    bPaginate: false,
    bFilter: false,
    bInfo: false,
    columns: [
        {
            data: null,
            name: 'ROWIDX'
        },
        {
            data: 'IDANGGOTA',
            name: 'IDANGGOTA'
        },
        {
            data: 'NAMA',
            name: 'NAMA'
        },
        {
            data: 'ABSENS',
            name: 'ABSENS'
        },
        {
            data: 'DEBDRP',
            name: 'DEBDRP'
        },
        {
            data: 'BAYCNT01',
            name: 'BAYCNT01'
        },
        {
            data: 'TOTANG01',
            name: 'TOTANG01'
        },
        {
            data: 'MUQASA01',
            name: 'MUQASA01'
        },
        {
            data: 'BAYCNT02',
            name: 'BAYCNT02'
        },
        {
            data: 'TOTANG02',
            name: 'TOTANG02'
        },
        {
            data: 'MUQASA02',
            name: 'MUQASA02'
        },
        {
            data: 'BAYCNT03',
            name: 'BAYCNT03'
        },
        {
            data: 'TOTANG03',
            name: 'TOTANG03'
        },
        {
            data: 'BAYCNT06',
            name: 'BAYCNT06'
        },
        {
            data: 'TOTANG06',
            name: 'TOTANG06'
        },
        {
            data: 'MUQASA06',
            name: 'MUQASA06'
        },
    ],
    columnDefs: [
        {
            targets: '_all',
            orderable: false,
            searchable: false,

        },
        {
            targets: 0,
            className: 'px60 dt-body-center',
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        {
            targets: 2,
            className: 'dt-nowrap'
        },
        {
            targets: 3,
            className: 'dt-body-right'
        },
        {
          targets: 5,
          className: 'dt-body-right',
          render: function(data, type, row, meta) {
            const value = parseFloat(row.TOTANG01) === 0 ? 0 : data;

            return app.numberSeparator(value);
          }
        },
        {
          targets: 8,
          className: 'dt-body-right',
          render: function(data, type, row, meta) {
            const value = parseFloat(row.TOTANG02) === 0 ? 0 : data;

            return app.numberSeparator(value);
          }
        },
        {
          targets: 11,
          className: 'dt-body-right',
          render: function(data, type, row, meta) {
            const value = parseFloat(row.TOTANG03) === 0 ? 0 : data;

            return app.numberSeparator(value);
          }
        },
        {
          targets: 13,
          className: 'dt-body-right',
          render: function(data, type, row, meta) {
            const value = parseFloat(row.TOTANG06) === 0 ? 0 : data;

            return app.numberSeparator(value);
          }
        },
        {
            targets: [4, 6, 7, 9, 10, 12, 14, 15],
            className: 'dt-body-right',
            render: function(data) {
                return app.numberSeparator(data);
            }
        }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':eq(0)').addClass('fw-bold');
    },
    footerCallback: function() {
        const api = this.api();
        
        setFooterDetail(api);
    },
    drawCallback: function() {
      const api = this.api();

      afterLoadDetail(api);
    }
  });

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

  // Handle Modal Detail Transaksi Close
  $('#modal-detail-transaksi').on('hidden.bs.modal', function () {
    One.block('fullscreen_off', '#block-detail-transaksi');
  });

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

    tableDetail.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
        this.data(i++);
    });
  };

  // Handle View Detail Transaksi
  function detailData(id) {
    const url = '{{ url("posting/pembiayaan") }}/{{ session()->get("kantor") }}/' + id;

    One.block('state_loading', '#block-detail-transaksi');
    $('#modal-detail-transaksi').modal('show');
    tableDetail.ajax.url(url).load(afterReloadTblDetl);
  };

  // Handle After Load Detail
  function afterLoadDetail(table) {
    new $.fn.dataTable.Buttons(table, {
      buttons: [
        {
          extend: 'excelHtml5',
          className: 'btn-primary',
          title: 'Detail Transaksi Pembiayaan',
          footer: true,
          customize: function ( xlsx ){
            const sheet = xlsx.xl.worksheets['sheet1.xml'];

            $('row:first c', sheet).attr( 's', '51' );
          },
          init: function(api, node, config) {
            $(node).removeClass('btn-secondary');
          }
        },
        {
          extend: 'pdfHtml5',
          className: 'btn-primary',
          title: 'Detail Transaksi Pembiayaan',
          orientation: 'landscape',
          pageSize: 'A3',
          footer: true,
          defaultStyle: {
            fontSize: 6
          },
          customize : function(doc) {
            doc.alignment = 'center';
          },
          init: function(api, node, config) {
            $(node).removeClass('btn-secondary');
          }
        }
      ]
    });

    table.buttons( 0, null ).container().prependTo(
      table.table().container()
    );

    One.block('state_normal', '#block-detail-transaksi');
  }

  // Handle Set Footer For Table Detail
  function setFooterDetail(api) {
      api.columns([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]).every( function (idxCol) {
        let array = [];
        const cells = $(this.nodes());

        $.each(cells, function(idx, cell) {
          const data = $(cell).text().replace(/,/g,"");

          array.push(data);
        });

        if(array.length !== 0) {
          const sum = sumArray(array);
    
          $(this.footer()).text(app.numberSeparator(sum.toString()));
        }
        else {
          $(this.footer()).text('0');
        }
      });
  }

  // Handle After Reload Table Detail
  function afterReloadTblDetl() {
    One.block('state_normal', '#block-detail-transaksi');
  }

  // Handle Get Total
  function sumArray(arr) {
      const sum = arr.reduce(function(a, b) {
          return parseInt(a) + parseInt(b);
      });
      
      return sum;
  }
</script>
@endsection