@extends('_layouts.app', [
    "title" => "Laporan Pemasukan",
    "is_dashboard" => true
])

@section('content')
    <div class="row">
        @if (Session::get("level") == "Administrator" || Session::get("level") == "Logistik")
            <div class="col-lg-3">
                <div class="card card-primary">
                    <div class="card-body">
                        <div class="card-text">
                            <h6 class="text-white">Total Pengiriman</h6>
                            <h3 class="text-white" id="deliveries">IDR 0</h3>
                            <h6 class="text-white">Jumlah dari semua data pengiriman.</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card card-secondary">
                    <div class="card-body">
                        <div class="card-text">
                            <h6 class="text-white">Total Pemasukan</h6>
                            <h3 class="text-white" id="incomes">IDR 0</h3>
                            <h6 class="text-white">Jumlah dari semua data pemasukan.</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card card-danger">
                    <div class="card-body">
                        <div class="card-text">
                            <h6 class="text-white">Total Pengeluaran</h6>
                            <h3 class="text-white" id="expenditures">IDR 0</h3>
                            <h6 class="text-white">Jumlah dari semua data pengeluaran.</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card card-success">
                    <div class="card-body">
                        <div class="card-text">
                            <h6 class="text-white">Total Saldo Akhir</h6>
                            <h3 class="text-white" id="balance">IDR 0</h3>
                            <h6 class="text-white">Jumlah dari Total pengiriman + Pemasukan - Pengeluaran.</h6>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form id="filter">
                        <div class="row mt-3">
                            <div class="col-lg-4 mb-3">
                                <div class="form-group">
                                    <input type="text" name="first_date" id="first_date" class="form-control first_date" autocomplete="off" placeholder="Dari Tanggal">
                                </div>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <div class="form-group">
                                    <input type="text" name="last_date" id="last_date" class="form-control last_date" autocomplete="off" placeholder="Dari Tanggal">
                                </div>
                            </div>
                            <div class="col-lg-2 mb-3">
                                <button type="submit" class="btn btn-primary"><i class="las la-filter"></i> Filter</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped table-condensed table-bordered table-sm" id="incomes">
                            <thead>
                                <tr>
                                    @if (Session::get("level") == "Administrator")
                                        <th>Logistik</th>
                                    @endif
                                    <th>Nama</th>
                                    <th>Nominal</th>
                                    <th>Tanggal</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        class Income extends App {
            constructor() {
                super()

                this.incomes
            }

            @if (Session::get("level") == "Administrator" || Session::get("level") == "Logistik")
                statistic() {
                    this.api({
                        url: `/api/statistic`,
                        success: e => {
                            let data = e.data

                            $(`#deliveries`).html(data.deliveries)
                            $(`#incomes`).html(data.incomes)
                            $(`#expenditures`).html(data.expenditures)
                            $(`#balance`).html(data.balance)
                        }
                    })
                }
            @endif

            get() {
                this.incomes = $(`table#incomes`).laravelTable({
                    url: `${ this.baseUrl }/api/income`,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': this.authorization,
                    },
                    columns: [
                        @if (Session::get("level") == "Administrator")
                            {
                                data: null,
                                sort: false,
                                html: e => {
                                    return `${ e.logistics != null ? e.logistics.name : `-` }`
                                }
                            },
                        @endif
                        {
                            data: `name`
                        },
                        {
                            data: `nominal`,
                            html: e => {
                                return app.rupiah(e.nominal)
                            }
                        },
                        {
                            data: `date`,
                            sort: false
                        }
                    ]
                })
            }

            _flatpickr() {
                $(`form#filter [name=first_date], form#filter [name=last_date]`).flatpickr({
                    enableTime: false,
                    dateFormat: `Y-m-d`
                })
            }

            filter(e) {
                e.preventDefault()

                let formFilter = this.formFilter(`form#filter`)

                this.incomes.fresh(formFilter)
            }
        }

        var income = new Income

        income.get()
        income._flatpickr()

        $(document).on(`submit`, `form#filter`, function(e) {
            income.filter(e)
        })

        @if (Session::get("level") == "Administrator" || Session::get("level") == "Logistik")
            income.statistic()
        @endif
    </script>
@endsection