@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">Bayar Uang Muka</li>
    </ol>
  </nav>

  <form onsubmit="formSubmit()" id="form">
    <div class="card">
      <div class="card-header bg-white">
        <h4>Pembayaran PO</h4>
      </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">
        <h4>Nota Pembelian</h4>
      </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 PO</th>
                <th>Tanggal PO</th>
                <th>Total PO</th>
                <th>Pajak</th>
                <th>Total Uang Muka</th>
                <th>Sisa</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">
        <h4>Pembayaran</h4>
      </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 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" onchange="formatInputUang(this)" onkeyup="inpPotongan()">
                <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-info_rekening_perusahaan="{{ $item->info_rekening_perusahaan }}" 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> --}}
              <input
                id="nomor_rekening"
                name="nomor_rekening"
                class="col-md-8 form-control"
                type="text"
                readonly
                disabled
              >
            </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">
        <h4>Settlement</h4>
      </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-po.get-po', ':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: 'nomor_po', name: 'nomor_po'},
            {data: 'tanggal_po', name: 'tanggal_po'},
            {data: 'total', name: 'total', className: 'text-end'},
            {data: 'pajak', name: 'pajak'},
            {data: 'total_uang_muka', name: 'total_uang_muka', className: 'text-end'},
            {data: 'sisa', name: 'sisa', 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', parseInt(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({
            po_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-po.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