@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">Client 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">Client 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">
              Client Mutasi Cr</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <div class="col-sm-4 form-group">
                <label for="clientid">Filter Approval</label>
                <select class="form-control" id="client_approved" name="client_approved" required onchange="reload_client_table()">
                  <option selected 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="client_date" class="form-control form-control-sm"  id="client_date" onchange="reload_client_table()">
                <div class="mt-2">
                  <button type="button" onclick="reload_client_table()" class="btn btn-default btn-sm"><i class="fas fa-sync"></i> Reload</button>
                </div>
              </div>
              <table id="table_client" class="table table-bordered table-striped table-datas" width="100%">
                <thead>
                  <tr>
                    <th width="">Trans Id</th>
                    <th width="">Client Id</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_clientid">Client Id</label>
                <input type="text" name="approve_clientid" class="form-control-sm form-control-plaintext"  id="approve_clientid" 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_clientid">Client Id</label>
                <input type="text" name="reject_clientid" class="form-control-sm form-control-plaintext"  id="reject_clientid" 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_client;
  $(document).ready(function () {
    table_client = $('#table_client').DataTable({
      "processing": true, 
      "serverSide": true,
      "order": [], 
      "scrollX": true,
      
      "ajax": {
        "url": "{{ url('client_mutasi_cr/api_client_mutasi_cr_list') }}",
        "type": "POST",
        // "data": {
        //   "_token": "{{ csrf_token() }}",
        // }
        "data": function(d) {
          d.approved = $('#client_approved').val()
          d.date = $('#client_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_client_table () {
    table_client.ajax.reload()
  }

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

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

  function execute () {
    let transid = $('#approve_transid').val()
    let clientid = $('#approve_clientid').val()
    let transtype = $('#hidden_transtype').val()
    $.ajax({
      type: "POST",
      url: "{{ url('koreksi_balance/execute') }}",
      data: {
        _token: "{{ csrf_token() }}",
        transid: transid,
        clientid: clientid,
        transtype: transtype,
        target: 'client',
      },
      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_client_table()
        }
      }
    })
  }

  function execute_reject () {
    let transid = $('#reject_transid').val()
    let clientid = $('#reject_clientid').val()
    let transtype = $('#hidden_reject_transtype').val()
    $.ajax({
      type: "POST",
      url: "{{ url('client_mutasi_cr/reject') }}",
      data: {
        _token: "{{ csrf_token() }}",
        transid: transid,
        clientid: clientid,
        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_client_table()
        }
      }
    })
  }
  </script>
  @endsection