@extends('layouts.admin')

@section('title', "Transaksi $title ·")

@section('breadcrumb')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Transaksi {{ $title }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Transaksi {{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                                    <h4 class="card-title">Data Pembelian</h4>
                                        <div class="mt-2 mt-md-0">
                                            Tanggal : {{ date('d F Y') }}
                                        </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                Pilih Parameter Discount
                            </div>
                                <div class="col-md-1">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="persen" checked>
                                        <label class="form-check-label" for="exampleRadios1">
                                          Persen
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="rupiah">
                                        <label class="form-check-label" for="exampleRadios2">
                                            Rupiah
                                        </label>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.purchase.add')
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-content">
                        <div class="card-body">
                            <table class="table table-hover" id="dataTable-Purchase" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th class="column-auto-width">No</th>
                                        <th class="column-auto-width">ID Item</th>
                                        <th class="column-auto-width">Kode</th>
                                        <th>Nama Barang</th>
                                        <th class="column-auto-width">Merk</th>
                                        <th class="column-auto-width">Warna</th>
                                        <th class="column-auto-width">Ukuran</th>
                                        <th class="column-auto-width">Jenis</th>
                                        <th class="column-auto-width">Qty</th>
                                        <th class="column-auto-width">Harga</th>
                                        <th class="column-auto-width">Discount (% / Rp)</th>
                                        <th class="column-auto-width">Total</th>
                                        <th class="column-auto-width">Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="col-md-4 float-right">
                                <div class="form-group form-input">
                                    <label for="input-discount" class="col-form-label text-dark">Discount Total</label>
                                    <div class="input-group">
                                        <input type="number" name="discount" class="form-control nullable" id="input-discount" min="0" max="100">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="param">%</span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-md-4 offset-md-8">
                                        <label for="input-total_before_discount" id="input-total_before_discount" class="d-flex justify-content-between">
                                            <span>Total Sebelum Discount:</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-md-4 offset-md-8">
                                        <label for="input-total_discount" id="input-total_discount" class="d-flex justify-content-between">
                                            <span>Total Discount:</span><span>0</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-md-4 offset-md-8 mb-4">
                                        <label for="input-total" id="input-total" class="d-flex justify-content-between">
                                            <span>Total:</span><span>0</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-sm-row flex-column justify-content-end">
                                <button id="resetList" class="btn btn-outline-danger mr-sm-1 mb-1 mb-sm-0">Batal</button>
                                <button id="saveList" class="btn btn-primary btn-submit">
                                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status" aria-hidden="true"></span>
                                    <span class="btn-text">Simpan</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let count = 1;
        let theTotal = 0;
        let theTotalNet = 0;
        let gDiscount = null;

        function getData(_data = null) {
            let data = _data.data;
            dataTable.row.add(_data.data).draw();
            let print = $('#is_print').val();

            if (print == '1') {
                var a = document.createElement('a');
                a.href = `/stocks/mutation/invoice/${data.id}`;
                a.setAttribute('target', '_blank');
                a.click();
            }

            return true;
        }

        function getFormData($form){
            var unindexed_array = $form.serializeArray();
            var indexed_array = {};

            $.map(unindexed_array, function(n, i){
                indexed_array[n['name']] = n['value'];
            });

            return indexed_array;
        }
        
        function getSupplier() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('suppliers.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" selected disabled>-- Pilih Supplier --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code} - ${item.name}</option>`
                    });

                    $('#input-supplier_id').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getItem(supplier_id) {
            $.ajax({
                delay: 450,
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('items.index') }}',
                data: {
                    supplier_id: supplier_id,
                },
                dataType: 'json',
                success: function (data) {
                    let items = data.data.map(function(item) {
                        return {
                            id: item.id,
                            text: `${item.code} - ${item.name}`,
                            name: item.name,
                            code: item.code,
                            type: item.item_type.name,
                            brand: item.item_brand.name,
                            size: `${item.item_size.size} ${item.item_size.unit}`,
                            color: item.item_color.name,
                            unit: item.item_size.unit,
                            price: item.price_buy,
                            shelving: `${item.shelving.name} - ${item.shelving.rack.name}`,
                            rack: item.shelving.rack.name,
                        }
                    });

                    $('#input-item_id').html("");

                    if (items.length === 0) {
                        let _html = `<option value="" selected disabled>Barang tidak ditemukan.</option>`;
                        $('#input-item_id').html(_html);
                        $('#input-item_id').attr('disabled', true);

                        $('#input-item_code').val('');
                        $('#input-item_name').val('');
                        $('#input-item_brand').val('');
                        $('#input-item_size').val('');
                        $('#input-item_color').val('');
                        $('#input-item_type').val('');
                        $('#input-price').val('');

                        $('#input-qty').val('');

                        $('#input-item_id').attr('disabled', false);
                        return false;
                    }

                    let demo = `<option value="" selected disabled>-- Pilih Barang --</option>`;

                    $('#input-item_id').html(demo);

                    $('#input-item_id').select2({
                        selectOnClose: true,
                        data: items,
                        templateSelection: function(container) {
                            $(container.element).attr('data-name', container.name);
                            $(container.element).attr('data-code', container.code);
                            $(container.element).attr('data-type_name', container.type);
                            $(container.element).attr('data-brand_name', container.brand);
                            $(container.element).attr('data-size_name', container.size);
                            $(container.element).attr('data-color_name', container.color);
                            $(container.element).attr('data-unit', container.unit);
                            $(container.element).attr('data-price', container.price);
                            $(container.element).attr('data-shelving', container.shelving);
                            $(container.element).attr('data-rack', container.rack);

                            return container.text;
                        }
                    });

                    $('#input-item_id').attr('disabled', false);
                }
            });
        }

        function funCetakInvoice(id) {
            url = `{{ url('/purchases/invoice') }}/${id}`;
            window.open(url, '_blank');
        }

        $(document).ready(() => {
            $('#input-supplier_id').select2({ selectOnClose: true, width: 'resolve' });

            $('.custom-loading').fadeIn();
            $.when(getSupplier()).done(() => {
                setTimeout(() => {
                    $('.custom-loading').fadeOut();
                }, 500);
            });

            $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>0</span>`);
            $('#input-total').html(`<span>Total:</span><span>${theTotal}</span>`);

            dataTable = $('#dataTable-Purchase').DataTable({
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        'searchable': false,
                        'orderable': false,
                        'visible': false,
                        'targets': 1
                    },
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': -1
                    }
                ],
                'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                dom: `
                    <'row'
                        <'col-sm-12 col-md-6'l>
                        <'col-sm-12 col-md-6'f>
                    >
                    <'row'
                        <'col-sm-12'
                            <'table-responsive'
                                t
                            >
                        >
                    >
                    <'row'
                        <'col-sm-12 col-md-5'i>
                        <'col-sm-12 col-md-7'
                            <'table-responsive'
                                p
                            >
                        >
                    >`,
                'order': []
            });

            dataTable.on('draw.dt', function () {
                dataTable.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            });

            $('#input-supplier_id').on('select2:select', function() {
                $('#input-bon_number').focus();
                getItem($(this).val())
            });

            $('#input-item_id').on('select2:select', function() {
                let selected = $(this).find(':selected');

                $('#input-item_code').val(selected.attr('data-code'));
                $('#input-item_name').val(selected.attr('data-name'));
                $('#input-item_brand').val(selected.attr('data-brand_name'));
                $('#input-item_size').val(selected.attr('data-size_name'));
                $('#input-item_color').val(selected.attr('data-color_name'));
                $('#input-item_type').val(selected.attr('data-type_name'));
                $('#input-price').val(selected.attr('data-price'));

                $('#input-qty').val(1).focus().trigger('change');
            });

            $('input:radio[name="exampleRadios"]').change(
            function(){
                const param = document.getElementById('parameterdisc');
                const param2 = document.getElementById('param');
                if (this.checked && this.value == 'persen') {
                    param.innerHTML = "%";
                    param2.innerHTML = "%";
                    document.getElementById('input-item_discount').setAttribute("min" , 0);
                    document.getElementById('input-item_discount').setAttribute("max" , 100);
                }else{
                    param.innerHTML = "Rp";
                    param2.innerHTML = "Rp";
                    document.getElementById('input-item_discount').removeAttribute('min');
                    document.getElementById('input-item_discount').removeAttribute('max');
                }
            }
        );

            $('.form-item').submit(function(e) {
                e.preventDefault();
                let formData = getFormData($(this));
                const param = document.getElementById('parameterdisc').innerHTML;

                if ($.isEmptyObject($('#hidden-bon_number').val())) {
                    $('#hidden-supplier_id').val(formData.supplier_id);
                    $('#hidden-bon_number').val(formData.bon_number);
                }

                let net;
                if (param == 'Rp') {
                    net = ((formData.price * formData.qty) - (formData.item_discount));    
                }else{
                    net = ((formData.price * formData.qty) - ((formData.price * formData.qty) * formData.item_discount/100));
                }

                if (dataTable.column(2).data().indexOf(formData.item_code) === -1) {
                    let disc;
                    if (param == 'Rp') {
                        console.log('success');
                        disc = (formData.price * formData.qty) - (formData.item_discount)
                    }else{
                        disc = (formData.price * formData.qty) - ((formData.price * formData.qty) * formData.item_discount/100)
                    }
                    // console.log(disc);
                    dataTable.row.add([
                        count++,
                        formData.item_id,
                        formData.item_code,
                        formData.item_name,
                        formData.item_brand,
                        formData.item_color,
                        formData.item_size,
                        formData.item_type,
                        formData.qty,
                        formData.price,
                        formData.item_discount ? formData.item_discount : '-',
                        disc,
                        `<button class="btn btn-danger shadow-sm btn-custom-1 delete" title="Hapus"><i class="far fa-trash-alt fa-sm"></i></button>`
                    ]).draw();

                    theTotal += net
                } else {
                    let index = dataTable.rows().indexes().filter((value) =>
                        formData.item_code === dataTable.row(value).data()[2])[0],
                        rowData = dataTable.rows().data().filter((value) => value[2] === formData.item_code)[0],
                        itemDiscount = rowData[10],
                        oldQty = parseInt(rowData[8]),
                        addedQty = parseInt(formData.qty),
                        newQty = oldQty + addedQty,
                        price = formData.price,
                        oldPrice = rowData[9],
                        oldDiscount = parseInt(rowData[10]),
                        newDiscount = formData.item_discount;

                    // Check old has discount or not
                    if (itemDiscount === '-') {
                        theTotal -= oldQty * oldPrice;
                    } else {
                        if (param == 'Rp') {
                            theTotal -= ((oldQty * oldPrice) - ((oldQty * oldPrice) - oldDiscount))  
                        }else{
                            theTotal -= ((oldQty * oldPrice) - ((oldQty * oldPrice) * oldDiscount / 100))
                        }
                    }

                    rowData[8] = newQty;
                    rowData[9] = price;
                    rowData[11] = (price * newQty) - ((price * newQty) * newDiscount / 100);
                    rowData[10] = newDiscount ? newDiscount : '-';

                    theTotal += rowData[11];

                    dataTable.row(index).data(rowData).draw();
                }

                gDiscount = formData.discount

                $.when(
                    $(this).trigger('reset'),
                    $('#input-item_id').val('').trigger('change'),
                    $('.custom-loading').fadeIn()
                ).done(() => {
                    $('#input-supplier_id').val($('#hidden-supplier_id').val());
                    $('#input-supplier_id').trigger('change');
                    $('#input-supplier_id').attr('disabled', true);

                    $('#input-bon_number').val($('#hidden-bon_number').val());
                    $('#input-bon_number').attr('disabled', true);
                    $('#input-discount').val(gDiscount);

                    let params = document.getElementById('parameterdisc').innerHTML;
                    let totalDiscount;
                    if (params == 'Rp') {
                        totalDiscount = (theTotal - gDiscount);
                    }else{
                        totalDiscount = (theTotal * gDiscount / 100);
                    }
                    let totalNet = theTotal - (totalDiscount || 0);

                    $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>${numeral(theTotal).format('0,0')}</span>`);
                    $('#input-total_discount').html(`<span>Total Discount:</span><span>${numeral(totalDiscount).format('0,0')}</span>`);
                    $('#input-total').html(`<span>Total:</span><span>${numeral(totalNet).format('0,0')}</span>`);
                    $('.custom-loading').fadeOut();
                    Swal.fire({
                        title: "Berhasil",
                        html: "Barang Berhasil ditambahkan",
                        icon: "success",
                        timer: 1400,
                        showConfirmButton: false,
                        timerProgressBar: true,
                        heightAuto: false,
                        willOpen: () => {
                                Swal.showLoading()
                            }
                    })
                });
            });

            $('#input-discount').on('keyup change', function () {
                const param = document.getElementById('parameterdisc').innerHTML;
                let val;
                if (param == 'Rp') {
                    val = $(this).val(),
                    totalDiscount = (theTotal - val),
                    totalNet = theTotal - totalDiscount;
                }else{
                    val = $(this).val(),
                    totalDiscount = (theTotal * val / 100),
                    totalNet = theTotal - totalDiscount;
                }

                gDiscount = val;

                if (param == 'Rp') {
                    $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>${numeral(theTotal).format('0,0')}</span>`);
                    $('#input-total_discount').html(`<span>Total Discount:</span><span>${numeral(totalNet).format('0,0')}</span>`);
                    $('#input-total').html(`<span>Total:</span><span>${numeral(totalDiscount).format('0,0')}</span>`);   
                }else{
                    $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>${numeral(theTotal).format('0,0')}</span>`);
                    $('#input-total_discount').html(`<span>Total Discount:</span><span>${numeral(totalDiscount).format('0,0')}</span>`);
                    $('#input-total').html(`<span>Total:</span><span>${numeral(totalNet).format('0,0')}</span>`);
                }
            });

            $('#resetList').on('click', () => {
                dataTable.clear().draw();

                theTotal = 0;
                gDiscount = null;

                $('#hidden-bon_number').val('');
                $('#hidden-supplier_id').val('');

                $('#input-supplier_id').val('');
                $('#input-supplier_id').trigger('change');
                $('#input-supplier_id').attr('disabled', false);

                $('#input-bon_number').val('');
                $('#input-bon_number').attr('disabled', false);

                $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>${theTotal}</span>`);
                $('#input-total_discount').html(`<span>Total Discount:</span><span>0</span>`);
                $('#input-total').html(`<span>Total:</span><span>${theTotal}</span>`);
                $('.custom-loading').fadeIn();
                $('.custom-loading').fadeOut();
            });

            $('#dataTable-Purchase tbody').on( 'click', '.delete', function () {
                let row = dataTable.row($(this).parents('tr')),
                    data = row.data(),
                    totalItem = data[11]

                theTotal -= totalItem;

                let totalDiscount = (theTotal * gDiscount / 100);
                let totalNet = theTotal - totalDiscount;

                $('#input-total_before_discount').html(`<span>Total Sebelum Discount:</span><span>${numeral(theTotal).format('0,0')}</span>`);
                $('#input-total_discount').html(`<span>Total Discount:</span><span>${numeral(totalDiscount).format('0,0')}</span>`);
                $('#input-total').html(`<span>Total:</span><span>${numeral(totalNet).format('0,0')}</span>`);

                row.remove().draw();
            });

            $('#saveList').on('click', () => {
                let listData = dataTable.rows().data();
                let supplier_id = $('#hidden-supplier_id').val();
                let bon_number = $('#hidden-bon_number').val();
                let discount = $('#input-discount').val();

                let data = {
                    'bon_number': bon_number,
                    'supplier_id': supplier_id,
                    'purchase_details': [],
                    'total': 0,
                    'discount': discount === '-' ? 0 : discount
                };

                for (let index = 0; index < listData.length; index++) {
                    let element = listData[index];

                    data.purchase_details.push({
                        'item_id': element[1],
                        'qty': element[8],
                        'custom_price': element[9],
                        'discount': element[10] === '-' ? 0 : element[10]
                    });

                    data.total += parseInt(element[11]);
                }

                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ (Route::has('purchases.store')) ? route('purchases.store'):null }}',
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    beforeSend:() => {
                        $('.btn-submit').attr("disabled", true);
                        $('.btn-spinner').removeClass("d-none");
                        $('.btn-text').addClass("d-none");
                        $('.custom-loading').fadeIn();
                    },
                    complete:() => {
                        $('.btn-submit').attr("disabled", false);
                        $('.btn-spinner').addClass("d-none");
                        $('.btn-text').removeClass("d-none");
                        $('.custom-loading').fadeOut();
                    },
                    success:(data) => {
                        Swal.fire({
                            title: "Berhasil",
                            html: "Transkasi Pembelian Berhasil ditambahkan",
                            icon: "success",
                            timer: 1400,
                            showConfirmButton: false,
                            timerProgressBar: true,
                            heightAuto: false,
                            willOpen: () => {
                                Swal.showLoading()
                            }
                        }).then(function() {
                            funCetakInvoice(data.data.id);
                            window.location.reload();
                        });
                    },
                    error:(xhr, status, error) => {
                        const {responseJSON:response} = xhr;

                        console.log(xhr)

                        toastr.error(response.message, 'Gagal', {
                            progressBar: !0
                        });
                    }
                });
            });
        });
    </script>
@endpush