@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</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" value="{{ $data->referensi }}">
          </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 }}" @selected($vendor->id == $data->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', strtotime($data->tanggal)) }}">
          </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">
                <thead>
                  <tr>
                    <td>Detail</td>
                    {{-- <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=>Pajak</th>
                    <th style="width: 10%" class="text-end">Total</th>
                    <th style="width: 5%">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="infoKosong" @if (count($data->details) > 0) style="display: none;" @endif>
                    <td colspan="8" class="text-center">Belum Terdapat Data</td>
                  </tr>
                  @foreach ($data->details as $item)
                    <tr class="item">
                      <td>
                        <div class="mb-2">
                          <label class="form-label">Item :</label>
                          <div>
                            <select class="form-select required select2Creatable item_id">
                              <option value="{{ $item->masterBiaya->id }}" selected="selected">{{ $item->masterBiaya->nama }}</option>
                            </select>
                          </div>
                        </div>
                        <div class="mb-2">
                          <label class="form-label">Akun :</label>
                          <div>
                            <select class="form-select required select2Custom coa_id">
                              <option value="">Pilih Item</option>
                              @foreach ($dataCoa as $coa)
                                <option value="{{ $coa->id }}" @if ($coa->id == $item->master_coa_id) selected @endif>{{ $coa->kode }} | {{ $coa->nama }}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                        <div class="mb-2">
                          <label class="form-label">Keterangan :</label>
                          <div>
                            <textarea class="form-control keterangan" placeholder="Keterangan" rows="1">{{ $item->keterangan }}</textarea>
                          </div>
                        </div>
                      </td>
                      <td>
                        <input type="text" class="form-control required text-end harga" placeholder="0" onchange="formatInputUang(this);hitungTotalItem(this)" value="{{ formatNumber($item->harga, 0, 2) }}">
                      </td>
                      <td>
                        <input type="text" class="form-control text-end potongan" placeholder="0" onchange="formatInputUang(this);hitungTotalItem(this)" value="{{ formatNumber($item->potongan, 0, 2) }}">
                      </td>
                      <td>
                        <button type="button" class="btn btn-sm btn-warning text-white" onclick="tambahPajak(this)">
                          + Pajak
                        </button>
                        @foreach ($item->pajakDetails as $pajak)
                          <div class="row pajak mt-2">
                            <div class="col-6 pe-0">
                              <select class="form-select required select2Custom pajak" onchange="hitungTotalItem(this)">
                                <option value="">Pilih Pajak</option>
                                @foreach ($dataPajak as $pajakItem)
                                  <option value="{{ $pajakItem->id }}" data-json="{{ json_encode($pajakItem) }}" @if ($pajakItem->id == $pajak->master_pajak_id) selected @endif>{{ $pajakItem->nama }} | {{ formatNumber(abs($pajakItem->rate)) }}%</option>
                                @endforeach
                              </select>
                            </div>
                            <div class="col-5 p-0">
                              <input type="text" class="form-control required text-end pajak h-100" placeholder="0" onchange="formatInputUang(this)" value="{{ formatNumberComma(abs($pajak->amount)) }}">
                            </div>
                            <div class="col-1 ps-0">
                              <button type="button" class="btn btn-sm btn-danger btn-custom5 h-100" onclick="hapusPajak(this)">
                                <span class="mdi mdi-delete"></span>
                              </button>
                            </div>
                          </div>
                        @endforeach
                      </td>
                      <td>
                        <input type="text" class="form-control text-end required total" disabled readonly placeholder="0" value="{{ formatNumber($item->total, 0, 2) }}">
                      </td>
                      <td>
                        <button type="button" class="btn btn-sm btn-danger btn-custom5" onclick="hapusItem()">
                          <span class="mdi mdi-delete"></span>
                        </button>
                      </td>
                    </tr>
                  @endforeach
                </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 mt-3">
            <h3>Grand Total</h3>
          </div>
          <div class="col-6 text-end mt-3">
            <h3 id="total">{{formatNumber($data->total)}}</h3>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-6">
        <button type="submit" class="btn btn-success btn-custom1 w-100">Simpan Data Biaya</button>
      </div>
      <div class="col-6">
        <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>
    $('.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 formSubmit = () => {
      event.preventDefault();
      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').html(),
          details: []
        }

        $('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,
          })
        })

        let url = "{{ route('finance.biaya.update', ':id') }}".replace(':id', "{{ $data->id }}");
        sendJson(url, 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") {
          window.location.href = "{{ route('finance.biaya.index') }}";
        }
      })
    }

    const tambahItem = () => {
      $('.infoKosong').hide();
      $('#table-item tbody').append(`
        <tr class="item">
          <td>
            <div class="mb-2">
              <label class="form-label">Item :</label>
              <div>
                <select class="form-select required select2Creatable item_id">
                  <option value="">Pilih Item</option>
                </select>
              </div>
            </div>
            <div class="mb-2">
              <label class="form-label">Akun :</label>
              <div>
                <select class="form-select required select2Custom coa_id">
                  <option value="">Pilih Akun</option>
                  @foreach ($dataCoa as $item)
                    <option value="{{ $item->id }}">{{ $item->kode }} | {{ $item->nama }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="mb-2">
              <label class="form-label">Keterangan :</label>
              <div>
                <textarea class="form-control keterangan" placeholder="Keterangan" rows="1"></textarea>
              </div>
            </div>
          </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 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 btn-custom5" onclick="hapusItem()">
              <span class="mdi mdi-delete"></span>
            </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
        },
      });

      $('.select2Custom').select2({
        width: '100%'
      });
    }

    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-6 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 p-0">
            <input type="text" class="form-control required text-end pajak h-100" placeholder="0" onchange="formatInputUang(this)">
          </div>
          <div class="col-1 ps-0">
            <button type="button" class="btn btn-sm btn-danger btn-custom5 h-100" onclick="hapusPajak(this)">
              <span class="mdi mdi-delete"></span>
            </button>
          </div>
        </div>
      `)

      $('.select2Custom').select2({
        width: '100%'
      });
    }

    const hapusPajak = (e) => {
      let td = $(e).closest('td');
      $(e).closest('.row.pajak').remove();
      hitungTotalItem(td);
    }

    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').html(formatNumber(total, 0, 2));
    }
  </script>
@endpush