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

@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>Belanja</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">Belanja</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>Supplier</h6>
                                        <div class="">
                                            <select class="form-control select2" id="select-supplier" required>
                                                <option value="" disabled selected>Pilih Supplier</option>
                                                @foreach ($suppliers as $supplier)
                                                <option value="{{ $supplier->id }}">{{ $supplier->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Kode Barang</h6>
                                        <div class="">
                                            <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-margin="{{ $barang->margin }}">
                                                    {{-- 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 ">
                                                        satuan
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Harga Beli Total</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_beli_total" class="form-control rupiah">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Harga Beli Satuan</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_beli_satuan" class="form-control rupiah" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Tanggal Expired</h6>
                                        <input type="date" id="tanggal_expired" class="form-control ">
                                    </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="table-keranjang">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Action</th>
                                            <th>Kode</th>
                                            <th>Nama</th>
                                            <th>QTY</th>
                                            <th>Harga Beli Satuan</th>
                                            <th>Margin</th>
                                            <th>Expired</th>
                                            <th style="width: 20%;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody id="keranjang-body" style="vertical-align: middle !important;">
                                        <tr>
                                            <td colspan="8" class="text-center text-muted">Keranjang masih kosong</td>
                                        </tr>
                                    </tbody>
                                    <tfoot class="bg-light">
                                        <tr>
                                            <td class="text-center"><span class="subtotal_barang">0</span> Barang</td>
                                            <td class="text-right" colspan="6">
                                                <h6>Total Keseluruhan</h6>
                                            </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" data-target="#modal-konfirmasi" data-toggle="modal"
                                        class="justify-content-end btn-block btn-lg btn btn-success btn-icon">
                                        <i class="fas fa-wallet"></i> Simpan Belanja
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-konfirmasi" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Konfirmasi Simpan Data</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="alert alert-warning">
                    <label for=""><b> Harap memastikan seluruh data barang telah diinput secara lengkap dan total belanja pada aplikasi sesuai dengan nota pembelian dari supplier, karena transaksi yang telah tersimpan bersifat final dan tidak dapat diubah.</b></label>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row w-100">
                    <div class="col-md-6 pl-0">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-times"> </i> Batal</button>
                    </div>
                    <div class="col-md-6 pr-0">
                        <button type="button" class="btn btn-success" id="btn-simpan-transaksi"><i class="fas fa-check"> </i> Simpan Transaksi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {

        let keranjang = [];

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

        function calculateHargaSatuan() {
            let qtyStr = $('#qty').val().replace(/[^0-9]/g, '');
            let totalStr = $('#harga_beli_total').val().replace(/[^0-9]/g, '');

            let qty = parseInt(qtyStr);
            let total = parseInt(totalStr);

            if (!isNaN(qty) && qty > 0 && !isNaN(total)) {
                let satuan = Math.floor(total / qty);
                $('#harga_beli_satuan').val(formatRupiah(satuan));
            } else {
                $('#harga_beli_satuan').val('');
            }
        }

        $('#qty, #harga_beli_total').on('input keyup', function() {
            calculateHargaSatuan();
        });

        $('.reset-barang').on('click', function(e) {
            e.preventDefault();
            resetFormBarang();
        });

        function resetFormBarang() {
            $('#select-barang').val(0).trigger('change');
            $('#qty').val('');
            $('#harga_beli_total').val('');
            $('#harga_beli_satuan').val('');
            $('#tanggal_expired').val('');
        }

        function renderKeranjang() {
            let tbody = $('#keranjang-body');
            tbody.empty();

            if (keranjang.length === 0) {
                tbody.append(`<tr><td colspan="8" class="text-center text-muted">Keranjang masih kosong</td></tr>`);
                $('.subtotal_barang').text(0);
                $('.total_keseluruhan').text(0);
                return;
            }

            let grandTotal = 0;
            let totalBarang = 0;

            keranjang.forEach((item, index) => {
                grandTotal += item.total;
                totalBarang += item.qty;

                let tr = `
                    <tr>
                        <td class="action text-center">
                            <button type="button" class="btn btn-icon btn-danger btn-hapus-item" data-index="${index}">
                                <i class="far fa-trash-can"></i>
                            </button>
                        </td>
                        <td>${item.kode}</td>
                        <td>${item.nama}</td>
                        <td class="text-center">${formatRupiah(item.qty)}</td>
                        <td class="text-center">Rp ${formatRupiah(item.satuan)}</td>
                        <td class="text-center">
                           <div class="row align-items-center justify-content-center">
                             <input type="number" class="form-control text-center input-margin" data-index="${index}" value="${item.margin !== undefined && item.margin !== null ? item.margin : ''}" placeholder="%" style="width: 80px; margin: auto;">
                             <span class="font-weight-bold">%</span>
                           </div>
                        </td>
                        <td class="text-center">${item.expired || '-'}</td>
                        <td class="text-right">Rp ${formatRupiah(item.total)}</td>
                    </tr>
                `;
                tbody.append(tr);
            });

            $('.subtotal_barang').text(formatRupiah(totalBarang));
            $('.total_keseluruhan').text(formatRupiah(grandTotal));
        }

        $(document).on('click', '.btn-hapus-item', function() {
            let index = $(this).data('index');
            keranjang.splice(index, 1);
            renderKeranjang();
        });

        $(document).on('input change', '.input-margin', function() {
            let index = $(this).data('index');
            let val = parseInt($(this).val());
            keranjang[index].margin = isNaN(val) ? 0 : val;
        });

        $('.tambah-barang').on('click', function(e) {
            e.preventDefault();

            let supplierId = $('#select-supplier').val();
            let barangId = $('#select-barang').val();
            let qty = parseInt($('#qty').val().replace(/[^0-9]/g, ''));
            let total = parseInt($('#harga_beli_total').val().replace(/[^0-9]/g, ''));
            let satuan = parseInt($('#harga_beli_satuan').val().replace(/[^0-9]/g, ''));
            let expired = $('#tanggal_expired').val();

            if (!supplierId) {
                Swal.fire('Peringatan', 'Silakan pilih Supplier terlebih dahulu!', 'warning');
                return;
            }
            if (!barangId || barangId == 0) {
                Swal.fire('Peringatan', 'Silakan pilih Barang terlebih dahulu!', 'warning');
                return;
            }
            if (isNaN(qty) || qty <= 0) {
                Swal.fire('Peringatan', 'Qty tidak valid!', 'warning');
                return;
            }
            if (isNaN(total) || total <= 0) {
                Swal.fire('Peringatan', 'Harga Beli Total tidak valid!', 'warning');
                return;
            }

            let selectedOption = $('#select-barang option:selected');
            let namaLengkap = selectedOption.text().trim();
            let splitText = namaLengkap.split(' - ');
            let kode = splitText[0] || '-';
            let nama = splitText[1] || selectedOption.data('nama') || namaLengkap;
            let margin = selectedOption.data('margin') !== undefined && selectedOption.data('margin') !== '' ? selectedOption.data('margin') : 0;

            let existingIndex = keranjang.findIndex(item => item.id == barangId);
            if (existingIndex !== -1) {
                keranjang[existingIndex].qty += qty;
                keranjang[existingIndex].total += total;
                keranjang[existingIndex].satuan = Math.floor(keranjang[existingIndex].total / keranjang[existingIndex].qty);
                keranjang[existingIndex].margin = margin;
                if (expired) {
                    keranjang[existingIndex].expired = expired;
                }
            } else {
                keranjang.push({
                    id: barangId,
                    kode: kode,
                    nama: nama,
                    qty: qty,
                    satuan: satuan,
                    total: total,
                    margin: margin,
                    expired: expired
                });
            }

            renderKeranjang();
            resetFormBarang();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil dimasukkan ke keranjang',
                showConfirmButton: false,
                timer: 1000
            });
        });

        $('#btn-simpan-transaksi').on('click', function(e) {
            e.preventDefault();

            let supplierId = $('#select-supplier').val();

            if (keranjang.length === 0) {
                Swal.fire('Peringatan', 'Keranjang belanja masih kosong!', 'warning');
                return;
            }

            if (!supplierId) {
                Swal.fire('Peringatan', 'Supplier belum dipilih!', 'warning');
                return;
            }

            let dataToSend = {
                _token: '{{ csrf_token() }}',
                supplier_id: supplierId,
                keranjang: keranjang
            };

            // Mengubah teks button dan disable saat loading
            let btn = $(this);
            let originalText = btn.html();
            btn.html('<i class="fas fa-spinner fa-spin"></i> Menyimpan...').prop('disabled', true);

            $.ajax({
                url: '{{ route("transaksi_belanja.store") }}',
                type: 'POST',
                data: dataToSend,
                success: function(response) {
                    $('#modal-konfirmasi').modal('hide');

                    if (response.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire('Error', 'Gagal menyimpan transaksi', 'error');
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr.responseText);
                    Swal.fire('Error', 'Terjadi kesalahan saat mengirim data', 'error');
                },
                complete: function() {
                    btn.html(originalText).prop('disabled', false);
                }
            });
        });

    });
</script>
@endpush