@extends('app.app')
@section('title')
    Transactions
@endsection
@section('customcss')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <style>
        #mapId {
            height: 180px;
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Jobs</p>
                                    {{-- <p class="card-subtitle text-muted">Jobs List</p> --}}
                                </div>
                                {{-- <div class="col-auto text-end ps-0">
                                    <a href="#" id="btnMdlMrgTrx" class="btn btn-sm btn-danger">Merge Transaksi</a>
                                </div>
                                <div class="col-auto text-end ps-0">
                                    <a href="{{ route('view_transactions_spc_add') }}" class="btn btn-sm btn-warning">Transaksi Khusus</a>
                                </div> --}}
                                @can('transaction.create')
                                    <div class="col-auto text-end ps-0">
                                        <a href="{{ route('view_transactions_add') }}" class="btn btn-sm btn-danger">Add New Job</a>
                                    </div>
                                @endcan
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="tOrders" class="table table-hover dataTable w-100">
                                    <thead>
                                        <tr class="">
                                            <th class="">#</th>
                                            <th class="text-nowrap text-center">Action</th>
                                            <th class="text-nowrap">Order Code</th>
                                            <th class="text-nowrap">Company</th>
                                            <th class="text-nowrap">Order Time</th>
                                            {{-- <th class="text-nowrap">Vendor</th> --}}
                                            <th class="text-nowrap">Vehicle</th>
                                            <th class="text-nowrap">Driver</th>
                                            <th class="text-nowrap">Origin</th>
                                            <th class="text-nowrap">Destination</th>
                                            <th class="text-nowrap text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- <tr class="">
                                            <td class="text-nowrap">1</td>
                                            <td class="text-nowrap">SiCepat</td>
                                            <td class="text-nowrap">Feb 20, 2022 17:29:50</td>
                                            <td class="text-nowrap"><span class="text-danger">belum ditugaskan</span>
                                            </td>
                                            <td class="text-nowrap"><span class="text-danger">belum ditugaskan</span>
                                            </td>
                                            <td class="text-nowrap"><span class="text-danger">belum ditugaskan</span>
                                            </td>
                                            <td class="text-nowrap">Gudang Pluit SiCepat (Jakarta)</td>
                                            <td class="text-nowrap">Kantor Pusat SiCepat (yogyakarta)</td>
                                            <td class="text-center">
                                                <span class="badge bg-warning text-dark">Menunggu Konfirmasi</span>
                                            </td>
                                            <td class="align-baseline text-center">
                                                <a href="{{ route('view_transactions_confirm') }}" class="text-decoration-none me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
                                                    <span class="icon ion-forward text-danger fz-16"></span>
                                                </a>
                                                <a href="{{ route('view_transactions_view') }}" class="text-decoration-none me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
                                                    <span class="icon ion-eye text-danger fz-16"></span>
                                                </a>
                                            </td>
                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- modal pantu --}}
    <div class="modal" id="mdlPantau" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlPantau" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlPantau-code">#828469287552</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <div id="map"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- modal merge payment --}}
    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlMrgItem" aria-labelledby="mdlMrgItemLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlMrgItemLabel">Merge Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center flex-column">
                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="mrg-sel_from_trx_code" class="form-label">Merge dari transaksi <span class="text-danger">*</span></label>
                                    <select name="mrg-sel_from_trx_code" id="mrg-sel_from_trx_code" class="select2 form-control" style="width: 100% !important">
                                        <option value="" selected disabled>Belum ada transaksi yang dipilih</option>
                                        @foreach ($availOrdToMerge as $row)
                                            <option value="{{ $row->code }}" data-id="{{ $row->id }}" data-code="{{ $row->code }}">{{ $row->code }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="mrg-sel_to_trx_code" class="form-label">Merge ke transaksi <span class="text-danger">*</span></label>
                                    <select name="mrg-sel_to_trx_code" id="mrg-sel_to_trx_code" class="select2 form-control" style="width: 100% !important">
                                        <option value="" selected disabled>Belum ada transaksi yang dipilih</option>
                                        @foreach ($availOrdToMerge as $row)
                                            <option value="{{ $row->code }}" data-id="{{ $row->id }}" data-code="{{ $row->code }}">{{ $row->code }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="mrg-new_buy_price" class="form-label">Biaya <span class="text-danger">*</span></label>
                                    <input type="text" name="mrg-new_buy_price" id="mrg-new_buy_price" class="form-control">
                                    <small class="text-muted">Biaya baru untuk vendor dari 2 transaksi</small>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="mrg-note" class="form-label">Catatan <span class="text-dark">(Opsional)</span></label>
                                    <textarea name="mrg-note" id="mrg-note" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Close</button>
                    <button id="btnSubmitMergeItem" type="button" class="btn btn-sm btn-warning">Ya, merge</button>
                    <div id="btnSubmitMergeItem-loader" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mdlDelOrder" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlDelOrder" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlDelOrder">Delete Order</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <p class="mb-0">
                            Apa kamu yakin ingin menghapus order ini ?
                            <a href="#" class="text-danger">
                                #<span id="del-ord_code"></span>
                            </a>
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Close</button>
                    @can('transaction.delete')
                        <button id="btnSubmitDelOrder" type="button" class="btn btn-sm btn-secondary">Yes, delete</button>
                    @endcan
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script src="{{ asset('assets/vendor/leaflet-1.7.1/leaflet-src.js') }}"></script>
    <script>
        'use strict';
        const State = {
            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
            storage_lara: "{{ asset('storage') }}/",
            stts_order: {
                wait: "{{ App\Models\Orders::STTS_WAIT }}",
                confirm: "{{ App\Models\Orders::STTS_CONFIRM }}",
                have_get_vhc: "{{ App\Models\Orders::STTS_HAVE_GET_VHC }}",
                pck: "{{ App\Models\Orders::STTS_PCK }}",
                go: "{{ App\Models\Orders::STTS_GO }}",
                arv: "{{ App\Models\Orders::STTS_ARV }}",
                drop: "{{ App\Models\Orders::STTS_DROP }}",
                client_pay: "{{ App\Models\Orders::STTS_CLIENT_PAY }}",
                vendor_payed: "{{ App\Models\Orders::STTS_VENDOR_PAYED }}",
                close: "{{ App\Models\Orders::STTS_CLOSE }}",
                cancel: "{{ App\Models\Orders::STTS_CANCEL }}",
            },
            stts_pck: {
                wait: "{{ App\Models\OrdersPickups::STTS_WAIT }}",
                picking: "{{ App\Models\OrdersPickups::STTS_PICKING }}",
                picked: "{{ App\Models\OrdersPickups::STTS_PICKED }}",
                fail: "{{ App\Models\OrdersPickups::STTS_FAIL }}",
            },
            stts_drop: {
                wait: "{{ App\Models\OrdersDrops::STTS_WAIT }}",
                dropping: "{{ App\Models\OrdersDrops::STTS_DROPING }}",
                droped: "{{ App\Models\OrdersDrops::STTS_DROPED }}",
                fail: "{{ App\Models\OrdersDrops::STTS_FAIL }}",
            },
            stts_engine: {
                idling: "{{ App\Models\Tracks::STTS_EN_IDLING }}",
                moving: "{{ App\Models\Tracks::STTS_EN_MOVING }}",
                stoping: "{{ App\Models\Tracks::STTS_EN_STOPING }}",
            },
            stts_ignition: {
                active: "{{ App\Models\Tracks::STTS_IGNITION_ON }}",
                inactive: "{{ App\Models\Tracks::STTS_IGNITION_OFF }}",
                low: "{{ App\Models\Tracks::STTS_IGNITION_LOW }}",
                high: "{{ App\Models\Tracks::STTS_IGNITION_HIGH }}",
            },
            url_conf_order: "{{ route('view_transactions_confirm') }}",
            url_view_order: "{{ route('view_transactions_view') }}",
            inShowOrdId: 0,
            inShowOrdCode: 0,
            eventRemoveDestination: null,
            eventRemoveHistory: null,
        };

        const Icon = {
            hub: function() {
                return L.icon({
                    iconUrl: "{{ asset('assets/icons/pin-resto.png') }}",
                    iconSize: [38, 48],
                    iconAnchor: [20, 46], // lb, rt, bottom, rb. Positive
                    popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            destination: function() {
                return L.icon({
                    iconUrl: "{{ asset('assets/icons/pin-tujuan.png') }}",
                    iconSize: [38, 48],
                    iconAnchor: [20, 46], // lb, rt, bottom, rb. Positive
                    popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            point: function() {
                return L.icon({
                    // iconUrl: 'https://www.nicepng.com/png/full/101-1015767_map-marker-circle-png.png',
                    iconUrl: "{{ asset('assets/icons/maps-marker-circle-blue-radius.png') }}",
                    iconSize: [38, 38],
                    // iconAnchor: [20, 46], // lb, rt, bottom, rb. Positive
                    // popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            startNav: function() {
                return L.icon({
                    iconUrl: 'https://image.flaticon.com/icons/png/512/803/803559.png',
                    iconSize: [38, 38],
                    iconAnchor: [20, 16], // lb, rt, bottom, rb. Positive
                    // popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            titikAwal: function() {
                return L.icon({
                    iconUrl: "{{ asset('images/start.png') }}",
                    iconSize: [30, 30],
                    iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
                    // popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            titikAkhir: function() {
                return L.icon({
                    iconUrl: "{{ asset('images/finish.png') }}",
                    iconSize: [30, 30],
                    iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
                    // popupAnchor: [0, -32],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            vechicleIcon: function() {
                return L.icon({
                    iconUrl: "{{ asset('images/2active.png') }}",
                    iconSize: [30, 30],
                    iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
                    popupAnchor: [-3, -35],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
            vhcIdleIcon: function() {
                return L.icon({
                    iconUrl: "{{ asset('images/2idle.png') }}",
                    iconSize: [30, 30],
                    iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
                    popupAnchor: [-3, -35],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
            },
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                OrdTable.activate();
                OrdMerge.activate();
                Leaflet.activate();
                OrdTrack.activate();
                OrdDelete.activate();
                Filter.activate();
            },
            event: function() {},
            getHtmlSttsOrd: function(stts, stts_pck = 99, stts_drop = 99) {
                if (State.stts_order.wait == stts) {
                    return '<span class="badge bg-warning text-dark">Menunggu Konfirmasi</span>';
                } else if (State.stts_order.confirm == stts) {
                    return '<span class="badge bg-warning text-dark">Mencari Kendaraan</span>';
                } else if (State.stts_order.have_get_vhc == stts) {
                    return '<span class="badge bg-warning text-dark">Kendaraan Menuju Lokasi Penjemputan</span>';
                } else if (State.stts_order.pck == stts) {
                    // return '<span class="badge bg-warning text-dark">Berhasil Mengambil Pesanan</span>';
                    if (State.stts_pck.wait == stts_pck) {
                        return '<span class="badge bg-warning text-dark">Tiba Dilokasi Penjemputan</span>';
                    } else if (State.stts_pck.picking == stts_pck) {
                        return '<span class="badge bg-warning text-dark">Sedang Memuat Barang</span>';
                    } else if (State.stts_pck.picked == stts_pck) {
                        return '<span class="badge bg-warning text-dark">Berhasil Mengambil Pesanan</span>';
                    } else if (State.stts_pck.fail == stts_pck) {
                        return '<span class="badge bg-warning text-dark">Gagal Mengambil Pesanan</span>';
                    }
                } else if (State.stts_order.go == stts) {
                    return '<span class="badge bg-info text-dark">Menuju Lokasi Pengantaran</span>';
                } else if (State.stts_order.arv == stts) {
                    // return '<span class="badge bg-info text-dark">Tiba Dilokasi Pengantaran</span>';
                    if (State.stts_drop.wait == stts_drop) {
                        return '<span class="badge bg-warning text-dark">Tiba Dilokasi Pengantaran</span>';
                    } else if (State.stts_drop.dropping == stts_drop) {
                        return '<span class="badge bg-warning text-dark">Sedang Membongkar Barang</span>';
                    } else if (State.stts_drop.droped == stts_drop) {
                        return '<span class="badge bg-warning text-dark">Berhasil Drop Pesanan</span>';
                    } else if (State.stts_drop.fail == stts_drop) {
                        return '<span class="badge bg-warning text-dark">Gagal Drop Pesanan</span>';
                    }
                } else if (State.stts_order.drop == stts) {
                    return '<span class="badge bg-warning text-dark">Selesai Melakukan Pengantaran</span>';
                } else if (State.stts_order.client_pay == stts) {
                    // return '<span class="badge bg-danger text-light">Invoicing to Client</span>';
                    return '<span class="badge bg-danger text-light">Selesai (Waiting Payment)</span>';
                } else if (State.stts_order.vendor_payed == stts) {
                    // return '<span class="badge bg-danger text-light">Payment to Vendor</span>';
                    return '<span class="badge bg-danger text-light">Selesai (Menunggu Pembayaran)</span>';
                } else if (State.stts_order.close == stts) {
                    return '<span class="badge bg-danger text-light">Selesai</span>';
                } else if (State.stts_order.cancel == stts) {
                    return '<span class="badge bg-danger text-light">Dibatalkan</span>';
                } else {
                    return '<span class="badge bg-secondary text-white">-</span>';
                }
            },
        };

        const OrdTable = {
            activate: function() {
                OrdTable.reload();
            },
            reload: function() {
                // $('#tOrders').DataTable();
                // if (User.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { User.Table.firstInitDataTable = 1; }
                $('#tOrders').DataTable({
                    processing: true,
                    serverSide: false,
                    bLengthChange: true,
                    deferRender: true,
                    destroy: true,
                    ajax: {
                        url: "{{ route('api_list_orders') }}?cptid=" + AppState.current_company + '&order_by=desc',
                        type: 'GET',
                        complete: function(jqXHR, textStatus, c) {
                            let count = jqXHR.responseJSON.count;
                            if (typeof count != 'undefined') {
                                $('#count_orders').text(count);
                            }
                            // removeTableSkeletonLoading()
                        },
                    },
                    deferRender: true,
                    columns: [{
                            data: 'DT_RowIndex',
                            className: 'text-end',
                            visible: true,
                            orderable: true,
                            searchable: true,
                        },
                        {
                            data: 'action',
                            className: 'text-center',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                console.log("rows: ", row)
                                let action = ``;
                                // if (row.confirm_at === 0) {
                                // if (!row.vdr_name) {
                                //     action += `<a href="${State.url_conf_order}?code=${row.ord_code}"
                            //     class="text-decoration-none me-1" data-bs-toggle="tooltip"
                            //     data-bs-placement="bottom" title="Tindak Lanjuti">
                            //     <span class="icon ion-forward text-danger fz-16"></span>
                            //     </a>`;
                                // } else {
                                //     let ord_codes = row.ord_code;
                                //     if (typeof row.childs != 'undefined' && row.childs.length > 0) {
                                //         for (const child of row.childs) {
                                //             ord_codes += ',' + child.ord_code;
                                //         }
                                //     }
                                //     action += `
                            //         <a href="${State.url_view_order}?code=${ord_codes}"
                            //             class="text-decoration-none me-1" data-bs-toggle="tooltip"
                            //             data-bs-placement="bottom" title="Lihat">
                            //             <span class="icon ion-eye text-danger fz-16"></span>
                            //         </a>
                            //     `;
                                //     action += `
                            //         <a href="#"
                            //             class="text-decoration-none me-1 btnTrackOrder" data-bs-toggle="tooltip"
                            //             data-bs-placement="bottom" title="Tracking #${row.ord_code}"
                            //             data-id="${row.ord_id}" data-code="${row.ord_code}">
                            //             <span class="icon ion-map text-danger fz-16"></span>
                            //         </a>
                            //     `;
                                //     // data-bs-toggle="modal" data-bs-target="#mdlPantau"
                                //     for (const child of row.childs) {
                                //         action += `
                            //         <a href="#"
                            //             class="text-decoration-none me-1 btnTrackOrder" data-bs-toggle="tooltip"
                            //             data-bs-placement="bottom" title="Tracking #${child.ord_code}"
                            //             data-id="${child.ord_id}" data-code="${child.ord_code}">
                            //             <span class="icon ion-map text-danger fz-16"></span>
                            //         </a>
                            //         `;
                                //     }
                                // }
                                // action += `
                            // <a href="#"
                            //     class="text-decoration-none me-1 btnDelOrder" data-bs-toggle="tooltip"
                            //     data-bs-placement="bottom" title="Delete Order"
                            //     data-id="${row.ord_id}" data-code="${row.ord_code}">
                            //     <span class="icon ion-ios-trash text-danger fz-16"></span>
                            // </a>
                            // `;
                                let ord_codes = row.ord_code;
                                if (typeof row.childs != 'undefined' && row.childs.length > 0) {
                                    for (const child of row.childs) {
                                        ord_codes += ',' + child.ord_code;
                                    }
                                }
                                action += `
                                        <a href="${State.url_view_order}?code=${ord_codes}"
                                            class="text-decoration-none me-1" data-bs-toggle="tooltip"
                                            data-bs-placement="bottom" title="Lihat">
                                            <span class="icon ion-eye text-danger fz-16"></span>
                                        </a>
                                    `;
                                // action += `
                            //         <a href="#"
                            //             class="text-decoration-none me-1 btnTrackOrder" data-bs-toggle="tooltip"
                            //             data-bs-placement="bottom" title="Tracking #${row.ord_code}"
                            //             data-id="${row.ord_id}" data-code="${row.ord_code}">
                            //             <span class="icon ion-map text-danger fz-16"></span>
                            //         </a>
                            //     `;
                                // data-bs-toggle="modal" data-bs-target="#mdlPantau"
                                for (const child of row.childs) {
                                    action += `
                                        <a href="#"
                                            class="text-decoration-none me-1 btnTrackOrder" data-bs-toggle="tooltip"
                                            data-bs-placement="bottom" title="Tracking #${child.ord_code}"
                                            data-id="${child.ord_id}" data-code="${child.ord_code}">
                                            <span class="icon ion-map text-danger fz-16"></span>
                                        </a>
                                        `;
                                }
                                action += `
                                <a href="#"
                                    class="text-decoration-none me-1 btnDelOrder" data-bs-toggle="tooltip"
                                    data-bs-placement="bottom" title="Delete Order"
                                    data-id="${row.ord_id}" data-code="${row.ord_code}">
                                    <span class="icon ion-ios-trash text-danger fz-16"></span>
                                </a>
                                `;
                                return action;
                            }
                        },
                        {
                            data: 'code',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = '#' + data;
                                for (const child of row.childs) {
                                    txt += '<br>#' + child.code;
                                }
                                return txt;
                            },
                            createdCell: function(td, cellData, rowData, row, col) {
                                $(td).attr('data-id', rowData.ord_id);
                                $(td).attr('data-code', rowData.ord_code);
                            },
                        },
                        {
                            data: 'c_pt_name',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            // createdCell: function(td, cellData, rowData, row, col) {
                            //     $(td).attr('data-id', rowData.id);
                            //     $(td).attr('data-name', rowData.name);
                            //     $(td).attr('data-phone', rowData.phone);
                            //     $(td).attr('data-phone_code', rowData.phone_code);
                            //     $(td).attr('data-client_group_name', rowData.client_group_name);
                            // },
                            render: function(data, type, row, meta) {
                                let txt = data;
                                console.log("row:", row);
                                for (const child of row.childs) {
                                    txt += '<br>' + child.c_pt_name;
                                }
                                return txt;
                            },
                        },
                        {
                            data: 'crt',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = moment.unix(data).format('DD MMM YYYY HH:mm:ss');
                                for (const child of row.childs) {
                                    txt += '<br>' + moment.unix(child.crt).format('DD MMM YYYY HH:mm:ss');
                                }
                                return txt;
                            },
                        },
                        // {
                        //     data: 'vdr_name',
                        //     className: 'text-start',
                        //     visible: true,
                        //     orderable: true,
                        //     searchable: true,
                        //     render: function(data, type, row, meta) {
                        //         let txt = '';
                        //         if (data) {
                        //             txt += data;
                        //         } else {
                        //             txt += `<span class="text-danger">belum ditugaskan</span>`;
                        //         }
                        //         for (const child of row.childs) {
                        //             if (child.vdr_name) {
                        //                 txt += '<br>' + child.vdr_name;
                        //             } else {
                        //                 txt += `<br><span class="text-danger">belum ditugaskan</span>`;
                        //             }
                        //         }
                        //         return txt;
                        //     },
                        // },
                        {
                            data: 'vhc_nopol1',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = '';
                                if (row.vhc_nopol1) {
                                    txt += row.vhc_nopol1 + ' ' + row.vhc_nopol2 + ' ' + row.vhc_nopol3;
                                } else {
                                    txt += `<span class="text-danger">belum ditugaskan</span>`;
                                }
                                for (const child of row.childs) {
                                    if (child.vhc_nopol1) {
                                        txt += '<br>' + child.vhc_nopol1 + ' ' + child.vhc_nopol2 + ' ' + child.vhc_nopol3;
                                    } else {
                                        txt += `<br><span class="text-danger">belum ditugaskan</span>`;
                                    }
                                }
                                return txt;
                            },
                        },
                        {
                            data: 'drv_name',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = '';
                                if (data) {
                                    txt += data;
                                } else {
                                    txt += `<span class="text-danger">belum ditugaskan</span>`;
                                }
                                for (const child of row.childs) {
                                    if (child.drv_name) {
                                        txt += '<br>' + child.drv_name;
                                    } else {
                                        txt += `<br><span class="text-danger">belum ditugaskan</span>`;
                                    }
                                }
                                return txt;
                            },
                        },
                        {
                            data: 'pck_name',
                            className: 'text-start text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = data;
                                for (const child of row.childs) {
                                    txt += '<br>' + child.pck_name;
                                }
                                return txt;
                            },
                        },
                        {
                            data: 'drop_name',
                            className: 'text-start text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let txt = data;
                                for (const child of row.childs) {
                                    txt += '<br>' + child.drop_name;
                                }
                                return txt;
                            },
                        },
                        {
                            data: 'status',
                            className: 'text-center',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                // let txt = Wrapper.getHtmlSttsOrd(data, row.stts_pck, row.stts_drop);
                                // for (const child of row.childs) {
                                //     txt += '<br>' + Wrapper.getHtmlSttsOrd(child.status);
                                // }
                                // return txt;
                                let a = ''
                                if (row.status == 10) {
                                    a = `<span class="btn btn-sm btn-success">Complete</span>`
                                } else if (row.status == 11) {
                                    a = `<span class="btn btn-sm btn-danger">Cancel</span>`
                                } else {
                                    a = `<span class="btn btn-sm btn-warning">Active</span>`
                                }
                                return a;
                            },
                        },
                    ],
                });
            },
        };

        const OrdMerge = {
            activate: function() {
                OrdMerge.event();
            },
            event: function() {
                // select2
                $('#mrg-sel_from_trx_code').select2({
                    dropdownParent: $('#mdlMrgItem'),
                });
                $('#mrg-sel_to_trx_code').select2({
                    dropdownParent: $('#mdlMrgItem'),
                });
                // input
                $('#mrg-new_buy_price').on('keyup', function() {
                    let val = Number($('#mrg-new_buy_price').val().split('.').join(''));
                    $('#mrg-new_buy_price').val((new Intl.NumberFormat('id-ID')).format(val));
                });
                // modal
                $('#btnMdlMrgTrx').on('click', function() {
                    $('#mdlMrgItem').modal('show');
                });
                // submit
                $('#btnSubmitMergeItem').on('click', function() {
                    const data = OrdMerge.getData();
                    const isValid = OrdMerge.checkData(data, true);
                    if (!isValid) return false;
                    OrdMerge.submitData(data);
                });
            },
            getData: function() {
                const data = {};
                const selFromTrx = $('#mrg-sel_from_trx_code :selected');
                data.mrg_from_ord_id = selFromTrx.data('id');
                data.mrg_from_ord_code = selFromTrx.data('code');
                const selToTrx = $('#mrg-sel_to_trx_code :selected');
                data.mrg_to_ord_id = selToTrx.data('id');
                data.mrg_to_ord_code = selToTrx.data('code');
                data.new_buy_price = Number($('#mrg-new_buy_price').val().split('.').join(''));
                data.note = $('#mrg-note').val();
                return data;
            },
            checkData: function(data, isAlert = true) {
                if (typeof data.mrg_from_ord_code === 'undefined' || data.mrg_from_ord_code == '') {
                    Helper.toast('Warning', 'just now', 'merge dari transaksi belum dipilih');
                    return false;
                }
                if (typeof data.mrg_to_ord_code === 'undefined' || data.mrg_to_ord_code == '') {
                    Helper.toast('Warning', 'just now', 'merge ke transaksi belum dipilih');
                    return false;
                }
                if (isNaN(data.new_buy_price)) {
                    Helper.toast('Warning', 'just now', 'Biaya belum diisi');
                    return false;
                }
                if (data.new_buy_price < 0) {
                    Helper.toast('Warning', 'just now', 'Minimal biaya adalah 0');
                    return false;
                }
                return true;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitMergeItem').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitMergeItem-loader').removeClass('d-none');
                    $('#btnSubmitMergeItem').attr('disabed', true);
                    $('#btnSubmitMergeItem').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_finance_merger_trx', '') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data: data,
                        success: (data, textStatus, jqXHR) => {
                            $('#btnSubmitMergeItem').removeAttr('disabed');
                            $('#btnSubmitMergeItem-loader').addClass('d-none');
                            $('#btnSubmitMergeItem').removeClass('d-none');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            Helper.toast('Success', 'just now', 'sukses merge transaksi');
                            OrdMerge.clearInput();
                            $('#mdlMrgItem').modal('hide');
                            OrdTable.reload();
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitMergeItem').removeAttr('disabed');
                            $('#btnSubmitMergeItem-loader').addClass('d-none');
                            $('#btnSubmitMergeItem').removeClass('d-none');
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'Please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                })
            },
            clearInput: function() {
                $('#mrg-sel_from_trx_code').val('').trigger('change');
                $('#mrg-sel_to_trx_code').val('').trigger('change');
                $('#mrg-new_buy_price').val('');
                $('#mrg-note').val('');
            }
        }

        const OrdTrack = {
            tracks: null,
            activate: function() {
                OrdTrack.event();
            },
            event: function() {
                $('#tOrders').on('click', '.btnTrackOrder', function(e) {
                    // let id = $(e.target).closest('tr').find('td[data-id]').data('id');
                    // let code = $(e.target).closest('tr').find('td[data-code]').data('code');
                    let id = $(e.target).closest('a').data('id');
                    let code = $(e.target).closest('a').data('code');
                    State.inShowOrdId = Number(id);
                    State.inShowOrdCode = code;
                    OrdTrack.bundleTrackOrder(false);
                });
            },
            bundleTrackOrder: async function(cache = false) {
                Leaflet.clearLayer('eventRemoveDestination');
                Leaflet.clearLayer('eventRemoveHistory');
                OrdTrack.tracks = await OrdTrack.getTrackOrder(cache);
                OrdTrack.showToModal(OrdTrack.tracks);
                OrdTrack.showHistoryToMap(OrdTrack.tracks);
                OrdTrack.showDestinationToMap(OrdTrack.tracks);
            },
            getTrackOrder: async function(cache = false) {
                if (cache) {
                    if (OrdTrack.tracks == null) {
                        return (await OrdTrack.reqTrackOrder()).data;
                    } else {
                        return OrdTrack.tracks;
                    }
                }
                return (await OrdTrack.reqTrackOrder()).data;
            },
            reqTrackOrder: function(params) {
                return new Promise((resolve, reject) => {
                    let url = "{{ route('api_track_order') }}?ord_id=" + State.inShowOrdId;
                    $.ajax({
                        url,
                        method: 'GET',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: params,
                        success: (data, textStatus, jqXHR) => {
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    data: null,
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                data: data.data,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'Cannot get lists trucks');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error',
                                data: null,
                            });
                        }
                    })
                });
            },
            showToModal: function({
                order
            }) {
                $('#mdlPantau-code').text(`#${State.inShowOrdCode}`);
                $('#mdlPantau').modal('show');
            },
            showHistoryToMap: function({
                history
            }) {
                let key_length = history.length;
                let polyTruckRoutes = history.map((obj, key) => {
                    obj.key_index = key + 1 // key_length - key;
                    return {
                        lat: obj.latitude,
                        lng: obj.longitude,
                        options: {
                            // polyline
                            smoothFactor: 1.0,
                            noClip: true,
                            bubblingMouseEvents: false,
                            // circle
                            radius: 2,
                        },
                        // circle
                        label: `<strong>${obj.key_index}</strong><br><strong>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</strong><br>${obj.state_text}<br><br>${decodeURIComponent(obj.fulladdress)}`,
                    }
                });

                let lastPos = history.at(0);
                let icon_vhc = Icon.vechicleIcon(); // moving
                if (lastPos?.ignition == State.stts_ignition.high) {
                    if (lastPos?.lst_speed == 0) {
                        icon_vhc = Icon.vhcIdleIcon(); // idling
                    } else {
                        icon_vhc = Icon.vechicleIcon(); // moving
                    }
                } else {
                    icon_vhc = Icon.vhcIdleIcon(); // stoped
                }

                let vhcMarker = null;
                if (lastPos) {
                    vhcMarker = Leaflet.addMarkers({
                        lat: lastPos.latitude,
                        lng: lastPos.longitude,
                        label: `<strong>${lastPos.nopol1} ${lastPos.nopol2} ${lastPos.nopol3}</strong><br>${lastPos.state_text}<br><br>${decodeURIComponent(lastPos.fulladdress)}`,
                        options: {
                            icon: icon_vhc,
                            // rotationAngle: 290
                        }
                    });
                }

                let polyline = null;
                if (lastPos) {
                    polyline = Leaflet.addPolylines(polyTruckRoutes);
                    Leaflet.map.fitBounds(polyline.getBounds());
                    // let ctrWaypoint = Leaflet.addWaypoints(polyTruckRoutes.slice(0, 100))
                }

                Leaflet.addCircles(polyTruckRoutes, function(circle) {
                    window.addEventListener('eventRemoveHistory', function handler(e) {
                        circle.remove();
                    });
                });

                // remove marker, circle, event listener and all about this marker
                State.eventRemoveHistory = new CustomEvent('eventRemoveHistory', {
                    polyline,
                    vhcMarker,
                });
                window.addEventListener('eventRemoveHistory', function handler(e) {
                    if (polyline) polyline.remove();
                    if (vhcMarker) vhcMarker.remove();
                    e.currentTarget.removeEventListener(e.type,
                        handler); // window.removeEventListener('remove', this.handler, true);
                    State.eventRemoveHistory = null;
                });
            },
            showDestinationToMap: function({
                order
            }) {
                // wkt format from point mysql
                let pck_center = order.pck_center.slice(6, order.pck_center.length - 1).split(' ');
                let drop_center = order.drop_center.slice(6, order.drop_center.length - 1).split(' ');
                let startMarker = Leaflet.addMarkers({
                    lat: pck_center[1],
                    lng: pck_center[0],
                    label: `<strong>${order.pck_name}</strong><br>${order.pck_pic_name}<br>${order.pck_pic_phone_val}<br><br>${order.pck_addr}`,
                    options: {
                        icon: Icon.titikAwal(),
                        // rotationAngle: 290
                    }
                });
                let finishMarker = Leaflet.addMarkers({
                    lat: drop_center[1],
                    lng: drop_center[0],
                    label: `<strong>${order.drop_name}</strong><br>${order.drop_pic_name}<br>${order.drop_pic_phone_val}<br><br>${order.drop_addr}`,
                    options: {
                        icon: Icon.titikAkhir()
                    }
                });

                // remove marker, circle, event listener and all about this marker
                State.eventRemoveDestination = new CustomEvent('eventRemoveDestination', {
                    startMarker,
                    finishMarker,
                });
                window.addEventListener('eventRemoveDestination', function handler(e) {
                    startMarker.removeEventListener('click');
                    startMarker.removeEventListener('moveend');
                    startMarker.remove();
                    finishMarker.removeEventListener('click');
                    finishMarker.removeEventListener('moveend');
                    finishMarker.remove();
                    e.currentTarget.removeEventListener(e.type,
                        handler); // window.removeEventListener('remove', this.handler, true);
                    State.eventRemoveDestination = null;
                });
            }
        }

        const Leaflet = {
            map: null,
            activate: function() {
                // centering indonesia country => .setView([-1.38116, 117.6168817], 5.4);
                Leaflet.map = L.map('map').setView([-7.1451449, 109.9776078], 8);
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                    attribution: 'Map data &copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                    // maxZoom: 20,
                    // minZoom: 4,
                    id: 'mapbox/streets-v11',
                    tileSize: 512,
                    zoomOffset: -1,
                    accessToken: 'pk.eyJ1IjoibWV1c2luZmlybWFyeSIsImEiOiJja3lsd2xveDAydGhqMnVxaHJsZ2ZncG8yIn0.f7MJAyawHUdCegw7sWjrww',
                }).addTo(Leaflet.map);
                Leaflet.events();
                L.control.scale({
                    position: 'bottomright'
                }).addTo(Leaflet.map);
                L.control.zoom({
                    position: 'bottomright'
                }).addTo(Leaflet.map);

                $('#mdlPantau').on('show.bs.modal', function() {
                    setTimeout(function() {
                        Leaflet.map.invalidateSize();
                    }, 10);
                });
            },
            events: function() {
                // Leaflet.map.on('click', function(e) {
                //     e.latlng.lat, e.latlng.lng
                // })
            },
            addMarkers: function(locs = [], cb = null) {
                if (locs.constructor === Array) {
                    let markers = [];
                    for (let i = 0; i < locs.length; i++) {
                        let label = locs[i]?.label || '';
                        let marker = new L.marker([locs[i].lat, locs[i].lng], locs[i]?.options);
                        let popup = new L.Popup({
                            autoClose: false,
                            closeOnClick: true,
                        }).setContent(locs[i]?.label || '').setLatLng([locs[i].lat, locs[i].lng]);
                        // marker.bindPopup(locs[i]?.label || '');
                        marker.bindPopup(popup);
                        marker.bindTooltip(locs[i]?.label || '');
                        markers.push(marker);
                        if (cb) cb(marker);
                        marker.addTo(Leaflet.map);
                    }
                    return markers;
                } else if (locs.constructor === Object) {
                    let label = locs.label;
                    let marker = new L.marker([locs.lat, locs.lng], locs?.options);
                    let popup = new L.Popup({
                        autoClose: false,
                        closeOnClick: true,
                    }).setContent(locs?.label || '').setLatLng([locs.lat, locs.lng]);
                    // marker.bindPopup(locs?.label || '');
                    marker.bindPopup(popup);
                    marker.bindTooltip(locs?.label || '');
                    if (cb) cb(marker);
                    marker.addTo(Leaflet.map);
                    return marker;
                }
            },
            addCircles: function(locs = [], cb = null) {
                if (locs.constructor === Array) {
                    let circles = [];
                    for (let i = 0; i < locs.length; i++) {
                        let circle = L.circle([locs[i].lat, locs[i].lng], locs[i]?.options);
                        circle.bindPopup(locs[i]?.label || '');
                        circle.bindTooltip(locs[i]?.label || '');
                        circles.push(circle);
                        if (cb) cb(circle);
                        circle.addTo(Leaflet.map);
                    }
                    return circles;
                } else if (locs.constructor === Object) {
                    let circle = L.circle([locs.lat, locs.lng], locs?.options);
                    circle.bindPopup(locs?.label || '');
                    circle.bindTooltip(locs?.label || '');
                    if (cb) cb(circle);
                    circle.addTo(Leaflet.map);
                    return circle;
                }
            },
            addPolylines: function(locs = [], cb = null) {
                let latLngs = [];
                for (let i = 0; i < locs.length; i++) {
                    latLngs.push([locs[i].lat, locs[i].lng]);
                }
                let polyline = L.polyline(latLngs, locs[0]?.options).addTo(Leaflet.map);

                if (cb) cb(polyline);
                return polyline;
            },
            // start custom polylines
            addCustomPolylines: function(locs = [], cb = null) {
                const radius = 0.5 /* corner smooth radius, keep value in range 0 - 0.5 to avoid artifacts */
                let latLngs = [];

                for (let i = 0; i < locs.length; i++) {
                    latLngs.push([locs[i].lat, locs[i].lng]);
                }

                let SmoothPoly = L.Polyline.extend({
                    // override default method to use custom points-to-path method
                    _updatePath: function() {
                        let path = Leaflet.roundPathCorners(this._parts, radius)
                        this._renderer._setPath(this, path);
                    }
                })

                let polyline = new SmoothPoly(latLngs, locs[0]?.options).addTo(Leaflet.map);

                if (cb) cb(polyline);
                return polyline;
            },
            roundPathCorners: function(rings, radius) {
                function moveTowardsFractional(movingPoint, targetPoint, fraction) {
                    return {
                        x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
                        y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
                    };
                }

                function pointForCommand(cmd) {
                    return {
                        x: parseFloat(cmd[cmd.length - 2]),
                        y: parseFloat(cmd[cmd.length - 1])
                    };
                }
                let resultCommands = [];
                if (+radius) {
                    // negative numbers create artifacts
                    radius = Math.abs(radius);
                } else {
                    radius = 0.15;
                }
                for (let i = 0, len = rings.length; i < len; i++) {
                    let commands = rings[i];
                    // start point
                    resultCommands.push(["M", commands[0].x, commands[0].y]);
                    for (let cmdIndex = 1; cmdIndex < commands.length; cmdIndex++) {
                        let prevCmd = resultCommands[resultCommands.length - 1];
                        let curCmd = commands[cmdIndex];
                        let nextCmd = commands[cmdIndex + 1];
                        if (nextCmd && prevCmd) {
                            // Calc the points we're dealing with
                            let prevPoint = pointForCommand(prevCmd); // convert to Object
                            let curPoint = curCmd;
                            let nextPoint = nextCmd;
                            // The start and end of the cuve are just our point moved towards the previous and next points, respectivly
                            let curveStart, curveEnd;
                            curveStart = moveTowardsFractional(
                                curPoint,
                                prevCmd.origPoint || prevPoint,
                                radius
                            );
                            curveEnd = moveTowardsFractional(
                                curPoint,
                                nextCmd.origPoint || nextPoint,
                                radius
                            );
                            // Adjust the current command and add it
                            curCmd = Object.values(curveStart);
                            curCmd.origPoint = curPoint;
                            curCmd.unshift("L");
                            resultCommands.push(curCmd);
                            // The curve control points are halfway between the start/end of the curve and
                            // calculate curve, if radius is different than 0
                            if (radius) {
                                let startControl = moveTowardsFractional(curveStart, curPoint, 0.5);
                                let endControl = moveTowardsFractional(curPoint, curveEnd, 0.5);
                                // Create the curve
                                let curveCmd = [
                                    "C",
                                    startControl.x,
                                    startControl.y,
                                    endControl.x,
                                    endControl.y,
                                    curveEnd.x,
                                    curveEnd.y
                                ];
                                // Save the original point for fractional calculations
                                curveCmd.origPoint = curPoint;
                                resultCommands.push(curveCmd);
                            }
                        } else {
                            // Pass through commands that don't qualify
                            let el = Object.values(curCmd);
                            el.unshift("L");
                            resultCommands.push(el);
                        }
                    }
                }
                return (
                    resultCommands.reduce(function(str, c) {
                        return str + c.join(" ") + " ";
                    }, "") || "M0 0"
                );
            },
            // end custom polylines
            addPolygons: function(locs = [], cb = null) {
                let latLngs = [];
                for (let i = 0; i < locs.length; i++) {
                    latLngs.push([locs[i].lat, locs[i].lng]);
                }
                let polygon = L.polygon(latLngs, locs[0]?.options).addTo(Leaflet.map);
                polygon.bindPopup(locs[0]?.label || '');
                polygon.bindTooltip(locs[0]?.label || '');

                if (cb) cb(polygon);
                return polygon;
            },
            addWaypoints: function(locs = [], cb = null) {
                let latLngs = [];
                for (let i = 0; i < locs.length; i++) {
                    latLngs.push(L.latLng(locs[i].lat, locs[i].lng));
                }
                let control = L.Routing.control({
                    waypoints: latLngs,
                    show: false,
                    waypointMode: 'snap',
                    createMarker: function() {}
                }).addTo(Leaflet.map);
                if (cb) cb(control);
                return control;
            },
            drawPolygon: function(lat, lng, options = {}) {
                let polygon = L.polygon([
                    [lat, lng]
                ], options).addTo(Leaflet.map);
                return polygon;
            },
            eventMarkerClick: function(marker, cb = null) {
                marker.on('click', function(e) {
                    // console.log(e.target.options); // get passing data from set marker: https://stackoverflow.com/questions/17423261/how-to-pass-data-with-marker-in-leaflet-js
                    Leaflet.map.invalidateSize();
                    if (Leaflet.map.getZoom() <= 14) {
                        Leaflet.map.setView(e.target.getLatLng(), 14);
                    }
                    if (cb) cb(e);
                });
            },
            clearLayer: function(type = 'all', cb = null) {
                if (type == 'all') {
                    if (State.eventRemoveDestination) window.dispatchEvent(State.eventRemoveDestination);
                    if (State.eventRemoveHistory) window.dispatchEvent(State.eventRemoveHistory);
                    if (cb) cb();
                } else if (type == 'eventRemoveDestination') {
                    if (State.eventRemoveDestination) {
                        window.dispatchEvent(State.eventRemoveDestination);
                        if (cb) cb();
                    }
                } else if (type == 'eventRemoveHistory') {
                    if (State.eventRemoveHistory) {
                        window.dispatchEvent(State.eventRemoveHistory);
                        if (cb) cb();
                    }
                }
            },
            hideLayer: function(type = 'all', cb = null) {
                if (type == 'all') {
                    if (State.eventHideDestination) window.dispatchEvent(State.eventHideDestination);
                    if (cb) cb();
                } else if (type == 'eventHideDestination') {
                    if (State.eventHideDestination) {
                        if (State.eventHideDestination) {
                            window.dispatchEvent(State.eventHideDestination);
                            if (cb) cb();
                        }
                    }
                }
            },
        };

        const Filter = {
            activate: function() {
                Filter.event();
            },
            event: function() {},
            triggerFilterCompany: function() {
                OrdTable.reload();
            },
        }

        const OrdDelete = {
            activate: function() {
                OrdDelete.event();
            },
            event: function() {
                $('#tOrders').on('click', '.btnDelOrder', function(e) {
                    // let id = $(e.target).closest('tr').find('td[data-id]').data('id');
                    // let code = $(e.target).closest('tr').find('td[data-code]').data('code');
                    let id = $(e.target).closest('a').data('id');
                    let code = $(e.target).closest('a').data('code');

                    $('#del-ord_code').text(code);

                    $('#mdlDelOrder').data('id', Number(id));
                    $('#mdlDelOrder').data('code', code);
                    $('#mdlDelOrder').modal('show');
                });

                $('#btnSubmitDelOrder').on('click', function(e) {
                    const id = Number($('#mdlDelOrder').data('id'));
                    const code = Number($('#mdlDelOrder').data('code'));
                    OrdDelete.submitDelOrder({
                        ord_id: id,
                        ord_code: code
                    });
                });
            },
            submitDelOrder: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitDelOrder').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitDelOrder').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_delete_order', '') }}/" + data.ord_id,
                        method: 'DELETE',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: data,
                        success: (data, textStatus, jqXHR) => {
                            $('#btnSubmitDelOrder').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            Helper.toast('Success', 'just now', 'success delete order');
                            $('#mdlDelOrder').modal('hide');
                            $('#mdlDelOrder').data('id', undefined);
                            $('#mdlDelOrder').data('code', undefined);
                            OrdTable.reload();
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitDelOrder').removeAttr('disabed');
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                })
            },
        }

        Wrapper.activate();
    </script>
    {{-- <script>
        var map = L.map('map').setView([-7.1451449, 109.9776078], 8);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoibWV1c2luZmlybWFyeSIsImEiOiJja3lsd2xveDAydGhqMnVxaHJsZ2ZncG8yIn0.f7MJAyawHUdCegw7sWjrww',
        }).addTo(map);
        L.control.scale({
            position: 'bottomright'
        }).addTo(map);
        L.control.zoom({
            position: 'bottomright'
        }).addTo(map);

        $('#mdlPantau').on('show.bs.modal', function(){
            setTimeout(function() {
                map.invalidateSize();
            }, 10);
        });
    </script> --}}
@endsection