@extends('layouts.report')

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

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">{{ config('paint.report_title') }}</div>
            <div class="col-12">{{ config('paint.report_city') }}</div>
            <div class="col-12">
                <h3 id="report-title" class="text-center py-3"></h3>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex flex-column">
                        <div id="order_id"></div>
                        <div id="bon_number"></div>
                    </div>
                    <div class="d-flex flex-column align-items-end">
                        <div id="date_order"></div>
                        <div id="supplier_name"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3">
                <table class="table">
                    <thead>
                        <tr>
                            <td class="text-center">NO</td>
                            <td class="text-center">KODE</td>
                            <td class="text-center">NAMA BARANG</td>
                            <td class="text-center">MERK</td>
                            <td class="text-center">WARNA</td>
                            <td class="text-center">UKURAN</td>
                            <td class="text-center">JENIS</td>
                            <td class="text-center">QTY</td>
                            <td class="text-center">HARGA</td>
                            <td class="text-center">TOTAL</td>
                        </tr>
                    </thead>
                    <tbody id="data-wrap"></tbody>
                </table>
                <hr>
            </div>
            <div class="col-12 text-right">
                <div id="total"></div>
            </div>
            <div class="col-12 mt-4">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="text-center">
                        DITERIMA
                        <br><br><br>
                        ( . . . . . . . . . . . . . . . . . . )
                    </div>
                    <div class="d-flex flex-column">
                        <div>USER : {{ Auth::user()->name }}</div>
                        <div id="date_now"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let num = 1;
        function getData(_data = null) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('purchases.index') . "/" . $id }}',
                type: 'get',
                dataType: 'json',
                beforeSend:function(){
                    $('.custom-loading').fadeIn();
                },
                complete:function(){
                    $('.custom-loading').fadeOut();
                },
                success:(response) => {
                    let {data} = response;
                    console.log(data);
                    let table = '';

                    if (data.is_return) {
                        $('#report-title').html('BUKTI RETUR BARANG SUPPLIER')
                        $('#order_id').html(`NO RETUR : ${data.code}`);
                        $('#bon_number').html(`NO BON : ${data.bon_number}`);
                    } else {
                        $('#report-title').html('BUKTI PENERIMAAN BARANG SUPPLIER')
                        $('#order_id').html(`NO TERIMA : ${data.code}`);
                        $('#bon_number').html(`NO BON : ${data.bon_number}`);
                    }

                    $('#date_order').html(`Tanggal : ${dayjs(data.created_at).format('DD-MM-YYYY')}`);
                    $('#supplier_name').html(`Nama Supplier : ${data.supplier.name}`);

                    data.purchase_details.forEach(element => {
                        let html = null;
                        html += `
                            <tr>
                                <td class="column-auto-width text-center">${num++}</td>
                                <td class="column-auto-width">${element.item.code}</td>
                                <td>${element.item.name}</td>
                                <td class="column-auto-width">${element.item.item_brand.name}</td>
                                <td class="column-auto-width">${element.item.item_color.name}</td>
                                <td class="column-auto-width">${element.item.item_size.size} ${element.item.item_size.unit}</td>
                                <td class="column-auto-width">${element.item.item_type.name}</td>
                                <td class="column-auto-width">${element.qty}</td>
                                <td class="column-auto-width">${numeral(element.custom_price).format('0,0.00')}</td>
                                <td class="column-auto-width">${numeral((element.custom_price * element.qty) - ((element.custom_price * element.qty) * element.discount/100)).format('0,0.00')}</td>
                            </tr>
                        `;
                        table += html;
                    });
                    $('#data-wrap').html(table);

                    $('#total').html(`TOTAL TAGIHAN : ${numeral(data.total).format('0,0.00')}`);
                    $('#date_now').html(`CETAK : ${dayjs(new Date()).format('DD-MM-YYYY')}`);
                },
                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