@php
    $user = Auth::user();
@endphp
@extends('app.app')
@section('title')
    User Checker
@endsection

@section('customcss')
    <style>
        .square-photo {
            max-height: max(21vh, 210px);
            max-width: max(21vh, 210px);
        }

        .tepiBottom {
            border-bottom: 1.5px groove #000;
            padding-bottom: 15px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Detail Pekerjaan #{{ $order->ord_code }}</p>
                                </div>
                                <div class="col text-end">
                                    <button class="btn btn-secondary btn-sm" onclick="location.href='{{ route('view_user_checker') }}'">Kembali</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-5 mb-3">
                                    <p class="text-danger text-bold mb-3">Penjemputan dan Pengantaran</p>
                                    <div class="row">
                                        <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">04 Mar 2022</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">18:30</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-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</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>
                                                </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">WORK-BONCENG01 (Jakarta)</p> --}}
                                            <p class="text-bold mb-2">{{ $order->pck_name }}</p>
                                            <p class="mb-0">{{ $order->pck_addr }}</p>
                                            {{-- <p class="mb-0">RT.4/RW.7, Bintaro, Kec. Pesanggrahan, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12330</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>
                                            <p class="mb-4"></p>
                                            @if ($order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_NO)
                                                <div class="d-flex justify-content-end">
                                                    {{-- Edit Zona --}}
                                                    {{-- <a href="{{ route('view_user_checker_zone_edit').'?ord_code='.$order->ord_code.'&zid='.$order->ord_drop_zone_id }}">
                                                        <button type="button" id="btnChangeZoneDrop" class="btn btn-primary btn-sm">Edit Zona</button>
                                                    </a> --}}
                                                    {{-- Change Zona by select --}}
                                                    <button type="button" id="btnChangeZoneDrop" class="btn btn-primary btn-sm">Ganti Zona</button>
                                                    <div id="btnChangeZoneDropSpinner" class="d-none">
                                                        <div class="spinner-border" role="status">
                                                            <span class="visually-hidden">Loading...</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </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-5">
                                    <div class="row d-flex align-items-start mb-3">
                                        <div class="col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Informasi Vendor</p>
                                        </div>
                                        <div class="col-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">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-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">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-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="">Archibald Borislav Aldric</p>
                                                    <p class="mb-0">
                                                        <a href="tel:081381358808">
                                                            <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                            0813 8135 8808
                                                        </a>
                                                    </p>
                                                    <p class="mb-0">
                                                        <a href="https://api.whatsapp.com/send/?phone=6281381358808&text=Halo&app_absent=0"
                                                            class="" target="_blank"><i
                                                                class="text-success ion-social-whatsapp"></i>
                                                                0813 8135 8808
                                                            </a>
                                                    </p> --}}
                                                    @if ($order->drv_name)
                                                        <p class="mb-2">
                                                            {{ $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">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2"></div>
                                <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">Uang Saku Driver</p>
                                        </div>
                                        @php
                                            $cpoints = count($order->checkpoints);
                                        @endphp
                                        {{-- jika cuman perlu tau nama uang sakunya aja --}}
                                        <div class="col-sm-12 col-6 mb-3">
                                            {{-- <label for="" class="form-label">Nama Uang Saku</label> --}}
                                            <div class="card bg-light border mb-0 w-100">
                                                <div class="card-body pb-0">
                                                    <p class="mb-2">Uang Saku</p>
                                                    <p class="mb-0 text-bold">
                                                        {{ $order->pocket_name }}
                                                    </p>
                                                </div>
                                                @if ($order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_NO)
                                                    <div class="card-body d-flex justify-content-end">
                                                        <button type="button" id="btnChangeUangSaku" class="btn btn-primary btn-sm">Ganti Uang Saku</button>
                                                        <div id="btnChangeUangSakuSpinner" class="d-none">
                                                            <div class="spinner-border" role="status">
                                                                <span class="visually-hidden">Loading...</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        {{-- jika perlu tau checkpoint --}}
                                        {{-- @foreach ($order->checkpoints as $pocket)
                                            <div class="col-sm-12 col-6 mb-3">
                                                <label for="" class="form-label">Lokasi & Jumlah & Status</label>
                                                <div class="card bg-light border mb-0 w-100">
                                                    <div class="card-body d-flex justify-content-between pb-0">
                                                        <p class="mb-0">Lokasi</p>
                                                        <p class="mb-0 text-bold text-end">
                                                            {{ $pocket->pck_name }}
                                                        </p>
                                                    </div>
                                                    <div class="card-body d-flex justify-content-between pt-1 text-end">
                                                        {{ $pocket->pck_fulladdress }}
                                                    </div>
                                                    <div class="card-body d-flex justify-content-between">
                                                        <p class="mb-0">Jumlah</p>
                                                        <p class="mb-0">
                                                            Rp{{ number_format($pocket->pocket_total, 0, ',', '.') }}
                                                        </p>
                                                    </div>
                                                    <div class="card-body d-flex justify-content-between">
                                                        <p class="mb-0">Status</p>
                                                        <p class="mb-0">
                                                            @if ($pocket->pocket_is_paid == \App\Models\OrdersCheckpoints::IS_PAID)
                                                                Sudah Transfer
                                                            @elseif ($pocket->pocket_is_paid == \App\Models\OrdersCheckpoints::IS_TF_FAIL)
                                                                Gagal Transfer
                                                            @else
                                                                Belum Transfer
                                                            @endif
                                                        </p>
                                                    </div>
                                                    @if ($cpoints == 1 && $order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_NO)
                                                        <div class="card-body d-flex justify-content-end">
                                                            <button type="button" id="btnChangeUangSaku" class="btn btn-primary btn-sm">Ganti Uang Saku</button>
                                                            <div id="btnChangeUangSakuSpinner" class="d-none">
                                                                <div class="spinner-border" role="status">
                                                                    <span class="visually-hidden">Loading...</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                        @if ($cpoints > 1 && $order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_NO)
                                            <div class="card-body d-flex justify-content-end">
                                                <button type="button" id="btnChangeUangSaku" class="btn btn-primary btn-sm">Ganti Uang Saku</button>
                                                <div id="btnChangeUangSakuSpinner" class="d-none">
                                                    <div class="spinner-border" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif --}}
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex align-items-center justify-content-between">
                                {{-- <div class="col-auto d-flex">
                                    <div class="col-auto me-2">
                                        <button class="btn btn-sm btn-warning btn-block w-100" data-bs-toggle="modal"
                                            data-bs-target="#mdlSpk">Lihat SPK</button>
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-sm btn-info btn-block w-100" data-bs-toggle="modal"
                                            data-bs-target="#mdlReportAccident">Accident</button>
                                    </div>
                                </div> --}}
                                <div class="col-auto d-flex">
                                    {{-- @if ($order->pck_chk_stts === \App\Models\OrdersPickups::CHK_STTS_NO)
                                        <div class="col-auto me-2">
                                            <button class="btn btn-sm btn-danger btn-block w-100"
                                                data-bs-toggle="modal" data-bs-target="#mdlReportPickUp">Lapor
                                                Penjemputan</button>
                                        </div>
                                    @endif
                                    @if ($order->drop_chk_stts === \App\Models\OrdersDrops::CHK_STTS_NO && $order->pck_chk_stts === \App\Models\OrdersPickups::CHK_STTS_SUBMIT)
                                        <div class="col-auto">
                                            <button class="btn btn-sm btn-danger btn-block w-100"
                                                data-bs-toggle="modal" data-bs-target="#mdlReportDrop">Lapor
                                                Pengantaran</button>
                                        </div>
                                    @endif --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    @if ($order->pck_chk_stts === \App\Models\OrdersPickups::CHK_STTS_SUBMIT)
                        <div class="accordion mb-3">
                            <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">
                                            <div class="col-sm-6">
                                                <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>
                                        <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">
                                                            <embed 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">
                                                            <embed 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">
                                                            <embed 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">
                                                                    <embed 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">
                                                            <embed 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">
                                                            <embed 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">
                            <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 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">
                                                            <embed 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">
                                                            <embed 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">
                                                            <embed 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">
                                                            <embed 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">
                            <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">
                                                                    <embed 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
                    @if (count($drvs_ups) > 0)
                        <div class="accordion mb-3">
                            <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">
                                        Berkas Driver
                                    </button>
                                </h2>
                                <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour">
                                    <div class="accordion-body pb-0">
                                        <div class="row">
                                            @foreach ($drvs_ups as $i => $drvUp)
                                                @php
                                                    $afterTravelDoc = 0;
                                                @endphp
                                                @if ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_ARRIVED_PICKUP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Sampai dilokasi Pickup</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_PROCESS_PICKUP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Mulai Memuat Barang</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_FINISH_PICKUP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Selesai Memuat</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_TRAVEL_DOCUMENT)
                                                    @php
                                                        $afterTravelDoc = 1;
                                                    @endphp
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Dokumen Perjalanan</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_OTW_DROP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Saat diperjalanan</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_ARRIVED_DROP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Tiba dilokasi Bongkar</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_PROCESS_DROP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Proses Bongkar</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_FINISH_DROP)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Selesai Bongkar</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_HANDOVER_DOCUMENT)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Serah Terima</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif ($drvUp->stts === \App\Models\OrdersDriversUploads::STTS_UP_ACCIDENT)
                                                    <div class="col-12 mb-3 tepiBottom">
                                                        <div class="d-flex justify-content-between">
                                                            <div><label for="" class="form-label fw-bold">Foto Mengalami Trouble / Kecelakaan</label></div>
                                                            <div><label for="" class="form-label fw-bold foto-crt" data-crt="{{ $drvUp->crt }}"></label></div>
                                                        </div>
                                                        <div class="card bg-light border mb-0">
                                                            <div class="card-body p-0">
                                                                <img src="{{ isset($drvUp->img) ? \App\Helper::changeIpToDomain($drvUp->img) : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVPuMlKfGrFErmCt6hCuECLbbhekJF-GCtAJvPIZpHX5upTT-hABFlp8qZY8rkgaZ0DE&usqp=CAU' }}" alt="" class="img-fluid img-report">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if ($order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_YES && $afterTravelDoc === 1)
                                                    <div class="col-auto mb-3 fw-bold">
                                                        {{-- <p class="mb-0 text-success">Disetujui {{ strftime('%d-%m-%Y %H:%M:%S', $order->aprv_pck_at).' WIB' }}</p> --}}
                                                        <p class="mb-0 text-success">Disetujui <span id="aprvPckAt"></span></p>
                                                        <p class="mb-0 text-dark">Oleh {{ $order->aprv_pck_by_name }}</p>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                        @if ($order->is_aprv_pck === \App\Models\OrdersPckDrop::IS_APRV_NO)
                                            <div class="row">
                                                <div class="col-auto mb-3">
                                                    <button class="btn btn-sm btn-danger btn-block w-100" data-bs-toggle="modal" data-bs-target="#mdlAprvPck" {{ $order->stts_delivery === \App\Models\OrdersPckDrop::STTS_DELIVERY_TRAVEL_DOC ? '' : 'disabled' }}>Persetujuan</button>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{-- modal here --}}
    {{-- modal SPK --}}
    <div class="modal fade" id="mdlSpk" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlSpkLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlSpkLabel">SPK {{ $order->c_pt_name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- <p class="mb-0 text-center"><em>PDF Loade here..</em></p> --}}
                    <div class="text-center" style="height: 100vh;">
                        {{-- <embed
                            src="{{ route('view_user_checker_transactions_download_spk') . '?ord_code=' . $order->ord_code }}"
                            type="application/pdf" frameBorder="0" scrolling="false" height="100%" width="100%"> --}}
                        @php
                            $ord_codes = '';
                            foreach ($orders as $ord) {
                                $ord_codes .= $ord->ord_code . ',';
                            }
                            if (substr($ord_codes, -1) === ',') {
                                $ord_codes = substr($ord_codes, 0, -1);
                            }
                        @endphp
                        <embed src="{{ route('view_user_checker_transactions_download_spk') . '?ord_code=' . $ord_codes }}" type="application/pdf" frameBorder="0" scrolling="false" height="100%" width="100%">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    {{-- ./modal spk --}}

    {{-- modal accident --}}
    <div class="modal fade" id="mdlReportAccident" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlReportAccidentLabel" aria-hidden="true" data-ord_id="{{ $order->ord_id }}">
        <div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlReportAccidentLabel">Penggantian Kendaraan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_loc" class="form-label">Lokasi Kejadian <span class="text-danger">*</span></label>
                        <input type="text" id="inpt-acdnt_loc" name="inpt-acdnt_loc" class="form-control" value="{{ $order->ord_acdnt_location }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_story" class="form-label">Ceritakan kronolgi kejadian <span class="text-danger">*</span></label>
                        <textarea name="inpt-acdnt_story" class="form-control" id="inpt-acdnt_story" cols="30" rows="5">{{ $order->ord_acdnt_story }}</textarea>
                    </div>
                    <div class="form-group mb-3">
                        <label for="inpt-accidents_img" class="form-label">Unggah Foto Pendukung<span class="text-danger">*</span></label>
                        <br>
                        <div id="inpt-accidents_img-previews" class="row">
                            @if ($order->ord_acdnt_imgs)
                                @foreach (json_decode($order->ord_acdnt_imgs) as $key => $acdnt_img)
                                    <div class="inpt-accidents_img-column col-auto" data-importantKey="{{ $key }}">
                                        <img class="inpt-accidents_img-img img-fluid square-photo" src="{{ asset('storage/' . $acdnt_img) }}" alt="inpt-accidents_img-img">
                                        <div class="inpt-group_accidents_img_spinner d-none">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                        <div>
                                            <span class="inpt-accidents_img-status d-none"></span>
                                            <span class="inpt-accidents_img-filesize d-none"></span>
                                        </div>
                                        <div class="inpt-group_rotate_accidents_img pt-2 d-flex justify-content-start d-none">
                                            <button type="button" class="inpt-accidents_img-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="inpt-accidents_img-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="text" class="inpt-accidents_img-base64 form-control" hidden>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div id="inpt-group_accidents_img_spinner" class="d-none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <input type="file" id="inpt-accidents_img-file" class="form-control form-control-sm" multiple required>
                        <div class="form-text">Anda bisa menguggah lebih dari 1 foto secara bersamaan.</div>
                    </div>
                    <hr>
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_vhc_nopol" class="form-label">Nomor Polisi Kendaraan Pengganti <span class="text-danger">*</span></label>
                        @if (isset($order->ord_acdnt_new_nopol1))
                            <input type="text" id="inpt-acdnt_vhc_nopol" name="inpt-acdnt_vhc_nopol" class="form-control" value="{{ $order->ord_acdnt_new_nopol1 . ' ' . $order->ord_acdnt_new_nopol2 . ' ' . $order->ord_acdnt_new_nopol3 }}" required>
                        @else
                            <input type="text" id="inpt-acdnt_vhc_nopol" name="inpt-acdnt_vhc_nopol" class="form-control" required>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_vhc_type" class="form-label w-100">Tipe Kendaraan Pengganti<span class="text-danger">*</span></label>
                        <select name="inpt-acdnt_vhc_type" id="inpt-acdnt_vhc_type" class="select2 w-100">
                            @if ($order->is_accident !== \App\Models\Orders::IS_ACCIDENT_YES)
                                <option disabled selected>Belum ada tipe kendaaran yang dipilih</option>
                            @endif
                            @foreach ($truck_types as $tt)
                                <option value="{{ $tt->type_id }}" {{ $tt->type_id === $order->ord_acdnt_new_vhc_type_id ? 'selected' : false }}>
                                    {{ $tt->type_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_drv_name" class="form-label">Pengendara Pengganti <span class="text-danger">*</span></label>
                        <input type="text" id="inpt-acdnt_drv_name" name="inpt-acdnt_drv_name" class="form-control" value="{{ $order->ord_acdnt_new_drv_name }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="inpt-acdnt_drv_phone" class="form-label">Nomor Telepon Pengendara Pengganti <span class="text-danger">*</span></label>
                        <input type="number" id="inpt-acdnt_drv_phone" name="inpt-acdnt_drv_phone" class="form-control" value="{{ $order->ord_acdnt_new_drv_phone_val }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" id="btnSubmitAccident" class="btn btn-sm btn-primary">Kirim</button>
                    <div id="btnSubmitAccidentSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- ./modal accident --}}

    {{-- modal laporan --}}
    <div class="modal fade" id="mdlReportPickUp" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlReportPickUpLabel" aria-hidden="true" data-ord_id="{{ $order->ord_id }}" data-ord_pck_id="{{ $order->ord_pck_id }}">
        <div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlReportPickUpLabel">Pelaporan Penjemputan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group mb-3">
                                    <label for="inpt-seal_number" class="form-label">Nomor Seal <span class="text-danger">*</span></label>
                                    <input type="number" id="inpt-seal_number" name="inpt-seal_number" class="form-control" required />
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-seal_img" class="form-label">Foto Seal <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-seal_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-seal_img-img">
                                    <div id="inpt-group_seal_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-seal_img-status" class="d-none"></span>
                                        <span id="inpt-seal_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_seal_img" 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-seal_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-seal_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-drv_armd_img" class="form-label">Foto Pengemudi + Armada <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-drv_armd_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-drv_armd_img-img">
                                    <div id="inpt-group_drv_armd_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-drv_armd_img-status" class="d-none"></span>
                                        <span id="inpt-drv_armd_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_drv_armd_img" 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-drv_armd_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-drv_armd_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-nopol_img" class="form-label">Nomor Polisi Kendaraan <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-nopol_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-nopol_img-img">
                                    <div id="inpt-group_nopol_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-nopol_img-status" class="d-none"></span>
                                        <span id="inpt-nopol_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_nopol_img" 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-nopol_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-nopol_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-docs_client_img" class="form-label">Dokumen Kelengkapan Dari
                                        Client<span class="text-danger">*</span></label>
                                    <br>
                                    <div id="inpt-docs_client_img-previews" class="row">
                                        {{-- <div class="inpt-docs_client_img-column col-auto" data-importantKey="${importantKey}">
                                            <img class="inpt-docs_client_img-img img-fluid square-photo d-none" src="#"
                                                alt="inpt-docs_client_img-img">
                                            <div class="inpt-group_docs_client_img_spinner d-none">
                                                <div class="spinner-border" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="inpt-docs_client_img-status d-none"></span>
                                                <span class="inpt-docs_client_img-filesize d-none"></span>
                                            </div>
                                            <div
                                                class="inpt-group_rotate_docs_client_img pt-2 d-flex justify-content-start d-none">
                                                <button type="button" class="inpt-docs_client_img-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="inpt-docs_client_img-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="text" class="inpt-docs_client_img-base64 form-control" hidden>
                                        </div> --}}
                                    </div>
                                    <div id="inpt-group_docs_client_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <input type="file" id="inpt-docs_client_img-file" class="form-control form-control-sm" multiple required>
                                    <div class="form-text">Contoh: Surat jalan, delivery order, dsb.</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-install_seal_img" class="form-label">Foto pemasangan
                                        seal</label>
                                    <br>
                                    <img id="inpt-install_seal_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-install_seal_img-img">
                                    <div id="inpt-group_install_seal_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-install_seal_img-status" class="d-none"></span>
                                        <span id="inpt-install_seal_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_install_seal_img" 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-install_seal_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-install_seal_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-goods_img" class="form-label">Foto barang</label>
                                    <br>
                                    <img id="inpt-goods_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-goods_img-img">
                                    <div id="inpt-group_goods_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-goods_img-status" class="d-none"></span>
                                        <span id="inpt-goods_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_goods_img" 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-goods_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-goods_img-base64" class="form-control" hidden>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" id="btnSubmitPck" class="btn btn-sm btn-primary">Kirim</button>
                    <div id="btnSubmitPckSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mdlReportDrop" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlReportDropLabel" aria-hidden="true" data-ord_id="{{ $order->ord_id }}" data-ord_drop_id="{{ $order->ord_drop_id }}">
        <div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlReportDropLabel">Pelaporan Pengantaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group mb-3">
                                    <label for="inpt-arrived_img" class="form-label">Foto mobil tiba di tujuan <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-arrived_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-arrived_img-img">
                                    <div id="inpt-group_arrived_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-arrived_img-status" class="d-none"></span>
                                        <span id="inpt-arrived_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_arrived_img" 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-arrived_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-arrived_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-handover_img" class="form-label">Foto serah terima <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-handover_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-handover_img-img">
                                    <div id="inpt-group_handover_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-handover_img-status" class="d-none"></span>
                                        <span id="inpt-handover_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_handover_img" 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-handover_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-handover_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-do_ttd_img" class="form-label">Foto DO yg sudah di TTD <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-do_ttd_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-do_ttd_img-img">
                                    <div id="inpt-group_do_ttd_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-do_ttd_img-status" class="d-none"></span>
                                        <span id="inpt-do_ttd_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_do_ttd_img" 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-do_ttd_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-do_ttd_img-base64" class="form-control" hidden>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="inpt-spk_img" class="form-label">Foto surat jalan di TTD <span class="text-danger">*</span></label>
                                    <br>
                                    <img id="inpt-spk_img-img" class="img-fluid square-photo d-none" src="#" alt="inpt-spk_img-img">
                                    <div id="inpt-group_spk_img_spinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                    <div>
                                        <span id="inpt-spk_img-status" class="d-none"></span>
                                        <span id="inpt-spk_img-filesize" class="d-none"></span>
                                    </div>
                                    <div id="inpt-group_rotate_spk_img" 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-spk_img-file" class="form-control form-control-sm">
                                    <input type="text" id="inpt-spk_img-base64" class="form-control" hidden>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" id="btnSubmitDrop" class="btn btn-sm btn-primary">Kirim</button>
                    <div id="btnSubmitDropSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal laporan --}}

    {{-- modal approval --}}
    <div class="modal fade" id="mdlAprvPck" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mdlAprvPckLabel" aria-hidden="true" data-ord_id="{{ $order->ord_id }}" data-ord_pck_id="{{ $order->ord_pck_id }}" data-ord_pck_drop_id="{{ $order->ord_pck_drop_id }}">
        <div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlAprvPckLabel">Persetujuan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" name="isAprvPck" type="checkbox" value="no" id="isAprvPck">
                                        <label class="form-check-label text-dark" for="isAprvPck">
                                            <p class="mb-1">Apakah data yang diberikan dari driver sudah sesuai ? dan dapat dipertanggungjawabkan ?</p>
                                            <p class="mb-0">Serta zona pengantaran dan uang saku driver sudah sesuai ? karena setelah ini zona pengantaran dan uang saku driver tidak bisa diubah</p>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" id="btnSubmitAprvPck" class="btn btn-sm btn-primary" disabled>Setujui</button>
                    <div id="btnSubmitAprvPckSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal approval --}}

    {{-- modal change uang saku --}}
    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlChangePocket" aria-labelledby="mdlChangePocketLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlChangePocketLabel">Ganti Uang Saku</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formUpdt">
                        <div class="mb-3">
                            <p class="text-danger text-bold mb-0">Ganti Uang Saku</p>
                            <small>Uang Saku untuk Driver</small>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <div class="col-12">
                                        <label for="change_uang_saku" class="form-label text-nowrap">Pilih Uang Saku <span class="text-danger">*</span></label>
                                    </div>
                                    <select name="change_uang_saku" id="change_uang_saku" class="select2 form-control" style="width: 100%;">
                                        {{-- <option value="" disabled>Belum Dipilih Uang Saku</option> --}}
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3 d-none">
                                    <div class="col-12">
                                        <label for="change_type_uang_saku" class="form-label text-nowrap">Type Uang Saku <span class="text-danger">*</span></label>
                                    </div>
                                    <select name="change_type_uang_saku" id="change_type_uang_saku" class="select2 form-control" aria-readonly="true" readonly style="width: 100%;">
                                        {{-- <option value="0" selected>Uang Saku Belum Dipilih</option> --}}
                                        <option value="{{ \App\Models\PocketMoney::TYPE_BUNDLE }}">{{ \App\Models\PocketMoney::TYPE_BUNDLE_TEXT }}</option>
                                        <option value="{{ \App\Models\PocketMoney::TYPE_CHECKPOINTS }}">{{ \App\Models\PocketMoney::TYPE_CHECKPOINTS_TEXT }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="d-none">
                            <div class="mb-1">
                                <p class="text-danger text-bold mb-0">Checkpoint</p>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="groupSakuCheckpointName">
                                        <div class="mb-3 d-none">
                                            <label for="change_uang_saku_checkpoint" class="form-label text-nowrap">Titik Lokasi <span class="text-danger">*</span></label>
                                            <input type="text" name="change_uang_saku_checkpoint[]" class="form-control" value="${point.pck_name}" data-id="${point.id}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="groupSakuCheckpointTotal">
                                        <div class="mb-3 d-none">
                                            <label for="change_uang_saku_total" class="form-label text-nowrap">Total (Rp) <span class="text-danger">*</span></label>
                                            <input type="text" name="change_uang_saku_total[]" class="form-control" value="${total}" placeholder="" readonly>
                                            {{-- <div class="input-group">
                                                <input type="text" name="change_uang_saku_total" id="change_uang_saku_total" class="form-control" placeholder="">
                                                <span class="input-group-text" id="change_uang_saku_total-icon">Rp</span>
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button id="btnSubmitChangePocket" type="button" class="btn btn-sm btn-danger">Ganti</button>
                    <div id="btnSubmitChangePocketSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal change uang saku --}}

    {{-- modal change drop zone --}}
    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlChangeZoneDrop" aria-labelledby="mdlChangeZoneDropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mdlChangeZoneDropLabel">Ganti Zona Pengantaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formUpdt">
                        <div class="mb-3">
                            <p class="text-danger text-bold mb-0">Ganti Zona Pengantaran</p>
                            <small>Ganti Zona Pengantaran</small>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <div class="col-12">
                                        <label for="change_zone_drop" class="form-label text-nowrap">Pilih Zona <span class="text-danger">*</span></label>
                                    </div>
                                    <select name="change_zone_drop" id="change_zone_drop" class="select2 form-control" style="width: 100%;">
                                        {{-- <option value="" disabled>Belum Dipilih Uang Saku</option> --}}
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-1">
                                    <p id="loc_change_zone_drop" class="mb-0">PQMM+QPP, Jalan Metro Pondok Indah Kav. IV, Pd. Pinang, Kec. Kby. Lama, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta</p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button id="btnSubmitChangeZoneDrop" type="button" class="btn btn-sm btn-danger">Ganti</button>
                    <div id="btnSubmitChangeZoneDropSpinner" class="d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal change drop zone --}}
@endsection
@section('customcss')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
@endsection
@section('customjs')
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
    <script>
        $('.select2').select2({
            dropdownParent: $('#mdlReportAccident')
        });
    </script>
    <script>
        'use strict';
        const State = {
            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
            file_jimp_worker_multiple: "{{ asset('assets/js/worker/jimp_multiple.js') }}",
            storage_lara: "{{ asset('storage') }}/",
            stts_order: {
                wait: "{{ App\Models\Orders::STTS_WAIT }}",
                confirm: "{{ App\Models\Orders::STTS_CONFIRM }}",
                have_get_vhc: "{{ App\Models\Orders::STTS_HAVE_GET_VHC }}",
                pck: "{{ App\Models\Orders::STTS_PCK }}",
                go: "{{ App\Models\Orders::STTS_GO }}",
                arv: "{{ App\Models\Orders::STTS_ARV }}",
                drop: "{{ App\Models\Orders::STTS_DROP }}",
                client_pay: "{{ App\Models\Orders::STTS_CLIENT_PAY }}",
                vendor_payed: "{{ App\Models\Orders::STTS_VENDOR_PAYED }}",
                close: "{{ App\Models\Orders::STTS_CLOSE }}",
                cancel: "{{ App\Models\Orders::STTS_CANCEL }}",
            },
            chk_stts: {
                waiting: "{{ App\Models\Orders::CHK_STTS_WAITING }}",
                has_pickup: "{{ App\Models\Orders::CHK_STTS_HAS_PICKUP }}",
                has_drop: "{{ App\Models\Orders::CHK_STTS_HAS_DROP }}",
            },
            ord_pck_drop: {
                is_aprv_no: "{{ App\Models\OrdersPckDrop::IS_APRV_NO }}",
                is_aprv_yes: "{{ App\Models\OrdersPckDrop::IS_APRV_YES }}",
            },
            workflow_type: {
                pickup: "{{ App\Models\Zone::ZONE_WORKFLOW_PICKUP }}",
                drop: "{{ App\Models\Zone::ZONE_WORKFLOW_DEST }}",
            },
            set_pck_at: "{{ $order->set_pck_at }}",
            aprv_pck_at: "{{ $order->aprv_pck_at }}",
            docs_client_imgs: [],
            accidents_imgs: [],
            // accidents_imgs_init: JSON.parse('{!! $order->ord_acdnt_imgs !!}'),
            adtPoints: JSON.parse('{!! $adtPointsJson !!}'),
            ord: {
                ord_id: "{{ $order->ord_id }}",
                ord_code: "{{ $order->ord_code }}",
                client_id: "{{ $order->c_pt_id }}",
                pck_zid: "{{ $order->ord_pck_zone_id }}",
                pck_zone_title: "{{ $order->pck_name }}",
                ord_drop_id: "{{ $order->ord_drop_id }}",
                drop_zid: "{{ $order->ord_drop_zone_id }}",
                drop_zone_title: "{{ $order->drop_name }}",
                pocket_id: "{{ $order->pocket_id }}",
                pocket_type_id: "{{ $order->pocket_type }}",
                ord_pocket_id: "{{ $order->ord_pocket_id }}",
            },
            l_pockets: [],
            l_drop_zones: [],
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                CDetail.activate();
                // ReportPickUP.activate();
                // ReportDrop.activate();
                // ReportAccident.activate();
                AprvPck.activate();
                ChangePocket.activate();
                ChangeZone.activate();
            },
            event: function() {},
        };

        const Req = {
            get_pck_drop_pocket: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_checker_get_pocket') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
            list_client_zone: function(data, isAlert = false, cb = null) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_checker_list_client_zones') }}",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (resp, textStatus, jqXHR) => {
                            if (cb) cb(resp);
                            if (resp.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    msg: resp.meta.message,
                                });
                                if (isAlert) Helper.toast('Warning', 'just now', resp.meta
                                    .message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: resp,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (cb) cb(jqXHR.responseJSON);
                            if (jqXHR.status >= 500) {
                                if (isAlert) Helper.toast('Error', 'just now',
                                    'please try again');
                            } else {
                                if (isAlert) Helper.toast('Error', 'just now', jqXHR
                                    .responseJSON.meta.message);
                            }
                            resolve({
                                type: 'error',
                                msg: jqXHR.responseJSON.meta.message,
                            });
                        }
                    })
                })
            },
        }

        const CDetail = {
            activate: function() {
                CDetail.init();
                CDetail.initDateAdtPoints();
            },
            init: function() {
                const set_pck_at = moment.unix(State.set_pck_at);
                $('#view-pickup_date_at').text(set_pck_at.format('YYYY MMM DD'));
                $('#view-pickup_time_at').text(set_pck_at.format('HH:mm'));
                if (State.aprv_pck_at != 0) $('#aprvPckAt').text(moment.unix(State.aprv_pck_at).format('DD MMM YYYY HH:mm'));

                for (let fotoCrt of $('.foto-crt')) {
                    fotoCrt = $(fotoCrt);
                    fotoCrt.text(moment.unix(fotoCrt.data('crt')).format('DD MMM YYYY HH:mm'));
                }
            },
            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 ReportPickUP = {
            activate: function() {
                FileUploadSingle.activate('seal_img');
                FileUploadSingle.activate('drv_armd_img');
                FileUploadSingle.activate('nopol_img');
                FileUploadMultiple.activate('docs_client_img');
                FileUploadSingle.activate('install_seal_img');
                FileUploadSingle.activate('goods_img');
                ReportPickUP.event();
            },
            event: function() {
                $('#btnSubmitPck').on('click', async function() {
                    let data = ReportPickUP.getData();
                    let submitItems = await ReportPickUP.submitData(data);
                });
            },
            getData: function() {
                let data = {};

                data.ord_id = $('#mdlReportPickUp').attr('data-ord_id');
                data.ord_pck_id = $('#mdlReportPickUp').attr('data-ord_pck_id');

                data.seal_number = $('#inpt-seal_number').val();

                // data.seal_img_base64 = $('#inpt-seal_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.seal_img_base64 = $('#inpt-seal_img-base64').val();
                // data.drv_armd_img_base64 = $('#inpt-drv_armd_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.drv_armd_img_base64 = $('#inpt-drv_armd_img-base64').val();
                // data.nopol_img_base64 = $('#inpt-nopol_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.nopol_img_base64 = $('#inpt-nopol_img-base64').val();
                data.docs_client_img_base64 = [];
                for (let input_base64 of $('.inpt-docs_client_img-base64')) {
                    // data.docs_client_img_base64.push($(input_base64).val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, ''));
                    data.docs_client_img_base64.push($(input_base64).val());
                }
                // data.install_seal_img_base64 = $('#inpt-install_seal_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.install_seal_img_base64 = $('#inpt-install_seal_img-base64').val();
                // data.goods_img_base64 = $('#inpt-goods_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.goods_img_base64 = $('#inpt-goods_img-base64').val();

                return data;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitPck').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitPck').attr('disabed', true);
                    $('#btnSubmitPckSpinner').removeClass('d-none');
                    $('#btnSubmitPck').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_checker_submit_pickup') }}",
                        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) => {
                            $('#btnSubmitPckSpinner').addClass('d-none');
                            $('#btnSubmitPck').removeClass('d-none');
                            $('#btnSubmitPck').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitPckSpinner').addClass('d-none');
                            $('#btnSubmitPck').removeClass('d-none');
                            $('#btnSubmitPck').removeAttr('disabed');
                            if (typeof jqXHR.responseJSON == 'undefined') {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                });
            },
        }

        const ReportDrop = {
            activate: function() {
                FileUploadSingle.activate('arrived_img');
                FileUploadSingle.activate('handover_img');
                FileUploadSingle.activate('do_ttd_img');
                FileUploadSingle.activate('spk_img');
                ReportDrop.event();
            },
            event: function() {
                $('#btnSubmitDrop').on('click', async function() {
                    let data = ReportDrop.getData();
                    let submitItems = await ReportDrop.submitData(data);
                });
            },
            getData: function() {
                let data = {};

                data.ord_id = $('#mdlReportDrop').attr('data-ord_id');
                data.ord_drop_id = $('#mdlReportDrop').attr('data-ord_drop_id');

                // data.arrived_img_base64 = $('#inpt-arrived_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.arrived_img_base64 = $('#inpt-arrived_img-base64').val();
                // data.handover_img_base64 = $('#inpt-handover_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.handover_img_base64 = $('#inpt-handover_img-base64').val();
                // data.do_ttd_img_base64 = $('#inpt-do_ttd_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.do_ttd_img_base64 = $('#inpt-do_ttd_img-base64').val();
                // data.spk_img_base64 = $('#inpt-spk_img-base64').val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, '');
                data.spk_img_base64 = $('#inpt-spk_img-base64').val();

                return data;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitDrop').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitDrop').attr('disabed', true);
                    $('#btnSubmitDropSpinner').removeClass('d-none');
                    $('#btnSubmitDrop').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_checker_submit_drop') }}",
                        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) => {
                            $('#btnSubmitDropSpinner').addClass('d-none');
                            $('#btnSubmitDrop').removeClass('d-none');
                            $('#btnSubmitDrop').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitDropSpinner').addClass('d-none');
                            $('#btnSubmitDrop').removeClass('d-none');
                            $('#btnSubmitDrop').removeAttr('disabed');
                            if (typeof jqXHR.responseJSON == 'undefined') {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                });
            },
        }

        const ReportAccident = {
            activate: function() {
                FileUploadMultiple.activate('accidents_img');
                ReportAccident.event();
                // State.accidents_imgs = [
                //     ...State.accidents_imgs_init
                // ];
            },
            event: function() {
                $('#btnSubmitAccident').on('click', async function() {
                    let data = ReportAccident.getData();
                    let isValid = ReportAccident.checkData(data, true);
                    if (!isValid) return false;
                    let submitItems = await ReportAccident.submitData(data);
                });
            },
            getData: function() {
                let data = {};

                data.ord_id = $('#mdlReportAccident').attr('data-ord_id');

                data.acdnt_loc = $('#inpt-acdnt_loc').val();
                data.acdnt_story = $('#inpt-acdnt_story').val();

                data.accidents_img_base64 = [];
                for (let input_base64 of $('.inpt-accidents_img-base64')) {
                    if ($(input_base64).val().trim() == '') continue;
                    // data.accidents_img_base64.push($(input_base64).val().replace(/^data:(image|application)\/(png|jpg|jpeg|pdf);base64,/, ''));
                    data.accidents_img_base64.push($(input_base64).val());
                }

                data.acdnt_vhc_nopol = $('#inpt-acdnt_vhc_nopol').val();
                data.acdnt_vhc_type = $('#inpt-acdnt_vhc_type').val();
                data.acdnt_drv_name = $('#inpt-acdnt_drv_name').val();
                data.acdnt_drv_phone = $('#inpt-acdnt_drv_phone').val();

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (!data.acdnt_vhc_nopol) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Nomor polisi kendaraan wajib diisi');
                    return false;
                }
                let nopol = data.acdnt_vhc_nopol.split(' ');
                if (nopol.length < 3) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Nomor polisi kendaraan tidak valid');
                    return false;
                }
                return true;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitAccident').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitAccident').attr('disabed', true);
                    $('#btnSubmitAccidentSpinner').removeClass('d-none');
                    $('#btnSubmitAccident').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_checker_submit_accident') }}",
                        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) => {
                            $('#btnSubmitAccidentSpinner').addClass('d-none');
                            $('#btnSubmitAccident').removeClass('d-none');
                            $('#btnSubmitAccident').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitAccidentSpinner').addClass('d-none');
                            $('#btnSubmitAccident').removeClass('d-none');
                            $('#btnSubmitAccident').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'
                            });
                        }
                    })
                });
            },
        }

        const AprvPck = {
            activate: function() {
                AprvPck.event();
            },
            event: function() {
                $('#isAprvPck').on('change', function() {
                    let val = $('#isAprvPck').prop('checked');
                    if (val) {
                        $('#btnSubmitAprvPck').removeAttr('disabled');
                    } else {
                        $('#btnSubmitAprvPck').attr('disabled', true);
                    }
                });
                $('#btnSubmitAprvPck').on('click', async function() {
                    let data = AprvPck.getData();
                    let isValid = AprvPck.checkData(data, true);
                    if (!isValid) return false;
                    let submitItems = await AprvPck.submitData(data);
                });
            },
            getData: function() {
                let data = {};

                data.ord_id = $('#mdlAprvPck').attr('data-ord_id');
                data.ord_pck_drop_id = $('#mdlAprvPck').attr('data-ord_pck_drop_id');
                data.ord_pck_id = $('#mdlAprvPck').attr('data-ord_pck_id');

                if ($('#isAprvPck').prop('checked')) {
                    data.is_aprv_pck = State.ord_pck_drop.is_aprv_yes;
                } else {
                    data.is_aprv_pck = State.ord_pck_drop.is_aprv_no;
                }

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (!data.is_aprv_pck) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Persetujuan Wajib dicentang');
                    return false;
                }
                return true;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitAprvPck').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitAprvPck').attr('disabed', true);
                    $('#btnSubmitAprvPckSpinner').removeClass('d-none');
                    $('#btnSubmitAprvPck').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_checker_aprv_pck') }}",
                        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) => {
                            $('#btnSubmitAprvPckSpinner').addClass('d-none');
                            $('#btnSubmitAprvPck').removeClass('d-none');
                            $('#btnSubmitAprvPck').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitAprvPckSpinner').addClass('d-none');
                            $('#btnSubmitAprvPck').removeClass('d-none');
                            $('#btnSubmitAprvPck').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'
                            });
                        }
                    })
                });
            },
        }

        const ChangePocket = {
            activate: function() {
                $('#change_uang_saku').select2({
                    dropdownParent: $('#mdlChangePocket'),
                });
                $('#change_type_uang_saku').select2({
                    disabled: true,
                    dropdownParent: $('#mdlChangePocket'),
                });

                $('#btnChangeUangSaku').on('click', async function() {
                    $('#btnChangeUangSakuSpinner').removeClass('d-none');
                    $('#btnChangeUangSaku').addClass('d-none');

                    const respPockets = await Req.get_pck_drop_pocket({
                        client_id: State.ord.client_id,
                        pck_id: State.ord.pck_zid,
                        drop_id: State.ord.drop_zid
                    }, false, null);
                    if (respPockets.type !== 'success') {
                        Helper.toast('Warning', 'just now', `Tidak ada uang saku untuk penjemputan dan pengantran ${State.ord.pck_zone_title} - ${State.ord.drop_zone_title}`);
                        return false;
                    }
                    const pockets = respPockets.resp.data;
                    $('#change_uang_saku').html('<option value="" selected>Belum Dipilih Uang Saku</option>');
                    State.l_pockets = [];
                    for (const pkt of pockets) {
                        State.l_pockets[pkt.id] = pkt;
                        $('#change_uang_saku').append(`<option value="${pkt.id}">${pkt.name}</option>`);
                    }
                    // $('#change_uang_saku').select2();

                    $('#mdlChangePocket').modal('show');
                    $('#change_uang_saku').val(State.ord.pocket_id).trigger('change');
                    $('#btnChangeUangSakuSpinner').addClass('d-none');
                    $('#btnChangeUangSaku').removeClass('d-none');
                });

                $('#change_uang_saku').on('change', function(e) {
                    let selected = $('#change_uang_saku :selected');
                    let pocket = State.l_pockets[selected.val()];
                    if (typeof pocket === 'undefined') return false;
                    $('#change_type_uang_saku').val(pocket.type).trigger('change');
                    $('.groupSakuCheckpointName').html('');
                    $('.groupSakuCheckpointTotal').html('');
                    for (let point of pocket.checkpoints) {
                        let total = point.total + '';
                        total = (new Intl.NumberFormat('id-ID')).format(total.split('.').join('').split(',').join('.'))
                        $('.groupSakuCheckpointName').append(`
                        <div class="mb-3">
                            <label for="change_uang_saku_checkpoint" class="form-label text-nowrap">Titik Lokasi <span class="text-danger">*</span></label>
                            <input type="text" name="change_uang_saku_checkpoint[]" class="form-control" value="${point.pck_name}" data-id="${point.id}" readonly>
                        </div>
                        `);
                        $('.groupSakuCheckpointTotal').append(`
                        <div class="mb-3">
                            <label for="change_uang_saku_total" class="form-label text-nowrap">Total (Rp) <span class="text-danger">*</span></label>
                            <input type="text" name="change_uang_saku_total[]" class="form-control" placeholder="" value="${total}" readonly>
                        </div>
                        `);
                    }
                });

                $('#btnSubmitChangePocket').on('click', function() {
                    const data = ChangePocket.getData();
                    let isValid = ChangePocket.checkData(data, true);
                    if (!isValid) return false;
                    ChangePocket.submitData(data);
                });
            },
            getData: function() {
                const data = {
                    ord_id: State.ord.ord_id,
                    pocket_id: $('#change_uang_saku').val()
                };

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (data.pocket_id == null || typeof data.pocket_id == 'undefined') {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Uang saku belum dipilih');
                    return false;
                }

                return true;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitChangePocket').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitChangePocket').attr('disabed', true);
                    $('#btnSubmitChangePocketSpinner').removeClass('d-none');
                    $('#btnSubmitChangePocket').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_recreate_pocket') }}",
                        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) => {
                            $('#btnSubmitChangePocketSpinner').addClass('d-none');
                            $('#btnSubmitChangePocket').removeClass('d-none');
                            $('#btnSubmitChangePocket').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            Helper.toast('Success', 'just now', 'sukses ganti uang saku');
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitChangePocketSpinner').addClass('d-none');
                            $('#btnSubmitChangePocket').removeClass('d-none');
                            $('#btnSubmitChangePocket').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'
                            });
                        }
                    })
                });
            },
        }

        const ChangeZone = {
            activate: function() {
                $('#change_zone_drop').select2({
                    dropdownParent: $('#mdlChangeZoneDrop'),
                });

                $('#btnChangeZoneDrop').on('click', async function() {
                    $('#btnChangeZoneDropSpinner').removeClass('d-none');
                    $('#btnChangeZoneDrop').addClass('d-none');

                    const listDropZones = await Req.list_client_zone({
                        cptid: State.ord.client_id,
                        workflow_type: State.workflow_type.drop,
                    });
                    if (listDropZones.type != 'success') {
                        Helper.toast('Warning', 'just now', listDropZones.msg);
                        // $('#change_zone_drop').val(null).trigger('change');
                        // $('#change_zone_drop').select2();
                        return false;
                    }
                    $('#change_zone_drop').html('');
                    for (const drop of listDropZones.resp.data) {
                        const opt = document.createElement('option');
                        opt.value = drop.id;
                        opt.innerHTML = drop.name;
                        opt.setAttribute('data-id', drop.id);
                        opt.setAttribute('data-title', drop.name);
                        opt.setAttribute('data-addr', drop.fulladdress);
                        $('#change_zone_drop').append(opt);
                    }
                    State.l_drop_zones = listDropZones.resp.data;

                    $('#mdlChangeZoneDrop').modal('show');
                    $('#change_zone_drop').val(State.ord.drop_zid).trigger('change');
                    $('#btnChangeZoneDropSpinner').addClass('d-none');
                    $('#btnChangeZoneDrop').removeClass('d-none');
                });

                $('#change_zone_drop').on('change', function(e) {
                    let selected = $('#change_zone_drop :selected');
                    $('#loc_change_zone_drop').text(selected.data('addr'));
                });

                $('#btnSubmitChangeZoneDrop').on('click', function() {
                    const data = ChangeZone.getData();
                    let isValid = ChangeZone.checkData(data, true);
                    if (!isValid) return false;
                    ChangeZone.submitData(data);
                });
            },
            getData: function() {
                const data = {
                    ord_id: State.ord.ord_id,
                    ord_code: State.ord.ord_code,
                    ord_drop_id: State.ord.ord_drop_id,
                    drop_zid: $('#change_zone_drop').val()
                };

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (data.drop_zid == null || typeof data.drop_zid == 'undefined') {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Zona belum dipilih');
                    return false;
                }

                return true;
            },
            submitData: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnSubmitChangeZoneDrop').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnSubmitChangeZoneDrop').attr('disabed', true);
                    $('#btnSubmitChangeZoneDropSpinner').removeClass('d-none');
                    $('#btnSubmitChangeZoneDrop').addClass('d-none');
                    $.ajax({
                        url: "{{ route('api_user_checker_change_zone_by_zid') }}",
                        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) => {
                            $('#btnSubmitChangeZoneDropSpinner').addClass('d-none');
                            $('#btnSubmitChangeZoneDrop').removeClass('d-none');
                            $('#btnSubmitChangeZoneDrop').removeAttr('disabed');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            Helper.toast('Success', 'just now', 'sukses ganti zona pengantaran');
                            window.location.href = window.location.href;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnSubmitChangeZoneDropSpinner').addClass('d-none');
                            $('#btnSubmitChangeZoneDrop').removeClass('d-none');
                            $('#btnSubmitChangeZoneDrop').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 = {
            // pickup
            worker_seal_img: null,
            worker_drv_armd_img: null,
            worker_nopol_img: null,
            worker_install_seal_img: null,
            worker_goods_img: null,
            // drop
            worker_arrived_img: null,
            worker_handover_img: null,
            worker_do_ttd_img: null,
            worker_spk_img: 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');
                if (x == 'seal_img') {
                    this.worker_seal_img.postMessage(dataURL)
                } else if (x == 'drv_armd_img') {
                    this.worker_drv_armd_img.postMessage(dataURL)
                } else if (x == 'nopol_img') {
                    this.worker_nopol_img.postMessage(dataURL)
                } else if (x == 'install_seal_img') {
                    this.worker_install_seal_img.postMessage(dataURL)
                } else if (x == 'goods_img') {
                    this.worker_goods_img.postMessage(dataURL)
                } else if (x == 'arrived_img') {
                    this.worker_arrived_img.postMessage(dataURL)
                } else if (x == 'handover_img') {
                    this.worker_handover_img.postMessage(dataURL)
                } else if (x == 'do_ttd_img') {
                    this.worker_do_ttd_img.postMessage(dataURL)
                } else if (x == 'spk_img') {
                    this.worker_spk_img.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);
                };

                if (x == 'seal_img') {
                    this.worker_seal_img = worker
                } else if (x == 'drv_armd_img') {
                    this.worker_drv_armd_img = worker
                } else if (x == 'nopol_img') {
                    this.worker_nopol_img = worker
                } else if (x == 'install_seal_img') {
                    this.worker_install_seal_img = worker
                } else if (x == 'goods_img') {
                    this.worker_goods_img = worker
                } else if (x == 'arrived_img') {
                    this.worker_arrived_img = worker
                } else if (x == 'handover_img') {
                    this.worker_handover_img = worker
                } else if (x == 'do_ttd_img') {
                    this.worker_do_ttd_img = worker
                } else if (x == 'spk_img') {
                    this.worker_spk_img = 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('change', async function(e) {
                    try {
                        if (browserBack()) return false;
                        FileUploadSingle.clearFile(x);
                        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 if (type[1] == 'pdf') {
                            // 1mb binary
                            if (file.size > 1048576) Helper.toast('Validasi', 'just-now', 'Maksimal size pdf 1MB');
                            FileUploadSingle.readFile(reader, file);
                        } else {
                            Helper.toast('Validasi', 'just-now', 'File tidak valid');
                        }
                    } catch (e) {
                        console.error(e.message)
                    }
                })
            },
            setEventFile: function(reader, x) {
                reader.onload = function(e) {
                    let data = e.target.result;
                    if (data.indexOf('data:image') > -1) {
                        $('#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');
                    } else if (data.indexOf('data:application') > -1) {
                        $('#inpt-' + x + '-base64').val(data);
                    }
                };

                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);
            },
            clearFile: function(x) {
                $('#inpt-' + x + '-img').addClass('d-none')
                $('#inpt-' + x + '-filesize').html('');
                $('#inpt-' + x + '-base64').val('');
                // $('#inpt-' + x + '-img').attr('src', '');
                RotateImgSingle.toggleBtnRotate(x, 'hidden');
            },
        }
        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;
            },
        }

        const JimpWorkerMultiple = {
            worker_docs_client_img: null,
            worker_accidents_img: null,
            activate: function(x) {
                let linkWorker = State.file_jimp_worker_multiple
                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')[res.importantKey]).addClass('d-none');
                        $($('.inpt-' + x + '-status')[res.importantKey]).html('Compressed')
                        $($('.inpt-' + x + '-filesize')[res.importantKey]).html('<samp>(' + fileSize /
                            1000 + ' Kb)</samp>')
                        $($('.inpt-' + x + '-img')[res.importantKey]).removeClass('d-none')
                        let clone = $($('.inpt-' + x + '-img')[res.importantKey]).clone(true);
                        clone.attr('src', res.data);
                        $($('.inpt-' + x + '-img')[res.importantKey]).replaceWith(clone);
                        $($('.inpt-' + x + '-base64')[res.importantKey]).val(res.data)
                    } else {
                        console.error(res.data)
                    }
                    $('.page-loader-wrapper').fadeOut()
                });
            },
            runWorker: function(dataURL, x, importantKey) {
                $($('.inpt-group_' + x + '_spinner')[importantKey]).removeClass('d-none');
                this['worker_' + x].postMessage({
                    dataURL,
                    importantKey,
                });
                // if (x == 'docs_client_img') {
                //     this.worker_docs_client_img.postMessage({
                //         dataURL,
                //         importantKey,
                //     });
                // } else if (x == 'accidents_img') {
                //     this.worker_accidents_img.postMessage({
                //         dataURL,
                //         importantKey,
                //     })
                // }
            },
            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;
                // if (x == 'docs_client_img') {
                //     this.worker_docs_client_img = worker
                // } else if (x == 'accidents_img') {
                //     this.worker_accidents_img = worker
                // }
            }
        }
        const FileUploadMultiple = {
            activate: function(x) {
                this.initReader(x)
                JimpWorkerMultiple.activate(x)
                this.event(x)
                RotateImgMultiple.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) {
                $('#inpt-' + x + '-file').on('change', async function(e) {
                    try {
                        if (browserBack()) return false;
                        for (let file of e.target.files) {
                            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)

                                let importantKey = State[x + 's'].length;
                                FileUploadMultiple.clearFile(x, importantKey);
                                State[x + 's'].push({
                                    file_name: file.name,
                                });

                                let templatePreviews = FileUploadMultiple.templatePreviews(importantKey, x, file.name);
                                $('#inpt-' + x + '-previews').append(templatePreviews);

                                let reader = new FileReader();
                                reader = FileUploadMultiple.setEventFile(reader, x, importantKey);
                                FileUploadMultiple.readFile(reader, newFile);

                                $($('.inpt-' + x + '-status')[importantKey]).html('Loading on compressing...')
                            } else if (type[1] == 'pdf') {
                                // 1mb binary
                                if (file.size > 1048576) Helper.toast('Validasi', 'just-now', 'Maksimal size pdf 1MB');

                                let importantKey = State[x + 's'].length;
                                FileUploadMultiple.clearFile(x, importantKey);
                                State[x + 's'].push({
                                    file_name: file.name,
                                });

                                let templatePreviews = FileUploadMultiple.templatePreviews(importantKey, x, file.name);
                                $('#inpt-' + x + '-previews').append(templatePreviews);

                                let reader = new FileReader();
                                reader = FileUploadMultiple.setEventFile(reader, x, importantKey);
                                FileUploadMultiple.readFile(reader, file);
                            } else {
                                Helper.toast('Validasi', 'just-now', 'File ' + file.name + ' tidak valid');
                            }
                        }
                    } catch (e) {
                        console.error(e.message)
                    }
                })
            },
            setEventFile: function(reader, x, importantKey) {
                reader.onload = function(e) {
                    let data = e.target.result;
                    if (data.indexOf('data:image') > -1) {
                        // $('#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);
                        JimpWorkerMultiple.runWorker(data, x, importantKey)
                        RotateImgMultiple.toggleBtnRotate(x, 'show', importantKey);
                    } else if (data.indexOf('data:application') > -1) {
                        $($('.inpt-' + x + '-base64')[importantKey]).val(data);
                        $($('.inpt-' + x + '-img')[importantKey]).attr('src', data);
                        $($('.inpt-' + x + '-img')[importantKey]).removeClass('d-none')
                    }
                };

                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);
            },
            templatePreviews: function(importantKey, x, filename = '') {
                return `
                <div class="inpt-${x}-column col-auto" data-importantKey="${importantKey}">
                    <embed class="inpt-${x}-img img-fluid square-photo d-none" src="#"
                        alt="${filename}">
                    <div class="inpt-group_${x}_spinner d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <div>
                        <span class="inpt-${x}-status d-none"></span>
                        <span class="inpt-${x}-filesize d-none"></span>
                    </div>
                    <div
                        class="inpt-group_rotate_${x} pt-2 d-flex justify-content-start d-none">
                        <button type="button" class="inpt-${x}-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="inpt-${x}-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="text" class="inpt-${x}-base64 form-control" hidden>
                </div>
                `;
            },
            clearFile: function(x, importantKey) {
                $($('.inpt-' + x + '-img')[importantKey]).addClass('d-none');
                $($('.inpt-' + x + '-filesize')[importantKey]).html('');
                $($('.inpt-' + x + '-base64')[importantKey]).val('');
                // $($('.inpt-' + x + '-img')[importantKey]).attr('src', '');
                RotateImgMultiple.toggleBtnRotate(x, 'hidden', importantKey);
            },
        }
        const RotateImgMultiple = {
            activate: function(id) {
                this.event(id)
            },
            event: function(id) {
                $(document).on('click', '.inpt-' + id + '-btnRotateRight', function(e) {
                    let importantKey = $(e.currentTarget).closest('.inpt-' + id + '-column').attr(
                        'data-importantKey');
                    $($('.inpt-' + id + '-img')[importantKey]).addClass('d-none');
                    RotateImgMultiple.rotateBase64Image($($('.inpt-' + id + '-base64')[importantKey]).val(),
                        90).then(
                        function(base64) {
                            RotateImgMultiple.updateImg(id, base64, importantKey);
                        })
                })
                $(document).on('click', '.inpt-' + id + '-btnRotateLeft', function(e) {
                    let importantKey = $(e.currentTarget).closest('.inpt-' + id + '-column').attr(
                        'data-importantKey');
                    $($('.inpt-' + id + '-img')[importantKey]).addClass('d-none');
                    RotateImgMultiple.rotateBase64Image($($('.inpt-' + id + '-base64')[importantKey]).val(),
                        -90).then(
                        function(base64) {
                            RotateImgMultiple.updateImg(id, base64, importantKey);
                        })
                })
            },
            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, importantKey) {
                // 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')[importantKey]).html('Compressing...')
                $($('.inpt-' + id + '-filesize')[importantKey]).html('<samp>(' + fileSize / 1000 + ' Kb)</samp>')
                $($('.inpt-' + id + '-img')[importantKey]).attr('src', base64)
                $($('.inpt-' + id + '-base64')[importantKey]).val(base64) // real-data

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

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