@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="#">Penjualan</a></li>
        <li class="breadcrumb-item"><a href="/penjualan/titipan-order">Titipan Order</a></li>
        <li class="breadcrumb-item active" aria-current="page">Input Data</li>
    </ol>
</nav>

<div class="card m-b-30">
    <div class="card-header">
        <h4>Titipan Order Penjualan</h4>
    </div>
    <div class="card-body">
        <div class="container-fluid mb-4">
            <div class="row">
                <div class="col-12 border p-3">
                    <form id="form_terima_order">
                        <div class="form-group mb-3">
                            <label>Pelanggan</label>
                            <select name="id_pelanggan" id="id_pelanggan" class="form-control required select2Custom">
                                <option value="">Silahkan Pilih</option>
                            </select>
                            <input type="hidden" name="total_deposit" id="total_deposit" value="0">
                        </div>
                        <div class="form-group mb-3">
                            <div class="row">
                                <div class="col-12">
                                    <label>Tanggal Titipan Order</label>
                                    <input class="form-control resetForm required" type="datetime-local" name="tanggal_terima_order" id="tanggal_terima_order" placeholder="Tanggal Terima Order" value="2026-04-18T17:10:58">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label>Toko Transaksi Asal</label>
                            <select class="form-control select2Custom disabled" disabled>
                                <option value="">{{ $tokoAsal?->nama_perusahaan }}</option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label>Titip Transaksi ke Cabang</label>
                            <select name="id_cabang_titipan" id="id_cabang_titipan" class="form-control select2Custom required">
                                <option value="">Silahkan Pilih</option>
                                @foreach ($dataCabang as $vCabang)
                                    <option value="{{ $vCabang->id }}">{{ $vCabang->nama_perusahaan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label>Catatan Tambahan</label>
                            <textarea name="note" id="note" rows="5" class="form-control" placeholder="Catatan Tambahan"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </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 style="width: 5% !important;">No</th>
                        <th style="max-width: 20% !important;">Barang</th>
                        <th style="width: 10% !important;" class="text-end">Jumlah</th>
                        <th style="width: 10% !important;">Satuan</th>
                        <th style="width: 15% !important;" class="text-end">Harga</th>
                        <th style="width: 15% !important;" class="text-end">Biaya Tambahan</th>
                        <th style="width: 10% !important;" class="text-end">Total Harga</th>
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
                <tbody class="tampilBarang">
                    <tr class="infoKosong">
                        <td colspan="8" class="text-center">Belum Terdapat Data</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" class="text-center"><b>Total</b></td>
                        <td id="totalTerimaOrder" class="text-end">{{ formatNumberComma(0) }}</td>
                        <td>&nbsp;</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        {{-- <div class="alert alert-secondary mt-3" role="alert">
            Harga diatas merupakan harga estimasi
        </div> --}}
        <div class="row mt-3">
            <div class="col-6 mb-3">
                <button type="button" id="btnTambahOrder" class="btn btn-light btn-custom2" style="width: 100% !important;">Tambah Barang</button>
            </div>
            <div class="col-6 mb-3">
                <button type="button" id="btnTambahOrderQR" class="btn btn-light btn-custom2" style="width: 100% !important;">Tambah Barang [QRCODE]</button>
            </div>
        </div>
    </div>
</div>

<div class="card m-b-30 mt-3">
    {{-- <div class="card-header">
        <h4>Pembayaran Uang Titipan [<a class="text-primary" data-bs-toggle="collapse" href="#detail-info-pembayaran" role="button" aria-expanded="false" aria-controls="detail-info-pembayaran">Detail</a>]</h4>
    </div> --}}
    <div class="card-body">
        {{-- <div class="collapse" id="detail-info-pembayaran">
            <div class="table-responsive mb-3 mt-2" style="overflow-x: auto;">
                <table id="table-uang-muka" class="table table-sm border" style="width: 100%;">
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>Nomor</th>
                        <th style="min-width: 200px">Metode Bayar</th>
                        <th style="min-width: 300px">Rekening</th>
                        <th>Tanggal</th>
                        <th style="min-width: 200px">No Ref</th>
                        <th>File</th>
                        <th style="min-width: 150px" class="text-end">Nominal</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <button type="button" id="btnTambahUangMuka" class="btn btn-light btn-custom2" style="width: 100% !important;">Tambah Uang Titipan</button>
                </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 Titipan Order</button>
            </div>
            <div class="col-6">
                <a href="/penjualan/titipan-order" 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 style="white-space: normal; word-break:break-all;">Nama Barang</th>
                                        <th>Stok</th>
                                        <th class="kolomAksi">
                                        </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>
<div id="modalBarangQR" 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">Tambah Barang [Scan QR]</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">
                            <label>Scan/Masukkan QR Barang</label>
                            <input type="text" name="" id="" class="form-control" placeholder="Scan/Masukkan QR Barang">
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" id="btnSimpanBarangQR" 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>
@include('pages.penjualan.terima-order.modal-form-uang-muka')
{{-- 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>
        let URLs = "{{ url('penjualan/titipan-order') }}";
        let filesUangMuka = [];

        $('#btnSimpanBarang').on('click', function(e) {
            let barang_selected = $('#tableBarang').DataTable().column(3).checkboxes.selected();
            var IDBarangNew = [];
            if (barang_selected.length <= 0) {
                swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
            } else {
                $.each(barang_selected, function(index, id) {
                    IDBarangNew.push(parseInt(id));
                });

                var arrBarang = IDBarangNew.join("|");
                var data = {
                    arr_barang: arrBarang,
                    _token: "{{ csrf_token() }}"
                }
                sendJson(URLs + '/add-barang', data, rSendsBarang);
            }
        });

        function rSendsBarang(data) {
            let supplier_id = $('#supplier_id').val();
            let produk_ids = $.map(data, function(item) {
                return item.id;
            });

            $.ajax({
                url: `/master/produk/get-names?id=${produk_ids.join(',')}`,
                type: 'GET',
                dataType: 'json',
                success: (res) => {
                    $.each(data, function(i, v) {
                        swal.close();
                        $('#modalBarang').modal('hide');
                        $('#tableBarang tbody').html('');
                        let isiHTML = '';
                        var parameter = v.id+"-"+randomAlphabet();
                        isiHTML += '<tr id="rowBarangDetail' + parameter + '" class="rowBarangDetail">' +
                        '<td style="width: 5% !important;" class="number">'+(i+1)+'</td>'+
                        '<td style="max-width: 25% !important; white-space: normal; word-break:break-all;">' +
                            `${res.find(val => val.id == v.id).asli}`+
                        '</td>' +
                        '<td style="width: 10% !important;"><input type="hidden" class="form-control idDetail id' + v.id +
                        '" value="' + v.id + '"><input type="text" data-parameter="'+parameter+'" class="form-control text-end formatInputQty required jumlahDetail jumlah'+parameter+' jumlah' + v.id +
                        '" data-id="' + v.id + '" value="0"></td>' +
                        '<td style="width: 13% !important;">' +
                        '<select class="form-control required satuanDetail satuan'+parameter+' satuan' + v.id + '">' +
                        '<option value="" data-konversi="0" data-harga="0" data-id="'+v.id+'" data-jenis="0" data-parameter="'+parameter+'" data-idsatuan="0">Silahkan Pilih</option>';

                        $.each(v.satuan, function(index, val) {
                            let nama = val;
                            var arrSatuan = nama.split('#');
                            isiHTML +=
                                // `<option value="${arrSatuan[0]}" ${(index + 1) == v.satuan.length ? 'selected' : '' } data-konversi="${arrSatuan[1]}">${arrSatuan[0]}</option>`;
                                `<option value="${arrSatuan[0]}" data-konversi="${arrSatuan[1]}" data-harga="${arrSatuan[2]}" data-id="${v.id}" data-jenis="${arrSatuan[3]}" data-idsatuan="${arrSatuan[4]}" data-parameter="${parameter}">${arrSatuan[0]}</option>`;
                        });

                        isiHTML += '</select>' +
                        '</td>' +
                        '<td class="text-end"><span class="hargaAwal'+parameter+' hargaAwalDetail">0</span></td>'+
                        '<td class="text-end"><span class="biayaTambahan'+parameter+' biayaTambahanDetail">0</span></td>'+
                        '<td class="text-end"><span class="harga'+parameter+' hargaDetail">0</span></td>'+
                        '<td class="kolomAksi"><button type="button" onclick="hapusBarang(\'' + parameter +
                        '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>' +
                        '</tr>'
                        ;

                        $('.tampilBarang').append(isiHTML);
                    });
                    updateTableNumbers();
                },
                error: errorSend
            });

            $('.infoKosong').hide();
        }

        $(document).on('change', '.satuanDetail', function(e) {
            var id = $(this).find("option:selected").data('id');
            var id_satuan = $(this).find("option:selected").data('idsatuan');
            var id_satuan_konversi = $(this).find("option:selected").data('idsatuan_konversi');
            var konversi = $(this).find("option:selected").data('konversi');
            var harga = $(this).find("option:selected").data('harga');
            var parameter = $(this).find("option:selected").data('parameter');
            var jenis = $(this).find("option:selected").data('jenis');
            var jumlah = ($('.jumlah'+parameter).val()).replace(/\./g, '').replace(/\,/g, '.');
            if(parseInt(jenis) > 0){
                var total = (parseFloat(konversi)*parseFloat(jumlah))*parseFloat(harga);
            }else{
                var total = parseFloat(jumlah)*parseFloat(harga);
            }

            var data = {
                _token: "{{ csrf_token() }}",
                id:id,
                parameter: parameter,
                harga: harga,
                total: total,
                id_satuan: id_satuan,
                id_satuan_konversi: id_satuan_konversi,
                jumlah: jumlah,
            }
            sendJson(URLs+'/harga', data, rSendsHarga);
        });

        function rSendsHarga(data) {
            swal.close();
            $('.hargaAwal'+data.parameter).html(formatUang(data.harga));
            $('.biayaTambahan'+data.parameter).html(formatUang(data.biaya_tambahan));

            $('.harga'+data.parameter).html(formatUang(data.total));
            $('.harga'+data.parameter).attr('data-subtotal', data.total);
            $('.harga'+data.parameter).attr('data-biayatambahan', data.biaya_tambahan);

            let totalTO = 0
            $.each($('.hargaDetail'), function(i, v){
               let isian = formatInputUangToFloat($(this).html());
               totalTO = totalTO+parseFloat(isian);
            });

            $('#totalTerimaOrder').html(formatUang(totalTO));
        }

        $(document).on('change', '.jumlahDetail', function(e) {
            var id = $(this).data('id');
            var parameter = $(this).data('parameter');
            var id_satuan = $('.satuan'+parameter).find("option:selected").data('idsatuan');
            var id_satuan_konversi = $('.satuan'+parameter).find("option:selected").data('idsatuan_konversi');
            var konversi = $('.satuan'+parameter).find("option:selected").data('konversi');
            var harga = $('.satuan'+parameter).find("option:selected").data('harga');
            var jenis = $('.satuan'+parameter).find("option:selected").data('jenis');
            var jumlah = ($(this).val()).replace(/\./g, '').replace(/\,/g, '.');
            if(parseInt(jenis) > 0){
                var total = (parseFloat(konversi)*parseFloat(jumlah))*parseFloat(harga);
            }else{
                var total = parseFloat(jumlah)*parseFloat(harga);
            }

            var data = {
                _token: "{{ csrf_token() }}",
                id:id,
                parameter: parameter,
                harga: harga,
                total: total,
                id_satuan: id_satuan,
                id_satuan_konversi: id_satuan_konversi,
                jumlah: jumlah,
            }
            sendJson(URLs+'/harga', data, rSendsHarga);
        });

        $('#btnSimpanData').on('click', function(e){
            if(parseInt($('.rowBarangDetail').length) > 0){
                if (cekForm('form_terima_order') == 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 = [];
                    arrHarga = [];
                    $.each($('.satuanDetail'), function(i, v){
                        arrSatuanDetail.push($(this).val());
                        arrHarga.push($(this).find("option:selected").data('harga'));
                    });

                    arrSubTotal = [];
                    arrBiayaTambahan = [];
                    $.each($('.hargaDetail'), function(i, v){
                        arrSubTotal.push($(this).data('subtotal'));
                        arrBiayaTambahan.push($(this).data('biayatambahan'));
                    });

                    // var data = {
                    //     _token: "{{ csrf_token() }}",
                    //     id_pelanggan: $('#id_pelanggan').val(),
                    //     tanggal_terima_order: $('#tanggal_terima_order').val(),
                    //     id_cabang_titipan: $('#id_cabang_titipan').val(),
                    //     note: $('#note').val(),
                    //     idDetail: arrIDDetail.join('|'),
                    //     jumlahDetail: arrJumlahDetail.join('|'),
                    //     satuanDetail: arrSatuanDetail.join('|'),
                    //     hargaDetail: arrHarga.join('|'),
                    //     subTotalDetail: arrSubTotal.join('|'),
                    //     biayaTambahanDetail: arrBiayaTambahan.join('|'),
                    //     metode_bayar_id: $('#metode_bayar_id').val(),
                    //     dp: $('#dp').val().replace(/\./g, '').replace(/\,/g, '.'),
                    //     nomor_transaksi: $('#nomor_transaksi').val(),
                    // }

                    // sendJson(URLs+'/store', data, rSendsTerimaOrder);

                    let data = new FormData();
                    data.append("_token", "{{ csrf_token() }}");
                    data.append("id_pelanggan", $('#id_pelanggan').val());
                    data.append("tanggal_terima_order", $('#tanggal_terima_order').val());
                    data.append("id_cabang_titipan", $('#id_cabang_titipan').val());
                    data.append("note", $('#note').val());
                    data.append("idDetail", arrIDDetail.join('|'));
                    data.append("jumlahDetail", arrJumlahDetail.join('|'));
                    data.append("satuanDetail", arrSatuanDetail.join('|'));
                    data.append("hargaDetail", arrHarga.join('|'));
                    data.append("subTotalDetail", arrSubTotal.join('|'));
                    data.append("biayaTambahanDetail", arrBiayaTambahan.join('|'));

                    // Mengambil data uang muka yang multiple
                    $('.uang-muka-row').each(function(index) {
                        const dataUangMuka = $(this).data('uangmuka');
                        console.log(dataUangMuka);
                        data.append(`metode_bayar_id[${index}]`, dataUangMuka.metodeBayar.id);
                        data.append(`dp[${index}]`, dataUangMuka.nominal);
                        data.append(`nomor_transaksi[${index}]`, dataUangMuka.nomorTransaksi);
                        data.append(`tanggal_transfer_pembayaran[${index}]`, dataUangMuka.tanggal);

                        const file = filesUangMuka[index];
                        if (file != null) {
                            data.append(`file_transfer[${index}]`, file);
                        }
                    });

                    uploads(URLs+"/store", data, rSendsTerimaOrder);
                }
            }else{
                swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
            }
        });

        function rSendsTerimaOrder(data) {
            var 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 = "/penjualan/titipan-order";
            }
            })
        }
    </script>

    @include('pages.penjualan.terima-order.form-terima-order-js')
    @include('pages.penjualan.terima-order.modal-form-uang-muka-js')
@endpush