@extends('layouts.admin')

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

@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@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">
    <div class="card">
        <div class="card-header">
            <h4>Cetak Laporan {{$title}}</h4>
        </div>
        <div class="card-body">
            <div class="row">
            <div class="col-md-6 form-group form-input">
                <label for="input-code" class="col-form-label text-dark">Tanggal Hitung Stock</label>
                <select name="code" class="form-control" id="input-code"></select>
            </div>
            <div class="col-md-6 form-group form-input">
                <label for="input-codeBefore" class="col-form-label text-dark">Tanggal Hitung Stock Sebelumnya</label>
                <input name="codeBefore" class="form-control" id="input-codeBefore" readonly>
            </div>
            {{-- <div class="col-md-4 form-group form-input">
                <label for="input-supplier" class="col-form-label text-dark">Supplier</label>
                <select name="supplier" class="form-control" id="input-supplier"></select>
            </div> --}}
            </div>
        </div>
        <div class="card-footer">
            <div class="d-flex flex-sm-row flex-column">
                <button id="cekdata" class="btn btn-success btn-submit mx-2">
                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status"
                        aria-hidden="true"></span>
                    <span class="btn-text">Cek Data</span>
                </button>
                <button id="clear" class="btn btn-outline-danger btn-submit mx-2">
                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status"
                        aria-hidden="true"></span>
                    <span class="btn-text">Clear</span>
                </button>
                {{-- <a href="{{ route('admin.reports.purchase.report_pdf') }}" class="btn btn-primary" target="_blank">CETAK PDF</a> --}}
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Laporan Pembelian</h4>
        </div>
        <div class="card-body">
            <div class="card-body pt-0 px-0">
                <table class="table table-hover" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th class="border-0">Judul</th>
                        <th class="border-0">Pengeluaran</th>
                        <th class="border-0">Pemasukan</th>
                        <th class="border-0">Total</th>
                    </tr>
                    </thead>
                    <tbody id="bodytabel">
                        {{-- <tr>
                            <td>Penjualan</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Tambah Kas</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th>Jumlah Pendapatan</th>
                            <th>    </th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>Stock Awal</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Pembelian</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th>Total Persediaan</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>Stock Akhir</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th>HPP</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>Ambil Kas</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Wasting</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th>Total Pengeluaran</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <th>Laba/Rugi</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr> --}}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <div class="d-flex flex-sm-row flex-column justify-content-between">
                <button id="print" class="btn btn-primary btn-submit flex-fill mx-2">
                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status"
                        aria-hidden="true"></span>
                    <span class="btn-text">Print</span>
                </button>
                <button id="export" class="btn btn-warning btn-submit flex-fill mx-2 d-none">
                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status"
                        aria-hidden="true"></span>
                    <span class="btn-text">Export</span>
                </button>
                {{-- <a href="{{ route('admin.reports.purchase.report_pdf') }}" class="btn btn-primary" target="_blank">CETAK PDF</a> --}}
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    let from = to = null;
    $(document).ready(() => {
        $('#input-code').select2({
            data: [
                {
                    id: 'all',
                    text: '-- Pilih Faktur --'
                }
            ],
            ajax: {
                delay: 450,
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('splitcounts.index') }}',
                dataType: 'json',
                data: function(params) {
                    var query = {
                        q: params.term,
                    }

                    return query;
                },
                processResults: function(data) {
                    return {
                        results: data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: `${dayjs(item.created_at).format('DD MMMM YYYY')} - ${item.code}`,
                            }
                        })
                    }
                }
            }
        });

        let id = $('#input-code').val();

        function getData(url) {
            $.ajax({
                delay: 450,
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: url,
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let html = '';
                    let datas = '';

                    if (data.data.length) {
                        datas = data.data.map(function (item) {
                            return item;
                        });
                        console.log(datas);
                        html = '<tr>';
                        html += '<td> Penjualan </td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<td> Tambah Kas </td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<th> Jumlah Pendapatan </th>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<td> Stock Awal </td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';
                        html = '<tr>';

                        html += '<td> Pembelian </td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';
                        html = '<tr>';

                        html += '<th> Total Persediaan </th>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<td>Stock Akhir</td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<th>HPP</th>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<td>Ambil Kas</td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<td>Wasting</td>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<th> Total Pengeluaran </th>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        html = '<tr>';
                        html += '<th> Laba/Rugi </th>';
                        html += '<td>'+datas[0].total+'</td>';
                        html += '<td>'+'</td>';
                        html += '<td>'+'</td>';
                        html += '</tr>';

                        $('#bodytabel').prepend(html);
                    }else{
                        Swal.fire({
                            title: "Data Kosong !",
                            html: "Data Hutang Kosong",
                            icon: "error",
                            timer: 1400,
                            showConfirmButton: false,
                            timerProgressBar: true,
                            heightAuto: false,
                            willOpen: () => {
                                Swal.showLoading()
                            }
                        }).then(function () {
                            window.location.reload();
                        });
                    }
                },
                error:(e) => {
                    console.log(e);

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

        // dataTable = $('#dataTable-Transactions').DataTable({
        //     "bSort" : false,
        //     'destroy' : true,
        //     'processing' : true,
        //     'language': {
        //         'loadingRecords': `<div class="spinner-grow" id="table-loader" role="status">
        //                                 <span class="sr-only">Loading...</span>
        //                             </div>`
        //     },
        //     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
        //                 >
        //             >
        //         >`,
        //         'deferRender': true
        //     });

        $('#cekdata').on('click',function () {
            let id = $('#input-code').val();
            let urltab = '{{route('splitcounts.index')}}';

            getData(urltab);
           
        });

        $('input[name="datefilter"]').daterangepicker(
            {
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
            },
            function(start, end) {
                from = start;
                to = end;
            }
        );

        $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD MMMM YYYY') + ' - ' + picker.endDate.format('DD MMMM YYYY'));

        });

        $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

        $('#dataTable-Transactions').DataTable();
        
        
        $(document).on('click', '#print', () => {
            let id = $('#input-code').val();
            let url = "";

            if (from) {
                from = from.format('YYYY-MM-DD');
                to = to.format('YYYY-MM-DD');
            }

            if (id == 'all') {
                Swal.fire({
                        title: "Faktur harus dipilih.",
                        html: "Mohon memilih faktur terlebih dahulu.",
                        icon: "error",
                        heightAuto: false
                    });
            } else {
                url = `{{ url('/reports/purchase/per-faktur/data') }}/${id}?token=${$('meta[name="bearer-token"]').attr('content')}`;
                window.open(url, '_blank');
            }
        });
    });
</script>
@endpush