@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="/pembelian/po">PO</a></li>
        <li class="breadcrumb-item active" aria-current="page">Input Data</li>
    </ol>
</nav>

<div class="card m-b-30">
    <div class="card-body">
        <h5 class="card-title">
            <div class="row">
                <div class="col-12">
                    PO PEMBELIAN
                </div>
            </div>
        </h5>
        <form id="form_po_header" onsubmit="event.preventDefault()">
            <div class="mb-4">
                <div class="">
                    <div class="border p-3">
                        <div class="form-group mb-3">
                            <label>Supplier</label>
                            <select name="supplier_id" id="supplier_id" class="form-control required">
                                <option value="">Silahkan Pilih</option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <div class="row">
                                <div class="col-12">
                                    <label>Tanggal PO</label>
                                    <input class="form-control resetForm required" type="date" name="tanggal_po" id="tanggal_po" placeholder="Tanggal PO" value="2025-06-08">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <div class="row">
                                <div class="col-12">
                                    <label for="footer_pdf">Footer PDF</label>
                                    <textarea name="footer_pdf" id="footer_pdf" class="form-control resetForm">{{ $GlobalVar->footer_po ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <div class="row">
                                <div class="col-12">
                                    <label for="cetak_nama">Cetak Nama Barang</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="cetak_nama" id="asli" value="1" checked>
                                        <label class="form-check-label" for="asli">
                                          Asli
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="cetak_nama" id="alias" value="2">
                                        <label class="form-check-label" for="alias">
                                          Alias
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-2">
                <x-checkbox-view-nama-top />
            </div>
            <div class="table-responsive" style="overflow-x: auto;">
                <table class="table table-bordered table-hover table-sm table-number" style="width:100% !important;">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Barang</th>
                            <th class="kolomQty">Jumlah</th>
                            <th class="kolomQty">Satuan</th>
                            <th class="kolomQty">Ratio</th>
                            <th class="text-end kolomHarga">Harga</th>
                            <th class="kolomKeterangan">Note</th>
                            <th class="text-end">Total</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="tampilBarang">
                        <tr class="infoKosong">
                            <td colspan="9" class="text-center">Belum Terdapat Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            {{-- <div class="mt-2">
                <x-checkbox-view-nama-bottom />
            </div> --}}
            <div class="row mt-3">
                <div class="col-12 mb-3">
                    <button type="button" id="btnTambahPO" class="btn btn-light btn-custom2 text-white" 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 mt-3">
                            <h3>Grand Total</h3>
                        </div>
                        <div class="col-6 text-end mt-3">
                            <h3 id="grand-total" data-amount="o">Rp 0</h3>
                        </div>
                    </div>
                </div>
            </div>
            <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 PO</button>
                </div>
                <div class="col-6">
                    <a href="/pembelian/po" class="btn btn-warning btn-custom8" style="width: 100% !important;">Kembali ke Halaman Sebelumnya</a>
                </div>
            </div>
        </form>
    </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="mb-2">
                            <x-checkbox-view-nama-modal />
                        </div>
                        <div class="col-12">
                            <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th style="width: 45% !important; white-space: normal; word-break:break-all;">Nama Barang</th>
                                        {{-- <th style="width: 45% !important; white-space: normal; word-break:break-all;">Alias</th> --}}
                                        <th class="kolomAksi">
                                            {{-- <input type="checkbox" id="checkBoxPO" /> --}}
                                        </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 btn-custom8" 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>
    var URLs = "{{ url('pembelian/po') }}";
    var IDBarang = [];
    var jmlBarangAll = 0;

    $('#supplier_id').select2({
        ajax: {
            url: '{{ route("kontak.supplier") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.nama,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 3,
    });

    $('#btnSimpanData').on('click', function(e){
        if(parseInt(jmlBarangAll) > 0){
            if (cekForm('form_po_header') == true) {
                arrIDDetail = [];
                $.each($('.idDetail'), function(i, v){
                    arrIDDetail.push($(this).val());
                });

                arrJumlahDetail = [];
                $.each($('.jumlahDetail'), function(i, v){
                    arrJumlahDetail.push($(this).val().replace(/\./g, '').replace(/\,/g, '.'));
                });

                arrSatuanDetail = [];
                $.each($('.satuanDetail'), function(i, v){
                    arrSatuanDetail.push($(this).val());
                });

                let arrRatioDetail = [];
                $.each($('.ratioDetail'), function(i, v){
                    arrRatioDetail.push($(this).val().replace(/\./g, '').replace(/\,/g, '.'));
                });

                arrNoteDetail = [];
                $.each($('.noteDetail'), function(i, v){
                    arrNoteDetail.push($(this).val());
                });

                arrHargaDetail = [];
                $.each($('.hargaDetail'), function(i, v){
                    arrHargaDetail.push($(this).val().replace(/\./g, '').replace(/\,/g, '.'));
                });

                arrTotalDetail = [];
                $.each($('.totalDetail'), function(i, v){
                    arrTotalDetail.push($(this).val().replace(/\./g, '').replace(/\,/g, '.'));
                });

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

                let biaya = [];
                $.each($('.form-biaya'), function(i, v){
                    let keterangan = $(this).find('.keterangan-biaya').val();
                    let amount = $(this).find('.amount-biaya').val().replace(/\./g, '').replace(/\,/g, '.');
                    biaya.push({
                        keterangan: keterangan,
                        amount: amount
                    });
                });

                var data = {
                    _token: "{{ csrf_token() }}",
                    supplier_id: $('#supplier_id').val(),
                    tanggal_po: $('#tanggal_po').val(),
                    tanggal_estimasi: $('#tanggal_estimasi').val(),
                    idDetail: arrIDDetail.join('|'),
                    jumlahDetail: arrJumlahDetail.join('|'),
                    satuanDetail: arrSatuanDetail.join('|'),
                    ratioDetail: arrRatioDetail.join('|'),
                    noteDetail: arrNoteDetail.join('|'),
                    hargaDetail: arrHargaDetail.join('|'),
                    totalDetail: arrTotalDetail.join('|'),
                    pajak: pajak.join('|'),
                    biaya: biaya,
                    footer_pdf: $('#footer_pdf').val(),
                    dpp: $('#dpp').data('amount'),
                    grand_total: $('#grand-total').data('amount'),
                    cetak_nama: $('input[name="cetak_nama"]:checked').val()
                }

                sendJson(URLs+'/store-barang-supplier', data, rSendsPembelian);
            }
        }else{
            swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
        }
    });
  </script>
  @include('pages.pembelian.po.function')
@endpush