@extends('layouts.admin')

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

@section('breadcrumb')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ $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">{{ $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">Return Penjualan</h4>
                            <div class="mt-2 mt-md-0">
                                Tanggal : {{ date('d F Y') }}
                            </div>
                            <div class="d-flex flex-row align-items-center mt-2 mt-md-0">
                                <div>
                                    No Faktur : &nbsp;
                                </div>
                                <div>
                                    <input type="text" name="id" class="form-control" id="input-id" value="{{ $id }}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.transaction.return.add_penjualan')
                    </div>
                </div>
            </div>
            <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">Input Data - Transaksi</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.transaction.return.add_data')
                    </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-Cart" 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">Qty</th>
                                    <th class="column-auto-width">Satuan</th>
                                    <th class="column-auto-width">Harga Satuan</th>
                                    <th class="column-auto-width">Total</th>
                                    <th class="column-auto-width">Action</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex flex-sm-row flex-column justify-content-end">
                                <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.transaction.return.detail_transaction')
@endpush

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

        function getData(_data = null) {
            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 detailTransaction(url) {
            if ($.isEmptyObject(dataTableDetailTransaction)) {
                $('.custom-loading').fadeIn();

                $.when(
                    dataTableDetailTransaction = $('#dataTable-detailTransaction').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.transaction_details'
                        },
                        columns: [
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item, item_id, item_name, item_brand, item_color, item_size, qty, custom_price } = row;
                                    let itemcode = "";
                                    if (item) {
                                        let {code} = item;
                                        itemcode = code;
                                        itemname = item.name;
                                        itembrand = item.item_brand.name;
                                        itemcolor = item.item_color.name;
                                        itemsize = item.item_size.size;
                                        itemunit = item.item_size.unit;

                                        return `
                                        <button class="btn btn-primary btn-sm add-retur-item" data-item_code="${itemcode}" data-item_name="${itemname}" data-item_brand="${itembrand}" data-item_color="${itemcolor}" data-item_size="${itemsize}" data-price="${custom_price}" data-qty="${qty}" data-id="${item_id}" data-item_unit="${itemunit}">Tambah</button>
                                    `
                                    } else {
                                        itemcode = '-';
                                        return `
                                        <button class="btn btn-primary btn-sm add-retur-item" data-item_code="${itemcode}" data-item_name="${item_name}" data-item_brand="${item_brand}" data-item_color="${item_color}" data-item_size="${item_size}" data-price="${custom_price}" data-qty="${qty}" data-id="${item_id}" disabled>Tambah</button>
                                    `
                                    }
                                    ;
                                }
                            },
                            { 'data': null, defaultContent: '', className: 'align-middle column-auto-width' },
                            { 
                                'data': null, 
                                className: 'align-middle column-auto-width', 
                                render: (data, type, row) => {
                                    let { item } = row;
                                    if (item) {
                                        let {code} = item
                                        return code;
                                    }
                                    return '-';
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let {item} = row;
                                    let nama;
                                    if (item) {
                                        let { name } = item;
                                        nama = name;
                                    }else{
                                        let {item_name} = row;
                                        nama = item_name;
                                    }
                                    return nama;
                                }
                            },
                            {
                                '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, item_size } = row;
                                    if (item) {
                                        let {item_size} = item;
                                        return `${item_size.size} ${item_size.unit}`;
                                    }
                                    return item_size;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item, item_color } = row;
                                    if (item) {
                                        let {item_color} = item;
                                        return item_color.name;
                                    }
                                    return item_color;
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { item } = row;
                                    if (item) {
                                        return item.item_type.name;
                                    }
                                    return '-';
                                }
                            },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { custom_price } = row;

                                    return numeral(custom_price).format('0,0');
                                }
                            },
                        ],
                        '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 {
                dataTableDetailTransaction.clear().draw();

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

            dataTableDetailTransaction.on('draw.dt', function () {
                dataTableDetailTransaction.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'),
                    item_code = $(this).data('item_code'),
                    item_name = $(this).data('item_name'),
                    item_brand = $(this).data('item_brand'),
                    item_size = $(this).data('item_size'),
                    item_color = $(this).data('item_color'),
                    item_unit = $(this).data('item_unit'),
                    qty = $(this).data('qty'),
                    price = $(this).data('price');

                $('#detailTransactionModal').modal('hide');
                
                $('#input-item_id').val(item_code +`-`+ item_name);
                $('#input-item_id_hidden').val(id);
                $('#input-item_code').val(item_code);
                $('#input-item_name').val(item_name);
                $('#input-item_brand').val(item_brand);
                $('#input-item_size').val(item_size + item_unit);
                $('#input-item_color').val(item_color);
                $('#input-total').val(qty * price);

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

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

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

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

                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(salesman) {
                                return {
                                    text: `${salesman.code} - ${salesman.name}`,
                                    ...salesman
                                }
                            })
                        }
                    }
                }
            });
        }

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

                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(item) {
                                let phone = item.phone;
                                if ($.isEmptyObject(phone)) {
                                    phone = item.handphone;
                                }
                                
                                return {
                                    id: item.id,
                                    text: `${item.code} - ${item.name}`,
                                    name: item.name,
                                    address: item.address,
                                    phone: phone,
                                    is_regular: item.is_regular
                                }
                            })
                        }
                    }
                },
                templateSelection: function(container) {
                    if (! container.id) {
                        return container.text;
                    }

                    $(container.element).attr('data-customer_name', container.name);
                    $(container.element).attr('data-customer_address', container.address);
                    $(container.element).attr('data-is_regular', container.is_regular);
                    $(container.element).attr('data-customer_phone', container.phone);

                    return container.text;
                }
            });
        }

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

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

                    $(container.element).attr('data-id', container.id);
                    $(container.element).attr('data-code', container.code);
                    $(container.element).attr('data-customer_id', container.customer.id);
                    $(container.element).attr('data-customer_name', container.customer.name);
                    $(container.element).attr('data-customer_address', container.customer.address);
                    $(container.element).attr('data-customer_phone', container.customer.handphone);
                    $(container.element).attr('data-salesman_id', container.salesman.id);
                    $(container.element).attr('data-salesman_name', container.salesman.name);
                    $(container.element).attr('data-total', container.total);

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

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

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

                $('#detail-code').val(selected.attr('data-code'));
                $('#detail-salesman_name').val(selected.attr('data-salesman_name'));
                $('#detail-customer_name').val(selected.attr('data-customer_name'));
                $('#detail-total').val(`Rp ${numeral(selected.attr('data-total')).format('0,0')}`);
                
                // $('#input-customer_id').val(selected.attr('data-customer_id')).trigger('change');

                selectCustomer(selected.attr('data-customer_id'));
                selectSalesman(selected.attr('data-salesman_id'));

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

                detailTransaction(url);
            });
        }

        function selectCustomer(customerId) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: `{{ route('customers.index') }}/${customerId}`,
                type: 'get',
                dataType: 'json',
                success:(_data) => {
                    let data = _data.data;

                    let opt = $('<option>');

                    opt.val(data.id)
                    opt.html(`${data.code} - ${data.name}`)

                    $('#input-customer_id').append(opt).trigger('change')
                    $('#input-customer_id').val(data.id).trigger('change')
                    $('#input-customer_address').val(data.address)
                    $('#input-customer_phone').val(data.handphone)
                },
                error:(e) => {
                    console.log(e);

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

        function selectSalesman(salesmanId) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: `{{ route('salesmans.index') }}/${salesmanId}`,
                type: 'get',
                dataType: 'json',
                success:(_data) => {
                    let data = _data.data;

                    let opt = $('<option>');

                    opt.val(data.id)
                    opt.html(`${data.code} - ${data.name}`)

                    $('#input-salesman_id').append(opt).trigger('change')
                    $('#input-salesman_id').val(data.id).trigger('change')
                },
                error:(e) => {
                    console.log(e);

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

        function getItem() {
            $.ajax({
                delay: 450,
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('items.index') }}',
                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,
                            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').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-brand', container.brand);
                    //         $(container.element).attr('data-size', container.size);
                    //         $(container.element).attr('data-color', 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;
                    //     }
                    // });
                }
            });
        }

        $(document).ready(() => {
            $('.custom-loading').fadeIn();
            $.when(getSalesman(), getCustomer(), getItem(), getTransaction()).done(() => {
                setTimeout(() => {
                    $('.custom-loading').fadeOut();
                }, 1500);
            });

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

            dataTable = $('#dataTable-Cart').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-customer_id').on('change', function() {
                let selected = $(this).find(':selected');
                
                $('#input-customer_name').val(selected.attr('data-customer_name'));
                $('#input-customer_address').val(selected.attr('data-customer_address'));
                $('#input-customer_phone').val(selected.attr('data-customer_phone'));

                let member_type = null;
                var isTrueSet = (selected.attr('data-is_regular') == 'true');

                if (isTrueSet) {
                    member_type = "Regular";
                } else {
                    member_type = "Member";
                }

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

                $('#hidden-is_regular').val(selected.attr('data-is_regular'));
            });

            // $('#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'));
            //     $('#input-item_size').val(selected.attr('data-size'));
            //     $('#input-item_color').val(selected.attr('data-color'));
            //     $('#input-item_type').val(selected.attr('data-type'));
            //     $('#input-price').val(selected.attr('data-price'));
            //     $('#input-shelving').val(selected.attr('data-shelving'));
            //     $('#input-item_unit').val(selected.attr('data-unit'));

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

            $('#input-qty').on('keyup change', function() {
                let qty = $(this).val();
                let price = $('#input-price').val();

                $('#input-total').val(qty * price);
            });

            $('#input-price').on('keyup change', function() {
                let qty = $('#input-qty').val();
                let price = $(this).val();

                $('#input-total').val(qty * price);
            });

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

                if ($.isEmptyObject($('#hidden-customer_id').val())) {
                    $('#hidden-customer_id').val($('#input-customer_id').val());
                    $('#hidden-salesman_id').val($('#input-salesman_id').val());
                }

                if (dataTable.column(2).data().indexOf(formData.item_code) === -1) {
                    let satuan = formData.item_size.substr(formData.item_size.length - 1);
                    dataTable.row.add([
                        count++,
                        formData.item_id,
                        formData.item_code,
                        formData.item_name,
                        formData.item_brand,
                        formData.item_color,
                        formData.item_size,
                        formData.qty,
                        satuan,
                        formData.price,
                        (formData.price * formData.qty),
                        `<button class="btn btn-danger shadow-sm btn-custom-1 delete" title="Hapus"><i class="far fa-trash-alt fa-sm"></i></button>`
                    ]).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[7]),
                        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[7] = 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(() => {
                    selectCustomer($('#hidden-customer_id').val());
                    // $('#input-customer_id').attr('disabled', false);
                    // $('#input-customer_id').attr('disabled', true);

                    selectSalesman($('#hidden-salesman_id').val());
                    // $('#input-salesman_id').attr('disabled', true);

                    // $('#input-item_id').select2('open');
                });
                Swal.fire({
                    title: "Berhasil",
                    html: "Data Berhasil Ditambahkan",
                    icon: "success",
                    heightAuto: false
                })
            });

            $('#dataTable-Cart tbody').on( 'click', '.delete', function () {
                dataTable.row($(this).parents('tr')).remove().draw();
            });

            $('#saveList').on('click', () => {
                let listData = dataTable.rows().data();
                let id = $('#input-id').val();
                let salesman_id = $('#hidden-salesman_id').val();
                let customer_id = $('#hidden-customer_id').val();
                let transaction_id = $('#input-transaction_id').val();

                let data = {
                    id,
                    customer_id,
                    salesman_id,
                    transaction_id,
                    transaction_details: [],
                    total: 0,
                };

                for (let index = 0; index < listData.length; index++) {
                    let element = listData[index];
                    
                    data.transaction_details.push({
                        'item_id': element[1],
                        'item_name': element[3],
                        'item_brand': element[4],
                        'item_color': element[5],
                        'item_size': element[6],
                        'qty': element[7],
                        'custom_price': element[9]
                    });

                    data.total += element[10];
                }

                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ (Route::has('return-transactions.store')) ? route('return-transactions.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 Penjualan 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;

                        if(response.errors) {
                            for(let form_data in response.errors) {
                                $('#input-' + form_data).addClass('is-invalid');
                                $('#input-' + form_data).parents('.form-input').find('.invalid-feedback').html(response.errors[form_data][0]);
                            }
                        }

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

@push('modal')
    @include('app.customer.add')
@endpush