@extends('app.app')
@section('title')
    Transactions Special
@endsection
@section('content')
    <div class="container-fluid">
        <div class="content">
            {{-- template pickup and drop --}}
            <div id="templatePickDrop" class="d-none">
                <div class="card point-card" data-id="0">
                    <div class="card-body">
                        {{-- waktu pickup and drop --}}
                        <div class="row mb-3 d-flex align-items-center">
                            <div class="col-10 mb-3">
                                <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran <span class="point-rowno">0</span> <span class="text-danger">*</span></p>
                            </div>
                            <div class="col-2 text-end">
                                <button class="btn btn-sm btn-secondary point-minus">
                                    <span class="ion-minus"></span>
                                </button>
                            </div>
                            <div class="col-sm-5 col-5 mb-3">
                                <label class="form-label text-nowrap">Tanggal Penjemputan <span class="text-danger">*</span></label>
                                <input type="date" name="add-pickup_date" class="form-control">
                            </div>
                            <div class="col-2"></div>
                            <div class="col-sm-5 col-5 mb-3">
                                <label for="add-pickup_time" class="form-label text-nowrap">Waktu Penjemputan <span class="text-danger">*</span></label>
                                <div class="row">
                                    <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                        <select name="add-pickup_time_hour" class="form-control">
                                            <option value="" selected disabled hidden>--</option>
                                            @for ($i = 0; $i < 24; $i++)
                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                        <select name="add-pickup_time_minute" class="form-control">
                                            <option value="" selected disabled hidden>--</option>
                                            @for ($i = 0; $i < 60; $i++)
                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- location pickup and drop --}}
                        <div class="row mb-3 d-flex align-items-center">
                            <div class="col-5 mb-3">
                                <div class="form-group mb-2">
                                    <label for="add-pickup_zone" class="form-label">Lokasi Penjemputan <span class="text-danger">*</span></label>
                                    <select name="add-pickup_zone" class="form-control">
                                        <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                    </select>
                                </div>
                                <div class="form-group mb-2">
                                    <label for="add-pickup_pic_name" class="form-label text-nowrap">Nama Pengirim <span class="text-danger">*</span></label>
                                    <input type="text" name="add-pickup_pic_name" class="form-control">
                                </div>
                                <div class="form-group mb-2">
                                    <label for="add-pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim <span class="text-danger">*</span></label>
                                    <input type="text" name="add-pickup_pic_phone" class="form-control">
                                </div>
                            </div>
                            <div class="col-2 text-center">
                                <label for="" class="form-label mb-0 mt-2">&nbsp;</label>
                                <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                            </div>
                            <div class="col-5 mb-3">
                                <div class="form-group mb-2">
                                    <label for="add-drop_zone" class="form-label">Lokasi Pengantaran <span class="text-danger">*</span></label>
                                    <select name="add-drop_zone" class="form-control">
                                        <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                    </select>
                                </div>
                                <div class="form-group mb-2">
                                    <label for="add-drop_pic_name" class="form-label text-nowrap">Nama Penerima <span class="text-danger">*</span></label>
                                    <input type="text" name="add-drop_pic_name" class="form-control">
                                </div>
                                <div class="form-group mb-2">
                                    <label for="add-drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima <span class="text-danger">*</span></label>
                                    <input type="text" name="add-drop_pic_phone" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <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">Tambah Pengiriman Baru (Khusus)</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {{-- client --}}
                            <div class="row mb-3 d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Pengiriman Untuk Client</p>
                                    {{-- <small>Masukkan tanggal, jam, lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small> --}}
                                </div>
                                <div class="col-sm-5 col-5 mb-3">
                                    <label for="add-client" class="form-label text-nowrap">Pilih Client <span class="text-danger">*</span></label>
                                    <select name="add-client" id="add-client" class="select2 form-control">
                                        <option value="" selected disabled>Belum ada Client yang dipilih</option>
                                        @foreach ($uclients as $uclient)
                                            <option value="{{ $uclient->id }}" data-uid="{{ $uclient->id }}" data-cptid="{{ $uclient->client_group_id }}">
                                                {{ $uclient->first_name . " ($uclient->client_group_name)" }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" name="isClientPkp" type="checkbox" value="no" id="isClientPkp">
                                        <label class="form-check-label text-danger" for="isClientPkp">
                                            Apakah PKP ?
                                        </label>
                                    </div>
                                </div>
                            </div>
                            {{-- single waktu pickup and drop --}}
                            {{-- <div class="row mb-3 d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran</p>
                                    <small>Masukkan tanggal, jam, lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
                                </div>
                                <div class="col-sm-5 col-5 mb-3">
                                    <label for="add-pickup_date" class="form-label text-nowrap">Tanggal Penjemputan</label>
                                    <input type="date" name="add-pickup_date" id="add-pickup_date" class="form-control">
                                </div>
                                <div class="col-2"></div>
                                <div class="col-sm-5 col-5 mb-3">
                                    <label for="add-pickup_time" class="form-label text-nowrap">Waktu Penjemputan</label>
                                    <div class="row">
                                        <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                            <select name="add-pickup_time_hour" id="add-pickup_time_hour" class="form-control">
                                                <option value="" selected disabled hidden>--</option>
                                                @for ($i = 0; $i < 24; $i++)
                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                            <select name="add-pickup_time_minute" id="add-pickup_time_minute" class="form-control">
                                                <option value="" selected disabled hidden>--</option>
                                                @for ($i = 0; $i < 60; $i++)
                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- single location pickup and drop --}}
                            {{-- <div class="row mb-3 d-flex align-items-center">
                                <div class="col-5 mb-3">
                                    <div class="form-group mb-2">
                                        <label for="add-pickup_zone" class="form-label">Lokasi Penjemputan</label>
                                        <select name="add-pickup_zone" id="add-pickup_zone" class="select2 form-control">
                                            <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-2">
                                        <label for="add-pickup_pic_name" class="form-label text-nowrap">Nama Pengirim</label>
                                        <input type="text" name="add-pickup_pic_name" id="add-pickup_pic_name" class="form-control">
                                    </div>
                                    <div class="form-group mb-2">
                                        <label for="add-pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim</label>
                                        <input type="text" name="add-pickup_pic_phone" id="add-pickup_pic_phone" class="form-control">
                                    </div>
                                </div>
                                <div class="col-2 text-center">
                                    <label for="" class="form-label mb-0 mt-2">&nbsp;</label>
                                    <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                                </div>
                                <div class="col-5 mb-3">
                                    <div class="form-group mb-2">
                                        <label for="add-drop_zone" class="form-label">Lokasi Pengantaran</label>
                                        <select name="add-drop_zone" id="add-drop_zone" class="select2 form-control">
                                            <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-2">
                                        <label for="add-drop_pic_name" class="form-label text-nowrap">Nama Penerima</label>
                                        <input type="text" name="add-drop_pic_name" id="add-drop_pic_name" class="form-control">
                                    </div>
                                    <div class="form-group mb-2">
                                        <label for="add-drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima</label>
                                        <input type="text" name="add-drop_pic_phone" id="add-drop_pic_phone" class="form-control">
                                    </div>
                                </div>
                            </div> --}}
                            <div class="card bg-light">
                                <div class="card-header">
                                    <div class="row d-flex align-items-center">
                                        <div class="col">
                                            <p class="card-title text-bold mb-0">Penjemputan dan Pengantaran</p>
                                            <small>Masukkan tanggal, jam, lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
                                        </div>
                                        <div class="col text-end">
                                            <button id="point-add-row" class="btn btn-sm btn-danger">
                                                <span class="ion-plus"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="point-container" class="card-body"></div>
                            </div>
                            {{-- prefer type vehicle --}}
                            <div class="row d-flex align-items-center mb-3">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Informasi Kendaraan</p>
                                    {{-- <small>You must fill in at least 1 of the package information.</small> --}}
                                </div>
                                {{-- <div class="col-7 mb-3 text-bold">Description</div>
                                <div class="col-5 mb-3 text-bold">Unit</div>

                                <div class="col-7 mb-3">Weight</div>
                                <div class="col-5 mb-3 d-flex align-items-center">
                                    <input type="number" name="add-weight" id="add-weight" class="form-control w-75 me-2">Kg
                                </div>

                                <div class="col-7 mb-3">Volume</div>
                                <div class="col-5 mb-3 d-flex align-items-center">
                                    <input type="number" name="add-cbm" id="add-cbm" class="form-control w-75 me-2">m³
                                </div>

                                <div class="col-7 mb-3">Koli</div>
                                <div class="col-5 mb-3 d-flex align-items-center">
                                    <input type="number" name="add-koli" id="add-koli" class="form-control w-75 me-2">pcs
                                </div> --}}
                                <div class="col-5 mb-3">
                                    <label for="add-truck_type" class="form-label">Jenis Kendaraan <span class="text-danger">*</span></label>
                                    <select name="add-truck_type" id="add-truck_type" class="select2 form-control">
                                        {{-- <option value="" data-name="Let system choose automatically" selected>Let system
                                            choose automatically
                                        </option> --}}
                                        <option value="" selected disabled>Pilih kendaraan</option>
                                        @foreach ($truck_types as $tt)
                                            <option value="{{ $tt->type_id }}" data-id="{{ $tt->id }}" data-type_id="{{ $tt->type_id }}" data-name="{{ $tt->type_name }}">
                                                {{ $tt->type_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 mb-3">
                                    <label for="add-note_tonase" class="form-label">Catatan Tonase</label>
                                    <input type="text" name="add-note_tonase" id="add-note_tonase" class="form-control" placeholder="Tonase: 22 Ton / 58CBM">
                                </div>
                            </div>
                            {{-- packing list --}}
                            {{-- <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Package list</p>
                                    <small>Upload your packing list according to the specified format. don't have it? <a
                                            href="#" id="download_template_packing_list">Download packing list
                                            template</a></small>
                                </div>
                                <div id="add-group_upload_packinglist" class="col-sm-12">
                                    <label for="add-packinglist" class="form-label">Upload Packing List</label>
                                    <input class="form-control" type="file" name="add-packinglist" id="add-packinglist"
                                        required>
                                </div>
                                <div id="add-group_upload_packinglist_spinner" class="col-12 d-none">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- insurance --}}
                            <div class="row d-flex align-items-center mb-3 d-none">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Asuransi</p>
                                    <small>Apakah Anda ingin menambahkan Asuransi untuk pengiriman ini?</small>
                                </div>
                                <div class="col-5">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="insuranceCheck">
                                        <label class="form-check-label" for="insuranceCheck">
                                            Ya, Asuransikan pengiriman
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex align-items-center mb-3 pb-3 d-none" id="insurancePrice">
                                <div class="col-5">
                                    <label for="insuranceInput" class="form-label">Total Harga Pertanggungan (Rp)</label>
                                    <input type="text" name="insuranceInput" class="form-control" id="insuranceInput">
                                </div>
                            </div>
                            {{-- sell price --}}
                            <div class="row d-flex align-items-center mb-3">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Harga</p>
                                    <small>Masukkan harga kepada client sudah termasuk premi asuransi.</small>
                                </div>
                                <div class="col-5 mb-3">
                                    <label for="add-sellPrice" class="form-label">Harga (Rp) <span class="text-danger">*</span></label>
                                    <input type="text" name="add-sellPrice" id="add-sellPrice" class="form-control">
                                </div>
                                <div class="col-12 mb-3 d-none">
                                    <label for="add-item_bill_tax_type" class="form-label">Perpajakan <span class="text-danger">*</span></label>
                                    <select name="add-item_bill_tax_type" id="add-item_bill_tax_type" class="select2 form-control" style="width: 100% !important">
                                        <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_WITHOUT }}">Tanpa Pajak</option>
                                        <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_INCLUDE }}">Sudah Termasuk Pajak</option>
                                        <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_EXCLUDE }}">Belum Termasuk Pajak</option>
                                    </select>
                                </div>
                                <div class="col-12 d-none">
                                    <div class="row mb-3 groupTaxBill d-none">
                                        <div class="col">
                                            <label for="add-item_bill_tax_ppn_percent" class="form-label">Percent PPN % <span class="text-danger">*</span></label>
                                            <input type="number" name="add-item_bill_tax_ppn_percent" id="add-item_bill_tax_ppn_percent" class="form-control" readonly>
                                        </div>
                                        <div class="col">
                                            <label for="add-item_bill_tax_ppn_flat" class="form-label">Harga PPN (Rp) <span class="text-danger">*</span></label>
                                            <input type="text" name="add-item_bill_tax_ppn_flat" id="add-item_bill_tax_ppn_flat" class="form-control" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 d-none">
                                    <div class="row mb-3 groupTaxBill d-none">
                                        <div class="col">
                                            <label for="add-item_bill_tax_pph_percent" class="form-label">Percent PPH % <span class="text-danger">*</span></label>
                                            <input type="number" name="add-item_bill_tax_pph_percent" id="add-item_bill_tax_pph_percent" class="form-control" readonly>
                                        </div>
                                        <div class="col">
                                            <label for="add-item_bill_tax_pph_flat" class="form-label">Harga PPH (Rp) <span class="text-danger">*</span></label>
                                            <input type="text" name="add-item_bill_tax_pph_flat" id="add-item_bill_tax_pph_flat" class="form-control" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3 d-none">
                                    <label for="add-item_bill_tax_total_flat" class="form-label">Harga Setelah Kalkulasi Pajak (Rp) <span class="text-danger">*</span></label>
                                    <input type="text" name="add-item_bill_tax_total_flat" id="add-item_bill_tax_total_flat" class="form-control" value="0" readonly>
                                </div>
                            </div>
                            {{-- Termin --}}
                            <div class="row d-flex align-items-start mt-3">
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Termin 1</p>
                                        <small>Masukkan termin 1</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-sell_termin1_amt_type" class="form-label text-nowrap">Jenis Jumlah <span class="text-danger">*</span></label>
                                        <select name="add-sell_termin1_amt_type" id="add-sell_termin1_amt_type" class="select2 form-control">
                                            <option value="" selected>Tidak dipilih</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_FLAT }}">Flat</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_PERCENT }}">Percent</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 sell_subTermin1 d-none">
                                        <label for="add-sell_termin1_amt" class="form-label text-nowrap">Jumlah <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" name="add-sell_termin1_amt" id="add-sell_termin1_amt" class="form-control" placeholder="">
                                            <span class="input-group-text" id="add-sell_termin1_amt-icon">%</span>
                                        </div>
                                        <small class="text-dark sell_subTermin1-calc_percent">Jumlah Flat: Rp<span id="add-sell_termin1_calc_percent" data-val="0"></span></small>
                                    </div>
                                    <div class="mb-3 sell_subTermin1 d-none">
                                        <label for="add-sell_termin1_date" class="form-label text-nowrap">Tanggal <span class="text-danger">*</span></label>
                                        <input type="date" name="add-sell_termin1_date" id="add-sell_termin1_date" class="form-control">
                                    </div>
                                    <div class="mb-3 sell_subTermin1 d-none">
                                        <label for="add-sell_termin1_time" class="form-label text-nowrap">Waktu <span class="text-danger">*</span></label>
                                        {{-- <input type="time" name="add-sell_termin1_time" id="add-sell_termin1_time" class="form-control"
                                            min="23:30"> --}}
                                        <div class="row">
                                            <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                <select name="add-sell_termin1_time_hour" id="add-sell_termin1_time_hour" class="form-control">
                                                    <option value="" selected disabled hidden>--</option>
                                                    @for ($i = 0; $i < 24; $i++)
                                                        <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                <select name="add-sell_termin1_time_minute" id="add-sell_termin1_time_minute" class="form-control">
                                                    <option value="" selected disabled hidden>--</option>
                                                    @for ($i = 0; $i < 60; $i++)
                                                        <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2"></div>
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Termin 2</p>
                                        <small>Masukkan sell_termin 2</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-sell_termin2_amt_type" class="form-label text-nowrap">Jenis Jumlah <span class="text-danger">*</span></label>
                                        <select name="add-sell_termin2_amt_type" id="add-sell_termin2_amt_type" class="select2 form-control" disabled>
                                            <option value="" selected>Tidak dipilih</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_FLAT }}">Flat</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_PERCENT }}">Percent</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 sell_subTermin2 d-none">
                                        <label for="add-sell_termin2_amt" class="form-label text-nowrap">Jumlah <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" name="add-sell_termin2_amt" id="add-sell_termin2_amt" class="form-control" placeholder="" readonly>
                                            <span class="input-group-text" id="add-sell_termin2_amt-icon">%</span>
                                        </div>
                                        <small class="text-dark sell_subTermin2-calc_percent">Jumlah Flat: Rp<span id="add-sell_termin2_calc_percent" data-val="0"></span></small>
                                    </div>
                                </div>
                            </div>
                            {{-- lead time --}}
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Durasi Pengantaran</p>
                                    <small>Masukkan berapa lama durasi pengantaran.</small>
                                </div>
                                <div class="col-5">
                                    <label for="add-leadTime" class="form-label">Lama Hari <span class="text-danger">*</span></label>
                                    <input type="number" name="add-leadTime" id="add-leadTime" class="form-control">
                                </div>
                            </div>
                        </div>
                        {{-- <div class="card-footer">
                            <div class="row d-flex align-items-center">
                                <div class="col-8">
                                    <p class="mb-0">
                                        Sudahkah Anda mengisi semua kolom yang ada?
                                    </p>
                                </div>
                                <div class="col-4 text-end">
                                    <button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Kalkulasi Sekarang</button>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                <div class="col-sm-6">
                    {{-- Vendor & Driver & Termin --}}
                    <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">Vendor & Pengemudi</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row d-flex align-items-start">
                                <div class="col-sm-5 col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Informasi Vendor</p>
                                    </div>
                                    <div class="mb-3">
                                        {{-- suggestion --}}
                                        <label for="add-vdr_name" class="form-label text-nowrap">Nama Vendor <span class="text-danger">*</span></label>
                                        <input type="text" name="add-vdr_name" id="add-vdr_name" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        {{-- lock from here --}}
                                        <label for="add-vdr_phone" class="form-label text-nowrap">Nomor Telepon <span class="text-danger">*</span></label>
                                        <input type="number" name="add-vdr_phone" id="add-vdr_phone" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        {{-- lock from here --}}
                                        <label for="add-vdr_email" class="form-label text-nowrap">Email <span class="text-danger">*</span></label>
                                        <input type="email" name="add-vdr_email" id="add-vdr_email" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vdr_addr" class="form-label text-nowrap">Alamat <span class="text-danger">*</span></label>
                                        <textarea name="add-vdr_addr" id="add-vdr_addr" cols="30" rows="5" class="form-control"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Pembayaran</p>
                                        <small>Masukkan informasi pembayaran vendor.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vdr_bank" class="form-label">Bank <span class="text-danger">*</span></label>
                                        <select id="add-vdr_bank" name="add-vdr_bank" class="form-control select2" style="width:100%;">
                                            <option value="" selected disabled>Choose</option>
                                            @foreach ($banks as $bank)
                                                <option value="{{ $bank->bank_code }}" data-id="{{ $bank->id }}" data-code="{{ $bank->bank_code }}" data-short="{{ $bank->bank_short_name }}" data-name="{{ $bank->bank_name }}">{{ $bank->bank_short_name . ' (' . $bank->bank_code . ')' }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vdr_kcp" class="form-label">KCP <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" name="add-vdr_kcp" id="add-vdr_kcp" placeholder="KCP Rempoa">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vdr_acc_number" class="form-label">Nomor Rekening <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control form-control-sm" name="add-vdr_acc_number" id="add-vdr_acc_number">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vdr_acc_name" class="form-label">Pemilik Rekening <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" name="add-vdr_acc_name" id="add-vdr_acc_name">
                                    </div>
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5 col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Kendaraan & Pengemudi</p>
                                    </div>
                                    <div class="mb-3">
                                        {{-- lock from here --}}
                                        <label for="add-device_id" class="form-label text-nowrap">Device ID</label>
                                        {{-- <input type="number" name="add-device_id" id="add-device_id" class="form-control" placeholder=""> --}}
                                        <select id="add-device_id" class="form-control" style="width:100%;">
                                            <option value="">Tidak ada device yang digunakan</option>
                                            {{-- <option value="{{ $device->id }}" data-device_id="{{ $device->device_id }}" data-simcard="{{ $device->simcard }}">{{ $device->device_id . ' (' . implode(' ', str_split('0' . $device->simcard, 4)) . ')' }}</option> --}}
                                            @foreach ($devices as $device)
                                                <option value="{{ $device->id }}" data-device_id="{{ $device->device_id }}" data-simcard="{{ $device->simcard }}">{{ $device->name . ' (' . implode(' ', str_split($device->device_id, 4)) . ')' }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        {{-- lock from here --}}
                                        <label for="add-vhc_nopol" class="form-label text-nowrap">Plat Nomor Kendaraan <span class="text-danger">*</span></label>
                                        <input type="text" name="add-vhc_nopol" id="add-vhc_nopol" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vhc_stnk_taxexp" class="col-form-label">Tax Expired: <span class="text-danger">*</span></label>
                                        <input type="date" id="add-vhc_stnk_taxexp" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-vhc_kir_exp" class="col-form-label">Kir Expired: <span class="text-danger">*</span></label>
                                        <input type="date" id="add-vhc_kir_exp" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        {{-- suggestion --}}
                                        <label for="add-drv_name" class="form-label text-nowrap">Nama Pengemudi 1 <span class="text-danger">*</span></label>
                                        <input type="text" name="add-drv_name" id="add-drv_name" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-drv_name2" class="form-label text-nowrap">Nama Pengemudi 2</label>
                                        <input type="text" name="add-drv_name2" id="add-drv_name2" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        {{-- lock from here --}}
                                        <label for="add-drv_phone" class="form-label text-nowrap">Nomor Telepon 1 <span class="text-danger">*</span></label>
                                        <input type="number" name="add-drv_phone" id="add-drv_phone" class="form-control" placeholder="">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-drv_phone2" class="form-label text-nowrap">Nomor Telepon 2</label>
                                        <input type="number" name="add-drv_phone2" id="add-drv_phone2" class="form-control" placeholder="">
                                    </div>
                                    <div class="groupBankDriver">
                                        <div class="mb-3">
                                            <p class="text-danger text-bold mb-0">Transfer Uang Saku</p>
                                            <small>Masukkan informasi rekening untuk transfer uang saku driver.</small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-drv_bank" class="form-label">Bank <span class="text-danger">*</span></label>
                                            <select id="add-drv_bank" name="add-drv_bank" class="form-control select2" style="width:100%;">
                                                <option value="" selected disabled>Choose</option>
                                                @foreach ($banks as $bank)
                                                    <option value="{{ $bank->bank_code }}" data-id="{{ $bank->id }}" data-code="{{ $bank->bank_code }}" data-short="{{ $bank->bank_short_name }}" data-name="{{ $bank->bank_name }}">{{ $bank->bank_short_name . ' (' . $bank->bank_code . ')' }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-drv_kcp" class="form-label">KCP</label>
                                            <input type="text" class="form-control form-control-sm" name="add-drv_kcp" id="add-drv_kcp" placeholder="KCP Rempoa">
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-drv_acc_number" class="form-label">Nomor Rekening <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control form-control-sm" name="add-drv_acc_number" id="add-drv_acc_number">
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-drv_acc_name" class="form-label">Pemilik Rekening <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" name="add-drv_acc_name" id="add-drv_acc_name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- Biaya Vendor --}}
                            <div class="row d-flex align-items-start mt-3 thePriceVendor">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Biaya</p>
                                    <small>Masukkan biaya kepada vendor.</small>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" name="isVendorPkp" type="checkbox" value="no" id="isVendorPkp">
                                        <label class="form-check-label text-danger" for="isVendorPkp">
                                            Apakah PKP ?
                                        </label>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="add-buyPrice" class="form-label">Biaya (Rp) <span class="text-danger">*</span></label>
                                    <input type="text" name="add-buyPrice" id="add-buyPrice" class="form-control">
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="add-item_tax_type" class="form-label">Perpajakan <span class="text-danger">*</span></label>
                                    <select name="add-item_tax_type" id="add-item_tax_type" class="select2 form-control" style="width: 100% !important">
                                        {{-- <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_WITHOUT }}">Tanpa Pajak</option> --}}
                                        <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_EXCLUDE }}">Belum Termasuk Pajak</option>
                                        <option value="{{ App\Models\OrdersAItems::AMT_TAX_TYPE_INCLUDE }}">Sudah Termasuk Pajak</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <div class="row mb-3 groupPpn d-none">
                                        <div class="col">
                                            <label for="add-item_tax_ppn_percent" class="form-label">Percent PPN % <span class="text-danger">*</span></label>
                                            <input type="number" name="add-item_tax_ppn_percent" id="add-item_tax_ppn_percent" class="form-control" readonly>
                                        </div>
                                        <div class="col">
                                            <label for="add-item_tax_ppn_flat" class="form-label">Biaya PPN (Rp) <span class="text-danger">*</span></label>
                                            <input type="text" name="add-item_tax_ppn_flat" id="add-item_tax_ppn_flat" class="form-control" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row mb-3 groupTax d-none">
                                        <div class="col">
                                            <label for="add-item_tax_pph_percent" class="form-label">Percent PPH % <span class="text-danger">*</span></label>
                                            <input type="number" name="add-item_tax_pph_percent" id="add-item_tax_pph_percent" class="form-control" readonly>
                                        </div>
                                        <div class="col">
                                            <label for="add-item_tax_pph_flat" class="form-label">Biaya PPH (Rp) <span class="text-danger">*</span></label>
                                            <input type="text" name="add-item_tax_pph_flat" id="add-item_tax_pph_flat" class="form-control" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <label for="add-item_tax_total_flat" class="form-label">Biaya Setelah Kalkulasi Pajak (Rp) <span class="text-danger">*</span></label>
                                    <input type="text" name="add-item_tax_total_flat" id="add-item_tax_total_flat" class="form-control" value="0" readonly>
                                </div>
                            </div>
                            {{-- Termin --}}
                            <div class="row d-flex align-items-start mt-3 theTerminVendor">
                                {{-- <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Harga</p>
                                    <small>Masukkan harga beli kepada vendor.</small>
                                </div>
                                <div class="col-5">
                                    <label for="add-buyPrice" class="form-label">Biaya (Rp)</label>
                                    <input type="number" name="add-buyPrice" id="add-buyPrice" class="form-control">
                                </div> --}}
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Termin 1</p>
                                        <small>Masukkan termin 1</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-termin1_amt_type" class="form-label text-nowrap">Jenis Jumlah <span class="text-danger">*</span></label>
                                        <select name="add-termin1_amt_type" id="add-termin1_amt_type" class="select2 form-control">
                                            <option value="" selected>Tidak dipilih</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_FLAT }}">Flat</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_PERCENT }}">Percent</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 subTermin1 d-none">
                                        <label for="add-termin1_amt" class="form-label text-nowrap">Jumlah <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" name="add-termin1_amt" id="add-termin1_amt" class="form-control" placeholder="">
                                            <span class="input-group-text" id="add-termin1_amt-icon">%</span>
                                        </div>
                                        <small class="text-dark subTermin1-calc_percent">Jumlah Flat: Rp<span id="add-termin1_calc_percent" data-val="0"></span></small>
                                        <span id="add-termin1_calc_percent_base" class="d-none" data-val="0"></span>
                                    </div>
                                    <div class="mb-3 subTermin1 d-none">
                                        <label for="add-termin1_date" class="form-label text-nowrap">Tanggal <span class="text-danger">*</span></label>
                                        <input type="date" name="add-termin1_date" id="add-termin1_date" class="form-control">
                                    </div>
                                    <div class="mb-3 subTermin1 d-none">
                                        <label for="add-termin1_time" class="form-label text-nowrap">Waktu <span class="text-danger">*</span></label>
                                        {{-- <input type="time" name="add-termin1_time" id="add-termin1_time" class="form-control"
                                            min="23:30"> --}}
                                        <div class="row">
                                            <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                <select name="add-termin1_time_hour" id="add-termin1_time_hour" class="form-control">
                                                    <option value="" selected disabled hidden>--</option>
                                                    @for ($i = 0; $i < 24; $i++)
                                                        <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                <select name="add-termin1_time_minute" id="add-termin1_time_minute" class="form-control">
                                                    <option value="" selected disabled hidden>--</option>
                                                    @for ($i = 0; $i < 60; $i++)
                                                        <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2"></div>
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Termin 2</p>
                                        <small>Masukkan termin 2</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-termin2_amt_type" class="form-label text-nowrap">Jenis Jumlah <span class="text-danger">*</span></label>
                                        <select name="add-termin2_amt_type" id="add-termin2_amt_type" class="select2 form-control" disabled>
                                            <option value="" selected>Tidak dipilih</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_FLAT }}">Flat</option>
                                            <option value="{{ \App\Models\OrdersTermins::AMT_TYPE_PERCENT }}">Percent</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 subTermin2 d-none">
                                        <label for="add-termin2_amt" class="form-label text-nowrap">Jumlah <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" name="add-termin2_amt" id="add-termin2_amt" class="form-control" placeholder="" readonly>
                                            <input type="text" name="add-termin2_amt_base" id="add-termin2_amt_base" class="form-control d-none" placeholder="" readonly hidden>
                                            <span class="input-group-text" id="add-termin2_amt-icon">%</span>
                                        </div>
                                        <small class="text-dark subTermin2-calc_percent">Jumlah Flat: Rp<span id="add-termin2_calc_percent" data-val="0"></span></small>
                                        <span id="add-termin2_calc_percent_base" class="d-none" data-val="0"></span>
                                    </div>
                                </div>
                            </div>
                            {{-- Uang Saku --}}
                            <div class="row d-flex align-items-start mt-3 groupUangSaku d-none">
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">Uang Saku</p>
                                        <small>Uang Saku untuk Driver</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add_uang_saku" class="form-label text-nowrap">Pilih Uang Saku <span class="text-danger">*</span></label>
                                        <select name="add_uang_saku" id="add_uang_saku" class="select2 form-control">
                                            <option value="" selected>Belum Dipilih Uang Saku</option>
                                        </select>
                                    </div>
                                    <div>
                                        <div class="mb-1">
                                            <p class="text-danger text-bold mb-0">Checkpoint</p>
                                        </div>
                                        <div class="groupSakuCheckpointName">
                                            <div class="mb-3">
                                                <label for="add_uang_saku_checkpoint" class="form-label text-nowrap">Titik Lokasi <span class="text-danger">*</span></label>
                                                <input type="text" name="add_uang_saku_checkpoint[]" class="form-control" value="${point.pck_name}" data-id="${point.id}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2"></div>
                                <div class="col-5">
                                    <div class="mb-3">
                                        <p class="text-danger text-bold mb-0">&nbsp;</p>
                                        <small>&nbsp;</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add_type_uang_saku" class="form-label text-nowrap">Type Uang Saku <span class="text-danger">*</span></label>
                                        <select name="add_type_uang_saku" id="add_type_uang_saku" class="select2 form-control" aria-readonly="true" readonly>
                                            <option value="0" selected>Uang Saku Belum Dipilih</option>
                                            <option value="{{ \App\Models\PocketMoney::TYPE_BUNDLE }}">{{ \App\Models\PocketMoney::TYPE_BUNDLE_TEXT }}</option>
                                            <option value="{{ \App\Models\PocketMoney::TYPE_CHECKPOINTS }}">{{ \App\Models\PocketMoney::TYPE_CHECKPOINTS_TEXT }}</option>
                                        </select>
                                    </div>
                                    <div>
                                        <div class="mb-1">
                                            <p class="text-danger text-bold mb-0">&nbsp;</p>
                                        </div>
                                        <div class="groupSakuCheckpointTotal">
                                            <div class="mb-3">
                                                <label for="add_uang_saku_total" class="form-label text-nowrap">Total (Rp) <span class="text-danger">*</span></label>
                                                <input type="text" name="add_uang_saku_total[]" class="form-control" value="${total}" placeholder="" readonly>
                                                {{-- <div class="input-group">
                                                    <input type="text" name="add_uang_saku_total" id="add_uang_saku_total" class="form-control" placeholder="">
                                                    <span class="input-group-text" id="add_uang_saku_total-icon">Rp</span>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row d-flex align-items-center">
                                <div class="col-8">
                                    <p class="mb-0">
                                        Sudahkah Anda mengisi semua kolom yang ada?
                                    </p>
                                </div>
                                <div class="col-4 text-end">
                                    <button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Kalkulasi Sekarang</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Checkout --}}
                    <div class="card d-none" id="checkOutView">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Checkout</p>
                                </div>
                            </div>
                        </div>
                        <div id="checkout-spinner" class="card-body pb-0 d-none">
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0 checkoutBody">
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran</p>
                                </div>
                                <div class="col-sm-5 mb-3">
                                    <label for="" class="form-label">Tanggal Penjemputan</label>
                                    <div class="card bg-light border mb-0">
                                        <div class="card-body">
                                            <p id="checkout-pickup_at" class="mb-0">Feb 22, 2022 23:59:00</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="checkout-point_container">
                                <div class="row d-flex align-items-center">
                                    <div class="col-5 mb-3">
                                        <label for="" class="form-label">Lokasi Penjemputan</label>
                                        <div class="card bg-light border mb-0">
                                            <div class="card-body">
                                                <p id="checkout-pickup_zone_title" class="text-bold mb-2">Gudang Pluit SiCepat
                                                    (Jakarta)</p>
                                                <p id="checkout-pickup_zone_addr" class="mb-0">Jl. Pluit Karang Karya
                                                    2 No.33, RT.7/RW.16, Pejagalan,
                                                    Kec. Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta 14440</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2 text-center">
                                        <label for="" class="form-label mb-0 mt-0">&nbsp;</label>
                                        {{-- <p class="mb-0">to</p> --}}
                                        <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                                    </div>
                                    <div class="col-5 mb-3">
                                        <label for="" class="form-label">Lokasi Pengantaran</label>
                                        <div class="card bg-light border mb-0">
                                            <div class="card-body">
                                                <p id="checkout-drop_zone_title" class="text-bold mb-2">Kantor Pusat SiCepat
                                                    (yogyakarta)</p>
                                                <p id="checkout-drop_zone_addr" class="mb-0">Jl. Prof. Herman Yohanes
                                                    No.989, Terban, Gondokusuman,
                                                    Kota Yogyakarta, Daerah Istimewa Yogyakarta 55223, Indonesia</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex align-items-center">
                                <div class="col-sm-5 mb-3">
                                    <label for="" class="form-label">Jenis Kendaraan</label>
                                    <div class="card bg-light border mb-0">
                                        <div class="card-body">
                                            <p id="checkout-truck_type" class="mb-0">CDD Long</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="row d-flex align-items-center mb-3">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Informasi Pengiriman</p>
                                </div>
                                <div id="checkout-unit" class="row mb-3">
                                    <div class="col-sm-5">
                                        <label for="" class="form-label">Koli</label>
                                        <div class="card bg-light border mb-0 w-100">
                                            <div class="card-body">
                                                <p class="mb-0">150 Pcs</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-5">
                                    <label for="" class="form-label">Jenis Kendaraan</label>
                                    <div class="card bg-light border mb-0 w-100">
                                        <div class="card-body">
                                            <p id="checkout-truck_type" class="mb-0">Box Truck</p>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Package list</p>
                                </div>
                                <div class="col-sm-12">
                                    <label for="formFile" class="form-label">File Packing List</label>
                                    <div class="d-flex align-items-center mb-3">
                                        <p class="mb-0 text-success me-4">package-list.xlsx</p>
                                        <button id="checkout-download_packing_list"
                                            class="btn btn-sm btn-info">Download</button>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="row">
                                <div class="col-12">
                                    <hr>
                                </div>
                            </div>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3 mt-3">
                                    <p class="text-danger text-bold mb-0">Pilih Layanan</p>
                                    <small>Berikut layanan yang tersedia untuk pesanan Anda</small>
                                </div>
                                <div class="col-sm-12">
                                    <div class="row mb-3">
                                        <div class="col-12">Durasi Pengantaran</div>
                                    </div>
                                    <div id="checkout-group_pricing">
                                        {{-- <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="chooseFleet"
                                                        id="chooseFleet1" data-lead_time="1" data-price="2040000">
                                                    <label class="form-check-label text-success" for="chooseFleet1">
                                                        1 Day <span class="badge bg-success ms-2">Best services</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-2 text-end text-bold">
                                                <p class="text-bold m-0 text-success" for="chooseFleet1">Rp2.040.000</p>
                                            </div>
                                        </div>
                                        <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="chooseFleet"
                                                        id="chooseFleet2" data-lead_time="2" data-price="1740000">
                                                    <label class="form-check-label" for="chooseFleet2">
                                                        2 Days
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-2 text-end text-bold">
                                                <p class="text-bold m-0" for="chooseFleet2">Rp1.740.000</p>
                                            </div>
                                        </div>
                                        <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="chooseFleet"
                                                        id="chooseFleet3" data-lead_time="4" data-price="740000">
                                                    <label class="form-check-label" for="chooseFleet3">
                                                        4 Days
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-2 text-end text-bold">
                                                <p class="text-bold m-0" for="flexRadioDefault3">Rp740.000</p>
                                            </div>
                                        </div> --}}
                                        <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="chooseFleet" data-lead_time_id="${opt.lead_time_id}" data-lead_time="${opt.lead_time}" data-price="${opt.price}" data-real_price="${opt.real_price}" data-disc_price="${opt.disc_price}">
                                                    <label class="form-check-label text-success">
                                                        1 Hari <span class="badge bg-success ms-2">Best services</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6 text-end text-bold">
                                                <p class="text-bold m-0 text-danger"><strike>Rp1.600.000</strike></p>
                                                <p class="text-bold m-0 text-dark">Diskon 10%</p>
                                                <p class="text-bold m-0 text-success">Rp1.440.000</p>
                                            </div>
                                        </div>
                                        <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="chooseFleet" data-lead_time_id="${opt.lead_time_id}" data-lead_time="${opt.lead_time}" data-price="${opt.price}" data-real_price="${opt.real_price}" data-disc_price="${opt.disc_price}">
                                                    <label class="form-check-label text-dark">
                                                        2 Hari
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6 text-end text-bold">
                                                <p class="text-bold m-0 text-dark">Rp1.250.000</p>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row mb-3 d-flex align-items-center">
                                            <div class="col-6">
                                                <p class="mb-0">Biaya Asuransi</p>
                                            </div>
                                            <div class="col-6 text-end text-bold">
                                                <p class="text-bold m-0 text-dark">Rp302.892</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer checkoutBody">
                            <div class="row d-flex align-items-center">
                                <div class="col-8">
                                    <p class="text-danger mb-0">Harga layanan yang tercantum adalah harga perkiraan, bukan
                                        harga Final.</p>
                                    <p class="mb-0">
                                        Sudahkah Anda memeriksa ulang informasi pesanan?
                                    </p>
                                </div>
                                <div class="col-4 text-end">
                                    <button class="btn btn-danger btn-block btn-sm" id="btnOrder" {{-- onclick="location.href='{{ route('view_user_client_transaction') }}'" --}} disabled>Pesan Sekarang</button>
                                    <div id="btnOrderSpinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customcss')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
@endsection
@section('customjs')
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
        $("#insuranceCheck").change(function() {
            $("#insurancePrice").toggleClass("d-none")
            if ($("#insurancePrice").hasClass("d-none")) {
                $("#insuranceInput").removeAttr('required')
            } else {
                $("#insuranceInput").prop('required', true);
            }
        })
    </script>
    <script>
        'use strict';
        const State = {
            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
            storage_lara: "{{ asset('storage') }}/",
            checked_packing_list: 0, // 0:not, 1:process, 2:valid, 3:fail
            input_packing_list: [],
            weight: 0,
            cbm: 0,
            koli: 0,
            qty: 0,
            delay_typing_fast: 1000,
            discount_type: {
                no: "{{ App\Models\Clients::DISC_TYPE_NO }}",
                fix: "{{ App\Models\Clients::DISC_TYPE_FIX }}",
                percent: "{{ App\Models\Clients::DISC_TYPE_PERCENT }}",
            },
            workflow_type: {
                pickup: "{{ App\Models\Zone::ZONE_WORKFLOW_PICKUP }}",
                drop: "{{ App\Models\Zone::ZONE_WORKFLOW_DEST }}",
            },
            role: {
                vendor: "{{ App\Models\Users::ROLE_VENDOR }}",
            },
            termin_amt_type: {
                flat: "{{ \App\Models\OrdersTermins::AMT_TYPE_FLAT }}",
                percent: "{{ \App\Models\OrdersTermins::AMT_TYPE_PERCENT }}",
            },
            client_pkp: {
                non_pkp: "{{ \App\Models\OrdersClients::IS_NON_PKP }}",
                pkp: "{{ \App\Models\OrdersClients::IS_PKP_YES }}",
            },
            tax_type: {
                without: "{{ App\Models\OrdersAItems::AMT_TAX_TYPE_WITHOUT }}",
                include: "{{ App\Models\OrdersAItems::AMT_TAX_TYPE_INCLUDE }}",
                exclude: "{{ App\Models\OrdersAItems::AMT_TAX_TYPE_EXCLUDE }}",
                ppn_percent: "{{ App\Models\OrdersAItems::PPN_PERCENT }}",
                ppn_percent_include: Number("{{ App\Models\OrdersAItems::PPN_PERCENT_INCLUDE }}"),
                pph_percent: "{{ App\Models\OrdersAItems::PPH_PERCENT }}",
            },
            is_vdr_bcng: {
                current: "{{ App\Models\Users::IS_VDR_BCNG_NO }}",
                no: "{{ App\Models\Users::IS_VDR_BCNG_NO }}",
                yes: "{{ App\Models\Users::IS_VDR_BCNG_YES }}",
            },
            delay_type_tax: 500,
            delay_type_margin_calc: 1000,
            l_pck_zones: [],
            l_drop_zones: [],
            l_pockets: [],
            route_list_trx: "{{ route('view_transactions') }}",
            countClickAddPoint: 0,
            eventChangeIsVdrBcng: null,
            eventGetPocket: null,
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                TrxNew.activate();
                MultiplePoint.activate();
            },
            event: function() {
                $('#checkout-group_pricing').on('click', 'input[name=chooseFleet]', function() {
                    $('#btnOrder').prop("disabled", false);
                });
                // min date is today
                let TimeISOString = moment().toISOString().split('T');
                let time = TimeISOString[1].split('.')[0].split(':');
                // $('#add-pickup_date').attr('min', TimeISOString[0]);
                // $('#add-pickup_time').attr('min', time[0] + ':' + time[1]);
            },
            calcMargin: function(sell, buy) {
                return (Number(sell) - Number(buy)).toFixed(2);
            },
            calcPercentMargin: function(margin, buy) {
                return ((Number(margin) / Number(buy)) * 100).toFixed(2);
            },
            calcMarginNPercentFtl(sell_price, buy_price) {
                let margin = Wrapper.calcMargin(sell_price, buy_price);
                let percent = Wrapper.calcPercentMargin(margin, buy_price);
                percent = (isNaN(percent)) ? 0 : percent;
                $('#add-item_bill_tax_total_flat').data('margin', (new Intl.NumberFormat('id-ID')).format(margin));
                $('#add-item_bill_tax_total_flat').data('percent', percent);
            },
            calcTerminBuyPrice(isAlert = false) {
                let base_buy_price = Number($('#add-buyPrice').val().split('.').join('').split(',').join('.'));
                let buy_price = Number($('#add-item_tax_total_flat').val().split('.').join('').split(',').join('.'));
                // buy price - termin
                let termin1_amt_type = $('#add-termin1_amt_type').val();
                let termin1_amt = Number($('#add-termin1_amt').val().split('.').join('').split(',').join('.'));

                if (isNaN(buy_price) || buy_price < 1) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Biaya belum diisi');
                    return false;
                }
                if (isNaN(termin1_amt) || termin1_amt < 1) {
                    // if (isAlert) Helper.toast('Warning', 'just now', 'Jumlah termin 1 belum diisi');
                    return false;
                }

                if (termin1_amt_type == State.termin_amt_type.flat) {
                    if (buy_price < termin1_amt) {
                        Helper.toast('Warning', 'just now', 'Biaya tidak boleh kurang dari termin 1');
                        $('#add-termin2_amt').val(0);
                        return false;
                    }
                    let price2 = buy_price - termin1_amt;
                    $('#add-termin2_amt').val((price2 + '').split('.').join(',')).trigger('change');
                    $('#add-termin1_calc_percent').data('val', 0);
                    $('#add-termin2_calc_percent').data('val', 0);
                    $('#add-termin1_calc_percent').text((new Intl.NumberFormat('id-ID')).format(0));
                    $('#add-termin2_calc_percent').text((new Intl.NumberFormat('id-ID')).format(0));

                    let base_price2 = base_buy_price - termin1_amt;
                    $('#add-termin2_amt_base').val((base_price2 + '').split('.').join(','));
                    $('#add-termin1_calc_percent_base').data('val', 0);
                    $('#add-termin2_calc_percent_base').data('val', 0);
                    $('#add-termin1_calc_percent_base').text((new Intl.NumberFormat('id-ID')).format(0));
                    $('#add-termin2_calc_percent_base').text((new Intl.NumberFormat('id-ID')).format(0));
                } else if (termin1_amt_type == State.termin_amt_type.percent) {
                    if (termin1_amt > 100) {
                        Helper.toast('Warning', 'just now', 'termin 1 tidak boleh lebih dari 100%');
                        $('#add-termin2_amt').val(0);
                        return false;
                    }
                    let disc_price1 = buy_price * termin1_amt / 100;
                    let price1 = buy_price - disc_price1;
                    let percent2 = (100 - termin1_amt);
                    let disc_price2 = buy_price * percent2 / 100;
                    let price2 = buy_price - disc_price2;
                    $('#add-termin2_amt').val(percent2).trigger('change');
                    $('#add-termin1_calc_percent').data('val', disc_price1);
                    $('#add-termin2_calc_percent').data('val', disc_price2);
                    $('#add-termin1_calc_percent').text((new Intl.NumberFormat('id-ID')).format(disc_price1));
                    $('#add-termin2_calc_percent').text((new Intl.NumberFormat('id-ID')).format(disc_price2));

                    let base_disc_price1 = base_buy_price * termin1_amt / 100;
                    let base_price1 = base_buy_price - base_disc_price1;
                    let base_percent2 = (100 - termin1_amt);
                    let base_disc_price2 = base_buy_price * base_percent2 / 100;
                    let base_price2 = base_buy_price - base_disc_price2;
                    $('#add-termin2_amt').data('base_buy_price', base_percent2);
                    $('#add-termin1_calc_percent_base').data('val', base_disc_price1);
                    $('#add-termin2_calc_percent_base').data('val', base_disc_price2);
                    $('#add-termin1_calc_percent_base').text((new Intl.NumberFormat('id-ID')).format(base_disc_price1));
                    $('#add-termin2_calc_percent_base').text((new Intl.NumberFormat('id-ID')).format(base_disc_price2));
                } else {
                    $('#add-termin1_calc_percent').data('val', 0);
                    $('#add-termin2_calc_percent').data('val', 0);
                    $('#add-termin1_calc_percent').text('');
                    $('#add-termin2_calc_percent').text('');

                    $('#add-termin1_calc_percent_base').data('val', 0);
                    $('#add-termin2_calc_percent_base').data('val', 0);
                    $('#add-termin1_calc_percent_base').text('');
                    $('#add-termin2_calc_percent_base').text('');
                }
            },
            calcTerminSellPrice(isAlert = false) {
                let sell_price = Number($('#add-item_bill_tax_total_flat').val().split('.').join('').split(',').join('.'));
                // sell price - termin
                let sell_termin1_amt_type = $('#add-sell_termin1_amt_type').val();
                let sell_termin1_amt = Number($('#add-sell_termin1_amt').val().split('.').join('').split(',').join('.'));

                if (isNaN(sell_price) || sell_price < 1) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Harga belum diisi');
                    return false;
                }
                if (isNaN(sell_termin1_amt) || sell_termin1_amt < 1) {
                    // if (isAlert) Helper.toast('Warning', 'just now', 'Jumlah termin 1 belum diisi');
                    return false;
                }

                if (sell_termin1_amt_type == State.termin_amt_type.flat) {
                    if (sell_price < sell_termin1_amt) {
                        Helper.toast('Warning', 'just now', 'Harga tidak boleh kurang dari termin 1');
                        $('#add-sell_termin2_amt').val(0);
                        return false;
                    }
                    let price2 = sell_price - sell_termin1_amt;
                    $('#add-sell_termin2_amt').val((price2 + '').split('.').join(',')).trigger('change');
                    $('#add-sell_termin1_calc_percent').data('val', 0);
                    $('#add-sell_termin2_calc_percent').data('val', 0);
                    $('#add-sell_termin1_calc_percent').text((new Intl.NumberFormat('id-ID')).format(0));
                    $('#add-sell_termin2_calc_percent').text((new Intl.NumberFormat('id-ID')).format(0));
                } else if (sell_termin1_amt_type == State.termin_amt_type.percent) {
                    if (sell_termin1_amt > 100) {
                        Helper.toast('Warning', 'just now', 'termin 1 tidak boleh lebih dari 100%');
                        $('#add-sell_termin2_amt').val(0);
                        return false;
                    }
                    let disc_price1 = sell_price * sell_termin1_amt / 100;
                    let price1 = sell_price - disc_price1;
                    let percent2 = (100 - sell_termin1_amt);
                    let disc_price2 = sell_price * percent2 / 100;
                    let price2 = sell_price - disc_price2;
                    $('#add-sell_termin2_amt').val(percent2).trigger('change');
                    $('#add-sell_termin1_calc_percent').data('val', disc_price1);
                    $('#add-sell_termin2_calc_percent').data('val', disc_price2);
                    $('#add-sell_termin1_calc_percent').text((new Intl.NumberFormat('id-ID')).format(disc_price1));
                    $('#add-sell_termin2_calc_percent').text((new Intl.NumberFormat('id-ID')).format(disc_price2));
                } else {
                    $('#add-sell_termin1_calc_percent').data('val', 0);
                    $('#add-sell_termin2_calc_percent').data('val', 0);
                    $('#add-sell_termin1_calc_percent').text('');
                    $('#add-sell_termin2_calc_percent').text('');
                }
            },
        };

        const Req = {
            check_packing_list: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_user_client_check_packing_list') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message, 'bg-warning', 5000);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again', 'bg-warning', 5000);
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message, 'bg-warning', 5000);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            list_client_zone: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_list_client_zones') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            checkout: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_trx_spc_checkout_v1') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            search_vendor_name: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_search_user_name') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            search_device_id: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_search_device_id') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            search_nopol: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_search_nopol') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            search_driver_name: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_search_driver_name') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            get_pck_drop_pocket: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_pck_drop_pocket') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
        }

        const TrxNew = {
            activate: function() {
                TrxNew.event();
            },
            event: function() {
                // button
                $('#btnCalculate').on('click', async function() {
                    // try {
                    //     const a = 1;
                    //     a = 2;
                    // } catch (e) {
                    //     Helper.toast('Warning', 'just now', 'Terjadi kesalahan pada aplikasi, silahkan coba lagi nanti');
                    //     let err = JSON.stringify(e, Object.getOwnPropertyNames(e));
                    //     await TrxNew.submitLogError({
                    //         'label': 'Error Kalkulasi Order Bingcorp',
                    //         'level': 2,
                    //         'logtype': 'system',
                    //         'keys': ['bingcorp', 'kalkulasi order bingcorp'],
                    //         'errors': err,
                    //     });
                    // }
                    // return true;
                    // general data
                    let data = TrxNew.getData();
                    TrxNew.showCheckoutSpinner();
                    let isValid = TrxNew.checkData(data, true);
                    if (!isValid) {
                        TrxNew.hideCheckoutSpinner();
                        TrxNew.hideCheckout();
                        return false;
                    }

                    // // start packing list data
                    // let check_packing_list = await Req.check_packing_list({
                    //     packing_list: State.input_packing_list,
                    //     // weight: data.weight,
                    //     // cbm: data.cbm,
                    //     // koli: data.koli,
                    // }, true);
                    // if (check_packing_list.type == 'success') {
                    //     State.checked_packing_list = 2;
                    // } else {
                    //     State.checked_packing_list = 3;
                    //     TrxNew.hideCheckoutSpinner();
                    //     TrxNew.hideCheckout();
                    //     return false;
                    // }
                    // data.weight = check_packing_list.resp.data.calc_weight;
                    // State.weight = data.weight;
                    // data.cbm = check_packing_list.resp.data.calc_cbm;
                    // State.cbm = data.cbm;
                    // data.koli = check_packing_list.resp.data.total_koli;
                    // State.koli = data.koli;
                    // // data.qty = check_packing_list.resp.data.total_qty;
                    // // State.qty = data.qty;
                    // // recheck general data again
                    // isValid = TrxNew.checkData(data, true);
                    // if (!isValid) {
                    //     TrxNew.hideCheckoutSpinner();
                    //     TrxNew.hideCheckout();
                    //     return false;
                    // }
                    // // end packing list data

                    // checkout data
                    let checkoutData = await Req.checkout(data, true);
                    if (checkoutData.type != 'success') {
                        TrxNew.hideCheckoutSpinner();
                        TrxNew.hideCheckout();
                        return false;
                    }
                    data.pricing_options = checkoutData.resp.data;
                    data.insurance = checkoutData.resp.insurance;
                    $('#add-vdr_name').data('id', checkoutData.resp.exist_data.vdr_id);
                    $('#add-drv_name').data('id', checkoutData.resp.exist_data.drv_id);
                    $('#add-vhc_nopol').data('id', checkoutData.resp.exist_data.vhc_id);
                    TrxNew.showCheckout(data);
                    TrxNew.hideCheckoutSpinner();
                });
                $('#btnOrder').on('click', function() {
                    let data = TrxNew.getData();

                    // // start packing list data
                    // data.packing_list = State.input_packing_list;
                    // data.weight = State.weight;
                    // data.cbm = State.cbm;
                    // data.koli = State.koli;
                    // // data.qty = State.qty;
                    // // end packing list data

                    TrxNew.showBtnOrdSpinner();
                    let isValid = TrxNew.checkData(data, true);
                    if (!isValid) {
                        TrxNew.hideBtnOrdSpinner();
                        return false;
                    }
                    TrxNew.submitData(data);

                    // static fe
                    // Helper.toast('Success', 'just now', 'success create order');
                    // window.location.href =
                    //     "{{ route('view_user_client_transaction') }}";
                });
                $('#checkout-download_packing_list').on('click', function() {
                    const fileName = 'package-list.xlsx';
                    const sheetName = 'template_packing_list';
                    downloadPackingList(fileName, sheetName, State.input_packing_list);
                });
                // link
                $('#download_template_packing_list').on('click', function() {
                    TrxNew.downloadTemplatePackingList();
                });
                // input
                TrxNew.evInputChange();
                TrxNew.evInputListen();
                TrxNew.evInputBuyPrice();
                TrxNew.evInputSellPrice();
                TrxNew.evTax();
                // select
                $('#add-client').on('change', async function(e) {
                    TrxNew.hideCheckout();
                    let selected = $('#add-client :selected');

                    $('#add-pickup_zone').html('<option value="" selected disabled>Belum ada lokasi yang dipilih</option>');
                    $('#add-drop_zone').html('<option value="" selected disabled>Belum ada lokasi yang dipilih</option>');

                    State.l_pck_zones = [];
                    State.l_drop_zones = [];

                    const listPickupZones = await Req.list_client_zone({
                        cptid: selected.data('cptid'),
                        workflow_type: State.workflow_type.pickup,
                    });
                    if (listPickupZones.type != 'success') {
                        Helper.toast('Warning', 'just now', listPickupZones.msg);
                        $('#add-pickup_zone').val(null).trigger('change');
                        $('#add-pickup_zone').select2();
                        $('#add-drop_zone').val(null).trigger('change');
                        $('#add-drop_zone').select2();
                        return false;
                    }
                    const inptPckZones = $('#point-container [name="add-pickup_zone"]');
                    for (const inptPckZone of inptPckZones) {
                        for (const pck of listPickupZones.resp.data) {
                            const opt = document.createElement('option');
                            opt.value = pck.id;
                            opt.innerHTML = pck.name;
                            opt.setAttribute('data-id', pck.id);
                            opt.setAttribute('data-title', pck.name);
                            opt.setAttribute('data-addr', pck.fulladdress);
                            inptPckZone.appendChild(opt);
                        }
                    }
                    $('#point-container [name="add-pickup_zone"]').select2();
                    State.l_pck_zones = listPickupZones.resp.data;

                    const listDropZones = await Req.list_client_zone({
                        cptid: selected.data('cptid'),
                        workflow_type: State.workflow_type.drop,
                    });
                    if (listDropZones.type != 'success') {
                        Helper.toast('Warning', 'just now', listDropZones.msg);
                        $('#add-drop_zone').val(null).trigger('change');
                        $('#add-drop_zone').select2();
                        return false;
                    }
                    const inptDropZones = $('#point-container [name="add-drop_zone"]');
                    for (const inptDropZone of inptDropZones) {
                        for (const drop of listDropZones.resp.data) {
                            const opt = document.createElement('option');
                            opt.value = drop.id;
                            opt.innerHTML = drop.name;
                            opt.setAttribute('data-id', drop.id);
                            opt.setAttribute('data-title', drop.name);
                            opt.setAttribute('data-addr', drop.fulladdress);
                            inptDropZone.appendChild(opt);
                        }
                    }
                    $('#point-container [name="add-drop_zone"]').select2();
                    State.l_drop_zones = listDropZones.resp.data;
                });
                // date
                TrxNew.evDate();
                // select2
                $('#add_type_uang_saku').select2({
                    disabled: true
                });
            },
            evInputChange: function() {
                TrxNew.handleUploadPacking();
                $('#isClientPkp').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-pickup_date"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-pickup_time_hour"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-pickup_time_minute"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-pickup_zone"]', function() {
                    TrxNew.hideCheckout();
                    if (State.eventGetPocket) window.dispatchEvent(State.eventGetPocket);
                });
                $('#point-container').on('change', '[name="add-drop_zone"]', function() {
                    TrxNew.hideCheckout();
                    if (State.eventGetPocket) window.dispatchEvent(State.eventGetPocket);
                });
                $('#point-container').on('change', '[name="add-pickup_pic_name"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-drop_pic_name"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-pickup_pic_phone"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('change', '[name="add-drop_pic_phone"]', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-add-row').on('click', function() {
                    TrxNew.hideCheckout();
                });
                $('#point-container').on('click', '.point-minus', function(e) {
                    TrxNew.hideCheckout();
                });
                $('#add-weight').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-cbm').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-koli').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-truck_type').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-packinglist').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#insuranceCheck').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#insuranceInput').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let price = (new Intl.NumberFormat('id-ID')).format($('#insuranceInput').val().split('.').join('').split(',').join('.'));
                    $('#insuranceInput').val(price);
                });
                $('#add-sell_termin1_date').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-sell_termin1_time_hour').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-sell_termin1_time_minute').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-leadTime').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#isVendorPkp').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vdr_phone').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vdr_email').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vdr_addr').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vhc_nopol').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vhc_stnk_taxexp').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-vhc_kir_exp').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-drv_phone').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-drv_phone2').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-termin1_date').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-termin1_time_hour').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-termin1_time_minute').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('#add_uang_saku').on('change', function(e) {
                    TrxNew.hideCheckout();
                    TrxNew.clearPocketCheckpoint();
                    let selected = $('#add_uang_saku :selected');
                    let pocket = State.l_pockets[selected.val()];
                    if (typeof pocket === 'undefined') return false;
                    $('#add_type_uang_saku').val(pocket.type).trigger('change');
                    for (let point of pocket.checkpoints) {
                        let total = point.total + '';
                        total = (new Intl.NumberFormat('id-ID')).format(total.split('.').join('').split(',').join('.'))
                        $('.groupSakuCheckpointName').append(`
                        <div class="mb-3">
                            <label for="add_uang_saku_checkpoint" class="form-label text-nowrap">Titik Lokasi <span class="text-danger">*</span></label>
                            <input type="text" name="add_uang_saku_checkpoint[]" class="form-control" value="${point.pck_name}" data-id="${point.id}" readonly>
                        </div>
                        `);
                        $('.groupSakuCheckpointTotal').append(`
                        <div class="mb-3">
                            <label for="add_uang_saku_total" class="form-label text-nowrap">Total (Rp) <span class="text-danger">*</span></label>
                            <input type="text" name="add_uang_saku_total[]" class="form-control" placeholder="" value="${total}" readonly>
                        </div>
                        `);
                    }
                });
                $('#add_type_uang_saku').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('.groupSakuCheckpointName').on('change', function() {
                    TrxNew.hideCheckout();
                });
                $('.groupSakuCheckpointTotal').on('change', function() {
                    TrxNew.hideCheckout();
                });
            },
            evInputListen: function() {
                // https://stackoverflow.com/questions/45821907/how-to-show-values-in-suggestion-instead-of-label-jquery-autocomplete-and-search
                // https://api.jqueryui.com/autocomplete/#event-search
                let timeoutSearchVdrName = null;
                $('#add-vdr_name').on('keyup', function(e) {
                    TrxNew.hideCheckout();
                    clearTimeout(timeoutSearchVdrName);
                    timeoutSearchVdrName = setTimeout(async () => {
                        const respSearch = await Req.search_vendor_name({
                            name: $('#add-vdr_name').val(),
                            roles: State.role.vendor,
                        }, false);
                        if (respSearch.type !== 'success') return true;
                        if (respSearch.resp.data.length < 1) return true;
                        // dengan suggestion
                        $('#add-vdr_name').autocomplete({
                                source: function(req, res) {
                                    // const sgs = [];
                                    // for (const row of respSearch.resp.data) {
                                    //     sgs.push(row.first_name + ' - ' + row.phone);
                                    // }
                                    res(respSearch.resp.data);
                                },
                                select: function(ev, ui) {
                                    const {
                                        item
                                    } = ui;
                                    setTimeout(() => {
                                        $('#add-vdr_name').val(item.first_name);
                                    }, 1);
                                    $('#add-vdr_phone').val(item.phone);
                                    $('#add-vdr_email').val(item.email);
                                    $('#add-vdr_addr').val(item.fulladdress);
                                    $('#add-vdr_bank').val(item.bank_code).trigger('change');
                                    $('#add-vdr_kcp').val(item.bank_branch_name);
                                    $('#add-vdr_acc_name').val(item.bank_acc_name);
                                    $('#add-vdr_acc_number').val(item.bank_acc_number);
                                    State.is_vdr_bcng.current = item.is_vdr_bcng;
                                    if (State.eventChangeIsVdrBcng) window.dispatchEvent(State.eventChangeIsVdrBcng);
                                    if (State.eventGetPocket) window.dispatchEvent(State.eventGetPocket);
                                }
                            })
                            .autocomplete("instance")._renderItem = function(ul, item) {
                                return $('<li>')
                                    .append('<div>' + item.first_name + ' - ' + item.phone + '</div>')
                                    .appendTo(ul);
                            };
                        $('#add-vdr_name').autocomplete('search', $('#add-vdr_name').val());
                        // tanpa suggestion
                        // const vendor = respSearch.resp.data[0];
                        // $('#add-vdr_name').val(vendor.first_name);
                        // $('#add-vdr_phone').val(vendor.phone);
                        // $('#add-vdr_email').val(vendor.email);
                        // $('#add-vdr_addr').val(vendor.fulladdress);
                        // $('#add-vdr_bank').val(vendor.bank_code).trigger('change');
                        // $('#add-vdr_acc_name').val(vendor.bank_acc_name);
                        // $('#add-vdr_acc_number').val(vendor.bank_acc_number);
                    }, State.delay_typing_fast);
                });
                let timeoutSearchDeviceID = null;
                $('#add-device_id').on('change', async function(e) {
                    TrxNew.hideCheckout();
                    // ketika pilih device, pilih juga vhcnya, tapi sekarang device itu harus kosong di opsi
                    // // clearTimeout(timeoutSearchDeviceID);
                    // // timeoutSearchDeviceID = setTimeout(async () => {
                    //     const respSearch = await Req.search_device_id({
                    //         device_id: $('#add-device_id :selected').data('device_id'),
                    //     }, false);
                    //     if (respSearch.type !== 'success') return true;
                    //     // if (respSearch.resp.data.length > 0) Helper.toast('Warning', 'just now', 'device id telah digunakan');
                    //     if (respSearch.resp.data.length < 1) return true;
                    //     const vhc = respSearch.resp.data[0];
                    //     $('#add-vhc_nopol').val(`${vhc.nopol1} ${vhc.nopol2} ${vhc.nopol3}`);
                    //     $('#add-vhc_stnk_taxexp').val(vhc.tax_exp);
                    //     $('#add-vhc_kir_exp').val(vhc.kir_exp);
                    return true;
                    // }, State.delay_typing_fast);
                });
                let timeoutSearchNopol = null;
                $('#add-vhc_nopol').on('keyup', async function(e) {
                    TrxNew.hideCheckout();
                    clearTimeout(timeoutSearchNopol);
                    timeoutSearchNopol = setTimeout(async () => {
                        const respSearch = await Req.search_nopol({
                            nopol: $('#add-vhc_nopol').val(),
                        }, false);
                        if (respSearch.type !== 'success') return true;
                        // if (respSearch.resp.data.length > 0) Helper.toast('Warning', 'just now', 'device id telah digunakan');
                        if (respSearch.resp.data.length < 1) return true;
                        // dengan suggestion
                        $('#add-vhc_nopol').autocomplete({
                                source: function(req, res) {
                                    // const sgs = [];
                                    // for (const row of respSearch.resp.data) {
                                    //     sgs.push(row.first_name + ' - ' + row.phone);
                                    // }
                                    res(respSearch.resp.data);
                                },
                                select: function(ev, ui) {
                                    const {
                                        item
                                    } = ui;
                                    setTimeout(() => {
                                        $('#add-vhc_nopol').val(`${item.nopol1} ${item.nopol2} ${item.nopol3}`);
                                    }, 1);
                                    $('#add-vhc_stnk_taxexp').val(item.tax_exp);
                                    $('#add-vhc_kir_exp').val(item.kir_exp);
                                }
                            })
                            .autocomplete("instance")._renderItem = function(ul, item) {
                                return $('<li>')
                                    .append(`<div>${item.nopol1} ${item.nopol2} ${item.nopol3}</div>`)
                                    .appendTo(ul);
                            };
                        $('#add-vhc_nopol').autocomplete('search', $('#add-vhc_nopol').val());
                        // const vhc = respSearch.resp.data[0];
                        // $('#add-vhc_nopol').val(`${vhc.nopol1} ${vhc.nopol2} ${vhc.nopol3}`);
                        // $('#add-vhc_stnk_taxexp').val(vhc.tax_exp);
                        // $('#add-vhc_kir_exp').val(vhc.kir_exp);
                        return true;
                    }, State.delay_typing_fast);
                });
                let timeoutSearchDrvName = null;
                $('#add-drv_name').on('keyup', async function(e) {
                    TrxNew.hideCheckout();
                    clearTimeout(timeoutSearchDrvName);
                    timeoutSearchDrvName = setTimeout(async () => {
                        const respSearch = await Req.search_driver_name({
                            name: $('#add-drv_name').val(),
                        }, false);
                        if (respSearch.type !== 'success') return true;
                        if (respSearch.resp.data.length < 1) return true;
                        // dengan suggestion
                        $('#add-drv_name').autocomplete({
                                source: function(req, res) {
                                    // const sgs = [];
                                    // for (const row of respSearch.resp.data) {
                                    //     sgs.push(row.fullname + ' - ' + row.phone);
                                    // }
                                    res(respSearch.resp.data);
                                },
                                select: function(ev, ui) {
                                    const {
                                        item
                                    } = ui;
                                    setTimeout(() => {
                                        $('#add-drv_name').val(item.fullname);
                                    }, 1);
                                    $('#add-drv_name2').val(item.fullname2);
                                    $('#add-drv_phone').val(item.phone);
                                    if (item.phone2 == 0) {
                                        $('#add-drv_phone2').val(item.phone2);
                                    } else {
                                        $('#add-drv_phone2').val(item.phone2);
                                    }
                                    $('#add-drv_bank').val(item.bank_code).trigger('change');
                                    $('#add-drv_kcp').val(item.bank_branch_name);
                                    $('#add-drv_acc_name').val(item.bank_acc_name);
                                    $('#add-drv_acc_number').val(item.bank_acc_number);
                                }
                            })
                            .autocomplete("instance")._renderItem = function(ul, item) {
                                return $('<li>')
                                    .append('<div>' + item.fullname + ' - ' + item.phone + '</div>')
                                    .appendTo(ul);
                            };
                        $('#add-drv_name').autocomplete('search', $('#add-drv_name').val());
                        // tanpa suggestion
                        // const driver = respSearch.resp.data[0];
                        // $('#add-drv_name').val(driver.fullname);
                        // $('#add-drv_name2').val(driver.fullname2);
                        // $('#add-drv_phone').val(driver.phone);
                        // if (driver.phone2 == 0) {
                        //     $('#add-drv_phone2').val(driver.phone2);
                        // } else {
                        //     $('#add-drv_phone2').val(driver.phone2);
                        // }
                    }, State.delay_typing_fast);
                });

                // custom event
                State.eventChangeIsVdrBcng = new CustomEvent('eventChangeIsVdrBcng', {
                    detail: {},
                });

                function handlerChangeIsVdrBcng(e) {
                    // e.detail
                    if (State.is_vdr_bcng.current == State.is_vdr_bcng.yes) {
                        $('#point-add-row').addClass('d-none');
                        $('.groupUangSaku').removeClass('d-none');
                        $('.groupBankDriver').removeClass('d-none');
                        if ($('.point-card').length > 2) {
                            Helper.toast('Warning', 'just now', 'Multidrop tidak diperbolehkan pada vendor bonceng');
                        }
                        MultiplePoint.delAfterFirstRow();
                        $('.thePriceVendor').addClass('d-none');
                        $('.theTerminVendor').addClass('d-none');
                    } else {
                        $('#point-add-row').removeClass('d-none');
                        $('.groupUangSaku').addClass('d-none');
                        $('.groupBankDriver').addClass('d-none');
                        // TrxNew.clearBankDriver();
                        $('.thePriceVendor').removeClass('d-none');
                        $('.theTerminVendor').removeClass('d-none');
                    }
                    // clear buy price and termin and hide
                    $('#add-buyPrice').val(0).trigger('keyup');
                    $('#add-termin1_amt').val(0);
                    $('#add-termin2_amt').val(0);
                    $('#add-termin1_calc_percent').val(0);
                    $('#add-termin2_calc_percent').val(0);
                    $('#add-termin2_amt').val(0);
                    $('#add-termin1_date').val('').trigger('change');
                    $('#add-termin1_time_hour').val('').trigger('change');
                    $('#add-termin1_time_minute').val('').trigger('change');
                }
                window.addEventListener('eventChangeIsVdrBcng', handlerChangeIsVdrBcng);
                // window.removeEventListener('eventChangeIsVdrBcng', handlerChangeIsVdrBcng); State.eventChangeIsVdrBcng = null;

                State.eventGetPocket = new CustomEvent('eventGetPocket', {
                    detail: {},
                });
                async function handlerGetPocket(e) {
                    // e.detail
                    TrxNew.clearPocket();
                    if (State.is_vdr_bcng.current == State.is_vdr_bcng.yes) {
                        let clientSelected = $('#add-client :selected');
                        let client_id = clientSelected.data('cptid');
                        // data.points = [];
                        // const pickup_at = [];
                        // for (let point of $('#point-container .point-card')) {
                        const point = $($('#point-container .point-card')[0]);
                        const pointData = {};
                        // pointData.point_rowno = point.find('.point-rowno').text().trim();
                        // pointData.pickup_date = point.find('[name="add-pickup_date"]').val().trim();
                        // pointData.pickup_time_hour = point.find('[name="add-pickup_time_hour"]').val()?.trim();
                        // pointData.pickup_time_minute = point.find('[name="add-pickup_time_minute"]').val()?.trim();
                        // pointData.pickup_time = `${pointData.pickup_time_hour}:${pointData.pickup_time_minute}`;
                        // pointData.pickup_at = moment(pointData.pickup_date + ' ' + pointData.pickup_time).unix();
                        // pickup_at.push(pointData.pickup_at);
                        const pickup_zone = $(point.find('[name="add-pickup_zone"] :selected')[0]);
                        pointData.pickup_zone_id = pickup_zone.data('id');
                        pointData.pickup_zone_title = pickup_zone.data('title')?.trim();
                        // pointData.pickup_zone_addr = pickup_zone.data('addr')?.trim();
                        // pointData.pickup_zone_pic_name = point.find('[name="add-pickup_pic_name"]').val();
                        // pointData.pickup_zone_pic_phone = point.find('[name="add-pickup_pic_phone"]').val();
                        const drop_zone = $(point.find('[name="add-drop_zone"] :selected')[0]);
                        pointData.drop_zone_id = drop_zone.data('id');
                        pointData.drop_zone_title = drop_zone.data('title')?.trim();
                        // pointData.drop_zone_addr = drop_zone.data('addr')?.trim();
                        // pointData.drop_zone_pic_name = point.find('[name="add-drop_pic_name"]').val();
                        // pointData.drop_zone_pic_phone = point.find('[name="add-drop_pic_phone"]').val();
                        // data.points.push({...pointData});
                        // }
                        if (!pointData.pickup_zone_id || !pointData.drop_zone_id) return false;
                        const respPockets = await Req.get_pck_drop_pocket({
                            client_id,
                            pck_id: pointData.pickup_zone_id,
                            drop_id: pointData.drop_zone_id
                        }, false, null);
                        if (respPockets.type !== 'success') {
                            Helper.toast('Warning', 'just now', `Tidak ada uang saku untuk penjemputan dan pengantran ${pointData.pickup_zone_title} - ${pointData.drop_zone_title}`);
                            return false;
                        }
                        const pockets = respPockets.resp.data;
                        $('#add_uang_saku').html('<option value="" selected>Belum Dipilih Uang Saku</option>');
                        State.l_pockets = [];
                        for (const pkt of pockets) {
                            State.l_pockets[pkt.id] = pkt;
                            $('#add_uang_saku').append(`<option value="${pkt.id}">${pkt.name}</option>`);
                        }
                        $('#add_uang_saku').select2();
                    }
                }
                window.addEventListener('eventGetPocket', handlerGetPocket);
                // window.removeEventListener('eventGetPocket', handlerGetPocket); State.eventGetPocket = null;
            },
            evInputBuyPrice: function() {
                let timeoutCalcMarginNPercentFtl = null;
                $('#add-buyPrice').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let sell_price = (new Intl.NumberFormat('id-ID')).format($('#add-sellPrice').val().split('.').join('').split(',').join('.'));
                    $('#add-sellPrice').val(sell_price);
                    let buy_price = (new Intl.NumberFormat('id-ID')).format($('#add-buyPrice').val().split('.').join('').split(',').join('.'));
                    $('#add-buyPrice').val(buy_price);
                    timeoutCalcMarginNPercentFtl = setTimeout(() => {
                        Wrapper.calcMarginNPercentFtl($('#add-item_bill_tax_total_flat').val().split('.').join('').split(',').join('.'), $('#add-item_tax_total_flat').val().split('.').join('').split(',').join('.'));
                        Wrapper.calcTerminBuyPrice(false);
                    }, State.delay_type_margin_calc);
                });
                // termin buy price // for vendor
                $('#add-termin1_amt_type').on('change', function() {
                    TrxNew.hideCheckout();

                    $('#add-termin1_amt-icon').addClass('d-none');

                    let termin1_amt_type = $('#add-termin1_amt_type').val();
                    if (termin1_amt_type == State.termin_amt_type.flat) {
                        $('.subTermin1').removeClass('d-none');
                        $('.subTermin1-calc_percent').addClass('d-none');
                    } else if (termin1_amt_type == State.termin_amt_type.percent) {
                        $('.subTermin1').removeClass('d-none');
                        $('.subTermin1-calc_percent').removeClass('d-none');
                        $('#add-termin1_amt-icon').removeClass('d-none');
                    } else {
                        $('.subTermin1').addClass('d-none');
                    }
                    $('#add-termin2_amt_type').val(termin1_amt_type).trigger('change');
                    $('#add-termin1_amt').val('');
                });
                let timeoutCalcMarginTerminSellPrice = null;
                $('#add-termin1_amt').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let termin1_amt_type = $('#add-termin1_amt_type').val();
                    let termin1_amt = $('#add-termin1_amt').val().split('.').join('').split(',').join('.');
                    if (termin1_amt_type == State.termin_amt_type.flat) {
                        $('#add-termin1_amt').val((new Intl.NumberFormat('id-ID')).format(termin1_amt));
                    }
                    timeoutCalcMarginTerminSellPrice = setTimeout(() => {
                        Wrapper.calcTerminBuyPrice(true);
                    }, State.delay_type_margin_calc);
                });
                $('#add-termin1_date').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-termin1_time').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-termin2_amt_type').on('change', function() {
                    TrxNew.hideCheckout();

                    $('#add-termin2_amt-icon').addClass('d-none');

                    let termin2_amt_type = $('#add-termin2_amt_type').val();
                    if (termin2_amt_type == State.termin_amt_type.flat) {
                        $('.subTermin2').removeClass('d-none');
                        $('.subTermin2-calc_percent').addClass('d-none');
                    } else if (termin2_amt_type == State.termin_amt_type.percent) {
                        $('.subTermin2').removeClass('d-none');
                        $('.subTermin2-calc_percent').removeClass('d-none');
                        $('#add-termin2_amt-icon').removeClass('d-none');
                    } else {
                        $('.subTermin2').addClass('d-none');
                    }
                    $('#add-termin2_amt').val('');
                });
                $('#add-termin2_amt').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let termin2_amt_type = $('#add-termin2_amt_type').val();
                    let termin2_amt = $('#add-termin2_amt').val().split('.').join('').split(',').join('.');
                    if (termin2_amt_type == State.termin_amt_type.flat) {
                        $('#add-termin2_amt').val((new Intl.NumberFormat('id-ID')).format(termin2_amt));
                    }
                });
                $('#add-termin2_amt').on('change', function() {
                    TrxNew.hideCheckout();
                    let termin2_amt_type = $('#add-termin2_amt_type').val();
                    let termin2_amt = $('#add-termin2_amt').val().split('.').join('').split(',').join('.');
                    if (termin2_amt_type == State.termin_amt_type.flat) {
                        $('#add-termin2_amt').val((new Intl.NumberFormat('id-ID')).format(termin2_amt));
                    }
                });
            },
            evInputSellPrice: function() {
                let timeoutCalcMarginNPercentFtl = null;
                $('#add-sellPrice').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let sell_price = (new Intl.NumberFormat('id-ID')).format($('#add-sellPrice').val().split('.').join('').split(',').join('.'));
                    $('#add-sellPrice').val(sell_price);
                    let buy_price = (new Intl.NumberFormat('id-ID')).format($('#add-buyPrice').val().split('.').join('').split(',').join('.'));
                    $('#add-buyPrice').val(buy_price);
                    timeoutCalcMarginNPercentFtl = setTimeout(() => {
                        Wrapper.calcMarginNPercentFtl($('#add-item_bill_tax_total_flat').val().split('.').join('').split(',').join('.'), $('#add-item_tax_total_flat').val().split('.').join('').split(',').join('.'));
                        Wrapper.calcTerminSellPrice(false);
                    }, State.delay_type_margin_calc);
                });
                // termin sell price for client
                $('#add-sell_termin1_amt_type').on('change', function() {
                    TrxNew.hideCheckout();

                    $('#add-sell_termin1_amt-icon').addClass('d-none');

                    let sell_termin1_amt_type = $('#add-sell_termin1_amt_type').val();
                    if (sell_termin1_amt_type == State.termin_amt_type.flat) {
                        $('.sell_subTermin1').removeClass('d-none');
                        $('.sell_subTermin1-calc_percent').addClass('d-none');
                    } else if (sell_termin1_amt_type == State.termin_amt_type.percent) {
                        $('.sell_subTermin1').removeClass('d-none');
                        $('.sell_subTermin1-calc_percent').removeClass('d-none');
                        $('#add-sell_termin1_amt-icon').removeClass('d-none');
                    } else {
                        $('.sell_subTermin1').addClass('d-none');
                    }
                    $('#add-sell_termin2_amt_type').val(sell_termin1_amt_type).trigger('change');
                    $('#add-sell_termin1_amt').val('');
                });
                let timeoutCalcMarginTerminSellPrice = null;
                $('#add-sell_termin1_amt').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let sell_termin1_amt_type = $('#add-sell_termin1_amt_type').val();
                    let sell_termin1_amt = $('#add-sell_termin1_amt').val().split('.').join('').split(',').join('.');
                    if (sell_termin1_amt_type == State.termin_amt_type.flat) {
                        $('#add-sell_termin1_amt').val((new Intl.NumberFormat('id-ID')).format(sell_termin1_amt));
                    }
                    timeoutCalcMarginTerminSellPrice = setTimeout(() => {
                        Wrapper.calcTerminSellPrice(true);
                    }, State.delay_type_margin_calc);
                });
                $('#add-sell_termin1_date').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-sell_termin1_time').on('keyup', function() {
                    TrxNew.hideCheckout();
                });
                $('#add-sell_termin2_amt_type').on('change', function() {
                    TrxNew.hideCheckout();

                    $('#add-sell_termin2_amt-icon').addClass('d-none');

                    let sell_termin2_amt_type = $('#add-sell_termin2_amt_type').val();
                    if (sell_termin2_amt_type == State.termin_amt_type.flat) {
                        $('.sell_subTermin2').removeClass('d-none');
                        $('.sell_subTermin2-calc_percent').addClass('d-none');
                    } else if (sell_termin2_amt_type == State.termin_amt_type.percent) {
                        $('.sell_subTermin2').removeClass('d-none');
                        $('.sell_subTermin2-calc_percent').removeClass('d-none');
                        $('#add-sell_termin2_amt-icon').removeClass('d-none');
                    } else {
                        $('.sell_subTermin2').addClass('d-none');
                    }
                    $('#add-sell_termin2_amt').val('');
                });
                $('#add-sell_termin2_amt').on('keyup', function() {
                    TrxNew.hideCheckout();
                    let sell_termin2_amt_type = $('#add-sell_termin2_amt_type').val();
                    let sell_termin2_amt = $('#add-sell_termin2_amt').val().split('.').join('').split(',').join('.');
                    if (sell_termin2_amt_type == State.termin_amt_type.flat) {
                        $('#add-sell_termin2_amt').val((new Intl.NumberFormat('id-ID')).format(sell_termin2_amt));
                    }
                });
                $('#add-sell_termin2_amt').on('change', function() {
                    TrxNew.hideCheckout();
                    let sell_termin2_amt_type = $('#add-sell_termin2_amt_type').val();
                    let sell_termin2_amt = $('#add-sell_termin2_amt').val().split('.').join('').split(',').join('.');
                    if (sell_termin2_amt_type == State.termin_amt_type.flat) {
                        $('#add-sell_termin2_amt').val((new Intl.NumberFormat('id-ID')).format(sell_termin2_amt));
                    }
                });
            },
            evDate: function() {
                // start bypass_date
                let now = moment();
                // $('#add-vhc_stnk_taxexp').attr('min', now.format('YYYY-MM-DD'));
                // $('#add-vhc_stnk_taxexp').attr('max', now.add(6, 'month').format('YYYY-MM-DD'));
                now = moment();
                // $('#add-vhc_kir_exp').attr('min', now.format('YYYY-MM-DD'));
                // $('#add-vhc_kir_exp').attr('max', now.add(1, 'year').format('YYYY-MM-DD'));
                now = moment();
                // $('#add-termin1_date').attr('min', now.format('YYYY-MM-DD'));
                // $('#add-sell_termin1_date').attr('min', now.format('YYYY-MM-DD'));
                // end bypass_date
            },
            evTax: function() {
                // vendor
                $('#add-item_tax_type').on('change', function() {
                    const val = $('#add-item_tax_type').val();
                    if (val == State.tax_type.include) {
                        $('.groupTax').removeClass('d-none');
                        if ($('#isVendorPkp').prop('checked')) {
                            $('#add-item_tax_ppn_percent').val(State.tax_type.ppn_percent);
                        } else {
                            $('#add-item_tax_ppn_percent').val(0);
                        }
                        $('#add-item_tax_pph_percent').val(State.tax_type.pph_percent);
                    } else if (val == State.tax_type.exclude) {
                        $('.groupTax').removeClass('d-none');
                        if ($('#isVendorPkp').prop('checked')) {
                            $('#add-item_tax_ppn_percent').val(State.tax_type.ppn_percent);
                        } else {
                            $('#add-item_tax_ppn_percent').val(0);
                        }
                        $('#add-item_tax_pph_percent').val(State.tax_type.pph_percent);
                    } else { // without
                        $('.groupTax').addClass('d-none');
                        $('#add-item_tax_ppn_percent').val('');
                        $('#add-item_tax_pph_percent').val('');
                    }

                    let calcTax = TrxNew.calcTax('vendor');
                    $('#add-item_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                    $('#add-item_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                    $('#add-item_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    Wrapper.calcTerminBuyPrice(false);
                });
                $('#add-item_tax_type').trigger('change');
                let ppnPercentTimeout = null;
                $('#add-item_tax_ppn_percent').on('keyup', function() {
                    clearTimeout(ppnPercentTimeout);
                    ppnPercentTimeout = setTimeout(() => {
                        let ppn_percent = $('#add-item_tax_ppn_percent').val();
                        // $('#add-item_tax_ppn_percent').val(ppn_percent.replaceAll(/,/ig, '.')); // gaperlu udah dihanle kalo format numeric
                        let calcTax = TrxNew.calcTax('vendor');
                        $('#add-item_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
                let pphPercentTimeout = null;
                $('#add-item_tax_pph_percent').on('keyup', function() {
                    clearTimeout(pphPercentTimeout);
                    pphPercentTimeout = setTimeout(() => {
                        let pph_percent = $('#add-item_tax_pph_percent').val();
                        // $('#add-item_tax_pph_percent').val(pph_percent.replaceAll(/,/ig, '.')); // gaperlu udah dihanle kalo format numeric
                        let calcTax = TrxNew.calcTax('vendor');
                        $('#add-item_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
                let newItemTimeout = null;
                $('#add-buyPrice').on('keyup', function() {
                    clearTimeout(newItemTimeout);
                    newItemTimeout = setTimeout(() => {
                        let calcTax = TrxNew.calcTax('vendor');
                        $('#add-item_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
                $('#isVendorPkp').on('change', function() {
                    if ($('#isVendorPkp').prop('checked')) {
                        $('.groupPpn').removeClass('d-none');
                    } else {
                        $('.groupPpn').addClass('d-none');
                    }
                    if ($('#isVendorPkp').prop('checked')) {
                        $('#add-item_tax_ppn_percent').val(State.tax_type.ppn_percent);
                    } else {
                        $('#add-item_tax_ppn_percent').val(0);
                    }

                    let calcTax = TrxNew.calcTax('vendor');
                    $('#add-item_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                    $('#add-item_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                    $('#add-item_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                });

                // client
                $('#add-item_bill_tax_type').on('change', function() {
                    const val = $('#add-item_bill_tax_type').val();
                    if (val == State.tax_type.include) {
                        $('.groupTaxBill').removeClass('d-none');
                        $('#add-item_bill_tax_ppn_percent').val(State.tax_type.ppn_percent);
                        $('#add-item_bill_tax_pph_percent').val(State.tax_type.pph_percent);
                    } else if (val == State.tax_type.exclude) {
                        $('.groupTaxBill').removeClass('d-none');
                        $('#add-item_bill_tax_ppn_percent').val(State.tax_type.ppn_percent);
                        $('#add-item_bill_tax_pph_percent').val(State.tax_type.pph_percent);
                    } else { // without
                        $('.groupTaxBill').addClass('d-none');
                        $('#add-item_bill_tax_ppn_percent').val('');
                        $('#add-item_bill_tax_pph_percent').val('');
                    }

                    let calcTax = TrxNew.calcTax('client');
                    $('#add-item_bill_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                    $('#add-item_bill_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                    $('#add-item_bill_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    Wrapper.calcTerminSellPrice(false);
                });
                let ppnPercentTimeoutBill = null;
                $('#add-item_bill_tax_ppn_percent').on('keyup', function() {
                    clearTimeout(ppnPercentTimeoutBill);
                    ppnPercentTimeoutBill = setTimeout(() => {
                        let ppn_percent = $('#add-item_bill_tax_ppn_percent').val();
                        // $('#add-item_bill_tax_ppn_percent').val(ppn_percent.replaceAll(/,/ig, '.')); // gaperlu udah dihanle kalo format numeric
                        let calcTax = TrxNew.calcTax('client');
                        $('#add-item_bill_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_bill_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_bill_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
                let pphPercentTimeoutBill = null;
                $('#add-item_bill_tax_pph_percent').on('keyup', function() {
                    clearTimeout(pphPercentTimeoutBill);
                    pphPercentTimeoutBill = setTimeout(() => {
                        let pph_percent = $('#add-item_bill_tax_pph_percent').val();
                        // $('#add-item_bill_tax_pph_percent').val(pph_percent.replaceAll(/,/ig, '.')); // gaperlu udah dihanle kalo format numeric
                        let calcTax = TrxNew.calcTax('client');
                        $('#add-item_bill_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_bill_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_bill_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
                let newItemTimeoutBill = null;
                $('#add-sellPrice').on('keyup', function() {
                    clearTimeout(newItemTimeoutBill);
                    newItemTimeoutBill = setTimeout(() => {
                        let calcTax = TrxNew.calcTax('client');
                        $('#add-item_bill_tax_ppn_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.ppn_flat));
                        $('#add-item_bill_tax_pph_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.pph_flat));
                        $('#add-item_bill_tax_total_flat').val((new Intl.NumberFormat('id-ID')).format(calcTax.total_tax));
                    }, State.delay_type_tax);
                });
            },
            calcTax: function(type = 'vendor') {
                let calc = {};

                if (type === 'vendor') {
                    calc = {
                        tax_type: Number($('#add-item_tax_type').val()),
                        ppn_percent: Number($('#add-item_tax_ppn_percent').val()),
                        pph_percent: Number($('#add-item_tax_pph_percent').val()),
                        price: Number($('#add-buyPrice').val().split('.').join('').split(',').join('.')),
                        vdr_pkp: $('#isVendorPkp').prop('checked'),
                    };

                    if (calc.vdr_pkp) {
                        if (calc.tax_type == State.tax_type.include) {
                            const before_ppn = calc.price / State.tax_type.ppn_percent_include;
                            const ppn = before_ppn * calc.ppn_percent / 100;
                            calc.ppn_flat = ppn;
                            const pph = -1 * (before_ppn * calc.pph_percent / 100);
                            calc.pph_flat = pph;
                            calc.total_tax = before_ppn + ppn + pph;
                        } else if (calc.tax_type == State.tax_type.exclude) {
                            const ppn = calc.price * calc.ppn_percent / 100;
                            calc.ppn_flat = ppn;
                            const pph = -1 * (calc.price * calc.pph_percent / 100);
                            calc.pph_flat = pph;
                            calc.total_tax = calc.price + ppn + pph;
                        }
                    } else {
                        if (calc.tax_type == State.tax_type.include) {
                            const ppn = 0;
                            calc.ppn_flat = ppn;
                            const pph = -1 * (calc.price * calc.pph_percent / 100);
                            calc.pph_flat = pph;
                            calc.total_tax = calc.price + ppn + pph;
                        } else if (calc.tax_type == State.tax_type.exclude) {
                            const ppn = 0;
                            calc.ppn_flat = ppn;
                            const pph = -1 * (calc.price * calc.pph_percent / 100);
                            calc.pph_flat = pph;
                            calc.total_tax = calc.price + ppn + pph;
                        }
                    }
                    if (calc.tax_type == State.tax_type.without) {
                        calc.ppn_flat = 0;
                        calc.pph_flat = 0;
                        calc.total_tax = calc.price;
                    }
                } else if (type === 'client') {
                    calc = {
                        // tax_type: Number($('#add-item_bill_tax_type').val()),
                        tax_type: State.tax_type.without,
                        ppn_percent: Number($('#add-item_bill_tax_ppn_percent').val()),
                        pph_percent: Number($('#add-item_bill_tax_pph_percent').val()),
                        price: Number($('#add-sellPrice').val().split('.').join('').split(',').join('.')),
                    };

                    if (calc.tax_type == State.tax_type.include) {
                        calc.ppn_flat = calc.price - (calc.price / State.tax_type.PPN_PERCENT_INCLUDE);
                        const before_ppn = calc.price - calc.ppn_flat;
                        calc.pph_flat = before_ppn * calc.pph_percent / 100;
                        const before_ppn_pph = calc.price - calc.ppn_flat - calc.pph_flat;
                        calc.total_tax = before_ppn_pph;
                    } else if (calc.tax_type == State.tax_type.exclude) {
                        calc.ppn_flat = calc.price * calc.ppn_percent / 100;
                        const after_ppn = calc.price + calc.ppn_flat;
                        calc.pph_flat = after_ppn * calc.pph_percent / 100;
                        calc.total_tax = calc.price + calc.ppn_flat + calc.pph_flat;
                    } else { // without
                        calc.ppn_flat = 0;
                        calc.pph_flat = 0;
                        calc.total_tax = calc.price;
                    }
                }

                calc.ppn_flat = Math.round(calc.ppn_flat);
                calc.pph_flat = Math.round(calc.pph_flat);
                calc.total_tax = Math.round(calc.total_tax);

                return calc;
            },
            getData: function() {
                let data = {};

                let clientSelected = $('#add-client :selected');
                data.uid = clientSelected.data('uid');
                data.is_client_pkp = State.client_pkp.non_pkp;
                if ($('#isClientPkp').prop('checked')) data.is_client_pkp = State.client_pkp.pkp;
                data.note_tonase = $('#add-note_tonase').val();

                data.points = [];
                const pickup_at = [];
                for (let point of $('#point-container .point-card')) {
                    point = $(point);
                    const pointData = {};
                    pointData.point_rowno = point.find('.point-rowno').text().trim();
                    pointData.pickup_date = point.find('[name="add_pickup_date"]').val().trim();
                    pointData.pickup_time_hour = point.find('[name="add_pickup_time_hour[]"]').val()?.trim();
                    pointData.pickup_time_minute = point.find('[name="add-pickup_time_minute"]').val()?.trim();
                    pointData.pickup_time = `${pointData.pickup_time_hour}:${pointData.pickup_time_minute}`;
                    pointData.pickup_at = moment(pointData.pickup_date + ' ' + pointData.pickup_time).unix();
                    pickup_at.push(pointData.pickup_at);
                    const pickup_zone = $(point.find('[name="add-pickup_zone"] :selected')[0]);
                    pointData.pickup_zone_id = pickup_zone.data('id');
                    pointData.pickup_zone_title = pickup_zone.data('title')?.trim();
                    pointData.pickup_zone_addr = pickup_zone.data('addr')?.trim();
                    pointData.pickup_zone_pic_name = point.find('[name="add-pickup_pic_name"]').val();
                    pointData.pickup_zone_pic_phone = point.find('[name="add-pickup_pic_phone"]').val();
                    const drop_zone = $(point.find('[name="add-drop_zone"] :selected')[0]);
                    pointData.drop_zone_id = drop_zone.data('id');
                    pointData.drop_zone_title = drop_zone.data('title')?.trim();
                    pointData.drop_zone_addr = drop_zone.data('addr')?.trim();
                    pointData.drop_zone_pic_name = point.find('[name="add-drop_pic_name"]').val();
                    pointData.drop_zone_pic_phone = point.find('[name="add-drop_pic_phone"]').val();
                    data.points.push({
                        ...pointData
                    });
                }
                data.longest_pickup_at = Math.max(...pickup_at);
                data.lowest_pickup_at = Math.max(...pickup_at);

                // data.weight = Number($('#add-weight').val() || 'n');
                // data.cbm = Number($('#add-cbm').val() || 'n');
                // data.koli = Number($('#add-koli').val() || 'n');

                let truck_type = $('#add-truck_type :selected');
                data.truck_type_id = truck_type.data('type_id');
                data.truck_type_name = truck_type.data('name')?.trim();
                // data.truck_type_weight = truck_type.data('weight');
                // data.truck_type_cbm = truck_type.data('cbm');
                // data.truck_type_koli = truck_type.data('koli');

                data.is_insurance = $('#insuranceCheck').prop('checked');
                data.amt_beneficiary = $('#insuranceInput').val().split('.').join('').split(',').join('.');
                if ($('#checkout-insurance_value').data('id')) {
                    let insurance = $('#checkout-insurance_value');
                    data.insurance_id = insurance.data('id');
                    data.insurance_price = insurance.data('price');
                }

                data.vdr_id = $('#add-vdr_name').data('id');
                data.vdr_name = $('#add-vdr_name').val();
                data.vdr_phone = $('#add-vdr_phone').val();
                data.vdr_email = $('#add-vdr_email').val();
                data.vdr_addr = $('#add-vdr_addr').val();
                data.is_vendor_pkp = State.client_pkp.non_pkp;
                data.is_vdr_bcng = State.is_vdr_bcng.current;
                if ($('#isVendorPkp').prop('checked')) data.is_vendor_pkp = State.client_pkp.pkp;
                let selectedBank = $('#add-vdr_bank :selected');
                if (selectedBank && selectedBank.val() != '') {
                    data.vdr_bank_id = selectedBank.data('id');
                    data.vdr_bank_code = selectedBank.data('code');
                    data.vdr_bank_short = selectedBank.data('short');
                    data.vdr_bank_name = selectedBank.data('name');
                }
                data.vdr_bank_branch_name = $('#add-vdr_kcp').val();
                data.vdr_bank_acc_number = $('#add-vdr_acc_number').val();
                data.vdr_bank_acc_name = $('#add-vdr_acc_name').val();

                // data.device_id = $('#add-device_id').val();
                let selected_device = $('#add-device_id :selected');
                data.dvc_id = selected_device.val();
                data.device_id = selected_device.data('device_id');
                data.simcard = selected_device.data('simcard');

                data.vhc_id = $('#add-vhc_nopol').data('id');
                data.vhc_nopol = $('#add-vhc_nopol').val();
                data.vhc_stnk_taxexp = $('#add-vhc_stnk_taxexp').val().trim();
                data.vhc_kir_exp = $('#add-vhc_kir_exp').val().trim();

                data.drv_id = $('#add-drv_name').data('id');
                data.drv_name = $('#add-drv_name').val();
                data.drv_name2 = $('#add-drv_name2').val();
                data.drv_phone = $('#add-drv_phone').val();
                data.drv_phone2 = $('#add-drv_phone2').val();
                if (data.is_vdr_bcng == State.is_vdr_bcng.yes) {
                    let selectedBankDrv = $('#add-drv_bank :selected');
                    if (selectedBankDrv && selectedBankDrv.val() != '') {
                        data.drv_bank_id = selectedBankDrv.data('id');
                        data.drv_bank_code = selectedBankDrv.data('code');
                        data.drv_bank_short = selectedBankDrv.data('short');
                        data.drv_bank_name = selectedBankDrv.data('name');
                    }
                    data.drv_bank_branch_name = $('#add-drv_kcp').val();
                    data.drv_bank_acc_number = $('#add-drv_acc_number').val();
                    data.drv_bank_acc_name = $('#add-drv_acc_name').val();
                }

                if (data.is_vdr_bcng == State.is_vdr_bcng.yes) {
                    data.pocket_id = $('#add_uang_saku').val();
                    data.pocket_type = $('#add_type_uang_saku').val();
                    data.pocket_checkpoints = [];
                    let i = 0;
                    for (let checkpoint of $('input[name="add_uang_saku_checkpoint[]"]')) {
                        let pointName = $($('input[name="add_uang_saku_checkpoint[]"]')[i]);
                        let pointTotal = $($('input[name="add_uang_saku_total[]"]')[i]);
                        data.pocket_checkpoints.push({
                            id: pointName.data('id'),
                            name: pointName.val(),
                            total: pointTotal.val(),
                        });
                        i++;
                    }
                }

                data.buy_price_base = Number($('#add-buyPrice').val().split('.').join('').split(',').join('.'));
                data.buy_price = Number($('#add-item_tax_total_flat').val().split('.').join('').split(',').join('.'));
                let calcTaxVendor = TrxNew.calcTax('vendor');
                data.buy_price_tax_type = calcTaxVendor.tax_type;
                data.buy_price_tax_ppn_percent = calcTaxVendor.ppn_percent;
                data.buy_price_tax_ppn_flat = calcTaxVendor.ppn_flat;
                data.buy_price_tax_pph_percent = calcTaxVendor.pph_percent;
                data.buy_price_tax_pph_flat = calcTaxVendor.pph_flat;
                data.buy_price_total_tax = calcTaxVendor.total_tax;

                data.sell_price = Number($('#add-item_bill_tax_total_flat').val().split('.').join('').split(',').join('.'));
                data.margin_price = $('#add-item_bill_tax_total_flat').data('margin');
                if (!isNaN(data.margin_price)) {
                    data.margin_price = Number(data.margin_price.split('.').join('').split(',').join('.'));
                } else {
                    data.margin_price = Number(0);
                }
                data.percent_price = $('#add-item_bill_tax_total_flat').data('percent');
                data.lead_time = Number($('#add-leadTime').val());

                if ($('#checkOutView').attr('class').indexOf('d-none') < 0) {
                    for (let chooseFleet of $('input[name="chooseFleet"]')) {
                        if ($(chooseFleet).prop('checked')) {
                            data.lead_time_id = $(chooseFleet).data('lead_time_id');
                            data.lead_time = $(chooseFleet).data('lead_time');
                            data.price = $(chooseFleet).data('price');
                            data.real_price = $(chooseFleet).data('real_price');
                            data.disc_price = $(chooseFleet).data('disc_price');
                        }
                    }
                }

                // for vendor / buy price
                data.termin1_amt_type = $('#add-termin1_amt_type').val();
                if ($('#add-termin1_amt_type').val() == '') {} else {
                    data.termin1_amt = Number($('#add-termin1_amt').val().split('.').join('').split(',').join('.'));
                    data.termin1_date = $('#add-termin1_date').val().trim();
                    // data.termin1_time = $('#add-termin1_time').val().trim();
                    data.termin1_time_hour = $('#add-termin1_time_hour').val()?.trim();
                    data.termin1_time_minute = $('#add-termin1_time_minute').val()?.trim();
                    data.termin1_time = `${data.termin1_time_hour}:${data.termin1_time_minute}`;
                    data.termin1_at = moment(data.termin1_date + ' ' + data.termin1_time).unix();
                    data.termin1_calc_percent = Number($('#add-termin1_calc_percent').data('val'));
                    data.termin1_calc_percent_base = Number($('#add-termin1_calc_percent_base').data('val'));

                    data.termin2_amt_type = $('#add-termin2_amt_type').val();
                    data.termin2_amt = Number($('#add-termin2_amt').val().split('.').join('').split(',').join('.'));
                    data.termin2_calc_percent = Number($('#add-termin2_calc_percent').data('val'));
                    data.termin2_amt_base = Number(($('#add-termin2_amt').data('base_buy_price') + '').split('.').join('').split(',').join('.'));
                    data.termin2_calc_percent_base = Number($('#add-termin2_calc_percent_base').data('val'));
                }

                // for client / sell price
                data.sell_termin1_amt_type = $('#add-sell_termin1_amt_type').val();
                if ($('#add-sell_termin1_amt_type').val() == '') {} else {
                    data.sell_termin1_amt = Number($('#add-sell_termin1_amt').val().split('.').join('').split(',').join('.'));
                    data.sell_termin1_date = $('#add-sell_termin1_date').val().trim();
                    // data.sell_termin1_time = $('#add-sell_termin1_time').val().trim();
                    data.sell_termin1_time_hour = $('#add-sell_termin1_time_hour').val()?.trim();
                    data.sell_termin1_time_minute = $('#add-sell_termin1_time_minute').val()?.trim();
                    data.sell_termin1_time = `${data.sell_termin1_time_hour}:${data.sell_termin1_time_minute}`;
                    data.sell_termin1_at = moment(data.sell_termin1_date + ' ' + data.sell_termin1_time).unix();
                    data.sell_termin1_calc_percent = Number($('#add-sell_termin1_calc_percent').data('val'));

                    data.sell_termin2_amt_type = $('#add-sell_termin2_amt_type').val();
                    data.sell_termin2_amt = Number($('#add-sell_termin2_amt').val().split('.').join(''));
                    data.sell_termin2_calc_percent = Number($('#add-sell_termin2_calc_percent').data('val'));
                }

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (data.points.length < 1) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Minimal terdapat 1 penjemputan dan pengantaran');
                    return false;
                }
                for (const point of data.points) {
                    // start bypass_date
                    // if (point.pickup_at < 1 || isNaN(point.pickup_at)) {
                    //     if (isAlert) Helper.toast('Warning', 'just now', 'Waktu penjemputan tidak valid');
                    //     return false;
                    // }
                    // if (point.pickup_at < moment().unix()) {
                    //     if (isAlert) Helper.toast('Warning', 'just now',
                    //         `Waktu penjemputan ${point.rowno} tidak boleh kurang dari saat ini`);
                    //     return false;
                    // }
                    // if (point.pickup_at < moment().add(3, 'hours').unix()) {
                    //     if (isAlert) Helper.toast('Warning', 'just now',
                    //         'Waktu penjemputan minimal 3 jam dari sekarang');
                    //     return false;
                    // }
                    // end bypass_date
                    if (typeof point.pickup_zone_id == 'undefined') {
                        if (isAlert) Helper.toast('Warning', 'just now', `Lokasi penjemputan ${point.rowno} tidak valid`);
                        return false;
                    }
                    if (typeof point.drop_zone_id == 'undefined') {
                        if (isAlert) Helper.toast('Warning', 'just now', `Lokasi pengantaran ${point.rowno} tidak valid`);
                        return false;
                    }
                }
                // if (Number(data.buy_price) > Number(data.sell_price)) {
                if (Number(data.buy_price_base) > Number(data.sell_price)) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Biaya harus lebih rendah dari harga');
                    return false;
                }
                // start bypass_date
                // if (moment.unix(data.longest_pickup_at).add(data.lead_time, 'day').unix() >= moment(data.vhc_stnk_taxexp).unix() || moment.unix(data.longest_pickup_at).add(data.lead_time, 'day').unix() >= moment(data.vhc_kir_exp).unix()) {
                // 	if (isAlert) Helper.toast('Warning', 'just now', 'Tax / Kir Exp tidak boleh expired sebelum pengantaran selesai');
                // 	return false;
                // }
                // end bypass_date
                // buy price / termin for vendor
                if (data.is_vdr_bcng == State.is_vdr_bcng.yes) {} else {
                    if (data.termin1_amt_type == State.termin_amt_type.flat) {} else if (data.termin1_amt_type == State.termin_amt_type.percent) {
                        if (Number(data.termin1_amt) > 100) {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Maksimal percent termin 1 adalah 100%');
                            return false;
                        }
                    } else {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Termin 1 wajib diisi');
                        return false;
                    }
                    if (data.termin2_amt_type == State.termin_amt_type.flat) {} else if (data.termin2_amt_type == State.termin_amt_type.percent) {
                        if (Number(data.termin2_amt) > 100) {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Maksimal percent termin 2 adalah 100%');
                            return false;
                        }
                    }
                    if (data.termin1_amt_type == State.termin_amt_type.flat || data.termin1_amt_type == State.termin_amt_type.percent) {
                        if (data.termin1_date == '' || data.termin1_time == '') {
                            if (isAlert) Helper.toast('Warning', 'just now', 'tanggal dan waktu pada termin 1 wajib diisi');
                            return false;
                        }
                    }
                    if (data.termin2_amt_type == State.termin_amt_type.flat || data.termin2_amt_type == State.termin_amt_type.percent) {
                        if (data.termin1_date == '' || data.termin1_time == '') {
                            if (isAlert) Helper.toast('Warning', 'just now', 'tanggal dan waktu pada termin 1 wajib diisi');
                            return false;
                        }
                    }
                }

                // sell price / termin for client
                if (data.sell_termin1_amt_type == State.termin_amt_type.flat) {} else if (data.sell_termin1_amt_type == State.termin_amt_type.percent) {
                    if (Number(data.sell_termin1_amt) > 100) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Maksimal percent termin 1 adalah 100%');
                        return false;
                        bypass_date
                    }
                } else {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Termin 1 wajib diisi');
                    return false;
                }
                if (data.sell_termin2_amt_type == State.termin_amt_type.flat) {} else if (data.sell_termin2_amt_type == State.termin_amt_type.percent) {
                    if (Number(data.sell_termin2_amt) > 100) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Maksimal percent termin 2 adalah 100%');
                        return false;
                    }
                }
                if (data.sell_termin1_amt_type == State.termin_amt_type.flat || data.sell_termin1_amt_type == State.termin_amt_type.percent) {
                    if (data.sell_termin1_date == '' || data.sell_termin1_time == '') {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Jika termin 1 dipilih, maka tanggal dan waktu wajib diisi');
                        return false;
                    }
                }
                if (data.sell_termin2_amt_type == State.termin_amt_type.flat || data.sell_termin2_amt_type == State.termin_amt_type.percent) {
                    if (data.sell_termin1_date == '' || data.sell_termin1_time == '') {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Jika termin 2 diisi, maka termin 1 wajib diisi');
                        return false;
                    }
                }

                if (data.is_vdr_bcng == State.is_vdr_bcng.yes) {
                    if (!data.drv_bank_id) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Driver bank wajib diisi');
                        return false;
                    }
                    // if (!data.drv_bank_branch_name) {
                    //     if (isAlert) Helper.toast('Warning', 'just now', 'KCP driver wajib diisi');
                    //     return false;
                    // }
                    if (!data.drv_bank_acc_number) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Norek driver wajib diisi');
                        return false;
                    }
                    if (!data.drv_bank_acc_name) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Pemilik rekening driver wajib diisi');
                        return false;
                    }
                }

                // // start packing list data
                // if (isNaN(data.weight) && isNaN(data.cbm) && isNaN(data.koli)) {
                //     if (isAlert) Helper.toast('Warning', 'just now',
                //         'weight / volume / koli must be provided at least 1 of them');
                //     return false;
                // }
                // if (typeof data.truck_type_id != 'undefined') {
                //     if (!isNaN(data.weight) && data.truck_type_weight != 0 && data.weight > data
                //         .truck_type_weight) {
                //         if (isAlert) Helper.toast('Warning', 'just now',
                //             `maximum weight for type truck ${data.truck_type_name} is ${data.truck_type_weight} Kg`
                //         );
                //         return false;
                //     }
                //     if (!isNaN(data.cbm) && data.truck_type_cbm != 0 && data.cbm > data.truck_type_cbm) {
                //         if (isAlert) Helper.toast('Warning', 'just now',
                //             `maximum volume for type truck ${data.truck_type_name} is ${data.truck_type_cbm} m³`
                //         );
                //         return false;
                //     }
                //     if (!isNaN(data.koli) && data.truck_type_koli != 0 && data.koli > data.truck_type_koli) {
                //         if (isAlert) Helper.toast('Warning', 'just now',
                //             `maximum koli for type truck ${data.truck_type_name} is ${data.truck_type_koli} Pcs`
                //         );
                //         return false;
                //     }
                // }
                // if (State.checked_packing_list == 0) {
                //     if (isAlert) Helper.toast('Warning', 'just now', 'You haven\'t upload packing list');
                //     return false;
                // }
                // if (State.checked_packing_list == 1) {
                //     if (isAlert) Helper.toast('Warning', 'just now', 'Packing list in process of checking');
                //     return false;
                // }
                // if (State.checked_packing_list == 3 || State.input_packing_list.length < 1) {
                //     if (isAlert) Helper.toast('Warning', 'just now', 'Packing list not valid');
                //     return false;
                // }
                // // end packing list data

                return true;
            },
            showCheckoutSpinner: function() {
                $('#checkOutView').removeClass('d-none');
                $('#checkOutView').removeClass('d-block');

                $('#checkout-spinner').removeClass('d-none');
                $('.checkoutBody').addClass('d-none');
            },
            hideCheckoutSpinner: function() {
                $('#checkout-spinner').addClass('d-none');
                $('.checkoutBody').removeClass('d-none');
            },
            showCheckout: function(data) {
                // start zone location
                $('#checkout-point_container').html('');
                for (const point of data.points) {
                    const tmpltZone = `
                    <div class="row d-flex align-items-center">
                        <div class="col-5 mb-3">
                            <label for="" class="form-label">Lokasi Penjemputan</label>
                            <div class="card bg-light border mb-0">
                                <div class="card-body">
                                    <p class="text-bold mb-2">${point.pickup_zone_title}</p>
                                    <p class="mb-0">${point.pickup_zone_addr}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-2 text-center">
                            <label for="" class="form-label mb-0 mt-0">&nbsp;</label>
                            {{-- <p class="mb-0">to</p> --}}
                            <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                        </div>
                        <div class="col-5 mb-3">
                            <label for="" class="form-label">Lokasi Pengantaran</label>
                            <div class="card bg-light border mb-0">
                                <div class="card-body">
                                    <p class="text-bold mb-2">${point.drop_zone_title}</p>
                                    <p class="mb-0">${point.drop_zone_addr}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    `;
                    $('#checkout-point_container').append(tmpltZone);
                }
                // end zone location

                // // start packing list data
                // $('#checkout-unit').html('');
                // if (!isNaN(data.weight)) {
                //     $('#checkout-unit').append(`
            //         <div class="col-sm-4 mb-0 d-flex align-items-center">
            //             <label for="" class="form-label">Berat</label>
            //             <div class="card bg-light border mb-0 w-100">
            //                 <div class="card-body">
            //                     <p class="mb-0">${data.weight} Kg</p>
            //                 </div>
            //             </div>
            //         </div>
            //     `);
                // }
                // if (!isNaN(data.cbm)) {
                //     $('#checkout-unit').append(`
            //         <div class="col-sm-4 mb-0 d-flex align-items-center">
            //             <label for="" class="form-label">Volume</label>
            //             <div class="card bg-light border mb-0 w-100">
            //                 <div class="card-body">
            //                     <p class="mb-0">${data.cbm} m&sup3;</p>
            //                 </div>
            //             </div>
            //         </div>
            //     `);
                // }
                // if (!isNaN(data.koli)) {
                //     $('#checkout-unit').append(`
            //         <div class="col-sm-4 mb-0 d-flex align-items-center">
            //             <label for="" class="form-label">Koli</label>
            //             <div class="card bg-light border mb-0 w-100">
            //                 <div class="card-body">
            //                     <p class="mb-0">${data.koli} Pcs</p>
            //                 </div>
            //             </div>
            //         </div>
            //     `);
                // }
                // // end packing list data

                $('#checkout-group_pricing').html('');
                for (let opt of data.pricing_options) {
                    let badge_best_service = '',
                        real_price = '',
                        disc_price = '';
                    if (opt.is_best) {
                        badge_best_service = '<span class="badge bg-success ms-2">Best services</span>';
                    }
                    if (opt.disc_type == State.discount_type.fix) {
                        real_price =
                            `<p class="text-bold m-0 text-danger"><strike>Rp${(new Intl.NumberFormat('id-ID')).format(opt.real_price)}</strike></p>`;
                        disc_price =
                            `<p class="text-bold m-0 text-dark">Discount -${(new Intl.NumberFormat('id-ID')).format(opt.disc_price)}</p>`;
                    } else if (opt.disc_type == State.discount_type.percent) {
                        real_price =
                            `<p class="text-bold m-0 text-danger"><strike>Rp${(new Intl.NumberFormat('id-ID')).format(opt.real_price)}</strike></p>`;
                        disc_price =
                            `<p class="text-bold m-0 text-dark">Discount ${(new Intl.NumberFormat('id-ID')).format(opt.disc_percent)}%</p>`;
                    }
                    $('#checkout-group_pricing').append(`
                        <div class="row mb-3 d-flex align-items-center">
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="chooseFleet" data-lead_time_id="${opt.lead_time_id}" data-lead_time="${opt.lead_time}" data-price="${opt.price}"
                                    data-real_price="${opt.real_price}" data-disc_price="${opt.disc_price}">
                                    <label class="form-check-label text-success">
                                        ${opt.lead_time} Day ${badge_best_service}
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 text-end text-bold">
                                ${real_price}
                                ${disc_price}
                                <p class="text-bold m-0 text-success">Rp${(new Intl.NumberFormat('id-ID')).format(opt.price)}</p>
                            </div>
                        </div>
                    `);
                }

                if (data.is_insurance) {
                    $('#checkout-group_pricing').append(`
                        <hr>
                        <div class="row mb-3 d-flex align-items-center">
                            <div class="col-6">
                                <p class="mb-0">Biaya Asuransi</p>
                            </div>
                            <div class="col-6 text-end text-bold">
                                <p id="checkout-insurance_value" class="text-bold m-0 text-dark" data-id="${data.insurance?.id}" data-price="${data.insurance.premi_price}">Rp${(new Intl.NumberFormat('id-ID')).format(data.insurance.premi_price)}</p>
                            </div>
                        </div>
                    `);
                }

                $('#checkout-pickup_at').text(moment.unix(data?.points[0]?.pickup_at ?? 0).format('DD MMMM YYYY HH:mm:ss'));
                $('#checkout-truck_type').text(data.truck_type_name);

                $('#checkOutView').removeClass('d-none');
                $('#checkOutView').addClass('d-block');
            },
            hideCheckout: function() {
                $('#checkOutView').addClass('d-none');
                $('#checkOutView').removeClass('d-block');
                $('#btnOrder').attr('disabled', true);
            },
            downloadTemplatePackingList: function() {
                const fileName = 'template_packing_list.xlsx';
                const sheetName = 'template_packing_list';
                downloadPackingList(fileName, sheetName);
            },
            handleUploadPacking: function() {
                const reader = new FileReader();
                reader.onload = async function(e) {
                    TrxNew.hideUploadPackingList();
                    State.input_packing_list = [];
                    State.checked_packing_list = 1;

                    // let {
                    //     weight,
                    //     cbm,
                    //     koli,
                    // } = TrxNew.getData();

                    let data = e.target.result;
                    let workbook = XLSX.read(data, {
                        type: 'binary'
                    });
                    let sheet = workbook.Sheets['template_packing_list'];
                    let rowBodyStart = 3;
                    for (let key in sheet) {
                        if (key.indexOf('!') > -1) continue;
                        let rowNumber = Number(key.slice(1));
                        if (rowNumber < 3) continue;
                        if (key.indexOf('A') > -1) {
                            if (!sheet[key].v) {
                                Helper.toast('Warning', 'just now', 'Item Code not valid on row ' +
                                    rowNumber);
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart] = {};
                            for (let checkUniqCode of State.input_packing_list) {
                                if (checkUniqCode['Item Code'] == sheet[key].v) {
                                    State.checked_packing_list = 3;
                                    State.input_packing_list = [];
                                    Helper.toast('Warning', 'just now', 'Item Code: ' + sheet[key].v +
                                        ' is not uniq');
                                    TrxNew.showUploadPackingList();
                                    return false;
                                }
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Item Code'] = sheet[key].v;
                        }
                        if (key.indexOf('B') > -1) {
                            if (!sheet[key].v) {
                                Helper.toast('Warning', 'just now', 'Description not valid on row' +
                                    rowNumber);
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Description'] = sheet[key]
                                .v;
                        }
                        if (key.indexOf('C') > -1) {
                            if (isNaN(Number(sheet[key].v))) {
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                Helper.toast('Warning', 'just now', 'Weight (kg) not numeric on row' +
                                    rowNumber);
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Weight (kg)'] = Number(
                                sheet[
                                    key].v);
                        }
                        // if (key.indexOf('D') > -1) {
                        //     if (Number(sheet[key].v) < 1) {
                        //         if (State.input_packing_list[rowNumber - rowBodyStart]['Item Code']
                        //             .toLowerCase()
                        //             .indexOf('note') >
                        //             -1 || State.input_packing_list[rowNumber - rowBodyStart]['Item Code']
                        //             .toLowerCase().indexOf(
                        //                 'catatan') > -1) {} else {
                        //             State.checked_packing_list = 3;
                        //             State.input_packing_list = [];
                        //             Helper.toast('Warning', 'just now',
                        //                 'Qty cannot be 0 minimum qty is 1 on row' + rowNumber);
                        //             TrxNew.showUploadPackingList();
                        //             return false;
                        //         }
                        //     }
                        //     State.input_packing_list[rowNumber - rowBodyStart]['Qty'] = Number(sheet[key]
                        //         .v);
                        // }
                        if (key.indexOf('D') > -1) {
                            if (isNaN(Number(sheet[key].v))) {
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                Helper.toast('Warning', 'just now', 'Length (cm) not numeric on row' +
                                    rowNumber);
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Length (cm)'] = Number(
                                sheet[
                                    key].v);
                        }
                        if (key.indexOf('E') > -1) {
                            if (isNaN(Number(sheet[key].v))) {
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                Helper.toast('Warning', 'just now', 'Wide (cm) not numeric on row' +
                                    rowNumber);
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Wide (cm)'] = Number(sheet[
                                    key]
                                .v);
                        }
                        if (key.indexOf('F') > -1) {
                            if (isNaN(Number(sheet[key].v))) {
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                Helper.toast('Warning', 'just now', 'Height (cm) not numeric on row' +
                                    rowNumber);
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Height (cm)'] = Number(
                                sheet[
                                    key].v);
                        }
                        if (key.indexOf('G') > -1) {
                            if (isNaN(Number(sheet[key].v))) {
                                State.checked_packing_list = 3;
                                State.input_packing_list = [];
                                Helper.toast('Warning', 'just now', 'Volume (m3) not numeric on row' +
                                    rowNumber);
                                TrxNew.showUploadPackingList();
                                return false;
                            }
                            State.input_packing_list[rowNumber - rowBodyStart]['Volume (m3)'] = Number(
                                sheet[
                                    key].v);
                            if (State.input_packing_list[rowNumber - rowBodyStart]['Item Code']
                                .toLowerCase()
                                .indexOf('note') >
                                -1 || State.input_packing_list[rowNumber - rowBodyStart]['Item Code']
                                .toLowerCase().indexOf(
                                    'catatan') > -1) {
                                // rereset array index
                                State.input_packing_list.splice(rowNumber - rowBodyStart);
                                // not rereset array index
                                // State.input_packing_list[rowNumber-rowBodyStart] = undefined;
                            }
                        }
                    }
                    // State.input_packing_list = State.input_packing_list.filter(() => true);
                    let check_packing_list = await Req.check_packing_list({
                        packing_list: State.input_packing_list,
                        // weight,
                        // cbm,
                        // koli,
                    }, true);
                    if (check_packing_list.type == 'success') {
                        State.checked_packing_list = 2;
                    } else {
                        State.checked_packing_list = 3;
                    }
                    TrxNew.showUploadPackingList();
                };
                reader.onerror = function(err) {
                    console.error(err);
                };
                reader.onabort = function(err) {
                    console.error(err);
                };
                $('#add-packinglist').on('change', function(e) {
                    if (browserBack()) {
                        return false;
                    }
                    let file = e.target.files[0];
                    let type = file.name.split('.');
                    if (type[1].indexOf('xlsx') < 0) {
                        Helper.toast('Warning', 'just now',
                            'Format file not supported. Supported format is .xlsx');
                        return false;
                    }
                    // let {
                    //     weight,
                    //     cbm,
                    //     koli,
                    // } = TrxNew.getData();
                    // if (isNaN(weight) && isNaN(cbm) && isNaN(koli)) {
                    //     Helper.toast('Warning', 'just now',
                    //         'weight / volume / koli must be provided at least 1 of them');
                    //     return false;
                    // }
                    reader.readAsBinaryString(file);
                });
                $('#add-packinglist').on('click', function() {
                    $('#add-packinglist').val('');
                });
            },
            hideUploadPackingList: function() {
                $('#add-group_upload_packinglist').addClass('d-none');
                $('#add-group_upload_packinglist_spinner').removeClass('d-none');
            },
            showUploadPackingList: function() {
                $('#add-group_upload_packinglist').removeClass('d-none');
                $('#add-group_upload_packinglist_spinner').addClass('d-none');
            },
            showBtnOrdSpinner: function() {
                $('#btnOrderSpinner').removeClass('d-none');
                $('#btnOrder').addClass('d-none');
            },
            hideBtnOrdSpinner: function() {
                $('#btnOrderSpinner').addClass('d-none');
                $('#btnOrder').removeClass('d-none');
            },
            clearPocket: function() {
                $('#add_uang_saku').html('<option value="" selected>Belum Dipilih Uang Saku</option>');
                $('#add_type_uang_saku').val('0').trigger('change');
                TrxNew.clearPocketCheckpoint();
                State.l_pockets = [];
            },
            clearPocketCheckpoint: function() {
                $('.groupSakuCheckpointName').html('').trigger('change');
                $('.groupSakuCheckpointTotal').html('').trigger('change');
            },
            clearBankDriver: function() {
                $('#add-drv_bank').val('').trigger('change');
                $('#add-drv_acc_number').val('');
                $('#add-drv_acc_name').val('');
            },
            submitData: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnOrder').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnOrder').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_trx_spc_create_order_v1') }}",
                        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) => {
                            TrxNew.hideBtnOrdSpinner();
                            $('#btnOrder').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 create order');
                            window.location.href = State.route_list_trx;
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            TrxNew.hideBtnOrdSpinner();
                            $('#btnOrder').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'
                            });
                        }
                    })
                })
            },
            submitLogError: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnCalculate').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnCalculate').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_send_log') }}",
                        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) => {
                            TrxNew.hideBtnOrdSpinner();
                            $('#btnCalculate').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            TrxNew.hideBtnOrdSpinner();
                            $('#btnOrder').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'
                            });
                        }
                    })
                })
            },
        }

        /**
         * point yang berindex 0 dari document.properties adalah template
         * point yang berindex 0 dari document.querySelector('#point-container').properties adalah input
         **/
        const MultiplePoint = {
            activate: function() {
                MultiplePoint.event();
            },
            event: function() {
                $('#point-add-row').on('click', function() {
                    ++State.countClickAddPoint;
                    MultiplePoint.addRow();
                });
                $('#point-container').on('click', '.point-minus', function(e) {
                    const elClick = $(e.target);
                    const closest = elClick.closest('.point-card');
                    MultiplePoint.delRow(closest);
                });
                // init first row after reload
                $('#point-add-row').trigger('click');
            },
            addRow: function() {
                const templateNode = MultiplePoint.getFormatedTemplateNode();
                const container = document.querySelector('#point-container');

                // default length 1 (default selected option)
                const optsPckZones = templateNode.querySelectorAll('[name="add-pickup_zone"] option');
                const optsDropZones = templateNode.querySelectorAll('[name="add-drop_zone"] option');

                const inptPckZone = templateNode.querySelector('[name="add-pickup_zone"]');
                if (State.l_pck_zones.length > 0 && optsPckZones.length === 1) {
                    for (const pck of State.l_pck_zones) {
                        const opt = document.createElement('option');
                        opt.value = pck.id;
                        opt.innerHTML = pck.name;
                        opt.setAttribute('data-id', pck.id);
                        opt.setAttribute('data-title', pck.name);
                        opt.setAttribute('data-addr', pck.fulladdress);
                        inptPckZone.appendChild(opt);
                    }
                }
                const inptDropZone = templateNode.querySelector('[name="add-drop_zone"]');
                if (State.l_drop_zones.length > 0 && optsDropZones.length === 1) {
                    for (const drop of State.l_drop_zones) {
                        const opt = document.createElement('option');
                        opt.value = drop.id;
                        opt.innerHTML = drop.name;
                        opt.setAttribute('data-id', drop.id);
                        opt.setAttribute('data-title', drop.name);
                        opt.setAttribute('data-addr', drop.fulladdress);
                        inptDropZone.appendChild(opt);
                    }
                }

                container.appendChild(templateNode);
                $('#point-container [name="add-pickup_zone"]').select2();
                $('#point-container [name="add-drop_zone"]').select2();
                MultiplePoint.reInitMinDate();
                return true;
            },
            delRow: function(elPointCard) {
                const rowno = Number(elPointCard.find('.point-rowno').text());
                if (isNaN(rowno) || rowno <= 1) {
                    Helper.toast('Warning', 'just now', 'Minimal terdapat 1 penjemputan dan pengantaran');
                    return false;
                }
                elPointCard.remove();
                MultiplePoint.reNumbered();
                return true;
            },
            delAfterFirstRow: function() {
                const length = $('.point-card').length;
                for (let i = 0; i < length; i++) {
                    if (i < 2) continue;
                    $($('.point-card')[length - i]).remove();
                }
                MultiplePoint.reNumbered();
                return true;
            },
            getFormatedTemplateNode: function() {
                const templateNode = document.querySelector('#templatePickDrop .point-card').cloneNode(true);
                const lastRowNumber = MultiplePoint.getLastRowNumber();
                templateNode.setAttribute('data-id', moment().valueOf());
                templateNode.querySelector('.point-rowno').textContent = lastRowNumber + 1;
                templateNode.querySelector('[name="add-pickup_zone"]').classList.add('select2');
                templateNode.querySelector('[name="add-drop_zone"]').classList.add('select2');
                return templateNode;
            },
            getLastRowNumber: function() {
                // not get index
                return document.querySelector('#point-container').querySelectorAll('.point-minus').length;
            },
            reNumbered: function() {
                const container = document.querySelector('#point-container');
                const pointsRowNo = container.querySelectorAll('.point-rowno');
                for (const i in pointsRowNo) {
                    const no = Number(i);
                    if (isNaN(no)) continue;
                    pointsRowNo[i].textContent = no + 1;
                }
                return true;
            },
            reInitMinDate: function() {
                // min date is today
                let TimeISOString = moment().toISOString().split('T');
                let time = TimeISOString[1].split('.')[0].split(':');
                for (let point of $('#point-container .point-card')) {
                    point = $(point);
                    // point.find('[name="add-pickup_date"]').attr('min', TimeISOString[0]); // bypass_date
                }
            },
        }

        /**
         * https://stackoverflow.com/questions/39980722/moment-js-get-current-time-in-milliseconds
         * moment().valueOf()
         * https://stackoverflow.com/questions/35184003/moment-js-convert-milliseconds-into-date-and-time
         * moment(1652078936648, 'x').format('YYYY-MM-DD HH:mm:ss')
         */

        Wrapper.activate();
    </script>
@endsection