453 lines
24 KiB
PHP
Executable File
453 lines
24 KiB
PHP
Executable File
@extends('app.app')
|
|
@section('title')
|
|
User Client
|
|
@endsection
|
|
@section('customcss')
|
|
@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">New Order</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-12 mb-3">
|
|
<p class="text-danger text-bold mb-0">Pick up and Drop</p>
|
|
</div>
|
|
<div class="col-5 mb-3">
|
|
<label for="" class="form-label">Pickup Time</label>
|
|
<div class="card bg-light border mb-0">
|
|
<div class="card-body">
|
|
<p class="mb-0"><span id="view-pickup_at"></span></p>
|
|
</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">Pickup Zone</label>
|
|
<div class="card bg-light border mb-0">
|
|
<div class="card-body">
|
|
{{-- <p class="text-bold mb-2">Gudang Pluit SiCepat (Jakarta)</p> --}}
|
|
<p class="text-bold mb-2">{{ $order->pck_name }}</p>
|
|
{{-- <p class="mb-0">Jl. Pluit Karang Karya 2 No.33, RT.7/RW.16, Pejagalan, Kec. Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta 14440</p> --}}
|
|
<p class="mb-0">{{ $order->pck_addr }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-2 text-center">
|
|
<label for="" class="form-label mb-0 mt-0"> </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">Drop Zone</label>
|
|
<div class="card bg-light border mb-0">
|
|
<div class="card-body">
|
|
{{-- <p class="text-bold mb-2">Kantor Pusat SiCepat (yogyakarta)</p> --}}
|
|
<p class="text-bold mb-2">{{ $order->drop_name }}</p>
|
|
{{-- <p class="mb-0">Jl. Prof. Herman Yohanes No.989, Terban, Gondokusuman, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55223, Indonesia</p> --}}
|
|
<p class="mb-0">{{ $order->drop_addr }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row d-flex align-items-center mb-3">
|
|
<div class="col-12 mb-3">
|
|
<p class="text-danger text-bold mb-0">Package Infomation</p>
|
|
</div>
|
|
<label for="" class="form-label">Description</label>
|
|
@if ($order->weight != 0)
|
|
<div class="col-sm-4 mb-0 d-flex align-items-center">
|
|
<div class="card bg-light border mb-0 w-100">
|
|
<div class="card-body">
|
|
<p class="text-bold mb-2">Weight</p>
|
|
<p class="mb-0">{{ $order->weight }} Kg</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@if ($order->cbm != 0)
|
|
<div class="col-sm-4 mb-0 d-flex align-items-center">
|
|
<div class="card bg-light border mb-0 w-100">
|
|
<div class="card-body">
|
|
<p class="text-bold mb-2">Volume</p>
|
|
<p class="mb-0">{{ $order->cbm }} m³</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@if ($order->koli != 0)
|
|
<div class="col-sm-4 mb-0 d-flex align-items-center">
|
|
<div class="card bg-light border mb-0 w-100">
|
|
<div class="card-body">
|
|
<p class="text-bold mb-2">Koli</p>
|
|
<p class="mb-0">{{ $order->koli }} Pcs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-12 mb-3">
|
|
<p class="text-danger text-bold mb-0">Service Information</p>
|
|
<small>It's about lead time, the maximum delivery time should be faster than
|
|
request</small>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div class="row mb-3">
|
|
<div class="col-12 mb-3">
|
|
<label for="" class="form-label">Durasi Pengantaran</label>
|
|
<div class="card bg-light border mb-0">
|
|
<div class="card-body">
|
|
<p class="text-bold mb-2">{{ $order->lead_time }} Day</p>
|
|
<p class="mb-0">
|
|
{{-- <em>
|
|
You must be able to deliver the package no later than Feb 03,
|
|
2022 23:59:00
|
|
</em> --}}
|
|
<em>
|
|
You must be able to deliver the package no later than <span
|
|
id="view-max_lead_time"></span>
|
|
</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
@if ($order->is_want != \App\Models\OrdersVendors::IS_WANT_YES)
|
|
<div id="group_want_order" class="row d-flex align-items-center">
|
|
<div class="col-8">
|
|
<p class="mb-0">
|
|
Would you like to take this order?
|
|
</p>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Yes, I
|
|
want</button>
|
|
<div id="group_btnCalculateSpinner" class="d-none">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<div id="group_exp_dur"
|
|
class="row d-flex align-items-center {{ $order->is_want != \App\Models\OrdersVendors::IS_WANT_YES ? 'd-none' : '' }}">
|
|
<div class="col-12">
|
|
<p class="mb-0">
|
|
If you not take the order till <span id="exp_dur">-</span>. This order will be
|
|
canceled
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 {{ $order->is_want != \App\Models\OrdersVendors::IS_WANT_YES ? 'd-none' : '' }}"
|
|
id="checkOutView">
|
|
<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">Take the Order</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<div class="row mb-3 d-flex align-items-top">
|
|
<div class="col-12 mb-3">
|
|
<p class="text-danger text-bold mb-0">Fleet and Driver</p>
|
|
</div>
|
|
<div class="col-sm-5 mb-3">
|
|
<label for="checkout-vehicle" class="form-label">Select Vehicle</label>
|
|
<select name="checkout-vehicle" id="checkout-vehicle" class="form-control select2">
|
|
<option value="" selected disabled>No Vehicle selected</option>
|
|
{{-- <option value="">B 1237 XYZ</option>
|
|
<option value="">B 9892 XDA</option> --}}
|
|
@foreach ($vehicles as $k => $v)
|
|
<option value="{{ $v->id }}">
|
|
{{ $v->nopol1 . ' ' . $v->nopol2 . ' ' . $v->nopol3 }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-2"></div>
|
|
<div class="col-sm-5 mb-3">
|
|
<label for="checkout-driver" class="form-label">Select Driver</label>
|
|
<select name="checkout-driver" id="checkout-driver" class="form-control select2">
|
|
<option value="" selected disabled>No Driver selected</option>
|
|
{{-- <option value="">Anwar Lutfi Yuliana</option>
|
|
<option value="">Mansur Iman Darma</option>
|
|
<option value="">Putra Ismail Daud</option>
|
|
<option value="">Ridwan Buana Iskandar</option> --}}
|
|
@foreach ($drivers as $k => $v)
|
|
<option value="{{ $v->id }}">
|
|
{{ $v->fullname . ' (+' . $v->phone_code . ' ' . implode(' ', str_split($v->phone, 4)) . ')' }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-8">
|
|
<p class="mb-0">
|
|
Have you double-checked the Fleet and Driver information?
|
|
</p>
|
|
<div class="form-check">
|
|
<input class="form-check-input" name="agree" type="checkbox" value=""
|
|
id="flexCheckDefault">
|
|
<label class="form-check-label text-danger" for="flexCheckDefault">
|
|
I agree with the lead time rules from Bonceng
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
{{-- <button class="btn btn-danger btn-block btn-sm" id="btnOrder"
|
|
onclick="location.href='{{ route('view_user_vendor_transaction') }}'"
|
|
disabled>Order now</button> --}}
|
|
<button class="btn btn-danger btn-block btn-sm" id="btnOrder" disabled>Order
|
|
now</button>
|
|
<div id="group_btnOrderSpinner" class="d-none">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('customjs')
|
|
<script>
|
|
'use strict'
|
|
|
|
const State = {
|
|
ord_id: "{{ $order->ord_id }}",
|
|
crt: "{{ $order->crt }}",
|
|
set_pck_at: "{{ $order->set_pck_at }}",
|
|
lead_time: "{{ $order->lead_time }}",
|
|
exp_dur: "{{ $order->vdr_exp_at }}",
|
|
url_list_trx: "{{ route('view_user_vendor_transaction') }}",
|
|
};
|
|
|
|
const Wrapper = {
|
|
activate: function() {
|
|
Wrapper.event();
|
|
OrdConfirm.activate();
|
|
},
|
|
event: function() {
|
|
$('#view-pickup_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY HH:mm:ss'));
|
|
$('#view-max_lead_time').text(moment.unix(State.crt).add(State.lead_time, 'day').format(
|
|
'DD MMM YYYY HH:mm:ss'));
|
|
$('#exp_dur').text(moment.unix(State.exp_dur).format('DD MMM YYYY HH:mm:ss'));
|
|
},
|
|
};
|
|
|
|
const OrdConfirm = {
|
|
activate: function() {
|
|
OrdConfirm.event();
|
|
},
|
|
event: function() {
|
|
$('#btnCalculate').on('click', function() {
|
|
let data = {};
|
|
data.ord_id = State.ord_id;
|
|
OrdConfirm.wantThisOrder(data);
|
|
});
|
|
|
|
$('input[name=agree]').on('click', function() {
|
|
if ($(this).is(':checked')) {
|
|
$('#btnOrder').prop("disabled", false);
|
|
} else {
|
|
$('#btnOrder').prop("disabled", true);
|
|
}
|
|
});
|
|
|
|
$('#btnOrder').on('click', async function() {
|
|
let data = OrdConfirm.getData();
|
|
let isValid = OrdConfirm.checkData(data, true);
|
|
if (!isValid) {
|
|
return false;
|
|
}
|
|
OrdConfirm.submit(data);
|
|
});
|
|
},
|
|
getData: function() {
|
|
let data = {};
|
|
|
|
data.ord_id = State.ord_id;
|
|
data.vehicle = $('#checkout-vehicle').val();
|
|
data.driver = $('#checkout-driver').val();
|
|
data.aggree = $('#flexCheckDefault').prop('checked');
|
|
|
|
return data;
|
|
},
|
|
checkData: function(data, isAlert = false) {
|
|
if (!data.vehicle) {
|
|
if (isAlert) Helper.toast('Warning', 'just now', 'Vehicle not selected');
|
|
return false;
|
|
}
|
|
if (!data.driver) {
|
|
if (isAlert) Helper.toast('Warning', 'just now', 'Driver not selected');
|
|
return false;
|
|
}
|
|
if (!data.aggree) {
|
|
if (isAlert) Helper.toast('Warning', 'just now',
|
|
'Have you double-checked the Fleet and Driver information?');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
submit: function(data) {
|
|
return new Promise((resolve, reject) => {
|
|
if (typeof $('#btnOrder').attr('disabed') != 'undefined') {
|
|
resolve({
|
|
type: 'fail'
|
|
});
|
|
return false;
|
|
}
|
|
$('#btnOrder').attr('disabed', true);
|
|
OrdConfirm.toggleBtnSpinner(1);
|
|
$.ajax({
|
|
url: "{{ route('api_user_vendor_accept_order_v1') }}/",
|
|
method: 'POST',
|
|
crossDomain: true,
|
|
processData: true,
|
|
headers: {
|
|
'x-api-key': Helper.getCookie('_trtk'),
|
|
'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
|
|
},
|
|
data: data,
|
|
success: (data, textStatus, jqXHR) => {
|
|
$('#btnOrder').removeAttr('disabed');
|
|
OrdConfirm.toggleBtnSpinner(0);
|
|
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 = State.url_list_trx;
|
|
},
|
|
error: (jqXHR, textStatus, error) => {
|
|
$('#btnOrder').removeAttr('disabed');
|
|
OrdConfirm.toggleBtnSpinner(0);
|
|
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'
|
|
});
|
|
}
|
|
})
|
|
});
|
|
},
|
|
toggleBtnSpinner: function(isShow = 1) {
|
|
if (isShow) {
|
|
$('#btnOrder').addClass('d-none');
|
|
$('#group_btnOrderSpinner').removeClass('d-none');
|
|
} else {
|
|
$('#btnOrder').removeClass('d-none');
|
|
$('#group_btnOrderSpinner').addClass('d-none');
|
|
}
|
|
},
|
|
wantThisOrder: function(data) {
|
|
function toogleBtnSpinner(isShow = 1) {
|
|
if (isShow) {
|
|
$('#btnCalculate').addClass('d-none');
|
|
$('#group_btnCalculateSpinner').removeClass('d-none');
|
|
} else {
|
|
$('#btnCalculate').removeClass('d-none');
|
|
$('#group_btnCalculateSpinner').addClass('d-none');
|
|
}
|
|
}
|
|
|
|
return new Promise((resolve, reject) => {
|
|
if (typeof $('#btnCalculate').attr('disabed') != 'undefined') {
|
|
resolve({
|
|
type: 'fail'
|
|
});
|
|
return false;
|
|
}
|
|
$('#btnCalculate').attr('disabed', true);
|
|
toogleBtnSpinner(1);
|
|
$.ajax({
|
|
url: "{{ route('api_user_vendor_want_this_order_v1') }}/",
|
|
method: 'POST',
|
|
crossDomain: true,
|
|
processData: true,
|
|
headers: {
|
|
'x-api-key': Helper.getCookie('_trtk'),
|
|
'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
|
|
},
|
|
data: data,
|
|
success: (data, textStatus, jqXHR) => {
|
|
$('#btnCalculate').removeAttr('disabed');
|
|
toogleBtnSpinner(0);
|
|
if (data.meta.type != 'success') {
|
|
resolve({
|
|
type: 'fail'
|
|
});
|
|
Helper.toast('Warning', 'just now', data.meta.message);
|
|
return false;
|
|
}
|
|
resolve({
|
|
type: 'success',
|
|
resp: data,
|
|
});
|
|
$('#checkOutView').removeClass('d-none');
|
|
$('#checkOutView').addClass('d-block');
|
|
$('#group_want_order').addClass('d-none');
|
|
$('#exp_dur').text(moment().add(10, 'minute').format('DD MMM YYYY HH:mm:ss'));
|
|
$('#group_exp_dur').removeClass('d-none');
|
|
},
|
|
error: (jqXHR, textStatus, error) => {
|
|
$('#btnCalculate').removeAttr('disabed');
|
|
toogleBtnSpinner(0);
|
|
if (jqXHR.status >= 500) {
|
|
Helper.toast('Error', 'just now', 'please try again');
|
|
} else {
|
|
Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
|
|
.message);
|
|
}
|
|
resolve({
|
|
type: 'error'
|
|
});
|
|
}
|
|
})
|
|
});
|
|
},
|
|
};
|
|
|
|
Wrapper.activate();
|
|
</script>
|
|
@endsection
|