@extends('layouts.admintemplate')
@section('content')
<!-- page content -->
<div class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <!-- Page-header start -->
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="page-header-title">
                                <h5 class="m-b-10">Tambah Pembelian</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <div class="page-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Data Pembelian</h5>
                                            @if (Session::has('error'))
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                <strong>Error!</strong> {{ Session::get('error') }}.
                                                <button type="button" class="close" data-dismiss="alert"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="card-block">
                                            <form action="{{ url('barangmasuktambah') }}" method="post"
                                                enctype="multipart/form-data">
                                                @csrf
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Tanggal Pembelian</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" name="tanggalmasuk" type="date"
                                                            required value="{{ date('Y-m-d') }}" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Nama Supplier</label>
                                                    <div class="col-sm-10">
                                                        <select name="idsupplier" class="form-control" required>
                                                            <option value="">Pilih Supplier</option>
                                                            @foreach ($supplier as $data)
                                                            <option value="{{ $data->idsupplier }}">
                                                                {{ $data->namasupplier }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <table class="table table-bordered table-striped" id="tabelform">
                                                    <tr>
                                                        <td width="30%">
                                                            <div class="form-group namabarangharga">
                                                                <label>Nama Produk</label>
                                                                <select name="namabarang[]"
                                                                    class="form-control namabarang select2" required>
                                                                    <option value="">Pilih Produk</option>
                                                                    @foreach ($barang as $key => $value)
                                                                    <option value="{{ $value->namaproduk }}"
                                                                        data-price="{{ $value->hargajual }}">
                                                                        {{ $value->namaproduk }} -
                                                                        {{ $value->stok }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <label>Harga</label>
                                                                <input type="text" id="harga1" value="" name="harga[]"
                                                                    oninput="check()" onchange="check()"
                                                                    class="form-control harga" required>
                                                            </div>
                                                        </td>
                                                        <td width="15%">
                                                            <div class="form-group">
                                                                <label>Jumlah</label>
                                                                <input type="number" value="1" min="0" id="jumlah1"
                                                                    name="jumlah[]" oninput="check()" onchange="check()"
                                                                    class="form-control jumlah" required>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <label>Total</label>
                                                                <input type="text" id="total1" name="total[]" value="0"
                                                                    class="form-control total" readonly>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <button type="button" name="add" id="addkegiatan"
                                                                    class="btn btn-success mt-4">+</button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Grand Total</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" id="grandtotal" name="grandtotal"
                                                            type="number" readonly required>
                                                        <input class="form-control" id="grandtotalnon"
                                                            name="grandtotalnon" type="hidden" readonly required>
                                                    </div>
                                                </div>

                                                {{-- <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Uang Pembeli</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" id="uangpembeli" name="uangpembeli"
                                                            type="text" oninput="kembalian()" onchange="kembalian()">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Kembalian</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" id="kembalian" name="kembalian"
                                                            type="text" value="0" readonly>
                                                    </div>
                                                </div> --}}
                                                <button type="submit" required
                                                    class="btn btn-primary float-right pull-right" name="simpan"
                                                    value="simpan">Simpan</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
            $('.select2').select2();
            var i = 1;

            $('#addkegiatan').click(function() {
                i++;
                let products = @json($barang);
                let options = '';
                products.forEach(function(product) {
                    options +=
                        `<option value="${product.namaproduk}" data-price="${product.hargajual}">${product.namaproduk}</option>`;
                });

                let html = `
                    <tr id="row${i}">
                        <td width="30%">
                            <div class="form-group namabarangharga">
                                <label>Nama Barang</label>
                                <select name="namabarang[]" class="form-control namabarang select2" required>
                                    <option value="">Pilih Barang</option>
                                    ${options}
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label>Harga</label>
                                <input type="text" id="harga${i}" name="harga[]" value="" class="form-control harga" required>
                            </div>
                        </td>
                        <td width="15%">
                            <div class="form-group">
                                <label>Jumlah</label>
                                <input type="number" value="1" min="0" id="jumlah${i}" name="jumlah[]" class="form-control jumlah" required>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label>Total</label>
                                <input type="text" id="total${i}" name="total[]" class="form-control total" value="0" readonly>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove mt-4">X</button>
                            </div>
                        </td>
                    </tr>`;

                $('#tabelform').append(html);
                $('.select2').select2();
            });

            // Remove row
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id).remove();
                calculateGrandTotal(); // Recalculate grand total when row is removed
            });

            // Update the price and total when product is selected
            // $('#tabelform').on('change', '.namabarang', function() {
            //     var $select = $(this);
            //     var $row = $select.closest('tr');
            //     var price = $select.find(':selected').data('price');
            //     $row.find('.harga').val(price);
            //     updateRowTotal($row);
            //     calculateGrandTotal();
            // });

            // Calculate the row total when quantity changes or price is inputted
            $('#tabelform').on('input', '.jumlah, .harga', function() {
                var $row = $(this).closest('tr');
                updateRowTotal($row);
                calculateGrandTotal();
            });

            // Function to update the total for a specific row
            function updateRowTotal($row) {
                var harga = parseFloat($row.find('.harga').val()) || 0;
                var jumlah = parseFloat($row.find('.jumlah').val()) || 1;
                var total = harga * jumlah;
                $row.find('.total').val(total.toFixed(2));
            }

            // Function to calculate the grand total
            function calculateGrandTotal() {
                var grandTotal = 0;

                $('.total').each(function() {
                    var totalValue = parseFloat($(this).val()) || 0;
                    grandTotal += totalValue;
                });

                $('#grandtotal').val(grandTotal.toFixed(2));
                $('#grandtotalnon').val(grandTotal); // Hidden field for backend processing
            }

            // Calculate change (kembalian) when the buyer's money is entered
            $('#uangpembeli').on('input', function() {
                calculateKembalian();
            });

            function calculateKembalian() {
                var grandTotal = parseFloat($('#grandtotal').val()) || 0;
                var uangPembeli = parseFloat($('#uangpembeli').val()) || 0;
                var kembalian = uangPembeli - grandTotal;
                $('#kembalian').val(kembalian.toFixed(2));
            }
        });
</script>
@endsection