@extends('app.app')
@section('title')
    Admin Detail Transaksi
@endsection
@section('customcss')
    <link rel="stylesheet"
        href="{{ asset('assets/vendor/Tiny-Vertical-Timeline-Plugin-with-jQuery-jQuery-UI/src/jquery.timeline.css') }}">
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-5" id="">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col d-flex">
                                    <p class="card-title text-bold mb-0">Detail Pesanan #{{ $order->code }}</p>
                                    <p class="mb-0" style="margin-top: 0.25rem;">
                                        @if  ($order->crt_type_order === \App\Models\Orders::CRT_TYPE_ORDER_ADMIN_SPECIAL)
                                            <span class="badge bg-warning text-dark">Pesanan Khusus</span>
                                        @endif
                                    </p>
                                </div>
                                <div class="col text-end">
                                    <button class="btn btn-secondary btn-sm"
                                        onclick="location.href='{{ route('view_transactions') }}'">Kembali</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            {{-- <div class="row d-flex align-items-center"> --}}
                            <div class="row d-flex">
                                <div class="col-5 mb-3">
                                    <div class="row">
                                        <div class="col-sm-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran (1)</p>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Tanggal Penjemputan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    <p class="mb-0"><span id="view-pickup_date_at"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Waktu Penjemputan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    <p class="mb-0"><span id="view-pickup_time_at"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5 mb-3">
                                    <div class="row">
                                        <div class="col-sm-12 col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Layanan Yang Dipilih</p>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Durasi Pengantaran & Harga</label>
                                            <div class="card bg-light border mb-0 w-100">
                                                <div class="card-body d-flex justify-content-between">
                                                    <p class="mb-0">{{ $order->lead_time }} Hari</p>
                                                    <p class="mb-0">
                                                        Rp{{ number_format($order->price, 0, ',', '.') }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Tipe Kendaraan</label>
                                            <div class="card bg-light border mb-0 w-100">
                                                <div class="card-body d-flex justify-content-between">
                                                    {{-- <p class="mb-0">{{ $order->prefer_truck_type_name }}</p> --}}
                                                    <p class="mb-0">{{ $order->vhc_type_name }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3 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">Gudang Pluit SiCepat (Jakarta)</p> --}}
                                            <p class="text-bold mb-2">{{ $order->pck_name }}</p>
                                            {{-- <p 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> --}}
                                            <p class="mb-0">{{ $order->pck_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">Kantor Pusat SiCepat (yogyakarta)</p> --}}
                                            <p class="text-bold mb-2">{{ $order->drop_name }}</p>
                                            {{-- <p class="mb-0">Jl. Prof. Herman Yohanes No.989, Terban, Gondokusuman, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55223, Indonesia</p> --}}
                                            <p class="mb-0">{{ $order->drop_addr }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @foreach ($adtPoints as $i => $p)
                                <div class="row d-flex align-items-center">
                                    <div class="col-12 mb-3">
                                        <p class="text-danger text-bold mb-0">Infomasi Penjemputan dan Pengantaran Lainnya ({{ $i + 2 }})</p>
                                    </div>
                                    <div class="col-5 mb-3">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <label for="" class="form-label">Tanggal Penjemputan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0"><span id="view-pickup_date_at{{ $i + 1 }}"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label for="" class="form-label">Waktu Penjemputan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0"><span id="view-pickup_time_at{{ $i + 1 }}"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3 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">{{ $p->pck_name }}</p>
                                                <p class="mb-0">{{ $p->pck_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">{{ $p->drop_name }}</p>
                                                <p class="mb-0">{{ $p->drop_addr }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="row d-flex align-items-center mb-3">
                                        <div class="col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Infomasi Vendor</p>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Nama Vendor</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">CV Karya Expedisi Bangsa</p> --}}
                                                    @if ($order->vdr_name)
                                                        <p class="mb-0">{{ $order->vdr_name }}</p>
                                                    @else
                                                        <p class="mb-0 text-primary">belum ditugaskan</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Kendaraan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">B 1192 XY</p> --}}
                                                    @if ($order->vhc_nopol1)
                                                        <p class="mb-0">
                                                            {{ $order->vhc_nopol1 . ' ' . $order->vhc_nopol2 . ' ' . $order->vhc_nopol3 }}
                                                        </p>
                                                    @else
                                                        <p class="mb-0 text-primary">belum ditugaskan</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Nama Pengemudi</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">Archibald Borislav Aldric</p> --}}
                                                    @if ($order->drv_name)
                                                        <p class="mb-0"> {{ $order->drv_name }} </p>
                                                        <p class="mb-0">
                                                            <a href="tel:0{{ $order->drv_phone_val }}">
                                                                <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                                {{ implode(' ', str_split('0' . $order->drv_phone_val, 4)) }}
                                                            </a>
                                                        </p>
                                                        <p class="mb-0">
                                                            <a href="https://api.whatsapp.com/send/?phone=62{{ $order->drv_phone_val }}&text=Halo&app_absent=0"
                                                                class="" target="_blank"><i
                                                                    class="text-success ion-social-whatsapp"></i>
                                                                {{ implode(' ', str_split('0' . $order->drv_phone_val, 4)) }}</a>
                                                        </p>
                                                    @else
                                                        <p class="mb-0 text-primary">belum ditugaskan</p>
                                                    @endif
                                                </div>
                                            </div>
                                            @if ($order->drv_name2)
                                                <label for="" class="form-label">Nama Pengemudi 2</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        @if ($order->drv_name2)
                                                            <p class="mb-0"> {{ $order->drv_name2 }} </p>
                                                            <p class="mb-0">
                                                                <a href="tel:0{{ $order->drv_phone2_val }}">
                                                                    <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                                    {{ implode(' ', str_split('0' . $order->drv_phone2_val, 4)) }}
                                                                </a>
                                                            </p>
                                                            <p class="mb-0">
                                                                <a href="https://api.whatsapp.com/send/?phone=62{{ $order->drv_phone2_val }}&text=Halo&app_absent=0"
                                                                    class="" target="_blank"><i
                                                                        class="text-success ion-social-whatsapp"></i>
                                                                    {{ implode(' ', str_split('0' . $order->drv_phone2_val, 4)) }}</a>
                                                            </p>
                                                        @else
                                                            <p class="mb-0 text-primary">belum ditugaskan</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7">
                    @if ($order->pck_chk_stts === \App\Models\OrdersPickups::CHK_STTS_SUBMIT)
                    <div class="accordion mb-3" id="">
                        <div class="accordion-item border-0 radius-8">
                            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                <button class="accordion-button radius-8 collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseOne">
                                    Data Penjemputan
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingOne">
                                <div class="accordion-body pb-0">
                                    <div class="row align-items-start justify-content-between">
                                        <div class="col-sm-6 col-8">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Nomor Seal</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_pck_seal_number }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button id="btnDownloadReportPickup"
                                                class="btn btn-primary btn-sm btn-block">Unduh Data
                                                Penjemputan</button>
                                        </div>
                                    </div>
                                    <div class="row d-flex align-items-start">
                                        <div class="col-md-4 col-sm-auto d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto Seal</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_pck_seal_img)? asset('storage/' . $order->ord_pck_seal_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-auto d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Pengemudi + Armada</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_pck_drv_armd_img)? asset('storage/' . $order->ord_pck_drv_armd_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-auto d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label" style="white-space: nowrap;">Nomor
                                                    Polisi Kendaraan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_pck_nopol_img)? asset('storage/' . $order->ord_pck_nopol_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row d-flex align-items-start">
                                        <label for="" class="form-label">Dokumen Kelengkapan Dari Client</label>
                                        @if (isset($order->ord_pck_docs_client_img) && count(json_decode($order->ord_pck_docs_client_img)) > 0)
                                            @foreach (json_decode($order->ord_pck_docs_client_img) as $client_img)
                                                <div class="col-md-6 col-sm-auto d-flex">
                                                    <div class="mb-3">
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($client_img)? asset('storage/' . $client_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                                    alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="row d-flex align-items-start">
                                        <div class="col-md-6 col-sm-auto d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto pemasangan seal</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_pck_seal_install_img)? asset('storage/' . $order->ord_pck_seal_install_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-auto d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto barang</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_pck_goods_img)? asset('storage/' . $order->ord_pck_goods_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if ($order->drop_chk_stts === \App\Models\OrdersDrops::CHK_STTS_SUBMIT)
                    <div class="accordion mb-3" id="">
                        <div class="accordion-item border-0 radius-8">
                            <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                                <button class="accordion-button radius-8 collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseTwo">
                                    Data Pengantaran
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingTwo">
                                <div class="accordion-body pb-0">
                                    <div class="row mb-3">
                                        <div class="col-12 text-end">
                                            <button id="btnDownloadReportDrop"
                                                class="btn btn-primary btn-sm btn-block">Unduh Data
                                                Pengantaran</button>
                                        </div>
                                    </div>
                                    <div class="row d-flex align-items-start">
                                        <div class="col-sm-3 col-6 d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto mobil tiba di tujuan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_drop_arrived_img)? asset('storage/' . $order->ord_drop_arrived_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-6 d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto serah terima</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_drop_handover_img)? asset('storage/' . $order->ord_drop_handover_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-6 d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto DO yg sudah di TTD</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_drop_do_ttd_img)? asset('storage/' . $order->ord_drop_do_ttd_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-6 d-flex">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Foto surat jalan di TTD</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body p-0">
                                                        <img src="{{ isset($order->ord_drop_spk_img)? asset('storage/' . $order->ord_drop_spk_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                            alt="" class="img-fluid img-report">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if ($order->is_accident === \App\Models\Orders::IS_ACCIDENT_YES)
                    <div class="accordion mb-3" id="">
                        <div class="accordion-item border-0 radius-8">
                            <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                                <button class="accordion-button radius-8 collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseThree">
                                    Data Kecelakaan
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingThree">
                                <div class="accordion-body pb-0">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Lokasi Kejadian</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_acdnt_location }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Kronologi Kejadian</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_acdnt_story }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row d-flex align-items-start">
                                        <label for="" class="form-label">Foto Pendukung</label>
                                        @if (isset($order->ord_acdnt_imgs) && count(json_decode($order->ord_acdnt_imgs)) > 0)
                                            @foreach (json_decode($order->ord_acdnt_imgs) as $acdnt_img)
                                                <div class="col-md-6 col-sm-auto d-flex">
                                                    <div class="mb-3">
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($acdnt_img)? asset('storage/' . $acdnt_img): 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}"
                                                                    alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Nomor Polisi Kendaraan
                                                    Pengganti</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_acdnt_new_nopol1 . ' ' . $order->ord_acdnt_new_nopol2 . ' ' . $order->ord_acdnt_new_nopol3 }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Tipe Kendaraan Pengganti</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_acdnt_new_vhc_type_name }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="" class="form-label">Pengendara Pengganti</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0">
                                                            <span>{{ $order->ord_acdnt_new_drv_name }}</span>
                                                        </p>
                                                        <p class="mb-0">
                                                            <a href="tel:0{{ $order->ord_acdnt_new_drv_phone_val }}">
                                                                <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                                {{ implode(' ', str_split('0' . $order->ord_acdnt_new_drv_phone_val, 4)) }}
                                                            </a>
                                                        </p>
                                                        <p class="mb-0">
                                                            <a href="https://api.whatsapp.com/send/?phone=62{{ $order->ord_acdnt_new_drv_phone_val }}&text=Halo&app_absent=0"
                                                                class="" target="_blank"><i
                                                                    class="text-success ion-social-whatsapp"></i>
                                                                {{ implode(' ', str_split('0' . $order->ord_acdnt_new_drv_phone_val, 4)) }}</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    {{-- <div class="card {{ $order->is_fix_price === \App\Models\Orders::IS_FIX_PRICE_YES ? '' : 'd-none' }}"
                        id="actionView">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <p class="text-danger text-bold">Invoce to Client</p>
                                    <div id="receivePayment">
                                        <button class="btn btn-sm btn-warning" id="btnGenerate">Generate
                                            Invoice</button>
                                        <div id="btnGenerateSpinner" class="d-none">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                        @if ($order->confirm_client_pay_at != 0)
                                            <span id="view-confirm_client_pay_at"></span>
                                        @else
                                            <button
                                                class="btn btn-sm btn-danger {{ $order->invc_to_client_at != 0 ? '' : 'd-none' }}"
                                                id="btnConfirm" data-bs-toggle="modal"
                                                data-bs-target="#modalReceivePayment">Confirm
                                                Payment</button>
                                            <div id="btnConfirmSpinner" class="d-none">
                                                <div class="spinner-border" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-12 mt-3 pt-3">
                                    <p class="text-danger text-bold">Payment to Vendor</p>
                                    <div id="paymentVendor"
                                        class="{{ $order->invc_to_client_at != 0 ? '' : 'd-none' }}">
                                        <button class="btn btn-sm btn-warning" id="btnGeneratePayment">Generate
                                            Instruction</button>
                                        <div id="btnGeneratePaymentSpinner" class="d-none">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                        @if ($order->confirm_vdr_pay_at != 0)
                                            <span id="view-confirm_vdr_pay_at"></span>
                                        @else
                                            <button
                                                class="btn btn-sm btn-danger {{ $order->payout_to_vdr_at != 0 ? '' : 'd-none' }}"
                                                id="btnConfirmVendor" data-bs-toggle="modal"
                                                data-bs-target="#modalPayout">Confirm
                                                Payout</button>
                                            <div id="btnConfirmVendorSpinner" class="d-none">
                                                <div class="spinner-border" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="card mb-3">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Order History</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="order-timeline"></div>
                        </div>
                    </div>
                    <div class="accordion mb-3" id="">
                        <div class="accordion-item border-0 radius-8">
                            <h2 class="accordion-header" id="panelsStayOpen-headingFour">
                                <button class="accordion-button radius-8 collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseFour">
                                    Additional Items
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingFour">
                                <div class="accordion-body pb-0">
                                    <div class="row">
                                        <div class="col-12 mb-3">
                                            <div class="text-end mb-3">
                                                <button id="btnMdlNewAdtItem" class="btn btn-sm btn-danger">Ajukan pembayaran</button>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <div class="table-responsive mb-3">
                                                <table class="table table-striped w-100" id="tblAdditional">
                                                    <thead>
                                                        <tr class="">
                                                            <th class="text-center">#</th>
                                                            <th class="text-center"></th>
                                                            <th class="w-50">Deskripsi</th>
                                                            <th class="text-center">Jumlah</th>
                                                            <th class="text-center">Tenggat Waktu</th>
                                                            <th class="text-nowrap">Bayarkan ke</th>
                                                            <th class="">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="">
                                                            <td class="text-center small">1</td>
                                                            <td class="text-center" id="tblColAction">
                                                                <a href="javascript:void(0)"
                                                                    class="btn btn-primary btn-sm text-nowrap small w-100"
                                                                    data-bs-toggle="modal" data-bs-target="#mdlpayAdd">Bayar</a>
                                                            </td>
                                                            <td class="small">Biaya inap kendaraan</td>
                                                            <td class="text-nowrap small text-end">Rp350.000</td>
                                                            <td class="text-nowrap small">23 Apr 2022 06:00</td>
                                                            <td class="">
                                                                <p class="mb-0 text-nowrap small">Bank Central Asia (BCA)</p>
                                                                <p class="mb-0 text-nowrap small">5270860721</p>
                                                                <p class="mb-0 text-nowrap small">A/N. Karya Expedisi Bangsa CV</p>
                                                            </td>
                                                            <td class="text-nowrap" id="tblColStatus">
                                                                <p class="text-danger mb-0 text-nowrap small">Belum Bayar</p>
                                                            </td>
                                                        </tr>
                                                        <tr class="">
                                                            <td class="text-center small">2</td>
                                                            <td class="text-center small">
                                                                <a href="javascript:void(0)" class="text-nowrap text-success"
                                                                    data-bs-toggle="modal" data-bs-target="#mdlViewAdd">Lihat Bukti</a>
                                                            </td>
                                                            <td class="small">Biaya pengemudi tambahan</td>
                                                            <td class="text-nowrap small text-end">Rp530.000</td>
                                                            <td class="text-nowrap small">23 Apr 2022 04:00</td>
                                                            <td class="">
                                                                <p class="mb-0 text-nowrap small">Bank Central Asia (BCA)</p>
                                                                <p class="mb-0 text-nowrap small">5270860721</p>
                                                                <p class="mb-0 text-nowrap small">A/N. Karya Expedisi Bangsa CV</p>
                                                            </td>
                                                            <td class="text-nowrap">
                                                                <p class="mb-0 text-success text-nowrap small">Lunas</p>
                                                                <p class="mb-0 text-nowrap small text-muted">23 Apr 2022 06:00</p>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal receive Payment --}}
    <div class="modal" id="modalReceivePayment" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirm Receive Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="rcv-client_ref_number" class="form-label">Ref Number</label>
                    <input type="text" id="rcv-client_ref_number" name="rcv-client_ref_number" class="form-control"
                        placeholder="please input ref number">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger btn-sm" id="btnSubmitReceive"
                        data-bs-dismiss="modal">Submit</button>
                    <div id="btnSubmitReceiveSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modalPayout" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirm Payout</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="rcv-vendor_ref_number" class="form-label">Ref Number</label>
                    <input type="text" id="rcv-vendor_ref_number" name="rcv-vendor_ref_number" class="form-control"
                        placeholder="please input ref number">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger btn-sm" id="btnSubmitPayout"
                        data-bs-dismiss="modal">Submit</button>
                    <div id="btnSubmitPayoutSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- additional items --}}
    <div class="modal" id="mdlAddItem" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlAddItemLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlAddItemLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="addSlcItemWrapper" class="mb-3">
                        <label for="slcItem" class="form-label w-100">Pilih Item <span class="text-danger">*</span></label>
                        <select name="slcItem" id="slcItem" class="select2 form-control" style="width: 100% !important">
                            <option value="" selected disabled>Belum ada item yang dipilih</option>
                            @foreach ($items as $item)
                                <option value="{{ $item->id }}" data-name="{{ $item->name }}" data-type="{{ $item->type }}" data-price="{{ $item->price }}" data-is_adm_price="{{ $item->is_adm_price }}">{{ $item->name }}</option>
                            @endforeach
                            <option value="new"><span class="text-danger">Tambah item baru</span></option>
                        </select>
                        <small id="slcItemPrice"></small>
                    </div>
                    <div id="addNewItemWrapper" class="d-none">
                        <div class="mb-3">
                            <label for="add-item_name" class="form-label">Nama Item <span class="text-danger">*</span></label>
                            <input type="text" name="add-item_name" id="add-item_name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="add-item_type" class="form-label">Satuan <span class="text-danger">*</span></label>
                            <select name="add-item_type" id="add-item_type" class="select2 form-control" style="width: 100% !important">
                                <option value="" selected disabled>Belum ada satuan yang dipilih</option>
                                @foreach ($unitTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="add-item_price" class="form-label">Harga Satuan <span class="text-danger">*</span></label>
                            <input type="text" name="add-item_price" id="add-item_price" class="form-control">
                        </div>
                        {{-- <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" name="add-item_isAdmPrice" type="checkbox" value="yes" id="add-item_isAdmPrice">
                                <label class="form-check-label text-danger" for="add-item_isAdmPrice">
                                    Biaya admin bank ?
                                </label>
                            </div>
                        </div> --}}
                    </div>
                    <div class="mb-3">
                        <label for="add-item_qty" class="form-label">Jumlah Item <span class="text-danger">*</span></label>
                        <input type="number" name="add-item_qty" id="add-item_qty" class="form-control">
                    </div>
                    <div id="groupFillDdln">
                        <div class="mb-3">
                            <label for="ddln_pay_date" class="form-label">Tenggat Tanggal Pembayaran <span class="text-danger">*</span></label>
                            <input type="date" name="ddln_pay_date" id="ddln_pay_date" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="add-ddln_pay_time" class="form-label text-nowrap">Tenggat Waktu Pembayaran <span class="text-danger">*</span></label>
                            <div class="row">
                                <div class="col-sm-6 col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                    <select name="ddln_pay_time_hour" id="ddln_pay_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-sm-6 col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                    <select name="ddln_pay_time_minute" id="ddln_pay_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 id="groupSubmissionProof">
                        <div class="mb-3">
                            <label for="submission_proof" class="col-form-label">Unggah Bukti Pengajuan <span class="text-danger">*</span></label>
                            <br>
                            <img id="inpt-submission_proof-img" class="img-fluid d-none" src="#"
                                alt="inpt-submission_proof-img">
                            <div id="inpt-group_submission_proof_spinner" class="d-none">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div>
                                <span id="inpt-submission_proof-status" class="d-none"></span>
                                <span id="inpt-submission_proof-filesize" class="d-none"></span>
                            </div>
                            <div id="inpt-group_rotate_submission_proof" class="pt-2 d-flex justify-content-start d-none">
                                <button type="button" class="btnRotateLeft btn btn-sm btn-outline-primary ml-1"
                                    style="padding:0.25rem 0.5rem;border-radius:0.25rem;"><i
                                        class="icon ion-arrow-return-left"></i></button>
                                <button type="button" class="btnRotateRight btn btn-sm btn-outline-primary ml-1"
                                    style="padding:0.25rem 0.5rem;border-radius:0.25rem;"><i
                                        class="icon ion-arrow-return-right"></i></button>
                            </div>
                            <input type="file" id="inpt-submission_proof-file" class="form-control form-control-sm">
                            <input type="text" id="inpt-submission_proof-base64" class="form-control" hidden>
                        </div>
                    </div>
                    <div id="groupPayPurpose" class="mb-3 d-none">
                        <label for="slcPayPurpose" class="form-label">Tujuan Pembayaran</label>
                        <select name="slcPayPurpose" id="slcPayPurpose" class="select2 form-control" style="width: 100% !important">
                            <option value="none" disabled>Tidak ada</option>
                            <option value="fill" selected>Isi data penerima</option>
                        </select>
                    </div>
                    <div id="fillReceiverWrapper">
                        <div class="mb-3">
                            <label for="bank" class="form-label">Bank <span class="text-danger">*</span></label>
                            <select id="bank" name="bank" class="form-control select2" style="width:100%;">
                                <option value="" selected disabled>Pilih</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="bank_acc_number" class="form-label">Nomor Rekening <span class="text-danger">*</span></label>
                            <input type="number" class="form-control form-control-sm" name="bank_acc_number"
                                id="bank_acc_number">
                        </div>
                        <div class="mb-3">
                            <label for="bank_acc_name" class="form-label">Pemilik Rekening <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm" name="bank_acc_name"
                                id="bank_acc_name">
                        </div>
                    </div>
                    {{-- <div class="mb-3">
                        <div class="form-group">
                            <label for="is_paid" class="form-label">Status Pembayaran</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_paid">
                                <label class="form-check-label" for="is_paid"><span class="text-dark"
                                        id="txtIsPaid">Belum dibayar</span></label>
                            </div>
                        </div>
                        <div id="groupIsPaid" class="form-group d-none">
                            <div class="mb-3">
                                <label for="is_paid_proof" class="col-form-label">Unggah Bukti Pembayaran <span class="text-danger">*</span></label>
                                <br>
                                <img id="inpt-is_paid_proof-img" class="img-fluid d-none" src="#"
                                    alt="inpt-is_paid_proof-img">
                                <div id="inpt-group_is_paid_proof_spinner" class="d-none">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                                <div>
                                    <span id="inpt-is_paid_proof-status" class="d-none"></span>
                                    <span id="inpt-is_paid_proof-filesize" class="d-none"></span>
                                </div>
                                <div id="inpt-group_rotate_is_paid_proof" class="pt-2 d-flex justify-content-start d-none">
                                    <button type="button" class="btnRotateLeft btn btn-sm btn-outline-primary ml-1"
                                        style="padding:0.25rem 0.5rem;border-radius:0.25rem;"><i
                                            class="icon ion-arrow-return-left"></i></button>
                                    <button type="button" class="btnRotateRight btn btn-sm btn-outline-primary ml-1"
                                        style="padding:0.25rem 0.5rem;border-radius:0.25rem;"><i
                                            class="icon ion-arrow-return-right"></i></button>
                                </div>
                                <input type="file" id="inpt-is_paid_proof-file" class="form-control form-control-sm">
                                <input type="text" id="inpt-is_paid_proof-base64" class="form-control" hidden>
                            </div>
                            <div class="mb-3">
                                <label for="is_paid_date" class="form-label">Tanggal Dibayar <span class="text-danger">*</span></label>
                                <input type="date" name="is_paid_date" id="is_paid_date" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="is_paid_time" class="form-label text-nowrap">Waktu Dibayar <span class="text-danger">*</span></label>
                                <div class="row">
                                    <div class="col-sm-6 col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                        <select name="is_paid_time_hour" id="is_paid_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-sm-6 col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                        <select name="is_paid_time_minute" id="is_paid_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> --}}
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" name="invcToClient" type="checkbox" value="yes" id="invcToClient">
                            <label class="form-check-label text-danger" for="invcToClient">
                                Ditagihkan ke client ?
                            </label>
                        </div>
                    </div>
                    <div id="groupPriceToClient" class="d-none">
                        <div class="mb-3">
                            <label for="add-invc_item_price" class="form-label">Harga Satuan yang Ditagihkan <span class="text-danger">*</span></label>
                            <input type="number" class="form-control form-control-sm" name="add-invc_item_price"
                                id="add-invc_item_price">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnDelItem_updt" class="btn btn-sm btn-warning">Hapus ?</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-sm btn-primary" id="btnSubmitAddItem">Simpan</button>
                    <button type="button" class="btn btn-sm btn-primary" id="btnSubmitUpdtItem">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="mdlViewAdd" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-labelledby="mdlViewAddLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlViewAddLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img id="imgViewProofImg" src="https://i.pinimg.com/736x/a5/0e/5e/a50e5e839949d2f19271d83c12bd0abc.jpg"
                        class="img-fluid mb-3" alt="" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlDelItem" aria-labelledby="mdlDelItemLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlDelItemLabel">Hapus Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <p class="mb-0">
                            Apakah kamu yakin menghapus item ini
                            <a href="#" class="text-danger">
                                <span id="del-name"></span>
                            </a> ?
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Tutup</button>
                    <button id="btnSubmitDelItem" type="button" class="btn btn-sm btn-secondary">Ya, hapus</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script
        src="{{ asset('assets/vendor/Tiny-Vertical-Timeline-Plugin-with-jQuery-jQuery-UI/src/jquery.timeline.js') }}">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.2/xlsx.full.min.js"
        integrity="sha512-oCjkwxjURabnte5K4Zeoc+hZ/G5pQE7GI4DYl+0wl6WaJIkBjb9FvUIaMU3lOPoBMSRZZ7QrczpGQoBFAKKB1Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
    <script>
        // $('#btnPrice').on('click', function() {
        //     $('#actionView').removeClass('d-none')
        // })
        // $('#btnGenerate').on('click', function() {
        //     $('#btnConfirm').removeClass('d-none')
        //     $('#paymentVendor').removeClass('d-none')
        // })
        // $('#btnGeneratePayment').on('click', function() {
        //     $('#btnConfirmVendor').removeClass('d-none')
        // })

        // $('#btnSubmitReceive').on('click', function() {
        //     $('#receivePayment').text('Paid at Feb 25, 2022 15:03:01 by Administrator')
        // })
        // $('#btnSubmitPayout').on('click', function() {
        //     $('#paymentVendor').text('Paid at Feb 25, 2022 15:03:01 by Administrator')
        // })

        // $("#order-timeline").timeline({
        //     data: [{
        //         time: new Date("2022-02-22 12:33:00"),
        //         color: '#555',
        //         css: 'success',
        //         content: 'Order place'
        //     }, {
        //         time: new Date("2022-02-22 12:35:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Order confirmed by admin'
        //     }, {
        //         time: new Date("2022-02-22 12:36:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Searching for Vehicle'
        //     }, {
        //         time: new Date("2022-02-22 12:50:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Vehicle assigned'
        //     }, {
        //         time: new Date("2022-02-22 17:20:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Vehicle arrives at the pickup zone'
        //     }, {
        //         time: new Date("2022-02-22 17:50:00"),
        //         color: '#000',
        //         css: 'success',
        //         content: 'Confirm pakcage information by Checker'
        //     }, {
        //         time: new Date("2022-02-22 18:10:00"),
        //         color: '#000',
        //         css: 'success',
        //         content: 'Vehicle leaving pickup zone'
        //     }]
        // });
    </script>
    <script>
        'use strict'

        const State = {
            ord_id: "{{ $order->ord_id }}",
            set_pck_at: "{{ $order->set_pck_at }}",
            fix_price_at: "{{ $order->fix_price_at }}",
            order_place_at: "{{ $order->crt }}",
            order_confirm_at: "{{ $order->confirm_at }}",
            searching_vhc_at: "{{ $order->find_vhc_at }}",
            vhc_assign_at: "{{ $order->vdr_respond_at }}",
            pck_vhc_arrived_at: "{{ $order->pck_enter_at }}",
            pck_chk_at: "{{ $order->pck_chk_at }}",
            pck_vhc_leave_at: "{{ $order->pck_leave_at }}",
            accident_at: "{{ $order->ord_acdnt_crt_at }}",
            drop_vhc_arrived_at: "{{ $order->drop_enter_at }}",
            drop_chk_at: "{{ $order->drop_chk_at }}",
            drop_vhc_leave_at: "{{ $order->drop_leave_at }}",
            invc_to_client_at: "{{ $order->invc_to_client_at }}",
            confirm_client_pay_at: "{{ $order->confirm_client_pay_at }}",
            payout_to_vdr_at: "{{ $order->payout_to_vdr_at }}",
            confirm_vdr_pay_at: "{{ $order->confirm_vdr_pay_at }}",
            pck_chk_name: "{{ $order->pck_chk_name }}",
            is_paid: {
                not: "{{ App\Models\OrdersAItems::IS_PAID_NO }}",
                paid: "{{ App\Models\OrdersAItems::IS_PAID_YES }}",
            },
            ddln_pay_type: {
                time: "{{ App\Models\OrdersAItems::DDLN_PAY_TYPE_TIME }}",
                ord_finish: "{{ App\Models\OrdersAItems::DDLN_PAY_TYPE_ORD_FINISH }}",
            },
            invc_to_client: {
                not: "{{ App\Models\OrdersAItems::INVC_TO_CLIENT_NO }}",
                yes: "{{ App\Models\OrdersAItems::INVC_TO_CLIENT_YES }}",
            },
            calc_to_vdr: {
                not: "{{ App\Models\OrdersAItems::CALC_TO_VDR_NO }}",
                yes: "{{ App\Models\OrdersAItems::CALC_TO_VDR_YES }}",
            },
            is_adm_price: {
                no: "{{ App\Models\AItems::IS_ADM_PRICE_NO }}",
                yes: "{{ App\Models\AItems::IS_ADM_PRICE_YES }}",
            },
            crt_type: {
                system: "{{ App\Models\OrdersAItems::CRT_TYPE_SYSTEM }}",
                admin: "{{ App\Models\OrdersAItems::CRT_TYPE_ADMIN }}",
                finance: "{{ App\Models\OrdersAItems::CRT_TYPE_FINANCE }}",
            },
            flow_type: {
                payment: "{{ App\Models\OrdersAItems::FLOW_TYPE_PAYMENT }}",
                billing: "{{ App\Models\OrdersAItems::FLOW_TYPE_BILLING }}",
                hybrid: "{{ App\Models\OrdersAItems::FLOW_TYPE_HYBRID }}",
            },
            cash_type: {
                out: "{{ App\Models\OrdersAItems::TYPE_CASH_OUT }}",
                in: "{{ App\Models\OrdersAItems::TYPE_CASH_IN }}",
                hybrid: "{{ App\Models\OrdersAItems::TYPE_CASH_HYBRID }}",
            },
            is_aprv: {
                no: "{{ App\Models\OrdersAItems::IS_APRV_NO }}",
                yes: "{{ App\Models\OrdersAItems::IS_APRV_YES }}",
            },
            adtPoints: JSON.parse('{!! $adtPointsJson !!}'),
            storage_lara: "{{ asset('storage') }}/",
            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                OrdView.activate();
                ATable.activate();
                OrdAItem.activate();
                FileUploadSingle.activate('submission_proof');
            },
            event: function() {
                $('#view-pickup_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY HH:mm:ss'));
                $('#view-pickup_date_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY'));
                $('#view-pickup_time_at').text(moment.unix(State.set_pck_at).format('HH:mm:ss'));
                $('#view-recalc_price').text(moment().format('DD MMM YYYY HH:mm:ss'));
                $('#view-fix_price').text(moment.unix(State.fix_price_at).format('DD MMM YYYY HH:mm:ss'));
                $('#pickup_checker_at').text(moment.unix(State.pck_chk_at).format('DD MMM YYYY HH:mm:ss') + ' by ' +
                    State.pck_chk_name);
                $('#view-confirm_client_pay_at').text('Paid at ' + moment.unix(State.confirm_client_pay_at).format(
                    'DD MMM YYYY HH:mm:ss') + ' by Administrator');
                $('#view-confirm_vdr_pay_at').text('Paid at ' + moment.unix(State.confirm_vdr_pay_at).format(
                    'DD MMM YYYY HH:mm:ss') + ' by Administrator');
                $('#btnDownloadDO').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_transactions_download_do') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnGenerate').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_transactions_download_invoice') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnGeneratePayment').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_transactions_download_payout') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnDownloadReportPickup').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_transactions_download_report_pickup') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnDownloadReportDrop').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_transactions_download_report_drop') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnMdlNewAdtItem').on('click', function() {
                    OrdAItem.toggleBtnAddItem('show');
                    OrdAItem.toggleBtnUpdtItem('hide');
                    OrdAItem.toggleSlcItem('show');
                    OrdAItem.toggleDelItem('hide');
                    OrdAItem.toggleInvcToClient('undisabled');
                    OrdAItem.clearAllInput();
                    $('#mdlAddItem').modal('show');
                });
            },
        };

        const OrdView = {
            activate: function() {
                OrdView.event();
                OrdView.showOrderTimeline();
                OrdView.initDateAdtPoints();
            },
            event: function() {
                $('#btnDownloadPacking').on('click', async function(e) {
                    let click = $(e.target);
                    let ord_id = click.data('ord_id');
                    let packing_list = await OrdView.reqPackingList({
                        ord_id
                    });
                    if (packing_list.type != 'success') {
                        return false;
                    }
                    let package_list = packing_list.resp.data;
                    let download_package_list = package_list.map((row) => {
                        return {
                            'Item Code': row.item_code,
                            'Description': row.desc,
                            'Weight (kg)': row.weight,
                            // 'Qty': row.qty,
                            'Length (cm)': row.length,
                            'Wide (cm)': row.wide,
                            'Height (cm)': row.height,
                            'Volume (m3)': row.volume,
                        };
                    });
                    downloadPackingList('package-list.xlsx', 'template_packing_list',
                        download_package_list);
                });
                $('#btnPrice').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    OrdView.submitConfirmPrice(data);
                });
                $('#btnGenerate').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    OrdView.submitInvcToClient(data);
                });
                $('#btnSubmitReceive').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    data.ref_number = $('#rcv-client_ref_number').val();
                    OrdView.submitConfirmClientPay(data);
                });
                $('#btnGeneratePayment').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    OrdView.submitPayoutToVendor(data);
                });
                $('#btnSubmitPayout').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    data.ref_number = $('#rcv-vendor_ref_number').val();
                    OrdView.submitConfirmVendorPay(data);
                });
            },
            reqPackingList: function(params) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_download_package_list', '') }}/" + params
                            .ord_id,
                        method: 'GET',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: params,
                        success: (data, textStatus, jqXHR) => {
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            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'
                            });
                        }
                    })
                });
            },
            showOrderTimeline: function() {
                // https://github.com/yehiasalam/jquery.timeline
                let timelines = [];
                if (!isNaN(Number(State.order_place_at)) && State.order_place_at != '0' && State.order_place_at !=
                    '') {
                    timelines.push({
                        time: new Date(Number(State.order_place_at * 1000)),
                        color: '#555',
                        css: 'success',
                        content: 'Order place'
                    });
                }
                if (!isNaN(Number(State.order_confirm_at)) && State.order_confirm_at != '0' && State
                    .order_confirm_at != '') {
                    timelines.push({
                        time: new Date(Number(State.order_confirm_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Order confirmed by admin'
                    });
                }
                if (!isNaN(Number(State.searching_vhc_at)) && State.searching_vhc_at != '0' && State
                    .searching_vhc_at != '') {
                    timelines.push({
                        time: new Date(Number(State.searching_vhc_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Searching for Vehicle'
                    });
                }
                if (!isNaN(Number(State.vhc_assign_at)) && State.vhc_assign_at != '0' && State.vhc_assign_at !=
                    '') {
                    timelines.push({
                        time: new Date(Number(State.vhc_assign_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle assigned'
                    });
                }
                if (!isNaN(Number(State.pck_vhc_arrived_at)) && State.pck_vhc_arrived_at != '0' && State
                    .pck_vhc_arrived_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_vhc_arrived_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle arrives at the pickup zone'
                    });
                }
                if (!isNaN(Number(State.pck_chk_at)) && State.pck_chk_at != '0' && State.pck_chk_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_chk_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Confirm pakcage information by Checker'
                    });
                }
                if (!isNaN(Number(State.pck_vhc_leave_at)) && State.pck_vhc_leave_at != '0' && State
                    .pck_vhc_leave_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_vhc_leave_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle leaving pickup zone'
                    });
                }
                if (!isNaN(Number(State.accident_at)) && State.accident_at != '0' && State
                    .accident_at != '') {
                    timelines.push({
                        time: new Date(Number(State.accident_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle accident'
                    });
                }
                if (!isNaN(Number(State.drop_vhc_arrived_at)) && State.drop_vhc_arrived_at != '0' && State
                    .drop_vhc_arrived_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_vhc_arrived_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle arrives at the drop zone'
                    });
                }
                if (!isNaN(Number(State.drop_chk_at)) && State.drop_chk_at != '0' && State.drop_chk_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_chk_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Confirm pakcage information by Checker'
                    });
                }
                if (!isNaN(Number(State.drop_vhc_leave_at)) && State.drop_vhc_leave_at != '0' && State
                    .drop_vhc_leave_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_vhc_leave_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle leaving drop zone'
                    });
                }
                if (!isNaN(Number(State.invc_to_client_at)) && State.invc_to_client_at != '0' && State
                    .invc_to_client_at != '') {
                    timelines.push({
                        time: new Date(Number(State.invc_to_client_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Generate Invoice to Client'
                    });
                }
                if (!isNaN(Number(State.confirm_client_pay_at)) && State.confirm_client_pay_at != '0' && State
                    .confirm_client_pay_at != '') {
                    timelines.push({
                        time: new Date(Number(State.confirm_client_pay_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Confirm Client Payment'
                    });
                }
                if (!isNaN(Number(State.payout_to_vdr_at)) && State.payout_to_vdr_at != '0' && State
                    .payout_to_vdr_at != '') {
                    timelines.push({
                        time: new Date(Number(State.payout_to_vdr_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Generate Instruction at'
                    });
                }
                if (!isNaN(Number(State.confirm_vdr_pay_at)) && State.confirm_vdr_pay_at != '0' && State
                    .confirm_vdr_pay_at != '') {
                    timelines.push({
                        time: new Date(Number(State.confirm_vdr_pay_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Confirm Payout at'
                    });
                }
                $("#order-timeline").timeline({
                    data: timelines,
                });
            },
            submitConfirmPrice: async function(data) {
                function showSpinner() {
                    $('#btnPriceSpinner').removeClass('d-none');
                    $('#btnPrice').addClass('d-none');
                }

                function hideSpinner() {
                    $('#btnPriceSpinner').addClass('d-none');
                    $('#btnPrice').removeClass('d-none');
                }
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnPrice').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnPrice').attr('disabed', true);
                    showSpinner();
                    $.ajax({
                        url: "{{ route('api_adm_confirm_price') }}",
                        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) => {
                            hideSpinner();
                            $('#btnPrice').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 confirm price');
                            resolve({
                                type: 'success'
                            });
                            $('#actionView').removeClass('d-none');
                        },
                        error: (jqXHR, textStatus, error) => {
                            hideSpinner();
                            $('#btnPrice').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'
                            });
                        }
                    })
                })
            },
            submitInvcToClient: async function(data) {
                function showSpinner() {
                    $('#btnGenerateSpinner').removeClass('d-none');
                    $('#btnGenerate').addClass('d-none');
                }

                function hideSpinner() {
                    $('#btnGenerateSpinner').addClass('d-none');
                    $('#btnGenerate').removeClass('d-none');
                }
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnGenerate').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnGenerate').attr('disabed', true);
                    showSpinner();
                    $.ajax({
                        url: "{{ route('api_adm_invc_to_client') }}",
                        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) => {
                            hideSpinner();
                            $('#btnGenerate').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 generate invoice to client');
                            resolve({
                                type: 'success'
                            });
                            $('#btnConfirm').removeClass('d-none');
                            $('#paymentVendor').removeClass('d-none');
                        },
                        error: (jqXHR, textStatus, error) => {
                            hideSpinner();
                            $('#btnGenerate').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'
                            });
                        }
                    })
                })
            },
            submitConfirmClientPay: async function(data) {
                function showSpinner() {
                    $('#btnSubmitReceiveSpinner').removeClass('d-none');
                    $('#btnSubmitReceive').addClass('d-none');
                }

                function hideSpinner() {
                    $('#btnSubmitReceiveSpinner').addClass('d-none');
                    $('#btnSubmitReceive').removeClass('d-none');
                }
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitReceive').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitReceive').attr('disabed', true);
                    showSpinner();
                    $.ajax({
                        url: "{{ route('api_adm_confirm_client_pay') }}",
                        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) => {
                            hideSpinner();
                            $('#btnSubmitReceive').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 confirm payment');
                            resolve({
                                type: 'success'
                            });
                            $('#receivePayment').text('Paid at ' + moment().format(
                                'DD MMM YYYY HH:mm:ss') + ' by Administrator')
                            $('#paymentVendor').removeClass('d-none');
                            $('#modalReceivePayment').modal('hide');
                        },
                        error: (jqXHR, textStatus, error) => {
                            hideSpinner();
                            $('#btnSubmitReceive').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'
                            });
                        }
                    })
                })
            },
            submitPayoutToVendor: async function(data) {
                function showSpinner() {
                    $('#btnGeneratePaymentSpinner').removeClass('d-none');
                    $('#btnGeneratePayment').addClass('d-none');
                }

                function hideSpinner() {
                    $('#btnGeneratePaymentSpinner').addClass('d-none');
                    $('#btnGeneratePayment').removeClass('d-none');
                }
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnGeneratePayment').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnGeneratePayment').attr('disabed', true);
                    showSpinner();
                    $.ajax({
                        url: "{{ route('api_adm_payout_to_vendor') }}",
                        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) => {
                            hideSpinner();
                            $('#btnGeneratePayment').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 generate payment instruction to vendor');
                            resolve({
                                type: 'success'
                            });
                            $('#btnConfirmVendor').removeClass('d-none');
                        },
                        error: (jqXHR, textStatus, error) => {
                            hideSpinner();
                            $('#btnGeneratePayment').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'
                            });
                        }
                    })
                })
            },
            submitConfirmVendorPay: async function(data) {
                function showSpinner() {
                    $('#btnSubmitPayoutSpinner').removeClass('d-none');
                    $('#btnSubmitPayout').addClass('d-none');
                }

                function hideSpinner() {
                    $('#btnSubmitPayoutSpinner').addClass('d-none');
                    $('#btnSubmitPayout').removeClass('d-none');
                }
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitPayout').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitPayout').attr('disabed', true);
                    showSpinner();
                    $.ajax({
                        url: "{{ route('api_adm_confirm_vendor_pay') }}",
                        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) => {
                            hideSpinner();
                            $('#btnSubmitPayout').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 confirm payout');
                            resolve({
                                type: 'success'
                            });
                            $('#paymentVendor').text('Paid at ' + moment().format(
                                'DD MMM YYYY HH:mm:ss') + ' by Administrator')
                            $('#modalPayout').modal('hide');
                        },
                        error: (jqXHR, textStatus, error) => {
                            hideSpinner();
                            $('#btnSubmitPayout').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'
                            });
                        }
                    })
                })
            },
            initDateAdtPoints: function() {
                for (let iAdtPoint in State.adtPoints) {
                    iAdtPoint = Number(iAdtPoint);
                    $(`#view-pickup_date_at${iAdtPoint+1}`).text(moment.unix(State.adtPoints[iAdtPoint].set_pck_at).format('DD MMM YYYY'));
                    $(`#view-pickup_time_at${iAdtPoint+1}`).text(moment.unix(State.adtPoints[iAdtPoint].set_pck_at).format('HH:mm:ss'));
                }
            },
        };

        const ATable = {
            activate: function() {
                ATable.reload();
                ATable.event();
            },
            event: function() {
                $(document).on('click', '.btnUpdtAItem', async function(e) {
                    let ord_a_item_id = $(e.target).closest('tr').find('td[data-ord_a_item_id]').data('ord_a_item_id');
                    let resp = await OrdAItem.reqShowAItem({
                        ord_a_item_id
                    });
                    if (resp.type != 'success') {
                        Helper.toast('Item tidak ditemukan', 'just now', 'please try again');
                        return false;
                    }
                    OrdAItem.passDataToUpdt(resp.data);
                });
                $(document).on('click', '.viewPaidProof', async function(e) {
                    let ord_a_item_id = $(e.target).closest('tr').find('td[data-ord_a_item_id]').data('ord_a_item_id');
                    let resp = await OrdAItem.reqShowAItem({
                        ord_a_item_id
                    });
                    if (resp.type != 'success') {
                        Helper.toast('Item tidak ditemukan', 'just now', 'please try again');
                        return false;
                    }
                    OrdAItem.viewProofPayment(resp.data);
                });
            },
            reload: function() {
                // $('#tblAdditional').DataTable();
                // if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
                $('#tblAdditional').DataTable({
                    processing: true,
                    serverSide: false,
                    bLengthChange: true,
                    deferRender: true,
                    destroy: true,
                    ajax: {
                        url: "{{ route('api_finance_adm_list_adt_items_payments') }}?is_access_by_admin=1&ord_id=" + State.ord_id,
                        type: 'GET',
                        complete: function(jqXHR, textStatus, c) {
                            // const data = jqXHR.responseJSON;
                            // removeTableSkeletonLoading()
                        },
                    },
                    deferRender: true,
                    columns: [{
                            data: 'DT_RowIndex',
                            className: 'text-end',
                            visible: true,
                            orderable: true,
                            searchable: true,
                        },
                        {
                            data: 'action',
                            className: 'text-center',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let action = '';
                                if (State.is_paid.paid == row.is_paid) {
                                    action += `
                                        <a href="javascript:void(0)" class="text-nowrap text-success viewPaidProof">Lihat Bukti<br>Pembayaran</a>
                                    `;
                                } else {
                                    if (State.is_aprv.yes != row.is_aprv) {
                                        action += `
                                            <p class="mb-0 text-muted small">Pengajuan ditolak oleh ${row.urjct_name} pada tanggal ${moment.unix(row.rjct_at).format('DD MMM YYYY HH:mm:ss')}</p>
                                        `;
                                        return action;   
                                    }
                                    if (State.ddln_pay_type.ord_finish == row.ddln_pay_type) {
                                        if (row.drop_chk_at != 0) {
                                            action += `
                                                <a href="#" class="text-decoration-none me-1 btnUpdtAItem" data-bs-toggle="tooltip"
                                                    data-bs-placement="bottom" title="Edit">
                                                    <span class="icon ion-edit fz-16"></span>
                                                </a>
                                            `;
                                        } else {
                                            // action += '<p class="mb-0 text-danger small">Menunggu pengantaran selesai</p>';
                                            action += '-';
                                        }
                                    } else {
                                        action += `
                                            <a href="#" class="text-decoration-none me-1 btnUpdtAItem" data-bs-toggle="tooltip"
                                                data-bs-placement="bottom" title="Edit">
                                                <span class="icon ion-edit fz-16"></span>
                                            </a>
                                        `;
                                    }
                                }
                                return action;
                            }
                        },
                        {
                            data: 'desc',
                            className: 'text-start text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            createdCell: function(td, cellData, rowData, row, col) {
                                $(td).attr('data-ord_a_item_id', rowData.ord_a_item_id);
                                $(td).attr('data-ord_id', rowData.ord_id);
                                $(td).attr('data-ord_code', rowData.ord_code);
                                $(td).attr('data-v_termin_id', rowData.v_termin_id);
                            },
                            render: function(data, type, row, meta) {
                                let action = data;
                                if (row.invc_to_client == State.invc_to_client.yes) {
                                    if (row.invc_to_client == State.invc_to_client.yes) {
                                        if (State.is_paid.paid == row.is_bill_paid) {
                                            action += '<div class="mb-2"></div><small class="mt-2">Tagihan<br>ke client lunas pada<br>' + moment.unix(row.paid_bill_at).format('DD MMM YYYY HH:mm:ss') + '</small>';
                                        } else {
                                            action += '<div class="mb-2"></div><small class="mt-2">Akan ditagihkan<br>ke client</small>';
                                        }
                                    }
                                }
                                return action;
                            },
                        },
                        {
                            data: 'amt_total_flat',
                            className: 'text-start text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let action = 'Rp' + (new Intl.NumberFormat('id-ID')).format(data);
                                return action;
                            },
                        },
                        {
                            data: 'ddln_pay_at',
                            className: 'text-start',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                if (State.ddln_pay_type.time == row.ddln_pay_type) {
                                    if (data == 0) {
                                        return '-';
                                    }
                                    return moment.unix(data).format('DD MMM YYYY HH:mm');
                                } else if (State.ddln_pay_type.ord_finish == row.ddln_pay_type) {
                                    if (row.drop_chk_at != 0) {
                                        return `
                                            <p class="mb-0 text-success small">Pengantaran selesai</p>
                                            <p class="mb-0 text-nowrap small text-muted">${moment.unix(row.drop_chk_at).format('DD MMM YYYY HH:mm')}</p>
                                        `;
                                    } else {
                                        return '<p class="mb-0 text-danger small">Menunggu pengantaran selesai</p>';
                                    }
                                } else {
                                    return '<p class="mb-0 text-success text-nowrap small">Kapan saja</p>';
                                }
                            },
                        },
                        {
                            data: 'bank_acc_name',
                            className: 'text-end text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                if (row.bank_acc_name) {
                                    return `
                                        <p class="mb-0 text-nowrap small">${row.bank_name} (${row.bank_short_name})</p>
                                        <p class="mb-0 text-nowrap small">${row.bank_acc_number}</p>
                                        <p class="mb-0 text-nowrap small">A/N. ${row.bank_acc_name}</p>
                                    `;
                                }
                                return '-';
                            },
                        },
                        {
                            data: 'is_paid',
                            className: 'text-end text-nowrap',
                            visible: true,
                            orderable: true,
                            searchable: true,
                            render: function(data, type, row, meta) {
                                let text = '';
                                if (State.is_paid.paid == data) {
                                    return `
                                        <p class="mb-0 text-success text-nowrap small">Lunas</p>
                                        <p class="mb-0 text-nowrap small text-muted">${moment.unix(row.paid_at).format('DD MMM YYYY HH:mm')}</p>
                                    `;
                                } else {
                                    if (State.is_aprv.yes != row.is_aprv) {
                                        text += `
                                            <p class="mb-0 text-muted text-nowrap small">Ditolak</p>
                                        `;
                                        return text;   
                                    }
                                    return `
                                        <p class="mb-0 text-danger text-nowrap small">Belum Dibayar</p>
                                    `;
                                }
                            },
                        },
                    ],
                });
            },
        };

        const OrdAItem = {
            activate: function() {
                OrdAItem.event();
            },
            event: function() {
                // init select2
                $('#slcItem').select2({
                    dropdownParent: $('#mdlAddItem'),
                });
                $('#add-item_type').select2({
                    dropdownParent: $('#mdlAddItem'),
                });
                $('#slcPayPurpose').select2({
                    dropdownParent: $('#mdlAddItem'),
                });
                $('#bank').select2({
                    dropdownParent: $('#mdlAddItem'),
                });
                // event select
                $('#slcItem').on('change', function() {
                    let slc = $('#slcItem option:selected');
                    if (slc.val() === 'new') {
                        $('#addNewItemWrapper').removeClass('d-none');
                        OrdAItem.toggleAddItemIsAdmPrice('unchecked');
                        // OrdAItem.toggleGroupPayPurpose('show');
                        $('#slcItemPrice').text('');
                    } else {
                        $('#addNewItemWrapper').addClass('d-none');
                        OrdAItem.clearInputAddNewItem();
                        if (slc.data('is_adm_price') == State.is_adm_price.yes) {
                            OrdAItem.toggleGroupFillDdln('hide');
                            // OrdAItem.toggleGroupPayPurpose('hide');
                            OrdAItem.toggleGroupSubmissionProof('hide');
                        } else {
                            OrdAItem.toggleGroupFillDdln('show');
                            // OrdAItem.toggleGroupPayPurpose('show');
                            OrdAItem.toggleGroupSubmissionProof('show');
                        }
                        $('#slcItemPrice').text('Harga: Rp' + (new Intl.NumberFormat('id-ID')).format(slc.data('price')));
                    }
                });
                $('#slcPayPurpose').on('change', function() {
                    let slc = $('#slcPayPurpose option:selected');
                    if (slc.val() === 'fill') {
                        $('#fillReceiverWrapper').removeClass('d-none');
                    } else {
                        $('#fillReceiverWrapper').addClass('d-none');
                        OrdAItem.clearInputBank();
                    }
                });
                // event switch
                $('#is_paid').bind('change', function() {
                    if ($(this).is(':checked')) {
                        $('#groupIsPaid').removeClass('d-none');
                        $('#txtIsPaid').html('Lunas');
                    } else {
                        $('#groupIsPaid').addClass('d-none');
                        $('#txtIsPaid').html('Belum dibayar');
                        OrdAItem.clearInputIsPaid();
                    }
                });
                // event checklist
                $('#add-item_isAdmPrice').on('change', function() {
                    if($('#add-item_isAdmPrice').prop('checked')) {
                        OrdAItem.toggleGroupPayPurpose('hide');
                        OrdAItem.toggleGroupSubmissionProof('hide');
                        OrdAItem.toggleGroupFillDdln('hide');
                    } else {
                        OrdAItem.toggleGroupPayPurpose('show');
                        OrdAItem.toggleGroupSubmissionProof('show');
                        OrdAItem.toggleGroupFillDdln('show');
                    } 
                });
                $('#invcToClient').on('change', function() {
                    $('#add-invc_item_price').val('');
                    if ($('#invcToClient').prop('checked')) {
                        $('#groupPriceToClient').removeClass('d-none');
                    } else {
                        $('#groupPriceToClient').addClass('d-none');
                    }
                });
                // input
                $('#add-item_price').on('keyup', function() {
                    let price = $('#add-item_price').val().split('.').join('');
                    $('#add-item_price').val((new Intl.NumberFormat('id-ID')).format(price));
                });
                $('#add-invc_item_price').on('keyup', function() {
                    let price = $('#add-invc_item_price').val().split('.').join('');
                    $('#add-invc_item_price').val((new Intl.NumberFormat('id-ID')).format(price));
                });
                // min date is today
                let TimeISOString = moment().toISOString().split('T');
                let time = TimeISOString[1].split('.')[0].split(':');
                // $('#ddln_pay_date').attr('min', TimeISOString[0]); // bypass_date
                TimeISOString = moment().toISOString().split('T');
                time = TimeISOString[1].split('.')[0].split(':');
                // $('#is_paid_date').attr('min', TimeISOString[0]); // bypass_date
                // submit
                $('#btnSubmitAddItem').on('click', function(e) {
                    e.preventDefault();
                    let data = OrdAItem.getData();
                    let isValid = OrdAItem.checkData(data, true);
                    if (!isValid) return false;
                    OrdAItem.submitData(data);
                });
                $('#btnSubmitUpdtItem').on('click', function(e) {
                    e.preventDefault();
                    let data = OrdAItem.getData();
                    data.is_updt = 1;
                    data.ord_a_item_id = $('#mdlAddItem').data('ord_a_item_id');
                    let isValid = OrdAItem.checkData(data, true);
                    if (!isValid) return false;
                    OrdAItem.submitUpdtData(data);
                });
                $('#btnDelItem_updt').on('click', function(e) {
                    e.preventDefault();
                    let data = OrdAItem.getData();
                    data.ord_a_item_id = $('#mdlAddItem').data('ord_a_item_id');
                    $('#del-name').text(data.a_name);
                    $('#mdlDelItem').data('ord_a_item_id', data.ord_a_item_id);
                    $('#mdlDelItem').modal('show');
                });
                $('#btnSubmitDelItem').on('click', function(e) {
                    e.preventDefault();
                    let data = OrdAItem.getData();
                    data.is_del = 1;
                    data.ord_a_item_id = $('#mdlDelItem').data('ord_a_item_id');
                    OrdAItem.submitDelData(data);
                });
            },
            getData: function() {
                const data = {};

                let slcType = $('#slcItem option:selected');
                if  (slcType.val() === 'new') {
                    // data.a_id = '0';
                    data.a_id = '00';
                    data.a_name = $('#add-item_name').val();
                    data.a_type = $('#add-item_type').val();
                    data.a_price = $('#add-item_price').val().split('.').join('');
                    if($('#add-item_isAdmPrice').prop('checked')) {
                        data.is_adm_price = State.is_adm_price.yes
                    } else {
                        data.is_adm_price = State.is_adm_price.no
                    }
                } else if  (slcType.val() === '') {
                } else {
                    data.a_id = slcType.val(); // id
                    data.a_name = slcType.data('name');
                    data.a_type = slcType.data('type');
                    data.a_price = slcType.data('price');
                    data.is_adm_price = slcType.data('is_adm_price');
                }
                data.a_qty = $('#add-item_qty').val();

                if (data.is_adm_price != State.is_adm_price.yes) {
                    data.ddln_pay_date = $('#ddln_pay_date').val().trim();
                    data.ddln_pay_time_hour = $('#ddln_pay_time_hour').val()?.trim();
                    data.ddln_pay_time_minute = $('#ddln_pay_time_minute').val()?.trim();
                    data.ddln_pay_time = `${data.ddln_pay_time_hour}:${data.ddln_pay_time_minute}`;
                    data.ddln_pay_at = moment(data.ddln_pay_date + ' ' + data.ddln_pay_time).unix();

                    data.submission_proof_base64 = [];
                    let submission_proof_base64 = $('#inpt-submission_proof-base64').val();
                    if (submission_proof_base64.indexOf('data:image') > -1) {
                        data.submission_proof_base64.push(submission_proof_base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ''));
                    }
                }

                data.slc_pay_purpose = $('#slcPayPurpose').val();
                if (data.slc_pay_purpose === 'fill') {
                    let selectedBank = $('#bank :selected');
                    if (selectedBank && selectedBank.val() != '') {
                        data.bank_id = selectedBank.data('id');
                        data.bank_code = selectedBank.data('code');
                        data.bank_short = selectedBank.data('short');
                        data.bank_name = selectedBank.data('name');
                    }
                    data.bank_acc_number = $('#bank_acc_number').val();
                    data.bank_acc_name = $('#bank_acc_name').val();
                }

                let is_paid = $('#is_paid').prop('checked');
                data.is_paid = State.is_paid.not;
                if (is_paid) {
                    data.is_paid = State.is_paid.paid;
                    data.is_paid_proof_base64 = [];
                    let is_paid_proof_base64 = $('#inpt-is_paid_proof-base64').val();
                    if (is_paid_proof_base64.indexOf('data:image') > -1) {
                        data.is_paid_proof_base64.push(is_paid_proof_base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ''));
                    }
                    // data.is_paid_date = $('#is_paid_date').val().trim();
                    // data.is_paid_time_hour = $('#is_paid_time_hour').val()?.trim();
                    // data.is_paid_time_minute = $('#is_paid_time_minute').val()?.trim();
                    // data.is_paid_time = `${data.is_paid_time_hour}:${data.is_paid_time_minute}`;
                    // data.is_paid_at = moment(data.is_paid_date + ' ' + data.is_paid_time).unix();
                }

                let is_invc_to_client = $('#invcToClient').prop('checked');
                data.is_invc_to_client = State.invc_to_client.not;
                data.flow_type = State.flow_type.payment;
                data.cash_type = State.cash_type.out;
                if (is_invc_to_client) {
                    data.is_invc_to_client = State.invc_to_client.yes;
                    data.cash_type = State.cash_type.hybrid;
                    data.flow_type = State.flow_type.hybrid;
                    data.a_invc_price = $('#add-invc_item_price').val().split('.').join('');
                }

                data.ord_id = State.ord_id;
                data.ddln_pay_type = State.ddln_pay_type.time;
                data.is_calc_to_vdr = State.calc_to_vdr.yes;
                data.crt_type = State.crt_type.admin;

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (typeof data.a_id == 'undefined') {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Item wajib diisi');
                    return false;
                }
                if (data.a_name == '' || data.a_name == null) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Item nama wajib diisi');
                    return false;
                }
                if (data.a_type == '' || data.a_type == null) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Item satuan wajib diisi');
                    return false;
                }
                if (data.a_price < 0) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Item harga wajib diisi');
                    return false;
                }
                if (typeof data.a_qty == 'undefined' || Number(data.a_qty) < 1) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Jumlah wajib diisi');
                    return false;
                }
                if (data.is_adm_price != State.is_adm_price.yes) {
                    if (data.ddln_pay_at < 1 || isNaN(data.ddln_pay_at)) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Tenggat pembayaran tidak valid');
                        return false;
                    }
                    // start bypass_date
                    // if (data.ddln_pay_at < moment().unix()) {
                    //     if (isAlert) Helper.toast('Warning', 'just now', 'Tenggat pembayaran tidak bisa kurang dari saat ini');
                    //     return false;
                    // }
                    // if (data.ddln_pay_at < moment().add(5, 'minutes').unix()) {
                    //     if (isAlert) Helper.toast('Warning', 'just now', 'Minimal tenggat pembayaran 5 menit dari sekarang');
                    //     return false;
                    // }
                    // end bypass_date
                    if (data.is_updt != 1) {
                        if (data.submission_proof_base64.length < 1) {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Bukti pengajuan wajib diisi');
                            return false;
                        }
                    }
                    if (data.slc_pay_purpose === 'fill') {
                        if (!data.bank_id) {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Bank wajib dipilih');
                            return false;
                        }
                        if (data.bank_acc_number == '') {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Nomor rekening wajib diisi');
                            return false;
                        }
                        if (data.bank_acc_name == '') {
                            if (isAlert) Helper.toast('Warning', 'just now', 'Pemilik rekening wajib diisi');
                            return false;
                        }
                    }
                }
                if (data.is_invc_to_client == State.invc_to_client.yes) {
                    if (data.a_invc_price < 0) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Harga yang ditagihkan ke client wajib diisi');
                        return false;
                    }
                }
                if (data.is_paid === State.is_paid.paid) {
                    if (data.is_paid_proof_base64.length < 1) {
                        if (isAlert) Helper.toast('Warning', 'just now', 'Bukti pembayaran wajib diisi');
                        return false;
                    }
                }
                return true;
            },
            submitData: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitAddItem').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitAddItem').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_finance_adm_add_a_items') }}",
                        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) => {
                            $('#btnSubmitAddItem').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 add item');
                            $('#mdlAddItem').modal('hide');
                            ATable.reload();
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitAddItem').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'
                            });
                        }
                    })
                })
            },
            clearInputIsPaid: function() {
                $('#is_paid_proof').val('');
                $('#is_paid_date').val('');
                $('#is_paid_time_hour').val('').trigger('change');
                $('#is_paid_time_minute').val('').trigger('change');
            },
            toggleGroupPayPurpose: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#groupPayPurpose').removeClass('d-none');
                } else {
                    $('#groupPayPurpose').addClass('d-none');
                    $('#slcPayPurpose').val('fill').trigger('change');
                }
            },
            toggleGroupSubmissionProof: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#groupSubmissionProof').removeClass('d-none');
                } else {
                    $('#groupSubmissionProof').addClass('d-none');
                }
            },
            clearInputBank: function() {
                $('#bank').val('').trigger('change');
                $('#bank_acc_name').val('');
                $('#bank_acc_number').val('');
            },
            clearAllInput: function() {
                $('#slcItem').val('').trigger('change');
                OrdAItem.clearInputBank();
                $('#add-item_name').val('');
                $('#add-item_type').val('').trigger('change');
                $('#add-item_price').val('');
                $('#add-item_qty').val('');
                $('#ddln_pay_date').val('');
                $('#ddln_pay_time_hour').val('');
                $('#ddln_pay_time_minute').val('');
                $('#inpt-submission_proof-base64').val('');
                $('#inpt-submission_proof-file').val('');
                $('#inpt-group_rotate_submission_proof').addClass('d-none');
                $('#inpt-submission_proof-img').addClass('d-none');
                $('#invcToClient').prop('checked', false).trigger('change');
                $('#add-invc_item_price').val('');
            },
            toggleAddItemIsAdmPrice: function(toggle = 'checked') {
                if (toggle === 'checked') {
                    $('#add-item_isAdmPrice').prop('checked', true).trigger('change');
                } else {
                    $('#add-item_isAdmPrice').prop('checked', false).trigger('change');
                }
            },
            clearInputAddNewItem: function() {
                $('#add-item_name').val('');
                $('#add-item_type').val('').trigger('change');
                $('#add-item_price').val('');
                $('#add-item_qty').val('');
                OrdAItem.toggleAddItemIsAdmPrice('unchecked');
            },
            toggleGroupFillDdln: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#groupFillDdln').removeClass('d-none');
                } else {
                    $('#groupFillDdln').addClass('d-none');
                }
            },
            reqShowAItem: function(params) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_finance_adm_show_a_item', '') }}/" + params.ord_a_item_id,
                        method: 'GET',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: params,
                        success: (data, textStatus, jqXHR) => {
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                data: data.data
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                });
            },
            viewProofPayment: function(data) {
                if (data.img_proof_payment) {
                    let proof = JSON.parse(data.img_proof_payment);
                    if (proof.length > 0) $('#imgViewProofImg').attr('src', State.storage_lara + proof[0]);
                }
                $('#mdlViewAdd').data('ord_a_item_id', data.ord_a_item_id);
                $('#mdlViewAdd').modal('show');
            },
            viewProofSubmission: function(data) {
                if (data.img_proof_submission) {
                    let proof = JSON.parse(data.img_proof_submission);
                    if (proof.length > 0) $('#imgViewProofImg').attr('src', State.storage_lara + proof[0]);
                }
                $('#mdlViewAdd').data('ord_a_item_id', data.ord_a_item_id);
                $('#mdlViewAdd').modal('show');
            },
            passDataToUpdt: function(data) {
                OrdAItem.toggleBtnAddItem('hide');
                OrdAItem.toggleBtnUpdtItem('show');

                if (data.unit_id == 0) {
                    $('#slcItem').val('new').trigger('change');
                    OrdAItem.toggleSlcItem('hide');
                } else {
                    $('#slcItem').val(data.unit_id).trigger('change');
                    OrdAItem.toggleSlcItem('show');
                }

                $('#add-item_name').val(data.desc);
                $('#add-item_type').val(data.unit_type).trigger('change');
                $('#add-item_price').val((new Intl.NumberFormat('id-ID')).format(data.amt_base_flat));
                $('#add-item_qty').val(data.unit_qty);

                if (data.ddln_pay_type == State.ddln_pay_type.time && data.ddln_pay_at != 0) {
                    let ddln_pay_at = moment.unix(data.ddln_pay_at);
                    $('#ddln_pay_date').val(ddln_pay_at.format('YYYY-MM-DD'));
                    $('#ddln_pay_time_hour').val(ddln_pay_at.format('HH'));
                    $('#ddln_pay_time_minute').val(ddln_pay_at.format('mm'));
                } else {
                    $('#ddln_pay_date').val('');
                    $('#ddln_pay_time_hour').val('');
                    $('#ddln_pay_time_minute').val('');
                }

                $('#inpt-submission_proof-base64').val('');
                $('#inpt-group_rotate_submission_proof').addClass('d-none');
                if (data.img_proof_submission) {
                    let proof = JSON.parse(data.img_proof_submission);
                    if (proof.length > 0) {
                        $('#inpt-submission_proof-img').attr('src', State.storage_lara + proof[0]);
                        $('#inpt-submission_proof-img').removeClass('d-none');
                    }
                }

                $('#bank').val(data.bank_code).trigger('change');
                $('#bank_acc_number').val(data.bank_acc_number);
                $('#bank_acc_name').val(data.bank_acc_name);

                if (data.invc_to_client == State.invc_to_client.yes) {
                    $('#invcToClient').prop('checked', true).trigger('change');
                    $('#add-invc_item_price').val((new Intl.NumberFormat('id-ID')).format(data.amt_bill_base_flat));
                } else {
                    $('#invcToClient').prop('checked', false).trigger('change');
                }

                OrdAItem.toggleDelItem('show');

                if (data.is_bill_paid == State.is_paid.paid) {
                    OrdAItem.toggleInvcToClient('disabled');
                    OrdAItem.toggleDelItem('hide');
                } else {
                    OrdAItem.toggleInvcToClient('undisabled');
                }

                if (data.is_paid == State.is_paid.paid) {
                    OrdAItem.toggleDelItem('hide');
                }

                $('#mdlAddItem').data('ord_a_item_id', data.ord_a_item_id);
                $('#mdlAddItem').modal('show');
            },
            submitUpdtData: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitUpdtItem').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitUpdtItem').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_finance_adm_updt_a_items', '') }}/" + data.ord_a_item_id,
                        method: 'PUT',
                        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) => {
                            $('#btnSubmitUpdtItem').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 update item');
                            $('#mdlAddItem').modal('hide');
                            ATable.reload();
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitUpdtItem').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'
                            });
                        }
                    })
                })
            },
            toggleBtnAddItem: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#btnSubmitAddItem').removeAttr('disabed');
                    $('#btnSubmitAddItem').removeClass('d-none');
                } else {
                    $('#btnSubmitAddItem').attr('disabed', true);
                    $('#btnSubmitAddItem').addClass('d-none');
                }
            },
            toggleBtnUpdtItem: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#btnSubmitUpdtItem').removeAttr('disabed');
                    $('#btnSubmitUpdtItem').removeClass('d-none');
                } else {
                    $('#btnSubmitUpdtItem').attr('disabed', true);
                    $('#btnSubmitUpdtItem').addClass('d-none');
                }
            },
            toggleSlcItem: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#addSlcItemWrapper').removeAttr('disabed');
                    $('#addSlcItemWrapper').removeClass('d-none');
                } else {
                    $('#addSlcItemWrapper').attr('disabed', true);
                    $('#addSlcItemWrapper').addClass('d-none');
                }
            },
            toggleInvcToClient: function(toggle = 'disabled') {
                if (toggle === 'disabled') {
                    $('#invcToClient').attr('disabled', true);
                    $('#add-invc_item_price').attr('disabled', true);
                } else {
                    $('#invcToClient').removeAttr('disabled');
                    $('#add-invc_item_price').removeAttr('disabled');
                }
            },
            toggleDelItem: function(toggle = 'show') {
                if (toggle === 'show') {
                    $('#btnDelItem_updt').removeClass('d-none');
                } else {
                    $('#btnDelItem_updt').addClass('d-none');
                }
            },
            submitDelData: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitDelItem').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitDelItem').attr('disabed', true);
                    $.ajax({
                        url: "{{ route('api_finance_adm_del_a_items', '') }}/" + data.ord_a_item_id,
                        method: 'DELETE',
                        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) => {
                            $('#btnSubmitDelItem').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', 'sukses hapus item');
                            $('#mdlDelItem').modal('hide');
                            $('#mdlAddItem').modal('hide');
                            ATable.reload();
                            resolve({
                                type: 'success'
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitDelItem').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'
                            });
                        }
                    })
                })
            },
        };

        // Compress image
        async function convertImgHtmlToFile(imgHtml, imgWidth, imgHeight, mimeType, fileName) {
            return new Promise((resolve, reject) => {
                try {
                    let canvas = document.createElement("canvas")

                    // Draw image to canvas.
                    canvas.width = imgWidth
                    canvas.height = imgHeight
                    let ctx = canvas.getContext('2d')
                    ctx.drawImage(imgHtml, 0, 0)

                    // Convert canvas to ImageState.
                    let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight)
                    // console.log(imageState.data.byteLength + ' bytes.')

                    // Convert canvas to Blob
                    canvas.toBlob((blob) => {
                        let newReader = new FileReader();
                        newReader.addEventListener('loadend', () => {
                            // Convert canvas to ArrayBuffer
                            let arrayBuffer = newReader.result
                            // console.log(arrayBuffer.byteLength + ' bytes.')

                            // Convert ArrayBuffer to Blob
                            // let blob = new Blob([arrayBuffer], {type: mimeType})

                            // Dispay Blob content in an Image.
                            // console.log(URL.createObjectURL(blob))

                            // Generate as file
                            let newFile = new File([arrayBuffer], fileName, {
                                type: mimeType,
                                lastModified: new Date(),
                                size: arrayBuffer.byteLength,
                            })
                            resolve(newFile)
                        });
                        newReader.readAsArrayBuffer(blob);
                    }, mimeType);
                } catch (e) {
                    reject(e.message)
                }
            });
        }

        const JimpWorkerSingle = {
            worker_submission_proof: null,
            activate: function(x) {
                let linkWorker = State.file_jimp_worker
                this.setWorker(linkWorker, x, function(res) {
                    if (res.stts) {
                        let pureDataURL = res.data.replace(/^data:image\/(png|jpg|jpeg);base64,/, '')
                        let fileSize = window.atob(pureDataURL).length // in Byte
                        // (fileSize/1000) + ' Kb'
                        $('#inpt-group_' + x + '_spinner').addClass('d-none');
                        $('#inpt-' + x + '-status').html('Compressed')
                        $('#inpt-' + x + '-filesize').html('<samp>(' + fileSize / 1000 + ' Kb)</samp>')
                        $('#inpt-' + x + '-img').removeClass('d-none')
                        $('#inpt-' + x + '-img').attr('src', res.data)
                        $('#inpt-' + x + '-base64').val(res.data)
                    } else {
                        console.error(res.data)
                    }
                    $('.page-loader-wrapper').fadeOut()
                });
            },
            runWorker: function(dataURL, x) {
                $('#inpt-group_' + x + '_spinner').removeClass('d-none');
                this['worker_' + x].postMessage(dataURL)
            },
            setWorker: function(urlFileJs, x, cbFinish) {
                let worker = new Worker(urlFileJs);
                worker.onmessage = function(e) {
                    // e = {status:(true,false), data:(dataURL)}

                    // append a new img element using the base 64 image
                    // let img = document.createElement('img');
                    // img.setAttribute('src', e.data);
                    // document.body.appendChild(img);

                    cbFinish(e.data);
                };
                this['worker_' + x] = worker
            }
        }
        const FileUploadSingle = {
            activate: function(x) {
                this.initReader(x)
                JimpWorkerSingle.activate(x)
                this.event(x)
                RotateImgSingle.activate(x)
            },
            event: function(x) {
                $('#inpt-' + x + '-choose').on('click', function(e) {
                    $('#inpt-' + x + '-file').trigger('click')
                })
                // $('#inpt-' + x + '-file').on('click', function() {
                //     $('#inpt-' + x + '-file').val();
                // })
            },
            initReader: function(x) {
                let reader = new FileReader();
                reader = this.setEventFile(reader, x);
                $('#inpt-' + x + '-file').on('click', function() {
                    $('#inpt-' + x + '-file').val('');
                })
                $('#inpt-' + x + '-file').on('change', async function(e) {
                    try {
                        if (browserBack()) return false;
                        let file = e.target.files[0];
                        let type = file.type.split('/');
                        if (type[1] == 'jpeg' || type[1] == 'png' || type[1] == 'jpg') {
                            $('.page-loader-wrapper').fadeIn()

                            // fix auto rotate when select file
                            let newImg = await loadImage(file, {
                                orientation: true
                            })

                            let newFile = await convertImgHtmlToFile(newImg.image, newImg
                                .originalWidth, newImg.originalHeight, file.type, file
                                .name)

                            FileUploadSingle.readFile(reader, newFile);

                            $('#inpt-' + x + '-filesize').html('')
                            $('#inpt-' + x + '-status').html('Loading on compressing...')
                            // $('#inpt-' + x + '-img').attr('src', '')
                            $('#inpt-' + x + '-base64').val('')
                        } else {
                            Helper.toast('Validasi', 'just-now', 'Gambar tidak valid');
                        }
                    } catch (e) {
                        console.error(e.message)
                    }
                })
            },
            setEventFile: function(reader, x) {
                reader.onload = function(e) {
                    let data = e.target.result;
                    $('#inpt-' + x + '-img-old').attr('src',
                        data) // preview, -old mungkin kedepannya bakal diganti jadi -new
                    // $('#inpt-'+x+'-img-base64').val(data) // real-data
                    console.log('Compressing ' + x);
                    JimpWorkerSingle.runWorker(data, x)
                    RotateImgSingle.toggleBtnRotate(x, 'show');
                };

                reader.onerror = function(err) {
                    $('.page-loader-wrapper').fadeOut()
                    $('#' + x).attr('hidden', true)
                    console.error(err);
                };

                reader.onabort = function(err) {
                    console.log(err);
                }

                return reader;
            },
            readFile: function(reader, file) {
                // reader.readAsArrayBuffer(file);
                reader.readAsDataURL(file);
            },
        }
        const RotateImgSingle = {
            activate: function(id) {
                this.event(id)
            },
            event: function(id) {
                $('#inpt-group_rotate_' + id).on('click', '.btnRotateRight', function(e) {
                    $('#inpt-' + id + '-img').addClass('d-none')
                    RotateImgSingle.rotateBase64Image($('#inpt-' + id + '-base64').val(), 90).then(
                        function(base64) {
                            RotateImgSingle.updateImg(id, base64)
                        })
                })
                $('#inpt-group_rotate_' + id).on('click', '.btnRotateLeft', function(e) {
                    $('#inpt-' + id + '-img').addClass('d-none')
                    RotateImgSingle.rotateBase64Image($('#inpt-' + id + '-base64').val(), -90).then(
                        function(base64) {
                            RotateImgSingle.updateImg(id, base64)
                        })
                })
            },
            rotateBase64Image: function(base64data, degrees) {
                return new Promise((resolve, reject) => {
                    try {
                        let x = 0,
                            y = 0,
                            w = 0,
                            h = 0;
                        let canvas = document.createElement("canvas");
                        let image = document.createElement("img"); // new Image();
                        image.src = base64data; // image.src = 'data:image/jpg;base64,' + base64data;
                        image.onload = function() {
                            // current image size for processing rotate
                            w = image.width;
                            h = image.height;
                            let angle = degrees * Math.PI / 180.0; // angle/rads
                            let ctx = canvas.getContext("2d");

                            // new image size for after cropped
                            let c = Math.cos(angle);
                            let s = Math.sin(angle);
                            if (s < 0) {
                                s = -s;
                            }
                            if (c < 0) {
                                c = -c;
                            }
                            let rw = h * s + w * c;
                            let rh = h * c + w * s;

                            // set canvas size
                            canvas.width = rw;
                            canvas.height = rh;
                            // save the unrotated context of the canvas so we can restore it later
                            // the alternative is to untranslate & unrotate after drawing
                            ctx.save();
                            // draw the rect in the center of the newly sized canvas
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            // move to the center of the canvas
                            // ctx.translate(x+w/2, y+h/2); // ctx.translate(x, h);
                            // move to the upper left corner when rotating in 90deg increments
                            ctx.translate(Math.abs(w / 2 * Math.cos(angle) + h / 2 * Math.sin(angle)),
                                Math.abs(h / 2 * Math.cos(angle) + w / 2 * Math.sin(angle)));
                            // rotate the canvas to the specified degrees
                            ctx.rotate(angle); // ctx.rotate(180 * Math.PI / 180);
                            // move to the center of the canvas (origin)
                            ctx.translate(-x - w / 2, -y - h / 2);
                            // since the context is rotated, the image will be rotated also
                            ctx.drawImage(image, 0, 0, w, h);
                            // we’re done with the rotating so restore the unrotated context
                            ctx.restore();
                            // convert to base64
                            resolve(canvas.toDataURL('image/jpeg', 1.0));
                        };
                    } catch (err) {
                        reject(err);
                    }
                });
            },
            updateImg: function(id, base64) {
                // update data
                let pureDataURL = base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, '')
                let fileSize = window.atob(pureDataURL).length // in Byte
                // (fileSize/1000) + ' Kb'
                $('#inpt-' + id + '-status').html('Compressing...')
                $('#inpt-' + id + '-filesize').html('<samp>(' + fileSize / 1000 + ' Kb)</samp>')
                $('#inpt-' + id + '-img').attr('src', base64)
                $('#inpt-' + id + '-base64').val(base64) // real-data

                // compress again because base64 from rotate is rather bigger in range 200kb than compress 50kb
                JimpWorkerSingle.runWorker(base64, id);
            },
            toggleBtnRotate: function(id, hide = 'hidden') {
                if (hide == 'show') {
                    $('#inpt-group_rotate_' + id).removeClass('d-none')
                    return true;
                }
                $('#inpt-group_rotate_' + id).addClass('d-none')
                return true;
            },
        }

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