@extends('layouts.new_report')

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

@section('content') <div id="data-wrap"></div> @endsection

@push('js')
    <script>
        let num = 1;
        function getData(_data = null) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: `{{ route('reports.transactions.salesman.all') }}`,
                data: {from: '{{ $from }}', to: '{{ $to }}'},
                type: 'get',
                dataType: 'json',
                beforeSend:function(){
                    $('.custom-loading').fadeIn();
                },
                complete:function(){
                    $('.custom-loading').fadeOut();
                },
                success:(response) => {
                    let { data } = response,
                        html = ``;

                    data.forEach((item, index) => {
                        let { data, name, total } = item,
                            cusHtml = ``,
                            theTotal = 0;

                        cusHtml += `
                            <div class="mb-5">
                                <div class="mb-3">
                                    <h5>Sales: <span class="font-weight-bold">${name}</span></h5>
                                </div>
                        `;

                        data.forEach((item, index) => {
                            let { customer, salesman, mixer, total, transaction_details, transaction_payments } = item,
                                table = ``,
                                totalQty = 0,
                                count = 0,
                                isLastIndex = index + 1 === data.length;

                            table += `
                                <div class="row mb-4">
                                    <div class="col-4">
                                        <div class="row">
                                            <div class="col-6 font-weight-bold">No Faktur</div>
                                            <div class="col-6">: ${item.code}</div>

                                            <div class="col-6 font-weight-bold">Tanggal Pembelian</div>
                                            <div class="col-6">: ${dayjs(item.created_at).format('DD-MM-YYYY')}</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="row">
                                            <div class="col-6 font-weight-bold">Sales</div>
                                            <div class="col-6">: ${salesman ? salesman.name : '-'}</div>

                                            <div class="col-6 font-weight-bold">Pelanggan</div>
                                            <div class="col-6">: ${customer ? customer.name : '-'}</div>
                                        </div>
                                    </div>
                                </div>
                                <table class="table mb-4 border-bottom">
                                    <thead>
                                        <tr>
                                            <th class="column-auto-width text-right">No</th>
                                            <th>Kode Barang</th>
                                            <th>Nama Barang</th>
                                            <th class="column-auto-width">Merk</th>
                                            <th class="column-auto-width">Warna</th>
                                            <th class="column-auto-width">Ukuran</th>
                                            <th class="column-auto-width">Jenis</th>
                                            <th class="column-auto-width text-right">Jumlah/Qty</th>
                                            <th class="column-auto-width text-right">Harga</th>
                                            <th class="column-auto-width text-right">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                            `;

                            transaction_details.forEach(element => {
                                totalQty += element.qty;

                                table += `
                                <tr>
                                    <td class="column-auto-width text-right border-0">${++count}</td>
                                    <td class="border-0">${element.item.code}</td>
                                    <td class="border-0">${element.item.name}</td>
                                    <td class="column-auto-width border-0">${element.item.item_brand.name}</td>
                                    <td class="column-auto-width border-0">${element.item.item_color.name}</td>
                                    <td class="column-auto-width border-0">${element.item.item_size.size} ${element.item.item_size.unit}</td>
                                    <td class="column-auto-width border-0">${element.item.item_type.name}</td>
                                    <td class="column-auto-width text-right border-0">${element.qty}</td>
                                    <td class="column-auto-width text-right border-0">${numeral(element.custom_price).format('0,0')}</td>
                                    <td class="column-auto-width text-right border-0">${numeral(element.custom_price * element.qty).format('0,0')}</td>
                                </tr>
                            `;
                            });

                            theTotal += total;

                            table += `
                                <tr>
                                    <td colspan="6"></td>
                                    <td class="column-auto-width"><span class="font-weight-bold">Jumlah Total/Qty</span></td>
                                    <td class="text-right"><span class="font-weight-bold">${numeral(totalQty).format('0,0')}<span></td>
                                    <td colspan="3"></td>
                                </tr>
                                <tr>
                                    <td colspan="6"></td>
                                    <td><span class="font-weight-bold">Total</span></td>
                                    <td colspan="3" class="text-right"><span class="font-weight-bold">${numeral(total).format('0,0')}<span></td>
                                </tr>
                            `;

                            if (isLastIndex) {
                                table += `
                                    <tr>
                                        <td colspan="6"></td>
                                        <td class="column-auto-width"><span class="font-weight-bold">Total Seluruh Transaksi</span></td>
                                        <td colspan="3" class="text-right"><span class="font-weight-bold">${numeral(theTotal).format('0,0')}<span></td>
                                    </tr>
                                `;
                            }

                            table += `
                                </tbody>
                                </table>
                            `;

                            cusHtml += table;
                        });

                        cusHtml += `
                            </div>
                        `;

                        html += cusHtml;
                    });

                    $('#data-wrap').html(html);
                },
                error:(e) => {
                    console.log(e);

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

        $(document).ready(() => {
            $.when(getData()).done(() => {
                setTimeout(() => {
                    window.print();
                }, 1250);
            });
        });
    </script>
@endpush