@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">Edit Data Dari Surat Jalan</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 (Surat Jalan)
                </div>
            </div>
        </h5>
        <div class="mb-4">
            <div class="">
                <div class="border p-3">
                    <form id="form_invoice">
                        <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>
                                        {{-- @foreach ($dataSupplier as $valSupplier)
                                            <option @selected($data->supplier->id == $valSupplier->id) value="{{ $valSupplier->id }}">{{ $valSupplier->kode." | ".$valSupplier->nama }}</option>
                                        @endforeach --}}
                                        <option selected value="{{ $data->supplier->id }}">{{ $data->supplier->kode." | ".$data->supplier->nama }}</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-6 mb-3">
                                    <label>Nomor Faktur</label>
                                    <input value="{{ $data->no_faktur }}" 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="{{ $data->tanggal }}" 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="{{ $data->tanggal_jatuh_tempo }}" required>
                                </div>
                                <div class="col-12">
                                    <label>Keterangan</label>
                                    <textarea class="form-control resetForm resetForm" name="keterangan" id="keterangan" placeholder="Keterangan">{{ $data->keterangan }}</textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </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" id="table-detail">
                    <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 text-end">Harga</th>
                            <th class="text-end text-end">Total</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="tampilBarang">
                        <tr class="infoKosong" style="display: none">
                            <td colspan="10" class="text-center">Belum Terdapat Data</td>
                        </tr>
                        @foreach ($data->details as $detail)
                            @php
                                $varian = $detail->suratJalanDetail->poDetail->produk;
                            @endphp
                            <tr id="rowBarangDetail{{ $detail->suratJalanDetail->po_detail_id }}" class="rowBarangDetail">
                                <td>
                                    <input type="hidden" class="invoice_detail_id" value="{{ $detail->id }}">
                                    <input type="hidden" class="form-control idDetail id{{$detail->suratJalanDetail->po_detail_id}}" value="{{$detail->suratJalanDetail->po_detail_id}}">
                                    {{ formatNumber($detail->suratJalanDetail->poDetail->jumlah ?? 0) }}
                                </td>
                                <td>
                                    <div class="view_nama_asli view_nama">
                                        {{ $varian->cetakNama($detail->id_relasi_produk_supplier, 'asli') }}
                                    </div>
                                    <div class="view_nama_alias view_nama" style="display:none">
                                        {{ $varian->cetakNama($detail->id_relasi_produk_supplier, 'alias') }}
                                    </div>
                                    <div class="view_nama_asli_alias view_nama" style="display:none">
                                        {!! $varian->cetakNama($detail->id_relasi_produk_supplier, 'asli_alias') !!}
                                    </div>
                                </td>
                                <td>{{($varian->kode ?? '-')}}</td>
                                <td>PO : {{($detail->suratJalanDetail->poDetail->po->nomor_po ?? '-')}}</td>
                                <td>
                                    <div class="d-flex">
                                        <input type="text" class="form-control qty removeMinusSign text-end" onkeyup="dottocomma(this);hitungTotalDetail(this);hitungGrandTotal()" onchange="formatInputUang(this)" value="{{formatNumberComma($detail->berat_bruto, 0)}}">
                                        <a class="text-primary" data-bs-toggle="collapse" href="#detail-qty-{{$detail->id}}" role="button" aria-expanded="false" aria-controls="detail-qty-{{$detail->id}}">
                                            <span class="mdi mdi-information"></span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" class="form-control harga text-end removeMinusSign" onkeyup="hitungTotalDetail(this);hitungGrandTotal()" onchange="formatInputUang(this)" value="{{formatNumber($detail->harga)}}">
                                </td>
                                <td class="totalDetail text-end" data-value="{{$detail->total}}">{{formatNumber($detail->total)}}</td>
                                <td>
                                    <button type="button" onclick="hapusBarang({{$detail->suratJalanDetail->po_detail_id}})" class="btn btn-danger btn-custom5 btn-sm">
                                        <span class="mdi mdi-delete"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="collapse" data-bs-parent="#table-detail" id="detail-qty-{{$detail->id}}">
                                <td colspan="3"></td>
                                <td colspan="2">
                                    -                                </td>
                                <td colspan="3"></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-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_second" id="view_nama_asli_second" value="view_nama_asli" checked>
                                    <label class="form-check-label" for="view_nama_asli_second">
                                      Asli
                                    </label>
                                </div>
                                <div class="form-check ms-2">
                                    <input class="form-check-input" type="radio" name="view_nama_second" id="view_nama_alias_second" value="view_nama_alias">
                                    <label class="form-check-label" for="view_nama_alias_second">
                                      Alias
                                    </label>
                                </div>
                                <div class="form-check ms-2">
                                    <input class="form-check-input" type="radio" name="view_nama_second" id="view_nama_asli_alias_second" value="view_nama_asli_alias">
                                    <label class="form-check-label" for="view_nama_asli_alias_second">
                                      Keduanya
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>
        <div class="row">
            <div class="col-6 mb-3 d-grid">
                <button type="button" class="btn btn-primary btn-custom1 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="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="{{ $data->dpp }}">Rp {{ formatNumber($data->dpp) }}</h5>
                        </div>

                        <div class="col-12 hitung-pajak">
                            @foreach ($data->pajakDetails as $key => $detail)
                                <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($detail->master_pajak_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 {{ formatNumber(abs($detail->amount)) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="col-12 hitung-biaya">
                            @foreach ($data->biayaLain as $no => $item)
                                <div class="form-group pt-2 form-biaya{{ $loop->first ? ' pt-3 border-top' : '' }}{{ $loop->last ? ' pb-3 border-bottom mb-2' : '' }}">
                                    <div class="row">
                                        <div class="col-6">
                                            <select class="form-control required select2Creatable keterangan-biaya">
                                                <option value="">Silahkan Pilih Atau Buat Baru</option>
                                                <option value="{{ $item->keterangan }}" selected="selected">{{ $item->keterangan }}</option>
                                            </select>
                                        </div>
                                        <div class="col-6 text-end my-auto">
                                            <div class="input-group">
                                                <input type="text" class="form-control required amount-biaya text-end removeMinusSign" onchange="formatInputUang(this);hitungGrandTotal()" value="{{ formatNumber($item->amount) }}">
                                                <button class="btn btn-danger" type="button" onclick="dellBiaya(this)">
                                                    <span class="mdi mdi-delete-outline">
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </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="{{ $data->grand_total }}">Rp {{ formatNumber($data->grand_total) }}</h3>
                        </div>

                    <div class="col-12 uang-muka">
                        @if ($data->uang_muka > 0)
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <h5>Uang Muka</h5>
                                </div>
                                <div class="col-6 mb-3 text-end">
                                    <h5 id="uang-muka" data-amount="{{ $data->uang_muka }}">Rp {{formatNumber($data->uang_muka)}}</h5>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="col-12 sisa-hutang">
                        @if ($data->uang_muka > 0)
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <h5>Sisa Hutang</h5>
                                </div>
                                <div class="col-6 text-end mb-3">
                                    <h5 id="sisa-hutang" data-amount="{{ $data->sisa_hutang }}">Rp {{ formatNumber($data->sisa_hutang) }}</h5>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-6">
                <button type="button" onclick="submitForm(langsungBayar = false)" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Invoice</button>
            </div>
            <div class="col-6">
                <button type="button" onclick="submitForm(langsungBayar = true)" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Invoice & Bayar</button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <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 table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Rol</th>
                                        <th>Nama Barang</th>
                                        <th>Warna</th>
                                        <th>Keterangan</th>
                                        <th>Qty</th>
                                        <th>Harga</th>
                                        <th>Jumlah</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>
    <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 src="{{ asset('assets/js/data-table.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

    <script defer>
        const submitForm = (langsungBayar = false) => {
            if(parseInt($('.rowBarangDetail').length) > 0){
                if (cekForm('form_invoice') == 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, '.'),
                            id: $(this).closest('tr').find('.invoice_detail_id').val(),
                        });
                    });

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

                    let 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(),
                        status: $('#status').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'),
                        langsung_bayar: langsungBayar,
                    }

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

                    sendJson(url, data, rSendsInvoice);
                }
            }else{
                swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
            }
        }
    </script>

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