@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">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 class="mt-2 mt-md-0">
                                <a href="#" class="d-inline-block btn btn-primary col col-md-auto mt-2 mt-md-0"
                                    id="addCustomer" data-toggle="modal" data-target="#addCustomerModal">
                                    <i class="fa fa-plus fa-fw small"></i>
                                    <span>
                                        Tambah Customer
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.transaction.add_penjualan')
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-3">
                                <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="col-md-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="biasa" checked>
                                    <label class="form-check-label" for="exampleRadios1">
                                      Normal
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-1 radio-oplosan">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="oplosan">
                                    <label class="form-check-label" for="exampleRadios2">
                                      Oplosan
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.transaction.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">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="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" id="btntext">Checkout</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        let mixerId = urlParams.get('mixer_id');
        const itemId = urlParams.get('item_id');
        const qty = urlParams.get('qty');
        const mutationId = urlParams.get('mutation_id');
        let count = 1;
        
        function resetSelectElement(selectElement) {
            var options = selectElement.options;
            // Look for a default selected option
            for (var i=0, iLen=options.length; i<iLen; i++) {
                if (options[i].defaultSelected) {
                selectElement.selectedIndex = i;
                return;
                }
            }

                // If no option is the default, select first or none as appropriate
                selectElement.selectedIndex = 0; // or -1 for no option selected
        }

        function clear(jenisjual) {
            $('#input-item_id').val('').trigger('change');
            document.getElementById('input-item_color').value="";
            document.getElementById('input-item_name').value="";
            document.getElementById('input-item_brand').value="";
            document.getElementById('input-item_size').value="";
            if (jenisjual == 'biasa') {
                document.getElementById('input-qty').value="";   
            }else{
                document.getElementById('input-qty').value=1;
            }
            document.getElementById('input-price').value=0;
            document.getElementById('input-total').value="";
            document.getElementById('input-shelving').value="";
        }

        $(document).ready(function () {
            //called when key is pressed in textbox
            $("#input-price").keypress(function (e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    //display error message
                    return false;
                }
            });
        });

        $(document).ready(function () {
            //called when key is pressed in textbox
            $("#input-qty").keypress(function (e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    //display error message
                    return false;
                }
            });
        });

        function setBiasa() {
            document.getElementById('input-item_id').removeAttribute("disabled");
            document.getElementById('input-item_id').setAttribute("required" , true);
            document.getElementById('input-item_color').setAttribute("readonly" , true);
            document.getElementById('input-item_name').setAttribute("readonly" , true);
            document.getElementById('input-item_name').removeAttribute("required");
            document.getElementById('input-item_brand').setAttribute("readonly" , true);
            document.getElementById('input-item_size').setAttribute("readonly" , true);
        }

        function setOplosan() {
            document.getElementById('input-item_id').setAttribute("disabled" , true);
            document.getElementById('input-item_id').removeAttribute("required");
            document.getElementById('input-item_color').removeAttribute("readonly");
            document.getElementById('input-item_name').removeAttribute("readonly");
            document.getElementById('input-item_name').setAttribute("required" , true);
            document.getElementById('input-item_brand').removeAttribute("readonly");
            document.getElementById('input-item_size').removeAttribute("readonly");
        }
        
        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 getSalesman() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('salesmans.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" selected disabled>-- Pilih Sales --</option>`;

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

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

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

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

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

                    $('#input-mixer_id').html(_html);

                    if (mixerId) {
                        $('#input-mixer_id').select2().select2("val", mixerId)
                        // getMutation(mixerId)
                        // toggleMutationForm(true)
                    }
                },
                error:(e) => {
                    console.log(e);

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

        function getCustomer() {
            $('#input-customer_id').select2({
                width: '100%',
                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,
                                    is_credit: item.is_credit
                                }
                            })
                        }
                    }
                },
                templateSelection: function(container) {
                    $(container.element).attr('data-name', container.name);
                    $(container.element).attr('data-address', container.address);
                    $(container.element).attr('data-is_regular', container.is_regular);
                    $(container.element).attr('data-is_credit', container.is_credit ? 'credit' : 'cash');
                    $(container.element).attr('data-phone', container.phone);
                    return container.text;
                }
            });
        }

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

                    if (itemId) {
                        $('#input-item_id').select2('val', `${itemId}`);
                        $('#input-item_id').trigger({
                            type: 'select2:select',
                        });
                    }
                }
            });
        }

        function getMutation(mixerId) {
            $('#input-mutation_id').select2({
                width: '100%',
                ajax: {
                    delay: 450,
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: `{{ url('api/mutations/to-split/query') }}/${mixerId}`,
                    dataType: 'json',
                    data: function(params) {
                        var query = {
                            q: params.term,
                        }

                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(mutation) {
                                let { item, mixer } = mutation

                                return {
                                    id: mutation.id,
                                    text: `${dayjs(mutation.created_at).format('DD/MM/YYYY')} - ${mutation.code} - ${item.name}`,
                                }
                            })
                        }
                    }
                },
                templateSelection: function(container) {
                    return container.text;
                }
            });
        }

        function toggleMutationForm(state) {
            const trTypeCol = $('#column-transaction_type');
            const mixerCol = $('#column-mutation_id');
            const trType = $('#input-transaction_type').val();
            
            if (state) {
                if  (mixerId) {
                    trTypeCol.removeClass('offset-md-4');
                    // mixerCol.show();
                    mixerCol.hide();
                }
                document.getElementById('saveList').classList.remove("btn-submit")
                document.getElementById('saveList').classList.add("btn-success")
                document.getElementById('btntext').innerHTML = "Simpan"
                toggleCustomerAndSales(false)
            } else {
                trTypeCol.addClass('offset-md-4');
                mixerCol.hide();
                if (trType === 'credit') {
                    document.getElementById('saveList').classList.remove("btn-submit")
                    document.getElementById('saveList').classList.add("btn-success")
                    document.getElementById('btntext').innerHTML = "Simpan"
                } else {
                    document.getElementById('saveList').classList.remove("btn-success")
                    document.getElementById('saveList').classList.add("btn-submit")
                    document.getElementById('btntext').innerHTML = "Checkout"
                }
                toggleCustomerAndSales(true)
            }
        }

        function selectMutation(mutationId) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: `{{ url('api/mutations/to-split') }}/${mutationId}`,
                type: 'get',
                dataType: 'json',
                success:(_data) => {
                    let data = _data.data;

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

                    opt.val(data.id)
                    opt.html(`${dayjs(data.created_at).format('DD/MM/YYYY')} - ${data.code} - ${data.item.name}`)

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

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

        function toggleCustomerAndSales(state) {
            if (state) {
                $('#input-salesman_id').attr('disabled', false);
                $('#input-customer_id').attr('disabled', false);
            } else {
                $('#input-salesman_id').val('').trigger('change');
                $('#input-customer_id').val('').trigger('change');
                $('#input-salesman_id').attr('disabled', true);
                $('#input-customer_id').attr('disabled', true);
            }
        }

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

                if (mixerId) {
                    getMutation(mixerId);
                }

                if (mutationId && mixerId) {
                    toggleMutationForm(true);
                    selectMutation(mutationId);
                } else {
                    toggleMutationForm(false);
                }
            });

            $('#input-transaction_type').on('change', function () {
                let val = $(this).val();
                
                if (val === 'mutation') {
                    $('.radio-oplosan').hide();
                    toggleCustomerAndSales(false)
                    toggleMutationForm(true);
                } else {
                    $('.radio-oplosan').show();
                    toggleMutationForm(false);
                    toggleCustomerAndSales(true)
                }
            });

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

                if (val != "") {
                    mixerId = val;

                    // getMutation(val);
                    // toggleMutationForm(true);

                    // $('#input-transaction_type').val('mutation').trigger('change');
                } else {
                    mixerId = null;

                    toggleMutationForm(false);

                    $('#input-transaction_type').val('').trigger('change');
                }
            });

            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-name'));
                $('#input-customer_address').val(selected.attr('data-address'));
                $('#input-customer_phone').val(selected.attr('data-phone'));

                if (selected.attr('data-is_regular') === 'true') {
                    $('#input-member_type').val("Regular");
                } else if (selected.attr('data-is_regular') === 'false') {
                    $('#input-member_type').val("Member");
                } else {
                    $('#input-member_type').val("");
                }

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

                if ($(this).val()) {
                    $('#input-transaction_type').val(selected.attr('data-is_credit')).trigger('change');
                }
            });

            $('#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'));
                $('#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'));

                $('#qtyUnit').html(selected.attr('data-unit'));

                if (qty) {
                    $('#input-qty').val(qty).trigger('change').focus();
                } else {
                    $('#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);
            });

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

                theTotal = 0;
                gDiscount = null;

                $('#input-customer_id').val('');
                $('#input-customer_id').trigger('change');

                $('#input-salesman_id').val('');
                $('#input-salesman_id').trigger('change');

                $('#input-mixer_id').val('');
                $('#input-mixer_id').trigger('change');

                $('#input-customer_name').val('');
                $('#input-customer_address').val('');
                $('#input-customer_phone').val('');
                $('#input-member_type').val('');
                $('#hidden-is_reguler').val('');

                $('.custom-loading').fadeIn();
                $('.custom-loading').fadeOut();
            });

            let varparams = null;
            $('input:radio[name="exampleRadios"]').change(
                function(){
                    if (this.checked && this.value == 'biasa') {
                        varparams = document.getElementById('exampleRadios1').value;
                        clear(varparams);
                        setBiasa();
                    }else{
                        varparams = document.getElementById('exampleRadios2').value;
                        clear(varparams);
                        setOplosan();
                    }
                }
            );
            let i = 0;
            $('.form-item').submit(function(e) {
                e.preventDefault();
                let formData = getFormData($(this));

                if(formData.price == 0 || null){
                    Swal.fire({
                        title: "Informasi",
                        html: "Harga Satuan Tidak Boleh Kosong !!",
                        icon: "info",
                        timer: 1500,
                        showConfirmButton: false,
                        timerProgressBar: true,
                        heightAuto: false,
                        willOpen: () => {
                            Swal.showLoading()
                        }
                    }).then(function() {
                        
                    });
                    return false;
                }

                if (dataTable.column(2).data().indexOf(formData.item_code) === -1) {
                    dataTable.row.add([
                        count++,
                        formData.item_id || null,
                        formData.item_code || '-',
                        formData.item_name,
                        formData.item_brand,
                        formData.item_color,
                        formData.item_size,
                        formData.qty,
                        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 {
                    console.log(varparams);
                    if (varparams === 'biasa') {
                        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,
                        price = formData.price;

                        rowData[7] = newQty;
                        rowData[8] = price;
                        rowData[9] = newQty * price;

                        dataTable.row(index).data(rowData).draw();   
                    }else{
                        dataTable.row.add([
                            count++,
                            null,
                            "-",
                            formData.item_name,
                            formData.item_brand,
                            formData.item_color,
                            formData.item_size,
                            formData.qty,
                            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();
                    }
                    i++;
                }

                $(this).trigger('reset');
                $('#input-item_id').val('').trigger('change');
                Swal.fire({
                    title: "Berhasil",
                    html: "Barang Berhasil ditambahkan",
                    icon: "success",
                    timer: 1400,
                    showConfirmButton: false,
                    timerProgressBar: true,
                    heightAuto: false,
                    willOpen: () => {
                            Swal.showLoading()
                        }
                    })
            });
            
            $('#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 = $('#input-salesman_id').val();
                let customer_id = $('#input-customer_id').val();
                let mixer_id = $('#input-mixer_id').val();
                let mutation_id = $('#input-mutation_id').val();
                let is_credit = $('#input-transaction_type').val();
                if (customer_id == null) {
                    customer_id = 1;
                }

                let data = {
                    id,
                    customer_id,
                    salesman_id,
                    mixer_id,
                    mutation_id,
                    'is_credit': is_credit === 'credit' ? 1 : 0,
                    'transaction_details': [],
                    'total': 0,
                };

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

                    if (element[1] === null) {
                        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[8]
                        });
                    }else{
                        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[8]
                        });
                    }
                    
                    data.total += element[9];
                }
    
                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ (Route::has('transactions.store')) ? route('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) => {
                        
                        if (is_credit === 'credit') {
                            Swal.fire({
                                title: "Berhasil",
                                html: "Penjualan ditambahkan",
                                icon: "success",
                                timer: 1400,
                                showConfirmButton: false,
                                timerProgressBar: true,
                                heightAuto: false,
                                willOpen: () => {
                                    Swal.showLoading()
                                }
                            }).then(function() {
                                // window.location = "{{ url('/transactions/') }}";
                                window.location.reload();
                            });
                            return false;
                        }
                        if (is_credit === 'mutation') {
                            Swal.fire({
                                title: "Berhasil",
                                html: "Penjualan Mutasi ditambahkan",
                                icon: "success",
                                timer: 1400,
                                showConfirmButton: false,
                                timerProgressBar: true,
                                heightAuto: false,
                                willOpen: () => {
                                    Swal.showLoading()
                                }
                            }).then(function() {
                                // window.location = "{{ url('/transactions/') }}";
                                window.location.reload();
                            });
                            return false;
                        }

                        window.location = "{{ url('/transactions/checkout/')  . '/' . $id }}";
                    },
                    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
                        });
                    }
                });
            });

            $(document).on('change', '#input-is_credit input', function() {
                let val = $(this).val(),
                    inputDay = $('#input-day_period');

                if (val == 'credit') {
                    inputDay.val('');
                    inputDay.attr('disabled', false);
                } else {
                    inputDay.val('');
                    inputDay.attr('disabled', true);
                }
            });
        });
    </script>
@endpush

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