@extends('template.app')

@section('content')
<!-- Content Wrapper. Contains page 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 text-dark">Bank Balance Correction</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">Bank Correction</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->
  
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              Bank Mutasi Cr</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <div class="col-sm-4 form-group">
                <label for="mitraid">Filter Approval</label>
                <select class="form-control" id="bank_approved" name="bank_approved" required onchange="reload_bank_table()">
                  <option value='all'>-- All --</option>
                  <option value='1'>Approved</option>
                  <option value='0' selected>Not Yet</option>
                  <option value='2'>Rejected</option>
                </select>
                <label for="date">Filter By Date</label>
                <input type="date" name="bank_date" class="form-control form-control-sm"  id="bank_date" onchange="reload_bank_table()">
                <div class="mt-2">
                  <button type="button" onclick="reload_bank_table()" class="btn btn-default btn-sm"><i class="fas fa-sync"></i> Reload</button>
                </div>
              </div>
              <table id="table_bank" class="table table-bordered table-striped table-datas" width="100%">
                <thead>
                  <tr>
                    <th width="">Trans Id</th>
                    <th width="">Mitra Id</th>
                    <th width="">Priority</th>
                    <th width="">Date Time Trx</th>
                    <th width="">Debit</th>
                    <th width="">Credit</th>
                    <th width="">Created By</th>
                    <th width="">Create Date</th>
                    <th width="">Create Time</th>
                    <th width="">Trans Type</th>
                    <th width="">Notes</th>
                    <th width="">Approved</th>
                    <th width="">Approve By</th>
                    <th width="">Approve Date Time</th>
                    <th width="">Action</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  {{-- Modal --}}
  <div class="modal fade" id="modal-add">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">
              <img class="img-circle" width="40" src="{{ asset('/img/ikiasset/i-logo.png') }}" alt=""> 
              Approval Confirm
            </h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="card-body">
              <div class="form-group row">
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_transid">Trans Id</label>
                  <input type="text" name="approve_transid" class="form-control-sm form-control-plaintext"  id="approve_transid" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_mitraid">Mitra Id</label>
                  <input type="text" name="approve_mitraid" class="form-control-sm form-control-plaintext"  id="approve_mitraid" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_priority">Priority</label>
                  <input type="text" name="approve_priority" class="form-control-sm form-control-plaintext"  id="approve_priority" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_datetimetrx">Date Time Trx</label>
                  <input type="text" name="approve_datetimetrx" class="form-control-sm form-control-plaintext"  id="approve_datetimetrx" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_debit">Debit</label>
                  <input type="text" name="approve_debit" class="form-control-sm form-control-plaintext"  id="approve_debit" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_credit">Credit</label>
                  <input type="text" name="approve_credit" class="form-control-sm form-control-plaintext"  id="approve_credit" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_createdby">Created By</label>
                  <input type="text" name="approve_createdby" class="form-control-sm form-control-plaintext"  id="approve_createdby" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_createdate">Create Date</label>
                  <input type="text" name="approve_createdate" class="form-control-sm form-control-plaintext"  id="approve_createdate" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_createtime">Create Time</label>
                  <input type="text" name="approve_createtime" class="form-control-sm form-control-plaintext"  id="approve_createtime" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_transtype">Trans Type</label>
                  <input type="text" name="approve_transtype" class="form-control-sm form-control-plaintext"  id="approve_transtype" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="approve_notes">Notes</label>
                  <input type="text" name="approve_notes" class="form-control-sm form-control-plaintext"  id="approve_notes" readonly>
                </div>
                <input type="hidden" name="hidden_transtype" id="hidden_transtype">
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Tutup</button>
            <button type="button" class="btn btn-primary btn-sm" onclick="execute()">Approve</button>
          </div>
        </div>
      </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="modal-reject">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">
              <img class="img-circle" width="40" src="{{ asset('/img/ikiasset/i-logo.png') }}" alt=""> 
              Reject Confirm
            </h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="card-body">
              <div class="form-group row">
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_transid">Trans Id</label>
                  <input type="text" name="reject_transid" class="form-control-sm form-control-plaintext"  id="reject_transid" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_mitraid">Mitra Id</label>
                  <input type="text" name="reject_mitraid" class="form-control-sm form-control-plaintext"  id="reject_mitraid" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_priority">Priority</label>
                  <input type="text" name="reject_priority" class="form-control-sm form-control-plaintext"  id="reject_priority" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_datetimetrx">Date Time Trx</label>
                  <input type="text" name="reject_datetimetrx" class="form-control-sm form-control-plaintext"  id="reject_datetimetrx" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_debit">Debit</label>
                  <input type="text" name="reject_debit" class="form-control-sm form-control-plaintext"  id="reject_debit" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_credit">Credit</label>
                  <input type="text" name="reject_credit" class="form-control-sm form-control-plaintext"  id="reject_credit" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_createdby">Created By</label>
                  <input type="text" name="reject_createdby" class="form-control-sm form-control-plaintext"  id="reject_createdby" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_createdate">Create Date</label>
                  <input type="text" name="reject_createdate" class="form-control-sm form-control-plaintext"  id="reject_createdate" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_createtime">Create Time</label>
                  <input type="text" name="reject_createtime" class="form-control-sm form-control-plaintext"  id="reject_createtime" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_transtype">Trans Type</label>
                  <input type="text" name="reject_transtype" class="form-control-sm form-control-plaintext"  id="reject_transtype" readonly>
                </div>
                <div class="col-md-6 col-12 px-0">
                  <label for="reject_notes">Notes</label>
                  <input type="text" name="reject_notes" class="form-control-sm form-control-plaintext"  id="reject_notes" readonly>
                </div>
                <input type="hidden" name="hidden_reject_transtype" id="hidden_reject_transtype">
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Tutup</button>
            <button type="button" class="btn btn-danger btn-sm" onclick="execute_reject()">Reject</button>
          </div>
        </div>
      </div>
    </div>

  <script>
  var table_bank;
  $(document).ready(function () {
    table_bank = $('#table_bank').DataTable({
      "processing": true, 
      "serverSide": true,
      "order": [], 
      "scrollX": true,
      
      "ajax": {
        "url": "{{ url('bank_mutasi_cr/api_bank_mutasi_cr_list') }}",
        "type": "POST",
        // "data": {
        //   "_token": "{{ csrf_token() }}",
        // }
        "data": function(d) {
          d.approved = $('#bank_approved').val()
          d.date = $('#bank_date').val()
          d._token = "{{ csrf_token() }}"
        }
      },
      
      //Set column definition initialisation properties.
      "columnDefs": [
      { 
        "targets": [ -1 ], //first column / numbering column
        "orderable": false, //set not orderable
      },
      {
        "className": "break-word",
        "targets": "_all"
      }
      ],
    })
  })

  function reload_bank_table () {
    table_bank.ajax.reload()
  }

  function approve (element, transid, mitraid, transtype, priority) {
    var row = $(element).closest('tr');
    var columns = row.find('td');
    $('#approve_transid').val($(columns[0]).text())
    $('#approve_mitraid').val($(columns[1]).text())
    $('#approve_priority').val($(columns[2]).text())
    $('#approve_datetimetrx').val($(columns[3]).text())
    $('#approve_debit').val($(columns[4]).text())
    $('#approve_credit').val($(columns[5]).text())
    $('#approve_createdby').val($(columns[6]).text())
    $('#approve_createdate').val($(columns[7]).text())
    $('#approve_createtime').val($(columns[8]).text())
    $('#approve_transtype').val($(columns[9]).text())
    $('#approve_notes').val($(columns[10]).text())
    $('#hidden_transtype').val(transtype)
    $('#modal-add').modal('show')
  }

  function reject (element, transid, mitraid, transtype, priority) {
    var row = $(element).closest('tr');
    var columns = row.find('td');
    $('#reject_transid').val($(columns[0]).text())
    $('#reject_mitraid').val($(columns[1]).text())
    $('#reject_priority').val($(columns[2]).text())
    $('#reject_datetimetrx').val($(columns[3]).text())
    $('#reject_debit').val($(columns[4]).text())
    $('#reject_credit').val($(columns[5]).text())
    $('#reject_createdby').val($(columns[6]).text())
    $('#reject_createdate').val($(columns[7]).text())
    $('#reject_createtime').val($(columns[8]).text())
    $('#reject_transtype').val($(columns[9]).text())
    $('#reject_notes').val($(columns[10]).text())
    $('#hidden_reject_transtype').val(transtype)
    $('#modal-reject').modal('show')
  }

  function execute () {
    let transid = $('#approve_transid').val()
    let mitraid = $('#approve_mitraid').val()
    let priority = $('#approve_priority').val()
    let transtype = $('#hidden_transtype').val()
    $.ajax({
      type: "POST",
      url: "{{ url('koreksi_balance/execute') }}",
      data: {
        _token: "{{ csrf_token() }}",
        transid: transid,
        mitraid: mitraid,
        priority: priority,
        transtype: transtype,
        target: 'bank',
      },
      success: function(data){
        data = JSON.parse(data)
        if (data['alert-type'] === 'error') {
          toastr.error(data.message)
        } else {
          toastr.success(data.message)
          $('#modal-add').modal('hide')
          reload_bank_table()
        }
      }
    })
  }

function execute_reject () {
  let transid = $('#reject_transid').val()
  let mitraid = $('#reject_mitraid').val()
  let priority = $('#reject_priority').val()
  let transtype = $('#hidden_reject_transtype').val()
  $.ajax({
    type: "POST",
    url: "{{ url('bank_mutasi_cr/reject') }}",
    data: {
      _token: "{{ csrf_token() }}",
      transid: transid,
      mitraid: mitraid,
      priority: priority,
      transtype: transtype,
    },
    success: function(data){
      data = JSON.parse(data)
      if (data['alert-type'] === 'error') {
        toastr.error(data.message)
      } else {
        toastr.success(data.message)
        $('#modal-reject').modal('hide')
        reload_bank_table()
      }
    }
  })
}
  </script>
  @endsection