@extends('_layouts.app', [
    "title" => "Logistik",
    "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 Logistik" 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="logistics">
                            <thead>
                                <tr>
                                    <th>Kode</th>
                                    <th>Nama</th>
                                    <th>Penanggung Jawab</th>
                                    <th>Harga</th>
                                    <th>Diskon</th>
                                    <th>Email</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-dashboard.modal id="action" class="modal-lg">
        <form id="submit">
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-info">
                        Kode logistik eksternal: jne, pos, tiki, rpx, pandu, wahana, sicepat, jnt, pahala, sap, jet, indah, dse, slis, first, ncs, star, ninja, lion, idl, rex, ide, sentral, anteraja, jtl.
                    </div>
                </div>
                <div class="col-lg-12 mb-3">
                    <div class="hstack gap-2 flex-row">
                        <input type="radio" class="btn-check" name="type" value="internal" id="internal_logistics" checked>
                        <label class="btn btn-outline-success w-50" for="internal_logistics">Internal</label>

                        <input type="radio" class="btn-check" name="type" value="external" id="external_logistics">
                        <label class="btn btn-outline-danger w-50" for="external_logistics">Eksternal</label>
                    </div>
                </div>
                <div class="col-lg-6 mb-3">
                    <div class="form-group">
                        <label for="code" class="form-label">Kode</label>
                        <input type="text" name="code" id="code" class="form-control code" autocomplete="off" placeholder="Kode">
                        <small class="text-danger error" id="error-code"></small>
                    </div>
                </div>
                <div class="col-lg-6 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" data-bs-group="internal">
                    <div class="form-group">
                        <label for="person_responsible" class="form-label">Nama Penanggung Jawab</label>
                        <input type="text" name="person_responsible" id="person_responsible" class="form-control person_responsible" autocomplete="off" placeholder="Nama Penanggung Jawab">
                        <small class="text-danger error" id="error-person_responsible"></small>
                    </div>
                </div>
                <div class="col-lg-6 mb-3">
                    <div class="form-group">
                        <label for="price_per_kg" class="form-label">Harga</label>
                        <div class="input-group">
                            <span class="input-group-text">IDR</span>
                            <input type="number" name="price_per_kg" id="price_per_kg" value="0" class="form-control price_per_kg" autocomplete="off" placeholder="Harga per kg">
                        </div>
                        <small class="text-danger error" id="price_per_kg"></small>
                    </div>
                </div>
                <div class="col-lg-6 mb-3">
                    <div class="form-group">
                        <label for="discount" class="form-label">Dikson</label>
                        <div class="input-group">
                            <input type="number" name="discount" id="discount" value="0" class="form-control discount" autocomplete="off" placeholder="Diskon">
                            <span class="input-group-text">%</span>
                        </div>
                        <small class="text-danger error" id="error-discount"></small>
                    </div>
                </div>
                <div class="col-lg-4 mb-3" data-bs-group="internal">
                    <div class="form-group">
                        <label for="province_id" class="form-label">Provinsi</label>
                        <select name="province_id" id="province_id" class="form-control province_id">
                            <option value="">Provinsi</option>
                        </select>
                        <small class="text-danger error" id="error-province_id"></small>
                    </div>
                </div>
                <div class="col-lg-4 mb-3" data-bs-group="internal">
                    <div class="form-group">
                        <label for="city_id" class="form-label">Kabupaten/Kota</label>
                        <select name="city_id" id="city_id" class="form-control city_id">
                            <option value="">Kabupaten/Kota</option>
                        </select>
                        <small class="text-danger error" id="error-city_id"></small>
                    </div>
                </div>
                <div class="col-lg-4 mb-3" data-bs-group="internal">
                    <div class="form-group">
                        <label for="subdistrict_id" class="form-label">Kecamatan</label>
                        <select name="subdistrict_id" id="subdistrict_id" class="form-control subdistrict_id">
                            <option value="">Kecamatan</option>
                        </select>
                        <small class="text-danger error" id="error-subdistrict_id"></small>
                    </div>
                </div>
                <div class="col-lg-6 mb-3" data-bs-group="internal">
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="text" name="email" id="email" class="form-control email" autocomplete="off" placeholder="Email">
                        <small class="text-danger error" id="error-email"></small>
                    </div>
                </div>
                <div class="col-lg-6 mb-3" data-bs-group="internal">
                    <div class="form-group">
                        <label for="password" class="form-label">Password</label>
                        <input type="text" name="password" id="password" class="form-control password" autocomplete="off" placeholder="Password">
                        <small class="text-danger error" id="error-password"></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 Logistics extends App {
            constructor() {
                super()

                this.logistics
            }

            get() {
                this.logistics = $(`table#logistics`).laravelTable({
                    url: `${ this.baseUrl }/api/logistics`,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': this.authorization,
                    },
                    columns: [
                        {
                            data: `code`,
                            html: e => {
                                let type_logistics = `Internal`
                                let bg = `success`

                                if (e.is_external == 1) {
                                    type_logistics = `External`
                                    bg = `danger`
                                }

                                return `${ e.code } <span class="badge bg-${ bg }">${ type_logistics }</span>`
                            }
                        },
                        {
                            data: `name`
                        },
                        {
                            data: `person_responsible`,
                            html: e => {
                                return e.person_responsible != null ? e.person_responsible : `-`
                            }
                        },
                        {
                            data: `price_per_kg`,
                            html: e => {
                                return app.rupiah(e.price_per_kg)
                            }
                        },
                        {
                            data: `discount`,
                            html: e => {
                                return `${ e.discount }%`
                            }
                        },
                        {
                            data: null,
                            sort: false,
                            html: e => {
                                return e.user != null ? e.user.email : `-`
                            }
                        },
                        {
                            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 Logistik" data-bs-action="update" data-bs-id="${ e.code }"><i class="las la-edit"></i></button>
                                        <button class="btn btn-danger btn-sm btn-icon destroy" data-bs-name="${ e.code }" data-bs-id="${ e.code }"><i class="las la-trash"></i></button>
                                    </div>
                                `
                            }
                        }
                    ]
                })
            }

            _province() {
                this.apiSelect2({
                    dropdownParent: `.modal#action .modal-body`,
                    url: `/api/location/province`,
                    element: `form#submit [name=province_id]`
                })
            }

            _city(province_id) {
                this.apiSelect2({
                    dropdownParent: `.modal#action .modal-body`,
                    url: `/api/location/city?province_id=${ province_id }`,
                    element: `form#submit [name=city_id]`
                })
            }

            _subdistrict(city_id) {
                this.apiSelect2({
                    dropdownParent: `.modal#action .modal-body`,
                    url: `/api/location/subdistrict?city_id=${ city_id }`,
                    element: `form#submit [name=subdistrict_id]`
                })
            }

            _clearForm() {
                $(`form#submit input[type="text"], form#submit select`).val(``).change()
                $(`.modal#action form#submit #internal_logistics`).prop(`checked`, true)
                $(`.modal#action form#submit [data-bs-group=internal]`).removeClass(`d-none`)
                $(`form#submit [type=number]`).val(0)
                $(`form#submit .error`).html(``)
            }

            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/logistics/store`

                console.log(action, id)

                if (action == `update`) {
                    url = `/api/logistics/${ 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.logistics.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/logistics/${ id }/show`,
                    success: e => {
                        let data = e.data

                        if (data.is_external == 1) {
                            $(`.modal#action form#submit [data-bs-group=internal]`).addClass(`d-none`)
                            $(`.modal#action form#submit #external_logistics`).prop(`checked`, true)
                        }else {
                            $(`.modal#action form#submit [data-bs-group=internal]`).removeClass(`d-none`)
                            $(`.modal#action form#submit #internal_logistics`).prop(`checked`, true)
                        }

                        $(`form#submit [name=code]`).val(data.code)
                        $(`form#submit [name=name]`).val(data.name)
                        $(`form#submit [name=person_responsible]`).val(data.person_responsible)
                        $(`form#submit [name=price_per_kg]`).val(data.price_per_kg)
                        $(`form#submit [name=discount]`).val(data.discount)
                        $(`form#submit [name=province_id]`).html(`<option value="${ data.province.id }" selected>${ data.province.name }</option>`).change()
                        $(`form#submit [name=city_id]`).html(`<option value="${ data.city.id }" selected>${ data.city.name }</option>`).change()
                        $(`form#submit [name=subdistrict_id]`).html(`<option value="${ data.subdistrict.id }" selected>${ data.subdistrict.name }</option>`).change()
                        $(`form#submit [name=email]`).val(data.user.email)
                    }
                })
            }

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

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

        var logistics = new Logistics

        logistics.get()
        logistics._province()

        $(document).on(`change`, `form#submit [name=province_id]`, function() {
            let id = $(this).val()

            logistics._city(id)
        })

        $(document).on(`change`, `form#submit [name=city_id]`, function() {
            let id = $(this).val()

            logistics._subdistrict(id)
        })

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

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

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

            logistics.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 => {
                    logistics.destroy(id)
                }
            })
        })

        $(document).on(`click`, `.modal#action form#submit [type=radio]`, function() {
            let value = $(this).val()

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

            if(value == `internal`) {
                $(`.modal#action form#submit [data-bs-group=internal]`).removeClass(`d-none`)
            }else {
                $(`.modal#action form#submit [data-bs-group=internal]`).addClass(`d-none`)
            }
        })
    </script>
@endsection