@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">{{ $title }} - Grid</h4>
                            <div class="mt-2 mt-md-0">
                                Tanggal : {{ date('d F Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('app.transaction.checkout.data')
                    </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">Detail Transaksi</h4>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <table class="table table-hover" id="dataTable-List" width="100%" cellspacing="0">
                                <thead>
                                    <tr class="text-center">
                                        <th class="column-auto-width">No</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>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </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 Pembayaran</h4>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            @include('app.transaction.checkout.add')
                        </div>
                        <div class="card-footer">
                            <div class="d-flex flex-sm-row flex-column align-items-center justify-content-end">
                                <div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_print" value="1">
                                        <label class="form-check-label" for="is_print">Cetak Faktur</label>
                                    </div>
                                </div>
                                <button id="save" class="btn btn-primary btn-submit ml-0 ml-md-2">
                                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status" aria-hidden="true"></span>
                                    <span class="btn-text">Simpan</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let count = 1;
        window['date'] = '{{ date("d F Y") }}';

        const paymentState = {
            total: 0,
            cash: 0,
            credit: 0,
            debit: 0,
            transfer: 0,
            currentType: 4,
            fee: 0,
            sisa: this.total - this.cash - this.credit - this.debit - this.transfer,
            setKey(key, val) {
                if (val != null) {
                    this[key] = val;
                } else {
                    this[key] = 0;
                }

                /*if (key == 'fee') {
                    this.updateTotal();
                }*/

                this.updateSisa();
            },
            updateSisa() {
                this.sisa = this.total - this.cash - this.credit - this.debit - this.transfer;
            },
            updateTotal() {
                this.total = this.total + this.fee;
            },
            totalPlusFee() {
                return this.credit + this.fee;
            }
        }

        function getData(_data = null) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: "{{ route('transactions.index') . '/' . $id }}" ,
                type: "get",
                dataType: "json",
                beforeSend:function(){
                    $('.custom-loading').fadeIn();
                },
                complete:function(){
                    $('.custom-loading').fadeOut();
                },
                success:(data) => {
                    let item = data.data;

                    let member_type = null;

                    if (item.customer) {
                        let isTrueSet = (item.customer.is_regular == 'true');

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

                        let phone = item.customer.phone;

                        if ($.isEmptyObject(phone)) {
                            phone = item.customer.handphone;
                        }

                        $('#input-customer_name').val(`${item.customer.code} - ${item.customer.name}`);
                        $('#input-is_regular').val(member_type);
                        $('#input-customer_address').val(item.customer.address);
                        $('#input-customer_phone').val(phone);
                    }

                    if (item.salesman) {
                        $('#input-salesman_name').val(`${item.salesman.code} - ${item.salesman.name}`);
                    }

                    if (item.mixer) {
                        $('#input-mixer_name').val(`${item.mixer.code} - ${item.mixer.name}`);
                    }

                   paymentState.setKey('total', item.total);

                    $('#input-total').val(numeral(item.total).format('0,0'));
                    $('#input-remains').val(numeral(item.total).format('0,0'));
                    $('#input-kembali').val(numeral((paymentState.cash - paymentState.total) < 0 ? 0 : (paymentState.cash - paymentState.total)).format('0,0'));

                    item.transaction_details.forEach(element => {
                        console.log(element.item);
                        if (element.item_id === null) {
                            dataTable.row.add([
                            count++,
                            element.item_name,
                            element.item_brand,
                            element.item_color,
                            element.item_size,
                            element.qty,
                            numeral(element.custom_price).format('0,0'),
                            numeral(element.custom_price * element.qty).format('0,0')
                        ]).draw();
                        }else{
                            dataTable.row.add([
                            count++,
                            element.item.name,
                            element.item.item_brand.name,
                            element.item.item_color.name,
                            element.item.item_size.unit,
                            element.qty,
                            numeral(element.custom_price).format('0,0'),
                            numeral(element.custom_price * element.qty).format('0,0')
                        ]).draw();
                        }
                        
                    });
                },
                error:(xhr, status, error) => {
                    const {responseJSON:response} = xhr;

                    toastr.error(response.message, 'Gagal', {
                        progressBar: !0
                    });
                }
            });
        }

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

            $.map(unindexed_array, function(n, i){
                if (n['name'].includes("[")) {
                    const name = n['name'].replace('[', '.').replace(']', '')
                    const mt = name.split('.')[0];
                    const last = name.split('.')[1];

                    if (indexed_array.hasOwnProperty(mt)) {
                        indexed_array[mt][last] = n['value'];
                    } else {
                        indexed_array[mt] = {};
                        indexed_array[mt][last] = n['value'];
                    }

                } else {
                    indexed_array[n['name']] = n['value'];
                }
            });

            return indexed_array;
        }

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

            dataTable = $('#dataTable-List').DataTable({
                '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'));

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

            $('#save').on('click', () => {
                let listData = getFormData($('.form-payment')),
                    totalForm = parseInt(listData.amount_debit)
                        + parseInt(listData.amount_credit)
                        + parseInt(listData.amount_transfer);

                listData.amount_cash = parseInt(listData.amount_cash) || 0;
                listData.amount_debit = parseInt(listData.amount_debit) || 0;
                listData.amount_credit = parseInt(listData.amount_credit) || 0;
                listData.amount_transfer = parseInt(listData.amount_transfer) || 0;

                if (totalForm > paymentState.total) {
                    return;
                }

                if (listData.credit_card) {
                    listData.credit_card.card_number = listData.credit_card.card_number.replaceAll(' ', '')
                }

                if (listData.debit_card) {
                    listData.debit_card.card_number = listData.debit_card.card_number.replaceAll(' ', '')
                }

                let data = {
                    'payment_type': listData.payment_type,
                    'payment': listData,
                };

                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: `{{ url('/api/payments/pay/') . '/' . $id }}`,
                    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) => {
                        let is_print = $('#is_print:checked').val();

                        if (is_print) {
                            // var a = document.createElement('a');
                            // a.href = `{{ url('/transactions/invoice/') . '/' . $id }}?token=${$('meta[name="bearer-token"]').attr('content')}`;
                            // a.setAttribute('target', '_blank');
                            // a.click();

                            var page = `{{ url('/transactions/invoice/') . '/' . $id }}?token=${$('meta[name="bearer-token"]').attr('content')}`;
                            window.open(page, "_blank");
                        }

                        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/') }}";
                        });
                    },
                    error:(xhr, status, error) => {
                        const {responseJSON:response} = xhr;

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

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