@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 Data</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 Penjualan</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 id="formPenjualan" action="{{ url('penjualantambahsimpan') }}" method="post"
                                                enctype="multipart/form-data">
                                                @csrf
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">Tanggal Penjualan</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" name="tanggalpenjualan" 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">Metode Pembayaran</label>
                                                    <div class="col-sm-10">
                                                        <select name="metodepembayaran" class="form-control" required>
                                                            <option value="" disabled selected>Pilih Metode</option>
                                                            <option value="Tunai">Tunai</option>
                                                            <option value="Kartu Kredit">Kartu Kredit</option>
                                                            <option value="E-Wallet">E-Wallet</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <table class="table table-bordered table-striped" id="tabelform">
                                                    <tr>
                                                        <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>
                                                                    @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="0" name="harga[]" oninput="check()" onchange="check()" class="form-control harga" readonly 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>Diskon %</label>
                                                                <input type="number" value="0" id="diskon" name="potongan[]" oninput="check()" onchange="check()" class="form-control diskon" 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>

                                                <input class="form-control" id="potongan" type="hidden" value="0">

                                                <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="text" readonly>
                                                        <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">
                                                    </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%">
                    <select name="namabarang[]" class="form-control namabarang select2" required>
                        <option value="">Pilih Barang</option>
                        ${options}
                    </select>
                </td>
                <td>
                    <input type="text" id="harga${i}" name="harga[]" value="0" class="form-control harga" readonly required>
                </td>
                <td width="15%">
                    <input type="number" value="1" min="0" id="jumlah${i}" name="jumlah[]" class="form-control jumlah" required>
                </td>
                <td>
                    <input type="number" value="0" id="diskon${i}" name="potongan[]" class="form-control diskon" required>
                </td>
                <td>
                    <input type="text" id="total${i}" name="total[]" class="form-control total" value="0" readonly>
                </td>
                <td>
                    <button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button>
                </td>
            </tr>`;
            $('#tabelform').append(html);
            $('.select2').select2();
        });

        $(document).on('click', '.btn_remove', function() {
            var id = $(this).attr("id");
            $('#row' + id).remove();
            calculateGrandTotal();
        });

        $('#tabelform').on('change', '.namabarang', function() {
            var $row = $(this).closest('tr');
            var price = $(this).find(':selected').data('price');
            $row.find('.harga').val(price);
            updateRowTotal($row);
            calculateGrandTotal();
        });

        $('#tabelform').on('input', '.jumlah, .diskon', function() {
            var $row = $(this).closest('tr');
            updateRowTotal($row);
            calculateGrandTotal();
        });

        function updateRowTotal($row) {
            var harga = parseFloat($row.find('.harga').val()) || 0;
            var jumlah = parseFloat($row.find('.jumlah').val()) || 0;
            var diskon = parseFloat($row.find('.diskon').val()) || 0;
            var total = harga * jumlah;
            if (diskon > 0) total -= total * (diskon / 100);
            $row.find('.total').val(total.toFixed(0));
        }

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

            let potonganPersen = parseFloat($('#potongan').val().replace('%', '')) || 0;
            if (potonganPersen > 0) {
                grandTotal -= (grandTotal * (potonganPersen / 100));
            }

            $('#grandtotalnon').val(grandTotal.toFixed(0));
            $('#grandtotal').val(formatRupiah(grandTotal));
            hitungKembalian();
        }

        $('#potongan').on('input', function() {
            calculateGrandTotal();
        });

        $('#uangpembeli').on('input', function() {
            hitungKembalian();
        });

        $('#uangpembeli').on('keyup', function() {
            let angka = $(this).val().replace(/[^\d]/g, '');
            $(this).val(formatRupiah(angka));
        });

        function hitungKembalian() {
            let grandTotal = parseInt($('#grandtotalnon').val().replace(/[^\d]/g, '')) || 0;
            let uangPembeli = parseInt($('#uangpembeli').val().replace(/[^\d]/g, '')) || 0;
            let selisih = uangPembeli - grandTotal;
            $('#kembalian').val(formatRupiah(selisih));
        }

        function formatRupiah(angka) {
            return new Intl.NumberFormat("id-ID", {
                style: "currency",
                currency: "IDR",
                minimumFractionDigits: 0
            }).format(angka);
        }

        // ✅ Validasi sebelum submit form
        $('#formPenjualan').on('submit', function(e) {
            let grandTotal = parseInt($('#grandtotalnon').val().replace(/[^\d]/g, '')) || 0;
            let uangPembeli = parseInt($('#uangpembeli').val().replace(/[^\d]/g, '')) || 0;
            if (uangPembeli < grandTotal) {
                e.preventDefault();
                alert('Uang pembeli tidak mencukupi untuk melakukan transaksi!');
            }
        });

    });
</script>
@endsection