@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" class="btn btn-sm btn-primary" onclick="createData()">
          <i class="fa fa-plus"></i> REGISTRASI BARU
        </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 justifify-flex-start">
				<div class="form-group me-2">
					<select name="iddesa" id="filter-desa" class="form-control form-select mb-4" onchange="searchBydesa(this.value)">
						<option class="fw-bold" value="">-- SEMUA DESA --</option>
						@foreach($desa as $item)
						<option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
						@endforeach
					</select>
				</div>
			</div>
      <div class="table-responsive">
        <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">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">Ang. Prodf</th>
                <th class="dt-head-center">Mqs. Prodf</th>
                <th class="dt-head-center">Ang. Multi</th>
                <th class="dt-head-center">Mqs. Multi</th>
                <th class="dt-head-center">Ang. Infes</th>
                <th class="dt-head-center">Mqs. Infes</th>
                <th class="dt-head-center">Ang. Qord</th>
                <th class="dt-head-center">Total</th>
                <th class="dt-head-center">Desa</th>
                <th class="dt-head-center">Aksi</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th colspan="4" 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></th>
                <th></th>
              </tr>
            </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal Create Or Edit  -->
  <div class="modal" id="modal-coe" tabindex="-1" aria-labelledby="modal-coe" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="block block-rounded block-mode-fullscreen mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Input Transaksi Pembiayaan</h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" id="btn-close-modal" 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">
            @include('transaksi.pembiayaan.create_or_edit')
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Create Or Edit  -->
@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-transaksi').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("transaksi/pembiayaan") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'TGLBYR',
        name: 'TGLBYR'
      },
      {
        data: 'NMTELR',
        name: 'NMTELR'
      },
      {
        data: 'NAMAMAJELIS',
        name: 'NAMAMAJELIS'
      },
      {
        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: null,
        name: 'TOTAL'
      },
      {
        data: 'IDDESA',
        name: 'IDDESA'
      },
      {
        data: 'NOTRAN',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 1,
        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, 5, 6, 7, 8, 9, 10, 11, 12],
        className: 'dt-body-right',
        render: function(data) {

          return app.numberSeparator(data);
        }
      },
      {
        targets: 13,
        className: 'dt-body-right fw-semibold',
        render: function(data, type, row, meta) {
          const total = parseFloat(row.TOTANG01) + parseFloat(row.TOTMQS01) + parseFloat(row.TOTANG02) + parseFloat(row.TOTMQS02) + parseFloat(row.TOTANG03) + parseFloat(row.TOTANG06) + parseFloat(row.TOTMQS06);
          
          return app.numberSeparator(total);
        }
      },
      {
        targets: 14,
        orderable: false,
        visible: false
      },
      {
        targets: -1,
        className: 'text-center',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button class="btn btn-sm btn-success" onclick="editData(this)">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</button>';
            button += '<button id="btn-trash-penerimaan-setoran" class="btn btn-sm btn-danger" data-id="' + data + '" onclick="deleteData(this)">';
            button += '<i class="fa fa-trash"></i>';
            button += '</button>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':first').addClass('fw-bold');
    },
    footerCallback: function() {
      const api = this.api();
      
      setFooter(api);
      setTotalFooter(api);
    },
    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++);
    });
  };

  // Handle Search By Desa
  function searchBydesa(value) {
    table
      .column(14)
      .search(value)
      .draw();
  };

  // Handle Set Footer
  function setFooter(api) {
    api.columns([4, 5, 6, 7, 8, 9, 10, 11, 12], { page: 'current' }).every(function() {
      const data = this.data();

      if(data.length !== 0) {
        const result = sumArray(data);

        $(this.footer()).text(app.numberSeparator(result));
      }
      else {
        $(this.footer()).text('0');
      }
    });
  };

  // Handle Set Footer For Column Total
  function setTotalFooter(api) {
    api.column(13, { page: 'current' }).every(function() {
      let row = this.data().toArray();
      let array = [];

      if(row.length === 0) {
        $(this.footer()).text('0');

        return;
      };

      $.each(row, function(idx, val) {
        const total = parseFloat(val.TOTANG01) + parseFloat(val.TOTMQS01) + parseFloat(val.TOTANG02) + parseFloat(val.TOTMQS02) + parseFloat(val.TOTANG03) + parseFloat(val.TOTANG06) + parseFloat(val.TOTMQS06);

        array.push(total);
      });

      const result = sumArray(array);
      $(this.footer()).text(app.numberSeparator(result));
    });
  };

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

  // Handle Create Data
  function createData() {
    $('#modal-coe').modal('show');
  }

  // Handle Edit Data
  function editData(self) {
    const row = table.rows($(self).parents('tr')).data().toArray();

    $('#iddesa').val(row[0].IDDESA);
    $('#iddesa').prop('disabled', true);
    $('#idmajelis').html('<option value="' + row[0].IDMAJELIS + '">' + row[0].NAMAMAJELIS + '( ' + row[0].IDMAJELIS + ' )</option>');
    $('#idmajelis').prop('disabled', true);
    $('#kdtelr').val(row[0].KDTELR);
    $('#kdtelr').prop('disabled', true);
    $('#tgdrop').val(row[0].TGLBYR.split(' ')[0]);
    $('#tgdrop').prop('readonly', true);
    $('#norefs').val(row[0].NOREFS);
    $('#norefs').prop('readonly', true);
    $('#notran').val(row[0].NOTRAN);
    $('#notran').prop('readonly', true);

    setInputTransaksi();
  }

  // Handle Delete Data
  function deleteData(self) {
    swal.fire({
      title: "Yakin Mau Hapus Data Ini?",
      icon: "info",
      confirmButtonText: "YA",
      cancelButtonText: "BATAL",
      showCancelButton: true,
    }).then((result) => {
      if(result.isConfirmed) {
        const id = $(self).data('id');
        const url = '{{ url("transaksi/pembiayaan") }}/{{ session()->get("kantor") }}/' + id;

        $.ajax({
          type: 'GET',
          url: url,
          success: function(res) {
            if(res.success) {
              // Remove selected Data
              table.row($(self).parents('tr')).remove().draw();

              swal.fire(
                'Sukses',
                res.message,
                'success'
              )
            }
            else {
              swal.fire(
                'Informasi',
                res.message,
                'warning'
              )
            }
          }
        });
      }
    });
  };
</script>
@endsection