@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">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">Balance 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">
              Balance Correction</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              {{-- <div class="col-sm-4 form-group">
                <button type="button" onclick="reload_table()" class="btn btn-default btn-sm"><i class="fas fa-sync"></i> Reload</button>
              </div> --}}
              <form role="form" id="form_add" class="col-12 col-md-6">
                {{ csrf_field() }}
                <div class="card-body">
                  <div class="form-group">
                    <label for="target">Balance Type</label>
                    <select class="form-control {{ $errors->has('target') ? 'is-invalid' :  '' }}" id="target" name="target" required value="{{ old('target') }}" onchange="client(this)" autofocus>
                      <option hidden disabled selected value>-- Choose Value --</option>
                      <option value="client">Client</option>
                      <option value="bank">Bank</option>
                    </select>
                    @if ($errors->has('target'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('target') }}</strong>
                    </span>
                    @endif
                    <div id="field_client" style="display: none;">
                      <label for="clientid">Client Id</label>
                      <select class="form-control {{ $errors->has('clientid') ? 'is-invalid' :  '' }}" id="clientid" name="clientid" required value="{{ old('clientid') }}">
                        <option hidden disabled selected value>-- Choose Value --</option>
                      </select>
                      @if ($errors->has('clientid'))
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('clientid') }}</strong>
                      </span>
                      @endif
                    </div>
                    <div id="field_mitra" style="display: none;">
                      <label for="mitraId">Mitra Id</label>
                      <select class="form-control {{ $errors->has('mitraid') ? 'is-invalid' :  '' }}" id="mitraid" name="mitraid" required value="{{ old('mitraid') }}" onchange="setPriority(this)">
                        <option hidden disabled selected value>-- Choose Value --</option>
                      </select>
                      @if ($errors->has('mitraid'))
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('mitraid') }}</strong>
                      </span>
                      @endif
                    </div>
                    <input type="hidden" name="isproceed" value="0" id="isproceed">
                    {{-- <label for="bankid">Bank Id</label>
                    <select class="form-control {{ $errors->has('bankid') ? 'is-invalid' :  '' }}" id="bankid" name="bankid" required value="{{ old('bankid') }}">
                      <option hidden disabled selected value>-- Choose Value --</option>
                    </select>
                    @if ($errors->has('bankid'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('bankid') }}</strong>
                    </span>
                    @endif --}}
                    {{-- <label for="date">Date</label>
                    <input type="date" name="date" class="form-control {{ $errors->has('date') ? 'is-invalid' :  '' }}"  id="date" required value="{{ old('date') }}">
                    @if ($errors->has('date'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('date') }}</strong>
                    </span>
                    @endif --}}
                    <label for="transtype">Trans Type</label>
                    <select class="form-control {{ $errors->has('transtype') ? 'is-invalid' :  '' }}" id="transtype" name="transtype" required value="{{ old('transtype') }}">
                      <option hidden disabled selected value>-- Choose Value --</option>
                      <option value="DC">Debit Correction</option>
                      <option value="CC">Credit Correction</option>
                    </select>
                    @if ($errors->has('transtype'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('transtype') }}</strong>
                    </span>
                    @endif
                    <label for="amount">Amount</label>
                    <input type="text" name="amount" class="form-control {{ $errors->has('amount') ? 'is-invalid' :  '' }}"  id="amount" required value="{{ old('amount') }}" onkeyup="format(this)">
                    @if ($errors->has('amount'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('amount') }}</strong>
                    </span>
                    @endif
                    <label for="notes">Notes</label>
                    <input type="text" name="notes" class="form-control {{ $errors->has('notes') ? 'is-invalid' :  '' }}"  id="notes" required value="{{ old('notes') }}">
                    @if ($errors->has('notes'))
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $errors->first('notes') }}</strong>
                    </span>
                    @endif
                    <button type="button" id="btn_save" class="btn btn-primary mt-3" onclick="event.preventDefault(); save();">Simpan</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      
    <div class="row" style="display: none;" id="bank_card">
      <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="clientid">Filter Approval</label>
                <select class="form-control" id="bank_approved" name="bank_approved" required onchange="reload_bank_table()">
                  <option selected value='all'>-- All --</option>
                  <option value='1'>Approved</option>
                  <option value='0'>Not Yet</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="20%">Options</th> --}}
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="row" style="display: none;" id="client_card">
        <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'>Not Yet</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="20%">Options</th> --}}
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
  <script>
    var table_bank, table_client;

    $(document).ready(function () {
      $.ajax({
        type: "POST",
        url: "{{ url('externaluser/api_system_id_list') }}",
        data: {
          _token: "{{ csrf_token() }}",
        },
        success: function(data){
          $.each(data, function(i, d) {
            $('#clientid').append('<option value=' + d.clientId + '>' + d.systemName + '</option>')
          });
        }
      })

      $.ajax({
        type: "POST",
        url: "{{ url('bank_balance/api_mitra_list') }}",
        data: {
          _token: "{{ csrf_token() }}",
        },
        success: function(data){
          $.each(data, function(i, d) {
            $('#mitraid').append('<option value=' + d.mitraId + ' data-priority=' + d.priority +'>' + d.companyName + '</option>');
          });
        }
      })

      // $.ajax({
      //   type: "POST",
      //   url: "{{ url('koreksi_balance/api_get_ref_bank_list') }}",
      //   data: {
      //     _token: "{{ csrf_token() }}",
      //   },
      //   success: function(data){
      //     $.each(data, function(i, d) {
      //       $('#bankid').append('<option value=' + d.bankcode + '>' + d.bankname + '</option>');
      //     });
      //   }
      // })
    })

    @if(Session::has('message'))
      var type = "{{ Session::get('alert-type', 'info') }}";
      switch(type){
        case 'info':
          toastr.info("{{ Session::get('message') }}");
          break;

        case 'warning':
          toastr.warning("{{ Session::get('message') }}");
          break;

        case 'success':
          toastr.success("{{ Session::get('message') }}");
          break;

        case 'error':
          toastr.error("{{ Session::get('message') }}");
          break;
      }
    @endif

    function setPriority (element) {
      var selected = $(element).find('option:selected')
      var priority = selected.data('priority')
      $('#isproceed').val(priority)
    }

    function client (element) {
      var selected = $(element).val()
      if (selected === 'client') {
        $('#field_client').show()
        $('#field_mitra').hide()
        $('#mitraid').prop('disabled', true)
        $('#clientid').prop('disabled', false)
        if (table_client == undefined) {
          load_client_table()
        }
        $('#bank_card').hide()
        $('#client_card').show()
      } else {
        $('#field_client').hide()
        $('#field_mitra').show()
        $('#mitraid').prop('disabled', false)
        $('#clientid').prop('disabled', true)
        if (table_bank == undefined) {
          load_bank_table()
        }
        $('#bank_card').show()
        $('#client_card').hide()
      }
    }

    function save () {
      var check = [];
      check.push($('#target').val())
      check.push($('#transtype').val())
      check.push($('#amount').val())
      check.push($('#notes').val())
      if (!$('#clientid').prop('disabled')) {
        check.push($('#clientid').val())
      }
      if (!$('#mitraid').prop('disabled')) {
        check.push($('#mitraid').val())
      }
      if (check.includes('') || check.includes(null)) {
        toastr.error('Harap Isi field dengan benar');
      }else{
        $('#btn_save').prop('disabled', true)
        $.ajax({
          url: "{{ url('/koreksi_balance/send') }}",
          type: 'POST',
          dataType: 'JSON',
          data: $('#form_add').serialize(),
          success: function(d){
            if (d.status == 'true') {
              toastr.success(d.message);
              if ($('#target').val() == 'bank') {
                $('#bank_card').show()
                $('#client_card').hide()
                if (table_bank == undefined) {
                  load_bank_table()
                } else {
                  reload_bank_table()
                }
              } else {
                $('#bank_card').hide()
                $('#client_card').show()
                if (table_client == undefined) {
                  load_client_table()
                } else {
                  reload_client_table()
                }
              }
              $('#form_add')[0].reset();
              $('#field_mitra').hide()
              $('#mitraid').prop('disabled', true)
              $('#field_client').hide()
              $('#clientid').prop('disabled', true)
            }else{
              toastr.error(d.message);
            }
            $('#btn_save').prop('disabled', false)
          }
        })
      }
    }

    function format (element) {
      // let val = parseInt(element.value.replace(/\D/g, ''), 10)
      let val = parseInt(element.value.replace(/\./g, ''))
      if (element.value === '') {
        element.value = 0
      } else {
        element.value = val.toLocaleString().replace(/\,/g, '.')
      }
    }

    // Bank Mutasi Cr
    function load_bank_table () {
      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()
    }

    // Client Mutasi Cr
    function load_client_table () {
      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()
    }
  </script>
  @endsection