@push('scripts')
     <!-- Input Mask Plugin Js -->
     <script src="https://unpkg.com/autonumeric"></script>
     <script>
         $(document).ready(function() {
             $(document).on('keyup', '.bs-searchbox input', function(e) {
                 var searchData = e.target.value;


                 $.ajax({
                     type: 'GET',
                     url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                     success: function(data) {
                         // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                         var uniqueKecamatan = [];
                         var uniqueKabkota = [];
                         var uniqueProvinsi = [];

                         for (var i = 0; i < data.result.length; i++) {
                             var kecamatan = data.result[i].kecamatan;
                             var kabkota = data.result[i].kabkota;
                             var provinsi = data.result[i].provinsi;


                             if (uniqueKecamatan.indexOf(kecamatan) === -1) {
                                 uniqueKecamatan.push(kecamatan);
                                 uniqueProvinsi.push(provinsi);
                                 uniqueKabkota.push(kabkota);

                             }
                         }

                         $('#kecamatan_pelanggan').empty();
                         for (var j = 0; j < uniqueKecamatan.length; j++) {
                             $('#kecamatan_pelanggan').append('<option value="' +
                                 uniqueKecamatan[
                                     j] + '">' + uniqueProvinsi[j] + ' , ' + uniqueKabkota[
                                     j] + ' , ' + uniqueKecamatan[j] + '</option>');
                         }

                         $('#kecamatan_pelanggan').selectpicker('refresh');


                     },
                     error: function(error) {

                         console.log(error);
                     }
                 });
             });

         });
     </script>
 @endpush
 @push('scripts')
     <!-- Input Mask Plugin Js -->
     <script src="https://unpkg.com/autonumeric"></script>
     <script>
         const tableSparepart = document.getElementById('table-sparepart');
         const pencarian = document.getElementById('cari');
         const tableSparepartShow = document.getElementById('table-sparepart-list');
         const tableDetail = document.getElementById('table-detail-item');
         const itemDeleteButton = document.querySelectorAll(".item-delete");
         const itemQtyInput = document.querySelectorAll(".qty");

         let itemId = document.querySelectorAll(".item_id");

         // console.log(itemId);

         const numberFormat = new Intl.NumberFormat({
             style: 'currency'
         });

         let itemIdArray = [];
         tableSparepartShow.addEventListener("click", function() {
             loadList();
             pencarian.addEventListener('input', function() {
                 // Mengambil nilai input pencarian

                 loadList();

             });


         });

         function loadList() {
             const nilaiPencarian = pencarian.value;
             fetch("{{ route('get-item') }}?cari=" + nilaiPencarian, {
                     method: "GET"
                 })
                 .then(
                     (response) => {
                         return response.json();
                     }
                 )
                 .then((data) => {
                     const rowCount = tableSparepart.querySelector('tbody');

                     while (rowCount.firstChild) {
                         rowCount.removeChild(rowCount.firstChild);
                     }

                     let items = data;
                     items.data.forEach(item => {
                         let namaSparepartText = document.createTextNode(item.nama_item);
                         let hargaJualText = document.createTextNode(numberFormat.format(item
                             .harga_item));
                         let hargaBeliText = document.createTextNode(numberFormat.format(item
                             .biaya_item));

                         let stokText = document.createTextNode(item.stok_gudang);

                         let stok_tokos = item.stok_item_tokos.filter(toko => toko.toko_id == document
                             .getElementById("toko_id").value);
                         var itemStok = item.stok_item_tokos.length > 0 ? stok_tokos.reduce((sum, toko) => sum +
                             toko.stok, 0) : item.stok;
                         let stokTokoText = document.createTextNode(itemStok);

                         let pilihButtonText = document.createTextNode(`Pilih`);

                         let pilihButton = document.createElement("button");
                         pilihButton.classList.add('btn', 'btn-primary', 'item-add');
                         // pilihButton.setAttribute('data-id', item.id);
                         pilihButton.setAttribute('type', "button");
                         pilihButton.dataset.id = item.id;
                         pilihButton.appendChild(pilihButtonText);

                         let jumlahInput = document.createElement("input");
                         jumlahInput.setAttribute('type', "number");
                         jumlahInput.setAttribute('value', 0);
                         jumlahInput.setAttribute('min', 0);
                         jumlahInput.classList.add('form-control', 'jumlah-input');

                         if (itemStok == null || itemStok <= 0) {
                             jumlahInput.setAttribute('disabled', true);
                             jumlahInput.setAttribute('title', "Stok Habis!")
                             pilihButton.setAttribute('disabled', true);
                             pilihButton.setAttribute('title', "Stok Habis!")
                         }

                         let row = tableSparepart.querySelector("tbody").insertRow(-1);
                         let namaSparepart = row.insertCell(0);
                         let hargaJual = row.insertCell(1);
                         let hargaBeli = row.insertCell(2);
                        //  let stok = row.insertCell(3);
                         let stokToko = row.insertCell(3);
                         let jumlah = row.insertCell(4);
                         let pilih = row.insertCell(5);

                         namaSparepart.setAttribute('style', 'max-width: 100px;')

                         namaSparepart.appendChild(namaSparepartText);
                         hargaJual.appendChild(hargaJualText);
                         hargaBeli.appendChild(hargaBeliText);
                        //  stok.appendChild(stokText);
                         stokToko.appendChild(stokTokoText);
                         jumlah.appendChild(jumlahInput);
                         pilih.appendChild(pilihButton);

                         addEventPilih(pilihButton);
                     });
                 });

         }


         function addEventPilih(element) {
             element.addEventListener('click', function(event) {

                 let jumlah = this.parentElement.parentElement.childNodes[5];

                 let jumlahValue = jumlah.querySelector(".jumlah-input").value;

                 fetch("{{ route('get-item') }}?search=" + this.dataset.id, {
                         method: "GET"
                     })
                     .then(
                         (response) => {
                             return response.json();
                         }
                     )
                     .then((data) => {

                         let items = data;
                         items.data.forEach(item => {
                             if (jumlahValue > 0) {
                                 addDetailBarangRow();
                             }

                             function addDetailBarangRow() {
                                 //new text element
                                 showAlert(item.nama_item);
                                 let namaSparepartText = document.createTextNode(item.nama_item);
                                 let stok_tokos = item.stok_item_tokos.filter(toko => toko.toko_id ==
                                     document.getElementById("toko_id").value);
                                 var itemStok = item.stok_item_tokos.length > 0 ? stok_tokos.reduce((sum,
                                     toko) => sum + toko.stok, 0) : item.stok;

                                 let stokTokoText = document.createTextNode(itemStok);
                                 let stokGudangText = document.createTextNode(item.stok_gudang);
                                 let jumlahText = document.createTextNode(jumlahValue);
                                 let subTotalText = document.createTextNode(numberFormat.format(item
                                     .harga_item * jumlahValue));

                                 subTotalText.classList.add("subTotal");
                                 let hapusButtonText = document.createTextNode("X");

                                 let hapusButton = document.createElement("button");
                                 hapusButton.classList.add("btn", "btn-danger", "item-delete");
                                 hapusButton.appendChild(hapusButtonText);
                                 hapusButton.setAttribute('type', "button");

                                 //hidden input for form request
                                 let jumlahInput = document.createElement("input");
                                 jumlahInput.classList.add("qty");
                                 jumlahInput.setAttribute('name', "jumlah[]");
                                 jumlahInput.setAttribute('type', "number");
                                 jumlahInput.setAttribute('min', 0);
                                 jumlahInput.setAttribute('value', jumlahValue);
                                 // jumlahInput.setAttribute('hidden', true);

                                 //hidden input for form request
                                 let idInput = document.createElement("input");
                                 idInput.setAttribute('name', "id[]");
                                 idInput.classList.add("item_id");
                                 idInput.setAttribute('type', "text");
                                 idInput.setAttribute('value', item.id);
                                 idInput.setAttribute('hidden', true);

                                 let hargaInput = document.createElement("input");
                                 hargaInput.setAttribute('name', "harga[]");
                                 hargaInput.classList.add("harga");
                                 hargaInput.setAttribute('type', "number");
                                 hargaInput.setAttribute('value', item.harga_item);
                                 hargaInput.setAttribute('hidden', true);

                                 let row = tableDetail.querySelector("tbody").insertRow(-1);
                                 let namaSparepart = row.insertCell(0);
                                 let stokGudang = row.insertCell(1);
                                 let stokToko = row.insertCell(2);
                                 let jumlah = row.insertCell(3);
                                 let col4 = row.insertCell(4);
                                 let hapus = row.insertCell(5);

                                 namaSparepart.appendChild(namaSparepartText);
                                 stokGudang.appendChild(stokGudangText);
                                 stokToko.appendChild(stokTokoText);
                                 // jumlah.appendChild(jumlahText);
                                 jumlah.appendChild(jumlahInput);
                                 jumlah.appendChild(idInput);
                                 jumlah.appendChild(hargaInput);
                                 col4.appendChild(subTotalText);
                                 hapus.appendChild(hapusButton);



                                 let detail = [item.id, jumlahValue];

                                 addEventHapus(hapusButton);
                                 addEventQty(jumlahInput);
                                 countGrandTotal();
                             }
                         });
                     });


             })
         }

         function showAlert(item) {

             alert(item + " Ditambahkan");


         }

         function addEventHapus(element) {
             element.addEventListener("click", function(event) {
                 this.parentElement.parentElement.remove();
                 countGrandTotal();
             });
         }

         function addEventQty(e) {
             countSubTotal(e);
         }

         itemDeleteButton.forEach((e) => {
             e.addEventListener("click", function(event) {
                 this.parentElement.parentElement.remove();
                 countGrandTotal();
             });
         });

         itemQtyInput.forEach((e) => {
             countSubTotal(e);
         });

         function countSubTotal(e) {
             e.addEventListener("input", function(event) {
                 const parentRow = this.closest("tr");

                 let qty = parentRow.querySelector(".qty");
                 let hargaItem = parentRow.querySelector(".harga");
                 let subTotalElement = parentRow.querySelector(".subTotal");


                 let subtotal = hargaItem.value * qty.value;

                 subTotalElement.textContent = numberFormat.format(subtotal);

                 countGrandTotal();
             });
         }

         function countGrandTotal() {
             let subTotal = document.querySelectorAll(".subTotal");
             let grandTotal = document.querySelector("#grandTotal");
             let grandTotalValue = 0;
             subTotal.forEach((element) => {
                 const subTotalValue = parseFloat(element.textContent.replaceAll(".", "").replaceAll(",", ""));
                 grandTotalValue += subTotalValue;
             });

             grandTotal.textContent = numberFormat.format(grandTotalValue);
         }

         countGrandTotal();

         document.getElementById("penjualan_id").addEventListener('change',function(){
            //append penjualan_id= to url and reload
            const penjualan_id = this.value;
            const url = new URL(window.location.href);

            // Set the data_id query parameter
            url.searchParams.set('penjualan_id', penjualan_id);

            // Reload the page with the new URL
            window.location.href = url.toString();
         })
     </script>
 @endpush

 @push('styles')
     <style>
         .image-upload {
             width: 200px;
             height: 200px;
             background-color: gainsboro;
             display: block;
             margin: auto;
             background-size: contain;
         }

         .image-upload>input {
             display: none;
         }

         .pilih-bentuk svg {
             width: 100px;
             height: 100px;
             display: block;
             margin: auto;
         }

         .pilih-bentuk i {
             font-size: 100px;
             color: grey;
             position: absolute;
             left: 0%;
             top: 0%;
             right: 0%;
             bottom: 0%;
         }

         .qty {
             width: 55px;
         }
     </style>
 @endpush

 <div class="row">
     <!-- Task Info -->
     <div class="col-xs-12 col-sm-12 col-md-12">
         <div class="card">
             <div class="header">
                 <a href="{{ request()->back ? route(request()->back) :  route('retur_penjualan.index') }}" class="btn btn-warning">Kembali</a>
             </div>
             <div class="body">

                 <div class="row">
                    <div class="col-md-3">
                        <b>No Retur</b>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="no_retur"
                                    value="{{ old('no_retur', @$datas->no_retur ?? 'RP-' . date('Ymdhis')) }}"
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                   
                     {{-- <div class="col-md-3">
                         <b>Invoice</b>
                         <div class="input-group ">
                             <div class="form-line focused">
                                 <input type="text" class="form-control" name="no_penjualan"
                                     value="{{ old('no_penjualan', @$datas->no_penjualan ?? (@$penjualan->no_penjualan ?? 'P-' . date('Ymdhis'))) }}"
                                     required>
                             </div>
                             <span class="input-group-addon">
                                 <i style="background-color: rgb(0, 170, 187);"></i>
                             </span>
                         </div>
                     </div> --}}
                     <div class="col-md-3">
                         <b>Tanggal</b>
                         <div class="input-group ">
                             <div class="form-line focused">
                                 <input type="text" class="form-control" name="tanggal" value="{{ date('Y-m-d') }}"
                                     required>
                             </div>
                             <span class="input-group-addon">
                                 <i style="background-color: rgb(0, 170, 187);"></i>
                             </span>
                         </div>
                     </div>
                     <div class="col-md-3">
                         <b>Kasir</b>
                         <div class="input-group ">
                             <div class="form-line focused">
                                 <input type="hidden" name="pengguna_id" value="{{ auth()->user()->id }}" required>
                                 <input type="text" class="form-control" value="{{ auth()->user()->nama_pengguna }}"
                                     required>
                             </div>
                             <span class="input-group-addon">
                                 <i style="background-color: rgba(0, 0, 0, 0.7);"></i>
                             </span>
                         </div>
                     </div>
                    <div class="col-md-6">
                        <p>
                            <b>Penjualan <small>(Pilih Penjualan Jika Ingin Retur Item Penjualan Tersebut)</small></b>
                        </p>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <select class="form-control show-tick" data-live-search="true" name="penjualan_id" id="penjualan_id">
                                    <option value="">-- Pilih Penjualan ---</option>
                                    @foreach ($penjualans as $item)
                                        <option value="{{ $item->id }}" @selected($item->id == (@$datas->penjualan_id ?? request()->penjualan_id))>{{ $item->nomor_nota }} / {{ $item->tanggal_penjualan }} / {{ $item->pelanggan->nama_pelanggan }}  / {{ $item->pelanggan->telp_pelanggan }}  / {{ number_format($item->total) }}</option>
                                    @endforeach
                                    </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                            
                        
                    </div>
                 </div>

                 <div class="row" style="display:none;">
                     <div class="col-md-3">
                         <b>Toko</b>
                         <div class="form-group">
                             <div class="form-line">
                                 <select class="form-control" name="toko_id" required id="toko_id">
                                     @foreach ($tokos as $toko)
                                         <option value="{{ $toko->id }}"
                                             @if (isset($datas)) @if ($toko->id == @$datas->tokos->first()->id ?? 0) selected @endif
                                             @endif>{{ $toko->nama_toko }}</option>
                                     @endforeach
                                 </select>
                             </div>
                         </div>
                     </div>
                 </div>


             </div>
         </div>
     </div>
     <!-- #END# Task Info -->
 </div>

 <div class="row">
     <div class="col-md-6">
         <div class="card">
             <div class="header">
                 <h2>
                     Detail Retur
                 </h2>
             </div>
             <div class="body">

                 <div class="row clearfix">
                     <div class="col-sm-12 col-md-12">

                         <div class="form-group">
                             <label>Nama Pelanggan</label>
                             <div class="form-line">
                                 <input type="text" name="nama" id="nama_pelanggan" class="form-control"
                                     placeholder="Nama"
                                     value="{{ old('nama_pelanggan', @$datas->pelanggan->nama_pelanggan ?? @$penjualan->pelanggan->nama_pelanggan) }}">
                             </div>
                         </div>
                         <div class="form-group ">
                             <label>Kecamatan Pelangan</label>
                             <div class="form-line">
                                 <select class="form-control" id="kecamatan_pelanggan" name="kecamatan_pelanggan"
                                     class="selectpicker" data-live-search="true">
                                     <option>Kecamatan</option>
                                     @if (isset($datas->pelanggan))
                                         <option value="{{ $datas->pelanggan->kecamatan_pelanggan }}"selected>
                                             {{ $datas->pelanggan->kecamatan_pelanggan }}</option>
                                     @endif
                                     @if (isset($penjualan->pelanggan))
                                         <option value="{{ $penjualan->pelanggan->kecamatan_pelanggan }}"selected>
                                             {{ $penjualan->pelanggan->kecamatan_pelanggan }}</option>
                                     @endif
                                 </select>
                             </div>
                         </div>

                         <div class="form-group">
                             <label>Alamat Pelanggan</label>
                             <div class="form-line">
                                 <input type="text" name="alamat" id="alamat_pelanggan" class="form-control"
                                     placeholder="Alamat"
                                     value="{{ old('alamat_pelanggan', @$datas->pelanggan->alamat_pelanggan ?? @$penjualan->pelanggan->alamat_pelanggan) }}">
                             </div>
                         </div>
                         <div class="form-group">
                             <label>No Telp Pelanggan</label>
                             <div class="form-line">
                                 <input type="text" name="kontak" id="telp_pelanggan" class="form-control"
                                     placeholder="Kontak"
                                     value="{{ old('telp_pelanggan', @$datas->pelanggan->telp_pelanggan ?? @$penjualan->pelanggan->telp_pelanggan) }}">
                             </div>
                         </div>
                         <div class="form-group">
                             <label>Sales</label>
                             <div class="form-line">
                                 <select class="form-control" name="sale_id">
                                     @foreach ($pengguna as $data)
                                         <option value="{{ $data->id }}"
                                             @if (isset($datas)) @if ($data->id == $datas->sales->nama_pengguna) selected @endif
                                             @endif>{{ $data->nama_pengguna }}</option>
                                     @endforeach
                                 </select>
                             </div>
                         </div>
                         <div class="form-group">
                             <label>Ketarangan</label>
                             <div class="form-line">
                                 <input type="text" name="keterangan" class="form-control" placeholder="Keterangan"
                                     @if (isset($datas)) value='{{ $datas->keterangan }}' @endif
                                     required>
                             </div>
                         </div>
                         <div class="form-group">
                             <button type="submit" class="btn btn-success">Simpan</button>
                         </div>
                     </div>
                 </div>

             </div>
         </div>
     </div>
 </div>

 <div class="row">
     <!-- Task Info -->
     <div class="col-xs-12 col-sm-12 col-md-12">
         <div class="card">
             <div class="header">
                 <h2>Data Barang</h2>
                 <button type="button" id="table-sparepart-list" class="btn btn-primary" data-toggle="modal"
                     data-target="#list-sparepart">Pilih Barang</button>
             </div>
             <div class="body">
                 <div class="table-responsive">
                     <table id="table-detail-item" class="table table-hover ">
                         <thead>
                             <tr>
                                 <th>Nama Barang</th>
                                 {{-- <th>Stok Gudang</th> --}}
                                 <th>Stok Toko</th>
                                 <th>Jumlah</th>
                                 <th>Total</th>
                                 <th>Tools</th>
                             </tr>
                         </thead>
                         <tbody>
                             @if (isset($datas->detail))
                                 @foreach ($datas->detail as $d)
                                     <tr>
                                         <td>{{ $d->nama_item }}</td>
                                         {{-- <td>
                                             @if (isset($d->item))
                                                 {{ number_format($d->item->stok_gudang) }}
                                             @else
                                                 barang tidak terdaftar pada data master!
                                             @endif
                                         </td> --}}
                                         <td>
                                             @if (isset($d->item))
                                                 {{ number_format($d->item->stok) }}
                                             @else
                                                 barang tidak terdaftar pada data master!
                                             @endif
                                         </td>
                                         <td>
                                             <input class="qty" name="jumlah[]" value="{{ $d->qty }}"
                                                 min="0" type="number">
                                             <input class="item_id" name="id[]" value="{{ $d->item_id }}"
                                                 hidden>
                                             <input class="harga" name="harga[]" value="{{ $d->harga_item }}"
                                                 hidden>

                                         </td>
                                         <td>
                                             <span class="subTotal">{{ $d->total }}</span>
                                         </td>

                                         <td><button class="btn btn-danger item-delete" type="button">X</button></td>
                                     </tr>
                                 @endforeach
                             @endif
                             @if (isset($penjualan->detail_penjualan))
                                 @foreach ($penjualan->detail_penjualan as $d)
                                     <tr>
                                         <td>{{ $d->nama_item }}</td>
                                         <td>
                                             @if (isset($d->item))
                                                 {{ number_format($d->item->stok_gudang) }}
                                             @else
                                                 barang tidak terdaftar pada data master!
                                             @endif
                                         </td>
                                         <td>
                                             @if (isset($d->item))
                                                 {{ number_format($d->item->stok) }}
                                             @else
                                                 barang tidak terdaftar pada data master!
                                             @endif
                                         </td>
                                         <td>
                                             <input class="qty" name="jumlah[]" value="{{ $d->qty }}"
                                                 min="0" type="number">
                                             <input class="item_id" name="id[]" value="{{ $d->item_id }}"
                                                 hidden>
                                             <input class="harga" name="harga[]" value="{{ $d->harga_item }}"
                                                 hidden>

                                         </td>
                                         <td>
                                             <span class="subTotal">{{ $d->total }}</span>
                                         </td>


                                         <td><button class="btn btn-danger item-delete" type="button">X</button></td>
                                     </tr>
                                 @endforeach
                             @endif
                         </tbody>
                         <tfoot>
                             <tr>
                                 <td colspan="3">
                                     <div class="text-center">
                                     </div>
                                 </td>
                                 <td>
                                     <div class="text-right">
                                         <p style="font-weight:bold;">Grand Total : </p>
                                     </div>
                                 </td>
                                 <td>
                                     <div class="text-left">
                                         <p style="font-weight:bold;" id="grandTotal">{{ @$penjualan->total ?? 0 }}
                                         </p>
                                     </div>
                                 </td>
                             </tr>
                         </tfoot>
                     </table>
                 </div>
             </div>
         </div>
     </div>
     <!-- #END# Task Info -->
 </div>

 <!-- Modal -->
 <div class="modal fade" id="list-sparepart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalLabel">Pilih Sparepart</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <div class="row flex-column-reverse">
                     <div class="col-md-6"></div>
                     <div class="col-md-6">
                         <div class="input-group">
                             <span class="input-group-addon">
                                 <i class="material-icons">search</i>
                             </span>
                             <div class="form-line">
                                 <input type="text" class="form-control " id="cari" name="cari"
                                     placeholder="Search">
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="table-responsive">
                     <table id="table-sparepart" class="table table-hover ">
                         <thead>
                             <tr>
                                 <th>Nama Sparepart</th>
                                 <th>Harga Jual</th>
                                 <th>Harga Beli</th>
                                 <th>Stok Gudang</th>
                                 <th>Stok Toko</th>
                                 <th>Jumlah</th>
                                 <th>Tools</th>
                             </tr>
                         </thead>
                         <tbody>
                         </tbody>
                         <tfoot>
                             <tr>
                                 <td colspan="3">
                                     <div class="text-center">
                                     </div>
                                 </td>
                             </tr>
                         </tfoot>
                     </table>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
 </div>

 <div class="row">
     <div class="col-md-12">
         <hr>
     </div>
 </div>
 <div class="row" style="margin-bottom: 50px;">
     <div class="col-md-12" style="text-align: right;">
     </div>
 </div>