@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"
  rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Pembelian</a></li>
    <li class="breadcrumb-item"><a href="{{ route('pembelian.invoice.index') }}">Invoice Pembelian</a></li>
    <li class="breadcrumb-item active" aria-current="page">Tambah Pembayaran</li>
  </ol>
</nav>

<form action="{{ route('pembelian.bayar-invoice.store') }}" method="post" onsubmit="formSubmit()" id="form">
  <div class="card">
    <div class="card-header bg-white">
      <h5 class="card-title m-0">Pembayaran Invoice</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6 row align-items-center">
          <div class="col-md-4">
            <label for="supplier" class="col-form-label">Supplier</label>
          </div>
          <div class="col-md-8">
            <select name="supplier_id" id="supplier" class="form-control required select2Custom">
              <option value="0">Pilih Supplier</option>
            </select>
          </div>
        </div>
        <div class="col-md-6 row align-items-center">
          <div class="col-md-4">
            <label for="tanggal" class="col-form-label">Tanggal</label>
          </div>
          <div class="col-md-8">
            <input type="date" name="tanggal" id="tanggal" class="form-control required" value="{{ date('Y-m-d') }}">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header bg-white">
      <h5 class="card-title m-0">Nota Pembelian</h5>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="datatable-serverside" class="table table-sm" style="width: 100%">
          <thead>
            <tr>
              <th></th>
              <th class="kolomNomor">No.</th>
              <th>Nomor Faktur</th>
              <th>Tanggal Faktur</th>
              <th>Total Invoice</th>
              <th>Pajak</th>
              <th>Sudah Bayar</th>
              <th>Hutang</th>
              <th>Bayar</th>
            </tr>
          </thead>
          <tbody>
            <tr class="text-center">
              <td colspan="9" class="border-0">Pilih Supplier Terlebih Dahulu</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="card-footer bg-white">
      <div class="row">
        <div class="col-md-8"></div>
        <div class="col-md-4 row">
          <div class="col-sm-6">
            Total Potongan
          </div>
          <div class="col-sm-6 text-end" id="total-potongan" data-value="0">0</div>
          <div class="col-sm-6">
            Total Bayar
          </div>
          <div class="col-sm-6 text-end" id="total-bayar" data-value="0">0</div>
          <div class="col-sm-6">
            Total
          </div>
          <div class="col-sm-6 text-end" id="total" data-value="0">0</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header bg-white">
      <h5 class="card-title m-0">Pembayaran</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6 row mb-3">
          <label class="col-md-4 col-form-label" for="nominal_pembayaran">Nominal Pembayaran</label>
          <div class="col-md-8">
            <input id="nominal_pembayaran" name="nominal_pembayaran" class="col-md-8 form-control text-end required" type="text"
              readonly disabled>
          </div>
        </div>
        <div class="col-md-6 row mb-3">
          <label class="col-md-4 col-form-label" for="inputPotongan">Potongan</label>
          <div class="col-md-8">
            <div class="input-group">
              <input type="text" class="form-control removeMinusSign" name="potongan" id="inputPotongan" placeholder="0"
                onkeyup="inpPotongan()" onchange="formatInputUang(this)">
              <select name="tipe_potongan" id="tipe_potongan" class="p-2 border rounded-end text-center"
                onchange="inpPotongan()">
                <option value="nominal">Rp</option>
                <option value="persen">%</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-6 row mb-3">
          <label class="col-md-4 col-form-label" for="metode_pembayaran">Metode Pembayaran</label>
          <div class="col-md-8">
            <select name="metode_pembayaran" id="metode_pembayaran" class="form-control required select2Custom"
              onchange="selectNomorRekening(this)">
              <option value="" data-rekening="0">Pilih Metode Pembayaran</option>
              @foreach ($metodeBayar as $item)
              <option value="{{$item->id}}" data-rekening="{{ $item->keterikatan_rekening_perusahaan }}">{{ $item->nama
                }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="col-md-6 row mb-3">
          <label class="col-md-4 col-form-label" for="keterangan">Keterangan</label>
          <div class="col-md-8">
            <textarea name="keterangan" id="keterangan" class="form-control" rows="1"></textarea>
          </div>
        </div>
        <div class="col-md-6 row mb-3 input_rekening" style="display: none">
          <label class="col-md-4 col-form-label" for="nomor_rekening">Nomor Rekening</label>
          <div class="col-md-8">
            <select name="nomor_rekening" id="nomor_rekening" class="form-control select2Custom">
              <option value="">Pilih Nomor Rekening</option>
              @foreach ($dataRekening as $item)
              <option value="{{$item->id}}">{{ $item->bank->nama_bank }} | {{ $item->no_rekening }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="col-md-6 row mb-3 input_rekening" style="display: none">
          <label class="col-md-4 col-form-label" for="nomor_rekening_tujuan">Nomor Rekening Tujuan</label>
          <div class="col-md-8">
            <select name="nomor_rekening_tujuan" id="nomor_rekening_tujuan" class="form-control select2ajax">
              <option value="">Pilih Nomor Rekening Tujuan</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header bg-white">
      <h5 class="card-title m-0">Settlement</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-12 col-md-6 form-switch row mb-3" style="padding-left: calc(var(--bs-gutter-x) * 0.5)">
          <label class="col-4 form-check-label col-form-label" for="lunas">Sudah Dibayar</label>
          <input onchange="changeLunas(this)" type="checkbox" class="col-8 form-check-input ms-3" id="lunas" value="1"
            style="width: 3.8em; height: 1.8em">
        </div>
        <div class="col-12 col-md-6 row mb-3">
          <label class="col-md-4 col-form-label" for="nomor_transaksi_bank">Nomor Transaksi Bank</label>
          <div class="col-md-8">
            <input id="nomor_transaksi_bank" name="nomor_transaksi_bank" class="col-md-8 form-control" type="text">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-6">
      <button type="submit" id="btnSimpanData" class="btn btn-success btn-custom1 w-100">Simpan Data
        Pembayaaran</button>
    </div>
    <div class="col-6">
      <a href="{{ route('pembelian.bayar-invoice.index') }}" class="btn btn-warning btn-custom8 w-100">Kembali ke
        Halaman Sebelumnya</a>
    </div>
  </div>
</form>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
<script type="text/javascript"
  src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
@endpush

@push('custom-scripts')
<script>
  let datatable = null;

    $('#supplier').change(function(){
      url_datatable = "{{ route('pembelian.bayar-invoice.get-invoice', ':supplier_id') }}";
      url_datatable = url_datatable.replace(':supplier_id', $(this).val());
      datatableReload(url_datatable);
      let url_nomor_rekening_tujuan = `/master/kontak/${$(this).val() ?? 0}/list-banks`;
      nomorRekeningTujuanReload(url_nomor_rekening_tujuan);
    });

    function datatableReload(url){
      if(!datatable){
        datatable = $('#datatable-serverside').DataTable({
          lengthMenu: lengthMenuDatatable(),
          processing: true,
          serverSide: true,
          ajax: url,
          columns: [
            {data: 'id', name: 'id'},
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'no_faktur', name: 'no_faktur'},
            {data: 'tanggal', name: 'tanggal'},
            {data: 'total', name: 'total', className: 'text-end'},
            {data: 'pajak', name: 'pajak'},
            {data: 'sudah_bayar', name: 'sudah_bayar', className: 'text-end'},
            {data: 'hutang', name: 'hutang', className: 'text-end'},
            {data: 'bayar', name: 'bayar', className: 'text-end'},
          ],
          columnDefs: [
            {
              targets: 0,
              checkboxes: {
                'selectCallback': function(){
                  hitungDetail();
                }
              },
              searchable: false,
              orderable: false
            }
          ],
          select: {
            style: 'multi'
          },
          order: [[1, 'asc']]
        });


      }else{
        datatable.ajax.url(url).load();
      }
    }

    const nomorRekeningTujuanReload = (url) => {
      $('#nomor_rekening_tujuan').select2({
        width: '100%',
        ajax: {
          url: url,
          dataType: 'json',
          delay: 250,
          processResults: function(data) {
            return {
              results: $.map(data, function(item) {
                return {
                  text: `${item.bank.nama_bank} | ${item.nomor_bank}`,
                  id: item.id
                }
              })
            };
          },
          cache: false
        },
      });
    }

    function hitungDetail(){
      let rows_selected = datatable.column(0).checkboxes.selected();
      let detail_total = 0;
      $(rows_selected).each(function (index, row) {
        let detail_total_bayar = $('#detail_total_bayar_'+row).val().replace(/\./g, '').replace(/\,/g, '.');
        detail_total += parseFloat(detail_total_bayar);
      });
      $('#total-bayar').attr('data-value', parseFloat(detail_total)).html(formatNumber(detail_total, 0, 2));
      let total = detail_total - parseFloat($('#total-potongan').data('value'));
      $('#total').attr('data-value', parseFloat(total)).html(formatNumber(total, 0, 2));
      $('#nominal_pembayaran').val(formatNumber(total));
    }

    const formSubmit = () => {
      event.preventDefault();
      if (cekForm('form') == true){
        let rows_selected = datatable.column(0).checkboxes.selected();
        let details = [];
        $(rows_selected).each(function (index, row) {
          let detail_total_bayar = $('#detail_total_bayar_'+row).val().replace(/\./g, '').replace(/\,/g, '.');
          details.push({
            invoice_id: row,
            total_bayar: detail_total_bayar
          });
        });

        let data = {
          _token: "{{ csrf_token() }}",
          supplier: $('#supplier').val(),
          tanggal: $('#tanggal').val(),
          nominal_pembayaran: $('#nominal_pembayaran').val().replace(/\./g, '').replace(/\,/g, '.'),
          potongan: $('#inputPotongan').val().replace(/\./g, '').replace(/\,/g, '.'),
          tipe_potongan: $('#tipe_potongan').val(),
          nomor_transaksi_bank: $('#nomor_transaksi_bank').val(),
          metode_pembayaran: $('#metode_pembayaran').val(),
          keterangan: $('#keterangan').val(),
          nomor_rekening: $('#nomor_rekening').val(),
          nomor_rekening_tujuan: $('#nomor_rekening_tujuan').val(),
          details: details,
          lunas: $('#lunas').is(':checked') ? 1 : 0
        };

        sendJson("{{ route('pembelian.bayar-invoice.store') }}", data, callbackAjax);
      }
    }

    $('select[name="supplier_id"]').select2({
      ajax: {
        url: '{{ route("kontak.supplier") }}',
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            search: params.term
          };
        },
        processResults: function (data) {
          return {
            results: $.map(data, function (item) {
              return {
                text: item.nama,
                id: item.id,
                tempo: item.tempo
              }
            })
          };
        },
        cache: true
      },
      minimumInputLength: 3,
    });
</script>

@include('pages.pembelian.bayar-invoice.function')
@endpush