@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" />
@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="/pembelian/invoice">Invoice Pembelian</a></li>
      <li class="breadcrumb-item active" aria-current="page">Tambah Dari PO</li>
    </ol>
  </nav>

  <div class="card m-b-30">
    <div class="card-body">
      <h5 class="card-title">
        <div class="row">
          <div class="col-12">
            Invoice Pembelian (PO)
          </div>
        </div>
      </h5>
      <form id="form_invoice" onsubmit="event.preventDefault()">
        <div class="mb-4">
          <div class="">
            <div class="border p-3">
              <div class="form-group">
                <div class="row">
                  <div class="col-12 col-md-6 mb-3">
                    <label>Supplier</label>
                    <select name="supplier_id" id="supplier_id" class="form-control required select2Custom">
                      <option value="">Silahkan Pilih</option>
                    </select>
                  </div>
                  <div class="col-12 col-md-6 mb-3">
                    <label>Nomor Faktur</label>
                    <input class="form-control resetForm required" type="text" name="nomor_faktur" id="nomor_faktur"
                      placeholder="Nomor Faktur" required>
                  </div>
                  <div class="col-12 col-md-6 mb-3">
                    <label>Tanggal Invoice</label>
                    <input class="form-control resetForm required" type="date" name="tanggal_invoice"
                      id="tanggal_invoice" placeholder="Tanggal Invoice" value="2025-06-08" required>
                  </div>
                  <div class="col-12 col-md-6 mb-3">
                    <label>Tanggal Jatuh Tempo</label>
                    <input class="form-control resetForm required" type="date" name="tanggal_jatuh_tempo"
                      id="tanggal_jatuh_tempo" placeholder="Tanggal Jatuh Tempo" value="2025-06-08" required>
                  </div>
                  <div class="col-12">
                    <label>Keterangan</label>
                    <textarea class="form-control resetForm resetForm" name="keterangan" id="keterangan" placeholder="Keterangan"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-2">
          <div class="form-group mb-3">
              <div class="row">
                  <div class="col-12">
                      <label for="view_nama">View Nama Barang</label>
                      <div class="d-flex">
                          <div class="form-check">
                              <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli" value="view_nama_asli" checked>
                              <label class="form-check-label" for="view_nama_asli">
                                Asli
                              </label>
                          </div>
                          <div class="form-check ms-2">
                              <input class="form-check-input" type="radio" name="view_nama" id="view_nama_alias" value="view_nama_alias">
                              <label class="form-check-label" for="view_nama_alias">
                                Alias
                              </label>
                          </div>
                          <div class="form-check ms-2">
                              <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli_alias" value="view_nama_asli_alias">
                              <label class="form-check-label" for="view_nama_asli_alias">
                                Keduanya
                              </label>
                          </div>
                      </div>

                  </div>
              </div>
          </div>
        </div>
        <div class="table-responsive" style="overflow-x: auto;">
          <table class="table table-bordered table-hover table-sm">
            <thead>
              <tr>
                <th class="kolomNomor">Rol</th>
                <th>Nama Barang</th>
                <th>Warna</th>
                <th class="kolomKeterangan">Keterangan</th>
                <th class="kolomQty text-end">Qty</th>
                <th class="text-end kolomHarga">Harga</th>
                <th class="text-end">Total</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
            <tbody class="tampilBarang">
              <tr class="infoKosong">
                <td colspan="10" class="text-center">Belum Terdapat Data</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="row mt-3">
          <div class="col-12 mb-3">
            <button type="button" id="btnTambahBarang" class="btn btn-light btn-custom2" style="width: 100% !important;">Tambah Barang</button>
          </div>
        </div>
        <div class="row">
          <div class="col-6 mb-3 d-grid">
            <button type="button" class="btn btn-primary btn-custom4 text-white" onclick="addPajak()">Tambah Pajak</button>
          </div>
          <div class="col-6 mb-3 d-grid">
            <button type="button" class="btn btn-info btn-custom4 text-white" onclick="addBiaya()">Tambah Biaya Lain</button>
          </div>

          <div class="hitung-pajak">
            @if ($pajakDefault)
              <div class="form-group mb-3">
                <div class="row">
                  <div class="col-6">
                    <div class="input-group">
                      <select class="form-control required pajak" onchange="hitungGrandTotal()">
                        <option value="">Silahkan Pilih</option>
                        @foreach ($listPajak as $pajak)
                          <option value="{{ $pajak->id }}" @if ($pajakDefault->id == $pajak->id) selected @endif
                            data-json="{{ json_encode($pajak) }}">
                            {{ $pajak->nama . ' (' . formatNumber(abs($pajak->rate)) . '%)' }}
                          </option>
                        @endforeach
                      </select>
                      <button class="btn btn-danger" type="button" onclick="dellPajak(this)">
                        <span class="mdi mdi-delete-outline">
                      </button>
                    </div>
                  </div>
                  <div class="col-6 text-end my-auto">
                    <h5 class="amount-pajak">Rp 0</h5>
                  </div>
                </div>
              </div>
            @endif
          </div>

          <div class="col-12 mb-3">
            <div class="row">
              <div class="col-6 mb-3">
                <h5>DPP</h5>
              </div>
              <div class="col-6 text-end mb-3">
                <h5 id="dpp" data-amount="0">Rp 0</h5>
              </div>

              <div class="col-12 hitung-biaya"></div>

              <div class="col-6 mb-3">
                <h3>Grand Total</h3>
              </div>
              <div class="col-6 mb-3 text-end">
                <h3 id="grand-total" data-amount="0">Rp 0</h3>
              </div>

              <div class="col-12 uang-muka"></div>
              <div class="sol-12 sisa-hutang"></div>
            </div>
          </div>
        </div>
      </form>
      <div class="row mt-3">
        <div class="col-6">
          <button type="button" id="btnSimpanData" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Invoice</button>
        </div>
        <div class="col-6">
          <a href="{{ route('pembelian.invoice.index') }}" class="btn btn-warning btn-custom8" style="width: 100% !important;">Kembali ke Halaman Sebelumnya</a>
        </div>
      </div>
    </div>
  </div>

  {{-- Modal --}}
  <div id="modalBarang" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h4">Data Barang</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body">
          <form class="forms-sample">
            <div class="row">
              <div class="col-12">
                <table class="table table-sm" id="tableBarang">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Nomor PO</th>
                      <th>Tanggal PO</th>
                      <th class="text-end">Total</th>
                      <th class="kolomAksi">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
              <div class="col-12 mt-3" style="text-align: right;">
                <button type="button" id="btnSimpanBarang" class="btn btn-primary btn-custom1">Simpan</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  {{-- Akhiran Modal --}}
@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>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    $('#supplier_id').change(function() {
      let tempo = $(this).find(':selected').data('tempo');
      if(tempo){
        $('#tanggal_jatuh_tempo').val(moment($('#tanggal_invoice').val()).add(tempo, 'days').format('YYYY-MM-DD'));
      }else{
        $('#tanggal_jatuh_tempo').val(moment($('#tanggal_invoice').val()).format('YYYY-MM-DD'));
      }
    });

    $('#btnSimpanData').on('click', function(e) {
      if (parseInt($('.rowBarangDetail').length) > 0) {
        if (cekForm('form_invoice') == true) {
          var cekFormDetail = true;

          details = [];
          $.each($('.idDetail'), function(i, v) {
            details.push({
              po_detail_id: $(this).val(),
              qty: $(this).closest('tr').find('.qty').val().replace(/\./g, '').replace(/\,/g, '.'),
              harga: $(this).closest('tr').find('.harga').val().replace(/\./g, '').replace(/\,/g, '.')
            });
          });

          let pajak = [];
          $.each($('.pajak'), function(i, v) {
            let data = $(this).find(':selected').data('json');
            if (data) {
              pajak.push(data.id);
            }
          });

          var data = {
            _token: "{{ csrf_token() }}",
            supplier_id: $('#supplier_id').val(),
            nuk: $('#nuk').val(),
            nomor_faktur: $('#nomor_faktur').val(),
            tanggal_invoice: $('#tanggal_invoice').val(),
            tanggal_jatuh_tempo: $('#tanggal_jatuh_tempo').val(),
            keterangan: $('#keterangan').val(),
            details: details,
            pajak: pajak,
            biaya_lain: $('.form-biaya').map(function() {
              return {
                keterangan: $(this).find('.keterangan-biaya').val(),
                amount: $(this).find('.amount-biaya').val().replace(/\./g, '').replace(/\,/g, '.')
              }
            }).get(),
            uang_muka: $('#uang-muka').data('amount') ?? 0,
            dpp: $('#dpp').data('amount'),
            grand_total: $('#grand-total').data('amount')
          }

          sendJson("{{ route('pembelian.invoice-po.store') }}", data, rSendsInvoice);
        }
      } else {
        swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
      }
    });
  </script>

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