@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">
          @php
          $title = "Transaksi Setoran Anggota Kelompok"
          @endphp
          {{ 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">
        <a class="btn-sm btn btn-primary" href="{{ url('transaksi/penerimaan-setoran') }}/tambah-ubah/{{ session()->get('kantor') }}">
          <i class="fa fa-plus"></i> {{ strtoupper("Tambah") }}
        </a>
      </h3>
    </div>
    <div class="block-content block-content-full">
      <div class="col-md-6 col-sm-12">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <select name="iddesa" id="filter-desa" class="form-control form-select mb-4">
                <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>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered table-striped table-vcenter table-sm" id="tbl-penerimaan-setoran" 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">No. Refs</th>
              <th class="dt-head-center">No. Trans</th>
              <th class="dt-head-center">Rumpun</th>
              <th class="dt-head-center">Kas Petugas</th>
              <th class="dt-head-center">Droping</th>
              <th class="dt-head-center">Debet</th>
              <th class="dt-head-center">Credit</th>
              <th class="dt-head-center">Action</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th colspan="6" 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></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-penerimaan-setoran').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("transaksi/penerimaan-setoran") }}/{{ session()->get("kantor") }}',
    columns: [
        {
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'TGLBYR',
          name: 'TGLBYR'
        },
        {
          data: 'NOREFS',
          name: 'NOREFS'
        },
        {
          data: 'NOTRAN',
          name: 'NOTRAN'
        },
        {
          data: 'NAMAMAJELIS',
          name: 'NAMAMAJELIS'
        },
        {
          data: 'NMTELR',
          name: 'NMTELR'
        },
        {
          data: 'DEBDRP',
          name: 'DEBDRP'
        },
        {
          data: 'DEBET',
          name: 'DEBET'
        },
        {
          data: 'KREDIT',
          name: 'KREDIT'
        },
        {
          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: [6, 7, 8],
        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/penerimaan-setoran/tambah-ubah") }}/{{ session()->get("kantor") }}/' + data + '" class="btn btn-sm btn-success">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</a>';
            button += '<a href="{{ url("transaksi/penerimaan-setoran") }}/{{ session()->get("kantor") }}/' + data + '" id="btn-trash-penerimaan-setoran" class="btn btn-sm btn-danger">';
            button += '<i class="fa fa-trash"></i>';
            button += '</a>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':first').addClass('fw-bold');
    },
    footerCallback: function() {
      const api = this.api();
      api.columns([6, 7, 8], { 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');
        }
      });
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

  // Reorder table
  table.on('order.dt search.dt', function () {
      let i = 1;

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

  $('#filter-desa').change(function() {
    const value = $(this).val();

    if(value === '') {
      table.ajax.url('{{ url("transaksi/penerimaan-setoran") }}/{{ session()->get("kantor") }}').load();
    }
    else {
      table.ajax.url('{{ url("transaksi/penerimaan-setoran/indexajax") }}/{{ session()->get("kantor") }}/' + value).load();
    }
  });

  // Delete
  $(document).on('click', '#btn-trash-penerimaan-setoran', function(e) {
      e.preventDefault();

      swal.fire({
        title: "Yakin Mau Hapus Data Ini?",
        icon: "info",
        confirmButtonText: "YA",
        cancelButtonText: "BATAL",
        showCancelButton: true,
      }).then((result) => {
        if(result.isConfirmed) {
          const url = $(this).attr('href');
          const self = $(this);

          $.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