@extends('_layouts.app', [
    "title" => "Laporan Pengeluaran",
    "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="deliveries">
                            <thead>
                                <tr>
                                    <th>Logistik</th>
                                    <th>Resi</th>
                                    <th>Pengirim</th>
                                    <th>Penerima</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

                this.deliveries
            }

            @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() {
                @if (Session::get("level") == "Kurir")
                    let action = `transit`
                @else
                    let action = `delivery`
                @endif

                this.deliveries = $(`table#deliveries`).laravelTable({
                    url: `${ app.baseUrl }/api/delivery?action=${ action }`,
                    headers: {
                        'Accept': `application/json`,
                        'Content-Type': `application/json`,
                        'Authorization': app.authorization,
                    },
                    columns: [
                        {
                            data: `logistics.name`,
                            sort: false
                        },
                        {
                            data: `receipt_number`
                        },
                        {
                            data: `sender.name`,
                            sort: false
                        },
                        {
                            data: `recipient.name`,
                            sort: false
                        },
                        {
                            data: `status.name`,
                            sort: false,
                            html: e => {
                                return `<span class="badge bg-${ e.status.label }">${ e.status.name }</span> ${ e.status.name == `Ditolak` ? `<small>${ e.status_comment }</small>` : `` }`
                            }
                        }
                    ]
                })
            }

            _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.deliveries.fresh(formFilter)
            }
        }

        var delivery = new Delivery

        delivery.get()
        delivery._flatpickr()

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

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