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

  <form 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" disabled>
                <option value="0">Pilih Supplier</option>
                @foreach ($dataSupplier as $item)
                  <option value="{{ $item->id }}" @selected($data->supplier_id == $item->id)>{{ $item->kode." | ".$item->nama }}</option>
                @endforeach
              </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', strtotime($data->tanggal)) }}">
            </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 class="kolomNomor">No.</th>
                <th>Nomor PO</th>
                <th>Tanggal PO</th>
                <th class="text-end">Total PO</th>
                <th>Pajak</th>
                <th class="text-end">Total Uang Muka</th>
                <th class="text-end">Sisa</th>
                <th class="text-end">Bayar</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($data->details as $item)
                <tr>
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $item->po->nomor_po }}</td>
                  <td>{{ date('d-m-Y', strtotime($item->po->tanggal_po)) }}</td>
                  <td class="text-end">{{ formatNumber($item->po->total) }}</td>
                  <td>
                    @forelse ($item->po->pajakDetails as $detail)
                      <div> {{ $detail->nama. " " .formatNumber(abs($detail->rate))."% | ".formatNumber(abs($detail->amount))}} </div>
                    @empty
                      -
                    @endforelse
                  </td>
                  <td class="text-end">{{ formatNumber($item->po->total_uang_muka - $item->total_bayar) }}</td>
                  <td class="text-end">{{ formatNumber($item->po->sisa + $item->total_bayar) }}</td>
                  <td class="text-end">
                    <input type="text" data-detail_id="{{ $item->id }}" data-id="{{ $item->po->id }}" name="detail_total_bayar[{{ $item->po->id }}]" id="detail_total_bayar_{{ $item->po->id }}" class="form-control text-end detail_total_bayar" value="{{ formatNumber($item->total_bayar) }}" onchange="formatInputUang(this)" onkeyup="minMax(this, 0, {{$item->po->sisa + $item->total_bayar}});hitungDetail()">
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="8" class="text-center">Tidak ada data</td>
                </tr>
              @endforelse
            </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="{{($data->discount_value ?? 0)}}">{{ formatNumber(($data->discount_value ?? 0)) }}</div>
            <div class="col-sm-6">
              Total Bayar
            </div>
            <div class="col-sm-6 text-end" id="total-bayar" data-value="{{ $data->total_bayar + ($data->discount_value ?? 0) }}">{{ formatNumber($data->total_bayar + ($data->discount_value ?? 0)) }}</div>
            <div class="col-sm-6">
              Total
            </div>
            <div class="col-sm-6 text-end" id="total" data-value="{{ $data->total_bayar }}">{{ formatNumber($data->total_bayar) }}</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" value="{{ formatNumber($data->total_bayar) }}" 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" value="{{ formatNumber($data->discount) }}" 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" @selected($data->discount_type == 'nominal') >Rp</option>
                  <option value="persen" @selected($data->discount_type == '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 }}" @selected($data->metode_bayar_id == $item->id)>{{ $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">{{ $data->keterangan }}</textarea>
            </div>
          </div>
          <div class="col-md-6 row mb-3 input_rekening" @if(!$data->rekening_id) style="display: none" @endif>
            <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}}" @selected($data->rekening_id == $item->id)>{{ $item->bank->nama_bank }} | {{ $item->no_rekening }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6 row mb-3 input_rekening" @if(!$data->rekeningTujuan) style="display: none" @endif>
            <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</option>
                @if($data->rekeningTujuan)
                  <option value="{{ $data->rekeningTujuan->id }}" selected="selected">{{ $data->rekeningTujuan->name_in_list }}</option>
                @endif
              </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" @checked($data->lunas)>
          </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" value="{{ $data->nomor_transaksi_bank }}">
            </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 defer>
    $('#nomor_rekening_tujuan').select2({
      width: '100%',
      ajax: {
        url: `/master/kontak/${$('#supplier').val()}/list-banks`,
        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 detail_total = 0;
      $('.detail_total_bayar').each(function (index, row) {
        let detail_total_bayar = $(this).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 details = [];
        $('.detail_total_bayar').each(function (index, row) {
          details.push({
            id: $(this).data('detail_id'),
            total_bayar: $(this).val().replace(/\./g, '').replace(/\,/g, '.')
          });
        });

        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
        };

        let url = "{{ route('pembelian.bayar-po.update', ':id') }}";
        url = url.replace(':id', "{{ $data->id }}");

        sendJson(url, data, callbackAjax);
      }
    }
  </script>

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