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

@section('content')
    <div class="row">
        <div class="col-lg-12 mb-3">
            <a href="{{ route("delivery.create") }}" class="btn btn-primary"><i class="las la-plus-circle"></i> Tambah</a>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <ul class="nav nav-tabs nav-border-top nav-border-top-primary nav-justified mb-3" role="tablist">
                    @if (Session::get("level") == "Administrator" || Session::get("level") == "Logistik")
                        <li class="nav-item">
                            <a class="nav-link active delivery_type" data-bs-action="delivery" data-bs-toggle="tab" href="#nav-badge-settings" role="tab" aria-selected="true">
                                Data Pengiriman
                            </a>
                        </li>
                    @endif
                    @if (Session::get("level") == "Logistik" || Session::get("level") == "Kurir")
                        <li class="nav-item">
                            <a class="nav-link align-middle delivery_type {{ Session::get("level") == "Kurir" ? "active" : "" }}" data-bs-action="transit" data-bs-toggle="tab" href="#nav-badge-messages" role="tab" aria-selected="false">
                                Data Transit Pengiriman <span class="badge bg-danger rounded-circle transit-count">0</span>
                            </a>
                        </li>
                    @endif
                </ul>
                <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>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (Session::get("level") == "Logistik")
        <x-dashboard.modal id="delivery" class="">
            <form id="submit">
                <div class="row">
                    <div class="col-lg-12 mb3">
                        <div class="alert alert-info">Klik <u>kirim ke penerima</u> jika paket akan di kirim penerima bukan ke logsitik.</div>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <div class="form-check form-switch form-switch-md">
                            <input class="form-check-input" type="checkbox" role="switch" id="send_to_recipient">
                            <label class="form-check-label" for="send_to_recipient">Kirim Ke Penerima.</label>
                        </div>
                    </div>
                    <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>
                    <div class="col-lg-12 mb-3">
                        <div class="form-group">
                            <label for="courier_id" class="form-label">Kurir</label>
                            <select name="courier_id" id="courier_id" class="form-control courier_id">
                                <option value="">Kurir</option>
                            </select>
                            <small class="text-danger error" id="error-courier_id"></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>
    @endif

    @if (Session::get("level") == "Administrator")
        <x-dashboard.modal id="done_external" class="">
            <form id="submit">
                <div class="row">
                    <div class="col-lg-12 mb-3">
                        <div class="form-group">
                            <label for="receipt_number" class="form-label">No. Resi</label>
                            <input type="text" name="receipt_number" id="receipt_number" class="form-control receipt_number" autocomplete="off" placeholder="No. Resi">
                            <small class="text-danger error" id="error-receipt_number"></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 ">Selesaikan</button>
                    </div>
                </div>
            </form>
        </x-dashboard.modal>
    @endif

    <x-dashboard.modal id="history" class="modal-lg">
        <div class="row">
            <div class="col-lg-12 mb-3" id="show">
            </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>
            </div>
        </div>
    </x-dashboard.modal>
@endsection

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

                this.deliveries
            }

            _logistics() {
                let type = `{{ Session::get("level") == "Logistik" ? "internal" : "" }}`
                this.apiSelect2({
                    dropdownParent: `.modal#delivery .modal-body`,
                    url: `/api/logistics/select2?type=${ type }`,
                    element: `.modal#delivery form#submit [name=logistics_id]`
                })
            }

            _couriers() {
                this.apiSelect2({
                    dropdownParent: `.modal#delivery .modal-body`,
                    url: `/api/courier/select2`,
                    element: `.modal#delivery form#submit [name=courier_id]`
                })
            }

            get() {
                @if (Session::get("level") == "Kurir")
                    let action = `transit`
                @else
                    let action = $(`a.delivery_type.active`).data(`bs-action`)
                @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>` : `` }`
                            }
                        },
                        {
                            data: null,
                            sort: false,
                            html: e => {
                                let action = ``

                                @if (Session::get("level") == "Administrator")
                                    if (e.status.name == `Menunggu Persetujuan` && e.logistics.is_external == 1) {
                                        action = `
                                            <button type="button" class="btn btn-success btn-sm process" data-receipt_number="${ e.receipt_number }" data-action="accept"><i class="las la-check-circle"></i> Proses</button>
                                            <button type="button" class="btn btn-danger btn-sm process" data-receipt_number="${ e.receipt_number }" data-action="reject"><i class="las la-times-circle"></i> Tolak</button>
                                        `
                                    }else if (e.status.name == `Diproses` && e.logistics.is_external == 1) {
                                        action = `
                                        <button type="button" class="btn btn-success btn-sm done-now" data-bs-toggle="modal" data-bs-target="#done_external" data-bs-title="Selesaikan Pengiriman" data-bs-action="update" data-bs-id="${ e.receipt_number }"><i class="las la-check-circle"></i> Selesai</button>
                                        `
                                    }
                                @elseif (Session::get("level") == "Logistik")
                                    if (e.status.name == `Menunggu Persetujuan` && e.position.is_recipient == 0) {
                                        action = `
                                            <button type="button" class="btn btn-success btn-sm process" data-receipt_number="${ e.receipt_number }" data-action="accept"><i class="las la-check-circle"></i> Proses</button>
                                            <button type="button" class="btn btn-danger btn-sm process" data-receipt_number="${ e.receipt_number }" data-action="reject"><i class="las la-times-circle"></i> Tolak</button>
                                        `
                                    }else if (e.status.name == "Diproses" || e.status.name == "Dikirim" && e.position.is_recipient == 0) {
                                        action = `
                                            <button type="button" class="btn btn-primary btn-sm delivery-now" data-bs-toggle="modal" data-bs-target="#delivery" data-bs-title="Kirim Paket" data-bs-action="update" data-bs-id="${ e.receipt_number }" data-action="accept"><i class="las la-truck"></i> Kirim</button>
                                        `
                                    }
                                @elseif (Session::get("level") == "Kurir")
                                    if (e.status.name == `Dikirim` && e.position.is_recipient == 1) {
                                        action = `
                                            <button type="button" class="btn btn-success btn-sm done-now" data-bs-id="${ e.receipt_number }"><i class="las la-check-circle"></i> Selesai</button>
                                        `
                                    }
                                @endif

                                return `
                                    <div class="btn-group">
                                        ${ action }
                                        <a href="${ app.baseUrl }/delivery/${ e.receipt_number }/show" class="btn btn-info btn-sm"><i class="las la-file-pdf"> Cetak</i></a>
                                        <button type="button" class="btn btn-secondary btn-sm history" data-bs-toggle="modal" data-bs-target="#history" data-bs-title="Perjalanan Paket" data-bs-id="${ e.receipt_number }"><i class="las la-map-marked"></i> History</button>
                                    </div>
                                `
                            }
                        }
                    ]
                })
            }

            process(action, receipt_number) {
                let data = {}

                if (action == `reject`) {
                    data = {
                        status_comment: $(`[name=status_comment]`).val()
                    }
                }

                this.api({
                    url: `/api/delivery/${ receipt_number }/${ action }`,
                    method: `POST`,
                    data: data,
                    success: e => {
                        this.alertSuccess(`Data berhasil diperbarui!`)

                        this.deliveries.fresh()
                    }
                })
            }

            @if (Session::get("level") == "Logistik")
                delivery(e) {
                    e.preventDefault()

                    let formData = this.formData(`.modal#delivery form#submit`)
                    formData.append(`delivery`, $(`.modal#delivery form#submit #send_to_recipient`).is(`:checked`) ? `recipient` : `logistics`)
                    let receipt_number = $(`.modal#delivery [name=id]`).val()

                    $(`.modal#delivery form#submit select`).prop(`disabled`, true)

                    this.api({
                        url: `/api/delivery/${ receipt_number }/delivery`,
                        method: `POST`,
                        data: formData,
                        success: e => {
                            this.alertSuccess(`Data berhasil diperbarui!`)

                            this.deliveries.fresh()

                            $(`.modal#delivery`).modal(`hide`)

                            $(`.modal#delivery form#submit select`).prop(`disabled`, false)

                            this._clearForm()
                        },
                        error: err => {
                            let error = err.message

                            $(`.modal#delivery form#submit select`).prop(`disabled`, false)

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

                            $.each(error, function (index, value) {
                                $(`.modal#delivery form#submit .error#error-${ index }`).html(value)
                            })

                            this._delivery_send_to_recipient()
                        }
                    })
                }

                _filter() {
                    let action = $(`a.delivery_type.active`).data(`bs-action`)

                    this.deliveries.fresh({
                        action: action
                    })
                }

                _clearForm() {
                    $(`.modal#delivery form#submit select`).val(``).change()
                    if ($(`.modal#delivery form#submit [type=checkbox]`).is(`:checked`)) {
                        $(`.modal#delivery form#submit [type=checkbox]`).trigger(`click`)
                    }
                    $(`.modal#delivery form#submit .error`).html(``)
                }

                _delivery_send_to_recipient() {
                    if ($(`.modal#delivery form#submit #send_to_recipient`).is(`:checked`)) {
                        $(`.modal#delivery form#submit [name=logistics_id]`).prop(`disabled`, true)
                    }else {
                        $(`.modal#delivery form#submit [name=logistics_id]`).prop(`disabled`, false)
                    }
                }
            @endif

            @if (Session::get("level") == "Kurir")
                done(receipt_number) {
                    this.api({
                        url: `/api/delivery/${ receipt_number }/done`,
                        method: `POST`,
                        success: e => {
                            this.alertSuccess(`Data berhasil diperbarui!`)

                            this.deliveries.fresh()
                        }
                    })
                }
            @elseif (Session::get("level") == "Administrator")
                done(e) {
                    e.preventDefault()

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

                    let receipt_number = $(`.modal#done_external [name=id]`).val()

                    this.api({
                        url: `/api/delivery/${ receipt_number }/done`,
                        method: `POST`,
                        data: formData,
                        success: e => {
                            this.alertSuccess(`Data berhasil diperbarui!`)

                            $(`.modal#done_external form#submit .error`).html(``)
                            $(`.modal#done_external form#submit input`).val(``)
                            $(`.modal#done_external`).modal(`hide`)

                            this.deliveries.fresh()
                        },
                        error: err => {
                            let error = err.message

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

                            $.each(error, function (index, value) {
                                console.log(index)
                                $(`.modal#done_external form#submit .error#error-${ index }`).html(value)
                            })
                        }
                    })
                }
            @endif

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

                            $(`.transit-count`).html(data)
                        }
                    })
                }
            @endif

            show(receipt_number) {
                $(`.modal#history #show`).html(`<div class="alert alert-primary">Sedang memuat data...</div>`)

                this.api({
                    url: `/api/delivery/${ receipt_number }/show`,
                    success: e => {
                        let data = e.data

                        let timeline = ``

                        $.each(data.package_histories, function (index, value) {
                            let timeline_position = `left`

                            if (index % 2 == 0) {
                                timeline_position = `right`
                            }

                            timeline += `
                                <div class="timeline-item ${ timeline_position }">
                                    <i class="icon ri-stack-line"></i>
                                    <div class="date">${ app.dateTimeFormat(value.created_at) }</div>
                                    <div class="content">
                                        <div class="d-flex">
                                            <div class="flex-grow-1 ms-3">
                                                <h5 class="fs-15">${ data.receipt_number }</h5>
                                                <p class="text-muted mb-2">${ value.message }</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `
                        })

                        $(`.modal#history #show`).html(`
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3">Posisi Paket saat ini:</h6>
                                            <table class="table">
                                                <tbody>
                                                    <tr>
                                                        <th width="40%">Logistik</th>
                                                        <td width="60%">${ data.position.logistics != null ? data.position.logistics.name : data.logistics.name }</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Kurir</th>
                                                        <td>${ data.position.courier != null ? data.position.courier.user.name : data.logistics.name }</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="timeline">
                                        ${ timeline }
                                    </div>
                                </div>
                            </div>
                        `)
                    }
                })
            }
        }

        var delivery = new Delivery

        @if (Session::get("level") == "Kurir" || Session::get("level") == "Logistik")
            delivery.transitCount()

            $(document).on(`click`, `a.delivery_type`, function() {
                delivery.transitCount()
            })
        @endif

        delivery.get()
        @if (Session::get("level") == "Logistik")
            delivery._logistics()
            delivery._couriers()
        @endif

        @if (Session::get("level") == "Logistik" || Session::get("level") == "Administrator")
            $(document).on(`click`, `button.process`, function() {
                let action = $(this).data(`action`)
                let receipt_number = $(this).data(`receipt_number`)

                app.alertConfirm({
                    title: `Apakah anda yakin?`,
                    text: `Ingin ${ action == `accept` ? "Memprosess" : "Menolak" } ${ receipt_number }.`,
                    confirmButton: action == `accept` ? "Ya, Prosess!" : "Ya, Tolak!",
                    html: action == `accept` ? `` : `<textarea rows="3" class="form-control" name="status_comment" placeholder="Alasan ditolak" autocomplete="off" style="resize: none;" />`,
                    isConfirmed: e => {
                        delivery.process(action, receipt_number)
                    }
                })
            })

            $(document).on(`click`, `a.delivery_type`, function() {
                delivery._filter()
            })

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

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

            $(document).on(`click`, `.modal#delivery form#submit #send_to_recipient`, function() {
                delivery._delivery_send_to_recipient()
            })
        @endif

        @if (Session::get("level") == "Kurir")
            $(document).on(`click`, `.done-now`, function() {
                let id = $(this).data(`bs-id`)

                app.alertConfirm({
                    title: `Apakah anda yakin?`,
                    text: `Ingin menyelesaikan paket ${ id }.`,
                    confirmButton: "Ya, Selesaikan!",
                    isConfirmed: e => {
                        delivery.done(id)
                    }
                })
            })
        @endif

        @if (Session::get("level") == "Administrator")
            $(document).on(`submit`, `.modal#done_external form#submit`, function(e) {
                delivery.done(e)
            })
        @endif

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

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

            delivery.show(id)
        })
    </script>
@endsection