@extends('layouts.admin.app', ["title" => "Transaksi Penjualan"])

@push('css')
<style>
    .btn-outline-primary {
        height: 5rem;
        width: 12rem !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 1rem !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    @media (max-width: 575.98px) {
        .ml-1 {
            margin-left: 0 !important;
        }
    }
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Penjualan</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Transaksi</a></div>
                <div class="breadcrumb-item">Penjualan</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="needs-validation" id="form_data" novalidate="">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <h6>Customer</h6>
                                        <div class="">
                                            <select class="form-control select2" id="select-customer" required>
                                                <option value="1" {{ old('customer_id')==1 ? 'selected' : '' }}>Umum
                                                </option>
                                                Umum
                                                </option>
                                                @foreach ($customers as $customer)
                                                @if ($customer->id != 1)

                                                <option value=" {{ $customer->id }}">
                                                    {{$customer->nama}}
                                                </option>
                                                @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Kode Barang</h6>
                                        <div class="">
                                            {{-- {{ dd($barangs->harga_jual) }} --}}
                                            <select class="form-control select2" id="select-barang" required>
                                                <option value=0 disabled selected>Pilih Barang</option>
                                                @foreach ($barangs as $barang)
                                                <option value="{{ $barang->id }}" data-nama="{{ $barang->nama }}"
                                                    data-harga-jual="{{ $barang->harga_jual }}"
                                                    data-grosir="{{ $barang->is_grosir }}">
                                                    {{-- data-satuan="{{ $barang->satuan->nama }}"> --}}
                                                    {{ $barang->kode }} - {{ $barang->nama }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Qty</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <input type="text" id="qty" class="form-control rupiah"
                                                    placeholder="Masukan Qty Minimal" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text input-group-text-qty ">
                                                        Qty
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Nama</h6>
                                        <div class="">
                                            <input type="text" id="nama" class="form-control" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <h6>Harga Jual</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        RP
                                                    </div>
                                                </div>
                                                <input type="text" id="harga_jual" class="form-control rupiah" readonly>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-primary btn-block btn-icon tambah-barang">
                                            <i class="fas fa-cart-plus"> </i> Masukan Ke Keranjang
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-block btn-warning btn-icon reset-barang">
                                            <i class="fas fa-rotate-right"> </i> Reset
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            {{-- <h4></h4> --}}
                            <h4 class="text-dark">Keranjang</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped w-100" id="tableKeranjang">
                                    <thead class="table-dark ">
                                        <tr>
                                            <th style="width: 10%;">Action</th>
                                            <th style="width: 15%;">Kode</th>
                                            <th style="width: 15%;">Nama</th>
                                            <th style="width: 15%;">QTY</th>
                                            <th style="width: 20%;">Harga Jual</th>
                                            <th style="width: 25%;">Total </th>
                                        </tr>
                                    </thead>
                                    <tbody class="action" style="vertical-align: middle !important;">

                                    </tbody>
                                    <tfoot class="bg-light">
                                        <tr>
                                            <td class="text-right" colspan="5">
                                                <h6>Diskon Penjualan</h6>
                                            </td>
                                            <td colspan="1">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">RP</div>
                                                    </div>
                                                    <input type="text" id="diskon_penjualan"
                                                        class="form-control rupiah text-right" placeholder='0'>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center"><span class="subtotal_barang"></span>
                                                Barang </td>
                                            <td class="text-right" colspan="3">
                                                <h6>Subtotal</h6>
                                            </td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="subtotal" style="float:right">0</span></td>

                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="total_keseluruhan" style="float:right">0</span></td>
                                        </tr>

                                    </tfoot>
                                </table>
                                <div class="text-right">
                                    <button type="button"
                                        class="justify-content-end btn-bayar btn-block btn-lg btn btn-success btn-icon">
                                        <i class="fas fa-wallet"></i> Bayar Sekarang
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
<div class="modal fade" id="modal-bayar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-pembayaran" role="document">
        <div class="modal-content">

            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Pembayaran</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <h6 class="text-dark">Dibayar</h6>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                RP
                            </div>
                        </div>
                        <input type="text " class="form-control rupiah pembayaran "
                            placeholder="Masukan Harga Jual">
                    </div>
                    <h6 class="text-dark">Kembalian</h6>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                RP
                            </div>
                        </div>
                        <input type="text" class="form-control rupiah kembalian " value="0" readonly>
                    </div>
                </div>
                <div class="form-group">

                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-transaksi-bayar btn-success "><i class="fas fa-wallet"> </i>
                    Bayar</button>
            </div>
        </div>
    </div>
</div>

@push('js')

<script>
    let token = '{{ $token }}'

    function formatRupiah(angka) {
        return new Intl.NumberFormat('id-ID').format(angka);
    }

    $(document).ready(function() {

        let diskon_penjualan = sessionStorage.getItem('diskonPenjualan');
        diskon_penjualan = $('#diskon_penjualan').val(rupiah(diskon_penjualan));

    });
    $(window).resize(function() {

    });


    function genrateFaktur() {
        const randomNumber = Math.floor(Math.random() * 100000000)
            .toString()
            .padStart(8, '0');

        let faktur = 'P' + randomNumber

        return faktur;
    }

    $('#select-barang').on('change', function() {
        let selectedValue = $(this).val();
        let selectedOption = $(this).find('option:selected');


        let nama = selectedOption.data('nama');
        let harga_jual = selectedOption.data('harga-jual');
        let grosir = selectedOption.data('grosir');


        $('#nama').val(nama);
        $('#harga_jual').val(rupiah(harga_jual));


        if (grosir === 1) {
            if ($('.btn-grosir').length === 0) {
                $('.reset-barang').after(`
        <button href="#"   class="btn mt-3 pl-2 btn-block btn-primary btn-icon btn-grosir" type="button">
            Informasi Harga Grosir
        </button>
    `);
            }
        } else {
            $('.btn-grosir').remove();

        }

    })


    $('.reset-barang').click(function() {
        $('#nama').val('');
        $('#harga_jual').val('');
        $('#qty').val('');
        $('#diskon').val('');
        $('.input-group-text-qty').text('');
        $('#select-barang').val(0).change();
    })

    $('.tambah-barang').click(function() {
        let barangId = $('#select-barang').val();
        let selectedOption = $('#select-barang option:selected');
        let textBarang = selectedOption.text().trim();
        let kodeBarang = textBarang.split('-')[0] ? textBarang.split('-')[0].trim() : '';
        let nama = $('#nama').val();

        let qtyStr = $('#qty').val().replace(/[^0-9]/g, '');
        let qty = parseInt(qtyStr) || 0;

        let hargaJualStr = $('#harga_jual').val().replace(/[^0-9]/g, '');
        let hargaJual = parseInt(hargaJualStr) || 0;

        if (barangId == 0 || barangId == null) {
            alert('Pilih barang terlebih dahulu!');
            return;
        }
        if (qty <= 0) {
            alert('Masukan QTY!');
            return;
        }

        let existingRow = $('#tableKeranjang tbody.action').find(`tr[data-id="${barangId}"]`);

        if (existingRow.length > 0) {
            let oldQty = parseFloat(existingRow.find('.total-baris').data('qty')) || 0;
            let newQty = oldQty + qty;

            let total = newQty * hargaJual;

            existingRow.find('.qty-cell').text(newQty);
            existingRow.find('.total-baris').data('qty', newQty);
            existingRow.find('.total-baris').data('total', total);
            existingRow.find('.total-baris').text(rupiah(total));
        } else {
            let total = qty * hargaJual;
            let totalDiskon = 0;

            let row = `
                <tr data-id="${barangId}">
                    <td class="text-center">
                        <button type="button" class="btn btn-icon btn-danger btn-hapus-item"><i class="fas fa-trash"></i></button>
                    </td>
                    <td>${kodeBarang}</td>
                    <td>${nama}</td>
                    <td class="text-center qty-cell">${qty}</td>
                    <td class="text-right">${rupiah(hargaJual)}</td>
                    <td class="text-right total-baris" data-total="${total}" data-diskon="${totalDiskon}" data-qty="${qty}">${rupiah(total)}</td>
                </tr>
            `;

            $('#tableKeranjang tbody.action').append(row);
        }

        $('.reset-barang').click();

        updateTotal();
    });

    $(document).on('click', '.btn-hapus-item', function() {
        $(this).closest('tr').remove();
        updateTotal();
    });

    $('#diskon_penjualan').on('keyup change', function() {
        updateTotal();
    });

    function updateTotal() {
        let subtotal = 0;
        let totalDiskonBarang = 0;
        let totalQty = 0;

        $('#tableKeranjang tbody.action tr').each(function() {
            let total = parseFloat($(this).find('.total-baris').data('total')) || 0;
            let diskon = parseFloat($(this).find('.total-baris').data('diskon')) || 0;
            let qty = parseFloat($(this).find('.total-baris').data('qty')) || 0;

            subtotal += total;
            totalDiskonBarang += diskon;
            totalQty += qty;
        });

        let diskonPenjualanStr = $('#diskon_penjualan').val().replace(/[^0-9]/g, '');
        let diskonPenjualan = parseInt(diskonPenjualanStr) || 0;

        let totalKeseluruhan = subtotal - diskonPenjualan;

        $('.subtotal').text(rupiah(subtotal));
        $('.subtotal_diskon').text(rupiah(totalDiskonBarang));
        $('.total_keseluruhan').text(rupiah(totalKeseluruhan));
        $('.subtotal_barang').text(totalQty);
    }
</script>
@endpush