@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="d-flex flex-column flex-md-row align-items-center justify-content-between">
                            <h4 class="card-title">Data {{ $title }}</h4>
                            <div class="mt-2 mt-md-0">
                                Tanggal : {{ date('d F Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.purchase.return.add')
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-content">
                        <div class="card-body" id="data-wrap">
                            <table class="table table-hover" id="dataTable-ReturnPurchase" width="100%" cellspacing="0">
                                <thead>
                                    <tr class="text-center">
                                        <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">Total</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-footer">
                            <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('modal')
    @include('app.purchase.return.detail_bon')
@endpush

@push('js')
    <script>
        let count = 1;
        let dataTableDetailBon = null;
        let dataTable = null;

        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 detailBon(url) {
            if ($.isEmptyObject(dataTableDetailBon)) {
                $('.custom-loading').fadeIn();

                $.when(
                    dataTableDetailBon = $('#dataTable-detailBon').DataTable({
                        'processing': true,
                        'language': {
                            'loadingRecords': 	`<div class="spinner-grow" id="table-loader" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>`
                        },
                        'ajax': {
                            headers: {
                                'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                            },
                            url: url,
                            type: 'GET',
                            'dataSrc': 'data.purchase_details'
                        },
                        columns: [
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item, qty, custom_price } = row;

                                    return `
                                        <button class="btn btn-primary btn-sm add-retur-item" data-code="${item.code}" data-name="${item.name}" data-brand="${item.item_brand.name}" data-size="${item.item_size.size} ${item.item_size.unit}" data-color="${item.item_color.name}" data-type="${item.item_type.name}" data-price="${custom_price}" data-qty="${qty}" data-id="${item.id}">Tambah</button>
                                    `;
                                }
                            },
                            { 'data': null, defaultContent: '', className: 'align-middle column-auto-width' },
                            { 'data': 'item.code', className: 'align-middle column-auto-width' },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item_brand, name } = row.item;

                                    return `${item_brand.name} - ${name}`;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { qty } = row;

                                    return qty;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item_size } = row.item;

                                    return `${item_size.size} ${item_size.unit}`;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item_color } = row.item;

                                    return item_color.name;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item_type } = row.item;

                                    return item_type.name;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { custom_price } = row;

                                    return numeral(custom_price).format('0,0');
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { discount } = row;

                                    return discount;
                                }
                            },
                        ],
                        'columnDefs': [
                            {
                                'searchable': false,
                                'orderable': false,
                                'targets': 0
                            },
                            {
                                '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': [],
                        'deferRender': true
                    })
                ).done(() => {
                    $('.custom-loading').fadeOut()
                });
            } else {
                dataTableDetailBon.clear().draw();

                $('.custom-loading').fadeIn();
                $.when(
                    dataTableDetailBon.ajax.url(url).load()
                ).done(() => {
                    $('.custom-loading').fadeOut()
                });
            }

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

            $(document).on('click', '.add-retur-item', function () {
                let id = $(this).data('id'),
                    code = $(this).data('code'),
                    name = $(this).data('name'),
                    brand = $(this).data('brand'),
                    size = $(this).data('size'),
                    color = $(this).data('color'),
                    type = $(this).data('type'),
                    qty = $(this).data('qty'),
                    price = $(this).data('price');

                $('#detailBonModal').modal('hide');

                // $('#input-item_id').val(id).trigger('change').trigger('select2:select');
                $('#input-item_id').val(code +` `+ name);
                $('#input-item_id_hidden').val(id);

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

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

                $('#input-item_code').val(code);
                $('#input-item_name').val(name);
                $('#input-item_brand').val(brand);
                $('#input-item_size').val(size);
                $('#input-item_color').val(color);
                $('#input-item_type').val(type);

                setTimeout(() => {
                    $('#input-qty').focus();
                }, 450);
            });
        }

        function getPurchases() {
            $('#input-bon_number').select2({
                ajax: {
                    delay: 450,
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ route('purchases.index') }}',
                    dataType: 'json',
                    data: function(params) {
                        var query = {
                            q: params.term,
                        }

                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(purchase) {
                                if(purchase.is_paid !== 1){
                                    return {
                                        text: $(`<span>
                                            <div>${purchase.bon_number}</div>
                                            <div class="text-xs">${purchase.code}</div>
                                        </span>`),
                                        ...purchase
                                    }
                                }else{
                                    return {};
                                }
                            })
                        }
                    },
                },
                templateSelection: function(container) {
                    if (! container.bon_number) {
                        return container.text;
                    }

                    $(container.element).attr('data-id', container.id);
                    $(container.element).attr('data-code', container.code);
                    $(container.element).attr('data-supplier_id', container.supplier.id);
                    $(container.element).attr('data-supplier_name', container.supplier.name);
                    $(container.element).attr('data-total', container.total);
                    $(container.element).attr('data-discount', container.discount ? container.discount : 0);
                    $(container.element).attr('data-bon_number', container.bon_number);

                    const $state = $(`<span>
                                        <span>${container.bon_number} </span>
                                        <span class="text-sm text-muted">- ${container.code}</span>
                                    </span>`);
                    return $state;
                }
            });

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

                $('#detail-code').val(selected.attr('data-code'));
                $('#detail-bon_number').val(selected.attr('data-bon_number'));
                $('#detail-supplier_name').val(selected.attr('data-supplier_name'));
                $('#detail-total').val(`Rp ${numeral(selected.attr('data-total')).format('0,0')}`);
                $('#detail-discount').val(selected.attr('data-discount'));

                $('#input-supplier_id').val(selected.attr('data-supplier_id')).trigger('change');

                let url = `{{ route('purchases.index') }}/${selected.attr('data-id')}`;

                $('#detailBonBtn').show();

                detailBon(url);
            });
        }

        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,
                            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_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);
                }
            });
        }

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

            $('#input-bon_number').select2('open');

            dataTable = $('#dataTable-ReturnPurchase').DataTable({
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        'searchable': false,
                        'orderable': false,
                        'visible': 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('change', function() {
                // getItem($(this).val());
            });

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

            // $('#input-item_id').on('select2:select change', 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('').focus().trigger('change');
            // });

            $('.form-item').submit(function(e) {
                e.preventDefault();
                let formData = getFormData($(this));

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

                if (dataTable.column(2).data().indexOf(formData.item_code) === -1) {
                    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.price * formData.qty
                    ]).draw();
                } 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],
                        oldQty = parseInt(rowData[8]),
                        addedQty = parseInt(formData.qty),
                        newQty = oldQty + addedQty,
                        newPrice = formData.price;

                    if(formData.qty_real < newQty){
                        Swal.fire({
                            title: "Inforamasi",
                            html: "Qty Yang Dimasukan Sudah Melebihi Qty pada Faktur !!!",
                            icon: "info",
                            heightAuto: false
                        })
                        return false;
                    }

                    rowData[8] = newQty;
                    rowData[9] = newPrice;
                    rowData[10] = newPrice * newQty;

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

                $.when(
                    $(this).trigger('reset'),
                    $('#input-item_id').val('').trigger('change')
                ).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-item_id').select2('open');
                    $('#input-item_id').val('').trigger('change');
                });
                Swal.fire({
                    title: "Berhasil",
                    html: "Data Berhasil Ditambahkan",
                    icon: "success",
                    heightAuto: false
                })
            });

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

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

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

                $('#detailBonBtn').hide();
                $('#input-item_id').val('').trigger('change');
                $('#input-item_id_hidden').val('');
                $('#input-qty').val('');
                $('#input-qty_real').val('');
                $('#input-price').val('');
                $('#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-bon_number').focus();

                setTimeout(() => {
                    $('#input-bon_number').select2('open');
                }, 450);
            });

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

                let data = {
                    'purchase_id': purchase_id,
                    'supplier_id': supplier_id,
                    'purchase_details': [],
                    'total': 0,
                };

                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[11]*/
                    });

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

                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ (Route::has('return-purchases.store')) ? route('return-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 Return Pembelian Berhasil disimpan",
                            icon: "success",
                            timer: 1400,
                            showConfirmButton: false,
                            timerProgressBar: true,
                            heightAuto: false,
                            willOpen: () => {
                                Swal.showLoading()
                            }
                        }).then(function() {
                            window.location.reload();
                        });
                    },
                    error:(xhr, status, error) => {
                        const {responseJSON:response} = xhr;

                        console.log(xhr)

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