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

@section('content')
    <div class="row">
        <div class="col-lg-12 mb-3">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#action" data-bs-title="Tambah Pemasukan" data-bs-action="create" data-bs-id=""><i class="las la-plus-circle"></i> Tambah</button>
        </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>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-dashboard.modal id="action" class="">
        <form id="submit">
            <div class="row">
                @if (Session::get("level") == "Administrator")
                    <div class="col-lg-12 mb-3">
                        <div class="form-group">
                            <label for="logistics_id" class="form-label">Logistik</label>
                            <select name="logistics_id" id="logistics_id" class="form-control logistics_id">
                                <option value="">Logistik</option>
                            </select>
                            <small class="text-danger error" id="error-logistics_id"></small>
                        </div>
                    </div>
                @endif
                <div class="col-lg-12 mb-3">
                    <div class="form-group">
                        <label for="name" class="form-label">Nama</label>
                        <input type="text" name="name" id="name" class="form-control name" autocomplete="off" placeholder="Nama">
                        <small class="text-danger error" id="error-name"></small>
                    </div>
                </div>
                <div class="col-lg-12 mb-3">
                    <div class="form-group">
                        <label for="nominal" class="form-label">Nominal</label>
                        <div class="input-group">
                            <span class="input-group-text">IDR</span>
                            <input type="text" name="nominal" id="nominal" class="form-control nominal" autocomplete="off" placeholder="Nominal">
                        </div>
                        <small class="text-danger error" id="error-nominal"></small>
                    </div>
                </div>
                <div class="col-lg-12 mb-3">
                    <div class="form-group">
                        <label for="date" class="form-label">Tanggal</label>
                        <input type="text" name="date" id="date" class="form-control date" data-provider="flatpickr" data-date-format="d M, Y" autocomplete="off" placeholder="Tanggal">
                        <small class="text-danger error" id="error-date"></small>
                    </div>
                </div>
                <div class="col-lg-12 d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary ">Simpan</button>
                </div>
            </div>
        </form>
    </x-dashboard.modal>
@endsection

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

                this.incomes
            }

            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
                        },
                        {
                            data: null,
                            sort: false,
                            html: e => {
                                return `
                                    <div class="btn-group">
                                        <button class="btn btn-primary btn-sm btn-icon update" data-bs-toggle="modal" data-bs-target="#action" data-bs-title="Edit Pemasukan" data-bs-action="update" data-bs-id="${ e.id }"><i class="las la-edit"></i></button>
                                        <button class="btn btn-danger btn-sm btn-icon destroy" data-bs-name="${ e.name }" data-bs-id="${ e.id }"><i class="las la-trash"></i></button>
                                    </div>
                                `
                            }
                        }
                    ]
                })
            }

            _flatpickr() {
                $(`form#submit [name=date]`).flatpickr({
                    enableTime: false,
                    dateFormat: `Y-m-d`,
                    defaultDate: `{{ now() }}`
                })
            }

            _logistics() {
                this.apiSelect2({
                    dropdownParent: `div.modal#action .modal-body`,
                    url: `/api/logistics/select2`,
                    element: `form#submit [name=logistics_id]`
                })
            }

            _clearForm() {
                $(`form#submit input, form#submit select`).val(``).change()
                $(`form#submit .error`).html(``)
                this._flatpickr()
            }

            submit(e) {
                e.preventDefault()

                let action = $(`div#action [name=action]`).val()
                let id = $(`div#action [name=id]`).val()

                let formData = this.formData(`form#submit`)

                let url = `/api/income/store`

                console.log(action, id)

                if (action == `update`) {
                    url = `/api/income/${ id }/update`
                    formData.append(`_method`, `PUT`)
                }

                $(`form#submit input, form#submit select, form#submit button`).prop(`disabled`, true)

                this.api({
                    url: url,
                    method: `POST`,
                    data: formData,
                    success: e => {
                        this.alertSuccess(`Data berhasil disimpan!`)

                        this._clearForm()
                        this.incomes.fresh()

                        $(`div#action`).modal(`hide`)

                        $(`form#submit input, form#submit select, form#submit button`).prop(`disabled`, false)
                    },
                    error: err => {
                        let error = err.message

                        $(`form#submit .error`).html(``)

                        if (error.constructor === Object) {
                            $.each(error, function (index, value) {
                                $(`form#submit .error#error-${ index }`).html(value)
                            })
                        }

                        $(`form#submit input, form#submit select, form#submit button`).prop(`disabled`, false)
                    }
                })
            }

            show(id) {
                this.api({
                    url: `/api/income/${ id }/show`,
                    success: e => {
                        let data = e.data

                        @if (Session::get("level") == "Administrator")
                            $(`form#submit [name=logistics_id]`).html(`<option value="${ data.logistics.id }" selected>${ data.logistics.code } - ${ data.logistics.name }</option>`).change()
                        @endif

                        $(`form#submit [name=name]`).val(data.name)
                        $(`form#submit [name=nominal]`).val(data.nominal)
                        $(`form#submit [name=date]`).val(data.date)
                    }
                })
            }

            destroy(id) {
                this.api({
                    url: `/api/income/${ id }/destroy`,
                    method: `DELETE`,
                    success: e => {
                        this.incomes.fresh()

                        this.alertSuccess(`Data berhasil dihapus!`)
                    }
                })
            }
        }

        var income = new Income

        income.get()
        income._flatpickr()
        income._logistics()

        $(document).on(`click`, `[data-bs-dismiss="modal"]`, function() {
            income._clearForm()
        })

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

        $(document).on(`click`, `.update`, function() {
            let id = $(this).data(`bs-id`)

            income.show(id)
        })

        $(document).on(`click`, `button.destroy`, function() {
            let id = $(this).data(`bs-id`)
            let name = $(this).data(`bs-name`)

            app.alertConfirm({
                title: `Apakah anda yakin?`,
                text: `Ingin menghapus ${ name }.`,
                isConfirmed: e => {
                    income.destroy(id)
                }
            })
        })
    </script>
@endsection