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

@push('css')
<style>
    @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>Pembelian</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">Pembelian</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=0 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-beli="{{ $barang->harga_beli }}">
                                                    {{ $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" 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 Beli <small class="text-muted">(per satuan)</small></h6>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">RP</div>
                                            </div>
                                            <input type="text" id="harga_beli" class="form-control rupiah" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Harga Beli Total</h6>
                                        <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" readonly>
                                        </div>
                                        <small class="text-muted">Harga beli × qty</small>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button 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 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 class="text-dark">Keranjang Pembelian</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: 10%;">Kode</th>
                                            <th style="width: 20%;">Nama</th>
                                            <th style="width: 15%;">QTY</th>
                                            <th style="width: 20%;">Harga Beli Total</th>
                                            <th style="width: 15%;">Harga Satuan</th>
                                        </tr>
                                    </thead>
                                    <tbody class="action" style="vertical-align: middle !important;"></tbody>
                                    <tfoot class="bg-light">
                                        <tr>
                                            <td class="text-center">
                                                <span class="subtotal_barang"></span> Barang
                                            </td>
                                            <td class="text-center" colspan="3">
                                                <h6>Total Pembelian</h6>
                                            </td>
                                            <td class="text-right" colspan="2">
                                                <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="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

{{-- Modal Bayar --}}
<div class="modal fade" id="modal-bayar" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Pembayaran Pembelian</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">Total Pembelian</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 total-pembelian" readonly>
                    </div>
                    <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 Nominal Pembayaran">
                    </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>
            <div class="modal-footer">
                <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 }}'
    let totalPembelian = 0;

    $(document).ready(function () {
        focusSelect();
        toggleMl1Class();
        keranjang();
    });

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

    function focusSelect() {
        $('#select-barang').select2({
            placeholder: "Pilih Barang",
            allowClear: true
        });
        setTimeout(function () {
            $('#select-barang').select2('open');
            document.querySelector('.select2-search__field').focus();
        }, 100);
        $('#select-barang').on('select2:select', function () {
            $('#qty').focus();
        });
    }

    function generateFaktur() {
        const randomNumber = Math.floor(Math.random() * 100000000)
            .toString()
            .padStart(8, '0');
        return 'PBL' + randomNumber;
    }

    function keranjang() {
        $('#tableKeranjang').DataTable({
            lengthChange: false,
            searching: false,
            info: false,
            autoWidth: false,
            ordering: false,
            paging: false,
            language: {
                paginate: {
                    next: "Selanjutnya",
                    previous: "Sebelumnya"
                },
                emptyTable: "Keranjang masih kosong"
            },
            ajax: {
                url: '/api/pembelians/keranjang',
                type: "GET",
                headers: { 'Authorization': 'Bearer ' + token },
                dataSrc: function (json) {
                    if (json.data.length === 0) {
                        $('.btn-bayar').hide();
                    } else {
                        $('.btn-bayar').show();
                    }
                    return json.data;
                }
            },
            columns: [
                {
                    data: null,
                    render: function (data) {
                        return `<button class="btn btn-icon btn-danger btn-hapus-keranjang" data-id="${data.id}" type="button">
                                    <i class="far fa-trash-can"><a style="font-family: 'Quicksand', sans-serif;"> Hapus</a></i>
                                </button>`;
                    }
                },
                {
                    data: 'barang.kode',
                    render: function (data) { return data; }
                },
                {
                    data: 'barang.nama',
                    render: function (data) { return data; }
                },
                {
                    data: 'qty',
                    render: function (data, type, row) {
                        return `<div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">${row.barang.satuan?.nama ?? 'Qty'}</div>
                                    </div>
                                    <input type="text" id="qty_keranjang" data-id="${row.id}" class="form-control rupiah" placeholder="Masukan Qty" value="${rupiah(data)}">
                                </div>`;
                    }
                },
                {
                    data: 'harga_beli_total',
                    render: function (data) {
                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    // harga satuan = harga_beli_total / qty
                    data: null,
                    render: function (data) {
                        let harga_beli_total = parseFloat(String(data.harga_beli_total || '0').replace(/[,\.]/g, ''));
                        let qty = parseFloat(String(data.qty || '0').replace(/[,\.]/g, ''));
                        let satuan = qty > 0 ? harga_beli_total / qty : 0;
                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(satuan)}</span>`;
                    }
                },
            ],
            drawCallback: function () {
                let api = this.api();
                let data = api.rows().data();

                let total = 0;
                let jumlahBarang = data.length;

                data.each(function (row) {
                    let harga_beli_total = parseFloat((row.harga_beli_total ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                    total += harga_beli_total;
                });

                totalPembelian = total;

                $(api.table().footer()).find('.total_keseluruhan').html(`${rupiah(total)}`);
                $(api.table().footer()).find('.subtotal_barang').html(`${jumlahBarang}`);
            }
        });
    }

    function masukKeranjang() {
        $.ajax({
            url: '/api/pembelians',
            type: "POST",
            cache: false,
            headers: { 'Authorization': 'Bearer ' + token },
            data: {
                "barang_id"        : $('#select-barang').val(),
                "harga_beli_total" : $('#harga_beli_total').val().replace(/\D/g, ''),
                "qty"              : $('#qty').val().replace(/\D/g, ''),
            },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: response.data.message,
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    $('#tableKeranjang').DataTable().ajax.reload(null, false);
                    resetForm();
                });
            },
            error: function (responseJSON) {
                if (responseJSON.status === 422) {
                    let errors = responseJSON.responseJSON.errors;
                    let message = '';
                    let errorCount = Object.keys(errors).length;

                    if (errorCount === 2) {
                        for (let field in errors) {
                            message += errors[field].join(', ') + '\n';
                        }
                    } else {
                        message = errors;
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        html: message.replace(/\n/g, '<br>'),
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Silakan coba lagi',
                    });
                }
            }
        });
    }

    function hapusKeranjang(id) {
        $.ajax({
            url: '/api/pembelians/keranjang/' + id,
            type: "DELETE",
            cache: false,
            headers: { 'Authorization': 'Bearer ' + token },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: response.data.message,
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    $('#tableKeranjang').DataTable().ajax.reload(null, false);
                });
            }
        });
    }

    function updateQty(id, data) {
        $.ajax({
            url: '/api/pembelians/keranjang/qty/' + id,
            type: "PUT",
            cache: false,
            headers: { 'Authorization': 'Bearer ' + token },
            data: { qty: data },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: response.data.message,
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    $('#tableKeranjang').DataTable().ajax.reload(null, false);
                });
            }
        });
    }

    function transaksiBayar(data) {
        $.ajax({
            url: '/api/pembelians/bayar',
            type: "POST",
            cache: false,
            headers: { 'Authorization': 'Bearer ' + token },
            data: data,
            success: function (response) {
                 if (response.data.resource.id) {
                    const url = "{{ route('pembelian.struk', ['id' => 'id_pembelian']) }}".replace('id_pembelian', response.data.resource.id);
                    window.open(url, '_blank');
                }
                Swal.fire({
                    icon: 'success',
                    title: response.data.message,
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    $('#tableKeranjang').DataTable().ajax.reload(null, false);
                    resetForm();
                    $('#modal-bayar').modal('hide');
                    $('.pembayaran').val(0);
                    $('.kembalian').val(0);
                    $('.total-pembelian').val(0);
                    $('#select-barang').select2('open');
                    document.querySelector('.select2-search__field').focus();
                });
            },
            error: function (xhr) {
                let errorMessage = 'Terjadi kesalahan';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    html: errorMessage
                });
            }
        });
    }

    function kembalian() {
        let bayar     = parseFloat($('.pembayaran').val().replace(/\D/g, '')) || 0;
        let kembalian = bayar - totalPembelian;
        if (kembalian < 0) kembalian = 0;
        $('.kembalian').val(rupiah(kembalian));
    }

    function resetForm() {
        $('#nama').val('');
        $('#harga_beli').val('');
        $('#harga_beli_total').val('');
        $('#qty').val('');
        $('.input-group-text-qty').text('Qty');
        $('#select-barang').val(0).change();
        $('#form_data').removeClass('was-validated');
        $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();
    }

    function toggleMl1Class() {
        if ($(window).width() < 576) {
            $('.form-group.row').removeClass('ml-1');
        } else {
            $('.form-group.row').addClass('ml-1');
        }
    }

    // Event: pilih barang → isi nama & harga beli
    $('#select-barang').on('change', function () {
        let selectedOption  = $(this).find('option:selected');
        let nama            = selectedOption.data('nama');
        let harga_beli      = selectedOption.data('harga-beli');

        $('#nama').val(nama);
        $('#harga_beli').val(rupiah(harga_beli));
        $('#harga_beli_total').val('');
        $('#qty').val('');
    });

    // Event: reset form
    $('.reset-barang').click(function () {
        resetForm();
    });

    // Event: tambah ke keranjang
    $(document).ready(function () {
        $('.tambah-barang').click(function (e) {
            e.preventDefault();
            let supplier = $('#select-supplier').val();
            if (!supplier || supplier === '0') {
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: 'Harap pilih supplier terlebih dahulu',
                });
                return;
            }
            const form = document.getElementById('form_data');
            if (form.checkValidity()) {
                masukKeranjang();
            } else {
                form.classList.add('was-validated');
            }
        });
    });

    // Event: hapus item keranjang
    $('#tableKeranjang').on('click', '.btn-hapus-keranjang', function () {
        let id = $(this).data('id');
        hapusKeranjang(id);
    });

    // Event: input qty di keranjang → tampil tombol simpan
    $(document).on('input', '#qty_keranjang', function () {
        let id         = $(this).data('id');
        let inputGroup = $(this).closest('.input-group');
        inputGroup.find('.input-group-append').remove();
        inputGroup.append(`
            <div class="input-group-append">
                <button class="btn btn-success btn-sm btn-simpan-qty" data-id="${id}" type="button">
                    <i class="fas fa-check"></i>
                </button>
            </div>
        `);
    });

    $(document).on('input', '#qty', function () {
        let qty        = parseFloat($(this).val().replace(/\D/g, '')) || 0;
        let harga_beli = parseFloat($('#harga_beli').val().replace(/\D/g, '')) || 0;
        let total      = qty * harga_beli;

            $('#harga_beli_total').val(rupiah(total));
    });

    // Event: simpan qty
    $(document).on('click', '.btn-simpan-qty', function () {
        let id  = $(this).data('id');
        let qty = parseFloat($(`#qty_keranjang[data-id="${id}"]`).val().replace(/[^\d]/g, ''));
        updateQty(id, qty);
    });

    // Event: input nominal pembayaran → hitung kembalian
    $(document).on('input', '.pembayaran', function () {
        kembalian();
    });

    // Event: klik bayar → buka modal
    $(document).on('click', '.btn-bayar', function () {
        $('.total-pembelian').val(rupiah(totalPembelian));
        $('#modal-bayar').modal('show');
        $('#modal-bayar').on('shown.bs.modal', function () {
            $('.pembayaran').focus();
        });
    });

    // Event: konfirmasi bayar
    $(document).on('click', '.btn-transaksi-bayar', function () {
        let supplier  = $('#select-supplier').val();
        let bayar     = $('.pembayaran').val().replace(/\D/g, '');
        let kembalian = parseFloat($('.kembalian').val().replace(/\D/g, '')) || 0;

        if (!bayar || bayar <= 0) {
            Swal.fire({
                icon: 'error',
                title: 'Terjadi Kesalahan',
                text: 'Silakan isi nominal pembayaran',
            });
            return;
        }

        let data = {
            'faktur'      : generateFaktur(),
            'supplier_id' : supplier,
            'bayar'       : bayar,
        };

        transaksiBayar(data);
    });

    // Event: tutup modal → reset input bayar
    $('#modal-bayar').on('hidden.bs.modal', function () {
        $('.pembayaran').val(0);
        $('.kembalian').val(0);
        $('.total-pembelian').val(0);
        $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();
    });

    // Event: tekan enter di qty → langsung masuk keranjang
    $('#qty').on('keypress', function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $(this).blur();
            setTimeout(function () {
                masukKeranjang();
            }, 50);
            return false;
        }
    });

    // Event: tekan enter di nominal bayar → langsung proses
    $('.pembayaran').on('keyup', function (e) {
        if (e.key === 'Enter') {
            let supplier  = $('#select-supplier').val();
            let bayar     = $('.pembayaran').val().replace(/\D/g, '');
            let kembalian = parseFloat($('.kembalian').val().replace(/\D/g, '')) || 0;

            if (!bayar || bayar <= 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: 'Silakan isi nominal pembayaran',
                });
                return;
            }

            let data = {
                'faktur'      : generateFaktur(),
                'supplier_id' : supplier,
                'bayar'       : bayar,
            };

            transaksiBayar(data);
        }
    });
</script>
@endpush