@extends('layout.master')
@push('plugin-styles')
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
  <nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#!">Finance</a></li>
      <li class="breadcrumb-item active" aria-current="page">Biaya & Kas</li>
    </ol>
  </nav>

  <form method="post" onsubmit="formSubmit()" id="form">
    <div class="card">
      <div class="card-body">
        <div class="row gy-3">
          <div class="col-12 col-md-6">
            <label class="form-label" for="referensi">Referensi</label>
            <input type="text" name="referensi" id="referensi" class="form-control required" placeholder="Nomor Referensi">
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label" for="tipe">Tipe</label>
            <select name="tipe" id="tipe" class="form-select required select2Custom">
              <option value="biaya">Biaya</option>
              <option value="kas">Kas</option>
            </select>
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label" for="vendor" >Vendor</label>
            <select name="vendor" id="vendor" class="form-select required select2Custom">
              <option value="">Pilih Vendor</option>
              @foreach ($dataVendor as $vendor)
                <option value="{{ $vendor->id }}">{{ $vendor->nama }} | {{ $vendor->npwp }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label" for="tanggal">Tanggal</label>
            <input type="date" name="tanggal" id="tanggal" class="form-control required" value="{{ date('Y-m-d') }}">
          </div>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            <div class="table-responsive">
              <table class="table table-bordered table-hover" id="table-item" style="min-width: 1500px">
                <thead>
                  <tr>
                    <th style="width: 10%">Item</th>
                    <th style="width: 15%">COA</th>
                    <th style="width: 15%">Keterangan</th>
                    <th style="width: 10%" class="text-end">Harga</th>
                    <th style="width: 10%" class="text-end">Potongan</th>
                    <th style="width: 25%">Pajak</th>
                    <th style="width: 10%" class="text-end">Total</th>
                    <th style="width: 5%">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="infoKosong">
                    <td colspan="8" class="text-center">Belum Terdapat Data</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            <button type="button" onclick="tambahItem()" class="btn btn-light btn-custom2 w-100">
              Tambah item
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-6 row gy-3">
            <div class="col-12">
              <label for="potongan" class="form-label">Potongan</label>
              <input type="text" class="form-control" id="potongan" onchange="formatInputUang(this);hitungTotal()">
            </div>
            <div class="col-12">
              <label for="biaya-kirim" class="form-label">Biaya Kirim</label>
              <input type="text" class="form-control" id="biaya-kirim" onchange="formatInputUang(this);hitungTotal()">
            </div>
            <div class="col-12">
              <label for="total" class="form-label">Total</label>
              <input type="text" class="form-control" disabled readonly id="total">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-6">
        <button type="submit" class="btn btn-success btn-custom1 w-100" name="btnSave1" id="btnSave1">Simpan Data Biaya & Kas</button>
      </div>
      <div class="col-6">
        <button type="submit" class="btn btn-success btn-custom1 w-100" name="btnSave2" id="btnSave2">Simpan Data Biaya & Kas [Langsung Bayar]</button>
      </div>
      <div class="col-12 mt-3">
        <a href="{{ route('finance.biaya.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>
@endpush

@push('custom-scripts')
  <script defer>
    const formSubmit = () => {
      event.preventDefault();

      let buttonPressed = event.submitter.id;
      if (cekForm('form') == true){
        let data = {
          _token: "{{ csrf_token() }}",
          referensi: $('#referensi').val(),
          tipe: $('#tipe').val(),
          vendor: $('#vendor').val(),
          tanggal: $('#tanggal').val(),
          potongan: $('#potongan').val().replace(/\./g, '').replace(/\,/g, '.'),
          biaya_kirim: $('#biaya-kirim').val().replace(/\./g, '').replace(/\,/g, '.'),
          total: $('#total').val(),
          details: [],
          actionType: buttonPressed
        }

        $('tr.item').each(function() {

          let pajak = [];
          $(this).find('div.pajak').each(function() {
            pajak.push($(this).find('select.pajak').val())
          })

          data.details.push({
            id: $(this).find('td select.item_id').val(),
            coa: $(this).find('td select.coa_id').val(),
            keterangan: $(this).find('td textarea.keterangan').val(),
            harga: $(this).find('td input.harga').val().replace(/\./g, '').replace(/\,/g, '.'),
            potongan: $(this).find('td input.potongan').val().replace(/\./g, '').replace(/\,/g, '.'),
            pajak: pajak,
          })
        })

        sendJson("{{ route('finance.biaya.store') }}", data, callbackAjax);
      }
    }

    function callbackAjax(data) {
      let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          if (data.hasOwnProperty('biaya_id') && data.biaya_id) {
              var biayaId = data.biaya_id;
              window.location.href = "{{ route('finance.biaya.index') }}?biayaId=" + biayaId;
          } else {
              window.location.href = "{{ route('finance.biaya.index') }}";
          }
        }
      })
    }

    const tambahItem = () => {
      $('.infoKosong').hide();
      $('#table-item tbody').append(`
        <tr class="item">
          <td>
            <select class="form-select required select2Creatable item_id">
              <option value="">Pilih Item</option>
            </select>
          </td>
          <td>
            <select class="form-select required select2Custom coa_id">
              <option value="">Pilih Item</option>
              @foreach ($dataCoa as $item)
                <option value="{{ $item->id }}">{{ $item->kode }} | {{ $item->nama }}</option>
              @endforeach
            </select>
          </td>
          <td>
            <textarea class="form-control keterangan" placeholder="Keterangan" rows="1"></textarea>
          </td>
          <td>
            <input type="text" class="form-control required text-end harga" placeholder="0" onchange="formatInputUang(this);hitungTotalItem(this)">
          </td>
          <td>
            <input type="text" class="form-control text-end potongan" placeholder="0" onchange="formatInputUang(this);hitungTotalItem(this)">
          </td>
          <td>
            <button type="button" class="btn btn-sm btn-warning btn-custom4 text-white" onclick="tambahPajak(this)">
              + Pajak
            </button>
          </td>
          <td>
            <input type="text" class="form-control text-end required total" disabled readonly placeholder="0">
          </td>
          <td>
            <button type="button" class="btn btn-sm btn-danger" onclick="hapusItem()">
              Hapus
            </button>
          </td>
        </tr>
      `)

      $('.select2Creatable').select2({
        tags: true,
        width: '100%',
        ajax: {
          url: "{{ route('master.biaya.lists') }}",
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: false
        },
      });
    }

    const hapusItem = () => {
      $(event.target).closest('tr').remove();
      if ($('#table-item tbody tr.item').length == 0) {
        $('.infoKosong').show();
      }
      hitungTotal();
    }

    const tambahPajak = (e) => {
      $(e).closest('td').append(`
        <div class="row pajak mt-2">
          <div class="col-7 pe-0">
            <select class="form-select required select2Custom pajak" onchange="hitungTotalItem(this)">
              <option value="">Pilih Pajak</option>
              @foreach ($dataPajak as $item)
                <option value="{{ $item->id }}" data-json="{{ json_encode($item) }}">{{ $item->nama }} | {{ formatNumber(abs($item->rate)) }}%</option>
              @endforeach
            </select>
          </div>
          <div class="col-5 ps-0">
            <input type="text" class="form-control required text-end pajak" placeholder="0" onchange="formatInputUang(this)">
          </div>
        </div>
      `)
    }

    const hitungTotalItem = (e) => {
      let harga = $(e).closest('tr').find('td input.harga').val().replace(/\./g, '').replace(/\,/g, '.');
      let potongan = $(e).closest('tr').find('td input.potongan').val().replace(/\./g, '').replace(/\,/g, '.');
      let total = (parseFloat(!isNumeric(harga) ? 0: harga)) - (parseFloat(!isNumeric(potongan) ? 0: potongan));
      let dpp = total;
      let grandTotal = total;
      $(e).closest('tr').find('select.pajak').each(function() {
        let data = $(this).find(':selected').data('json');
        let pajak = hitungPajak((data?.rate ?? 0), dpp, data?.is_include);
        if (!data?.is_include) {
          grandTotal += pajak;
        } else {
          dpp -= pajak;
        }
        $(this).closest('div.pajak').find('input.pajak').val(formatNumber(Math.abs(pajak), 0, 2));
      })
      $(e).closest('tr').find('td input.total').val(formatNumber(grandTotal, 0, 2));
      hitungTotal();
    }

    const hitungTotal = () => {
      let total = 0;
      $('tr.item').each(function() {
        total_item = $(this).find('td input.total').val().replace(/\./g, '').replace(/\,/g, '.');
        total += parseFloat(!isNumeric(total_item) ? 0: total_item);
      })

      let potongan = $('#potongan').val().replace(/\./g, '').replace(/\,/g, '.');
      let biaya_kirim = $('#biaya-kirim').val().replace(/\./g, '').replace(/\,/g, '.');
      total = total - parseFloat(!isNumeric(potongan) ? 0: potongan) + parseFloat(!isNumeric(biaya_kirim) ? 0: biaya_kirim);
      $('#total').val(formatNumber(total, 0, 2));
    }
  </script>
@endpush