TIMOR-TELECOM/gps-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bd78b881b52ad1184ae7445698f514b2eebf0ef6
gps-frontend/resources/views/menu_v2/Checker/_view.blade.php
meusinfirmary bd78b881b5 upadate
2025-06-12 01:13:36 +07:00

2896 lines
182 KiB
PHP
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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
Reference in New Issue View Git Blame Copy Permalink