Server : nginx/1.18.0 System : Linux localhost 6.14.3-x86_64-linode168 #1 SMP PREEMPT_DYNAMIC Mon Apr 21 19:47:55 EDT 2025 x86_64 User : www-data ( 33) PHP Version : 8.0.16 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory : /var/www/ecommerce/resources/views/frontend/pages/ |
@extends('frontend.layouts.master')
@section('title', 'Checkout page')
@section('main-content')
@php
$shippingKinds = Helper::shipping();
$totalCartPrice = Helper::totalCartPrice();
$cartCount = Helper::cartCount();
@endphp
<!-- Breadcrumbs -->
{{-- <div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-12">
<div class="bread-inner">
<ul class="bread-list">
<li><a href="{{ route('home') }}">Home<i class="ti-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0)">Checkout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> --}}
<!-- End Breadcrumbs -->
<div class="website-section position-relative" style="background: url('../../frontend/svg/banner-bg.svg')">
<div class="container">
<div class="col-sm-10 offset-sm-1 position-relative" style="z-index: 9">
<div class="nav multi-step-form-2 mb-4" role="tablist">
{{-- <button type="button" data-toggle="tab" href="#tab_1" role="tab" class="nav-item filled">
{!! svg_html('checkout', 'step-icon', 40) !!}
<p>1. Checkout</p>
</button>
<button type="button" data-toggle="tab" href="#tab_2" role="tab" class="nav-item">
{!! svg_html('payment', 'step-icon', 40) !!}
<p>2. Payment</p>
</button>
<button type="button" data-toggle="tab" href="#tab_3" role="tab" class="nav-item">
{!! svg_html('document', 'step-icon', 40) !!}
<p>3. Confirmation</p>
</button> --}}
<button type="button" data-toggle="tab" href="#tab_2" role="tab" class="nav-item">
{!! svg_html('payment', 'step-icon', 40) !!}
<p>1. Payment</p>
</button>
<button type="button" data-toggle="tab" href="#tab_3" role="tab" class="nav-item">
{!! svg_html('document', 'step-icon', 40) !!}
<p>2. Confirmation</p>
</button>
</div>
@php
$subTotal = $totalCartPrice;
/*
if (session('coupon')) {
$totalAmount -= session('coupon')['value'];
}
*/
$totalAmount = $subTotal;
$shippings = DB::table('shippings')->whereStatus('active')->get();
$paymentFrequency = Helper::getPaymentFrequency($totalAmount);
@endphp
<div class="row">
<input type="hidden" id="sub_total" value="{!! $subTotal !!}" />
<div class="col mb-5">
<div class="card rounded-12 pt-2">
<div class="card-body">
<h3>Order Details</h3>
<br />
<table class="table noborder font-px-19">
<tbody>
<tr>
<td class="pl-0">Subtotal</td>
<td class="font-weight-bold">
{{ config('shop.currency_symbol') . ' ' . number_format($subTotal, 2) }}
</td>
</tr>
{{-- <tr>
<td class="pl-0">Shipping Cost</td>
<td class="font-weight-bold">{!! config('shop.currency_symbol') !!} <span id="shipping_cost">Not Included</span></td>
</tr> --}}
{{-- <tr>
<td class="pl-0">Promo Code</td>
<td class="font-weight-bold">ETIQA</td>
</tr> --}}
{{-- <tr>
<td class="pl-0">Packaging</td>
<td class="font-weight-bold">
{{ config('shop.currency_symbol') }} 0
</td>
</tr> --}}
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td class="pl-0">Grand Total</td>
<td class="font-weight-bold" id="order_total_price">
{!! config('shop.currency_symbol') !!} <span class="order-total-price">{!! number_format($totalAmount, 2) !!}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col mb-5">
<form class="needs-validation" autocomplete="off" method="post" action="{{ route('cart.order') }}"
enctype="multipart/form-data">
@csrf
<div class="tab-content">
<input type="hidden" name="first_name" value="{{ auth()->user()->first_name }}">
<input type="hidden" name="last_name" value="{{ auth()->user()->last_name }}">
<input type="hidden" name="email" value="{{ auth()->user()->email }}">
<input type="hidden" name="phone" value="{{ auth()->user()->phone }}">
<input type="hidden" name="address1" value="{{ auth()->user()->address }}">
<input type="hidden" name="courier" value="" />
<input type="hidden" name="payment_frequency" value="{{ $paymentFrequency }}" />
<input type="hidden" readonly name="topup_amount" value="{!! number_format($totalCartPrice / $paymentFrequency, 2) !!}">
<div class="tab-pane fade show active" id="tab_2" role="tabpanel">
<div class="card product-details pt-2">
<div class="card-body">
<h3>Select Payment Method</h3>
<br />
@php
$cartPaymentMethodIds = $inCartProducts
->map(fn($cart) => $cart->product->payment_method_id ?? $cart->product->cat_info->payment_method_id)
->filter()
->all();
@endphp
@foreach (Helper::paymentMethods() as $payment_method)
@if (!$cartPaymentMethodIds || in_array($payment_method->id, $cartPaymentMethodIds))
<div class="form-check mb-3">
<label class="form-check-label" for="payment_method_id">
<input class="form-check-input" type="radio"
name="payment_method_id" value="{!! $payment_method->id !!}"
{!! old('payment_method') == $payment_method->id ? 'checked' : '' !!} />
{!! $payment_method->name !!}
</label>
@error('payment_method_id')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<br/>
@endif
@endforeach
<div id="payment_method_1" class="d-none payment-method-detail">
<div class="form-group mt-5 input-material">
<div class="font-weight-normal">Number of Installments</div>
<div class="font-weight-bold">{{ $paymentFrequency }}X</div>
</div>
{{-- <div class="form-row">
<div class="form-group input-material col-md-6">
<label for="payment_start_date">Start Date</label>
<input type="text" readonly name="payment_start_date"
class="form-control form-control-lg"
value="{!! today()->format('Y/m/d') !!}"
placeholder="{!! today()->format('Y/m/d') !!}">
@error('payment_start_date')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group input-material col-md-6">
<label for="payment_end_date">End Date</label>
<input type="text" readonly name="payment_end_date"
class="form-control form-control-lg"
value="{!! today()->addMonth(3)->format('Y/m/d') !!}">
@error('payment_end_date')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
</div> --}}
<div class="form-group input-material">
<label for="topup_amount">Minimum Topup Amount</label>
<input type="text" readonly name="topup_amount"
min="{!! $totalCartPrice / $paymentFrequency !!}" class="form-control form-control-lg"
value="{!! number_format($totalCartPrice / $paymentFrequency, 2) !!}">
@error('topup_amount')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
{{-- <div class="alert alert-info">“Kindly make your first split payment immediately to the account below to enable us process your order”</div>
<div class="form-group input-material">
<label for="account_no">Account No</label>
<div class="font-weight-bold">
{!! $settings['bank'] !!}<br/>
{!! $settings['account_no'] !!}
</div>
</div> --}}
<div class="form-group mt-2">
<label class="d-block">Evidence of Salary</label>
<div class="box has-advanced-upload">
<div class="box__input text-center">
<label for="salary_evidence" class="d-block">Drag and Drop file
here (pdf or image)</label>
{!! svg_html('upload', '', 100) !!}
<input class="box__file" type="file" name="salary_evidence"
data-multiple-caption="{count} files selected"
data-html-required />
<div class="text-e-primary">Select File</div>
</div>
</div>
@error('salary_evidence')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label>Employer Letter</label>
<div class="box has-advanced-upload">
<div class="box__input text-center">
<label for="employer_letter" class="d-block">Drag and
Drop file
here (pdf or image)</label>
{!! svg_html('upload', '', 100) !!}
<input class="box__file" type="file" name="employer_letter"
data-multiple-caption="{count} files selected"
data-html-required />
<div class="text-e-primary">Select File</div>
</div>
</div>
@error('employer_letter')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
@if ($totalCartPrice > 100000)
{{-- <label for="guarantor_name" class="font-weight-bold">Guarantor</label>
<div class="form-group input-material">
<input type="text" name="guarantor_name"
class="form-control form-control-lg" placeholder="Name"
value="{!! old('guarantor_name') !!}" data-html-required>
@error('guarantor_name')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<select class="form-control form-control-lg"
name="guarantor_relationship" value="{!! old('guarantor_relationship') !!}"
data-html-required>
<option>Relationship</option>
</select>
@error('guarantor_relationship')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<input type="tel" name="guarantor_phone"
class="form-control form-control-lg" placeholder="Phone"
value="{!! old('guarantor_phone') !!}" data-html-required>
@error('guarantor_phone')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<input type="email" name="guarantor_email"
class="form-control form-control-lg" placeholder="Email"
value="{!! old('guarantor_email') !!}" data-html-required>
@error('guarantor_email')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div> --}}
@endif
<div class="pt-4 px-4">
<table class="table noborder">
<tbody>
<tr>
<td>Subtotal</td>
<td>{!! config('shop.currency_symbol') . ' '. number_format($subTotal, 2) !!}</td>
</tr>
<tr>
<td>Coupon</td>
<td>-</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr class="font-px-19">
<td>TOTAL</td>
<td>{{ config('shop.currency_symbol') . ' ' }} <span
class="order-total-price">{{ number_format($totalAmount, 2) }}</span></td>
</tr>
<tr>
<td colspan="2">
<button data-tab-id="tab_2" type="submit"
class="reg-btn btn btn-lg btn-block btn-success">Confirm
Order</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="payment_method_2" class="d-none payment-method-detail">
<div class="form-group mt-2">
<label for="file" class="d-block">Evidence of Salary</label>
<div class="box has-advanced-upload">
<div class="box__input text-center">
<label for="salary_evidence_two" class="d-block">Drag and Drop file
here (pdf or image)</label>
{!! svg_html('upload', '', 100) !!}
<input class="box__file" type="file" name="salary_evidence_two"
data-multiple-caption="{count} files selected"
data-html-required />
<div class="text-e-primary">Select File</div>
</div>
</div>
@error('salary_evidence_two')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label>Employer Letter</label>
<div class="box has-advanced-upload">
<div class="box__input text-center">
<label for="employer_letter_two" class="d-block">Drag and
Drop file
here (pdf or image)</label>
{!! svg_html('upload', '', 100) !!}
<input class="box__file" type="file" name="employer_letter_two"
data-multiple-caption="{count} files selected"
data-html-required />
<div class="text-e-primary">Select File</div>
</div>
</div>
@error('employer_letter_two')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
@if ($totalCartPrice > 100000)
<label for="guarantor_name" class="font-weight-bold">Guarantor</label>
<div class="form-group input-material">
<input type="text" name="guarantor_name"
class="form-control form-control-lg" placeholder="Name"
value="{!! old('guarantor_name') !!}" data-html-required>
@error('guarantor_name')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<select class="form-control form-control-lg"
name="guarantor_relationship" value="{!! old('guarantor_relationship') !!}"
data-html-required>
<option>Relationship</option>
</select>
@error('guarantor_relationship')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<input type="tel" name="guarantor_phone"
class="form-control form-control-lg" placeholder="Phone"
value="{!! old('guarantor_phone') !!}" data-html-required>
@error('guarantor_phone')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
<div class="form-group mt-2 input-material">
<input type="email" name="guarantor_email"
class="form-control form-control-lg" placeholder="Email"
value="{!! old('guarantor_email') !!}" data-html-required>
@error('guarantor_email')
<span class='text-danger'>{{ $message }}</span>
@enderror
</div>
@endif
<div class="pt-4 px-4">
<table class="table noborder">
<tbody>
<tr>
<td>Subtotal</td>
<td>{!! config('shop.currency_symbol') . ' '. number_format($subTotal, 2) !!}</td>
</tr>
<tr>
<td>Coupon</td>
<td>-</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr class="font-px-19">
<td>TOTAL</td>
<td>{{ config('shop.currency_symbol') . ' ' }} <span
class="order-total-price">{{ number_format($totalAmount, 2) }}</span></td>
</tr>
<tr>
<td colspan="2">
<button data-tab-id="tab_2" type="submit"
class="reg-btn btn btn-lg btn-block btn-success">Confirm
Order</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab_3" role="tabpanel">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="rect"></div>
</div>
@endsection
@push('scripts')
<script>
'use strict';
function number_format(number, decimals, decPoint, thousandsSep) {
number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
const n = !isFinite(+number) ? 0 : +number
const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
const sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
const dec = (typeof decPoint === 'undefined') ? '.' : decPoint
let s = ''
const toFixedFix = function(n, prec) {
if (('' + n).indexOf('e') === -1) {
return +(Math.round(n + 'e+' + prec) + 'e-' + prec)
} else {
const arr = ('' + n).split('e')
let sig = ''
if (+arr[1] + prec > 0) {
sig = '+'
}
return (+(Math.round(+arr[0] + 'e' + sig + (+arr[1] + prec)) + 'e-' + prec)).toFixed(prec)
}
}
s = (prec ? toFixedFix(n, prec).toString() : '' + Math.round(n)).split('.')
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || ''
s[1] += new Array(prec - s[1].length + 1).join('0')
}
return s.join(dec)
}
function setRequired(element) {
$(element).each(function () {
const $element = $(this);
if ($element.hasClass("d-none")) {
$element.find(":input").removeAttr("required");
} else {
$element.find(":input").each(function () {
const $this = $(this);
if ($this.attr("data-html-required") !== 'undefined') {
$this.attr("required", true);
}
})
}
});
}
$(function() {
const isAdvancedUpload = function() {
var div = document.createElement('div');
return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in
window &&
'FileReader' in window;
}();
if (isAdvancedUpload) {
$('.box').each(function() {
const $field = $(this);
$field.addClass('has-advanced-upload');
var droppedFiles = false;
var $input = $field.find('input[type="file"]'),
$label = $field.find('label'),
showFiles = function(files) {
$label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '')
.replace(
'{count}', files
.length) : files[0].name);
};
$field.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
e.preventDefault();
e.stopPropagation();
})
.on('dragover dragenter', function() {
$field.addClass('is-dragover');
})
.on('dragleave dragend drop', function() {
$field.removeClass('is-dragover');
})
.on('drop', function(e) {
droppedFiles = e.originalEvent.dataTransfer
.files; // the files that were dropped
showFiles(droppedFiles);
})
.on('change', function(e) {
showFiles(e.target.files);
});
});
}
$(".reg-btn").on('click', function() {
const tabId = $(this).data("tab-id");
let pass = true;
const inputs = document.querySelectorAll(`#${tabId} input`);
for (let i = 0, length = inputs.length; i < length; i++) {
if ($(inputs[i]).closest('.payment-method-detail.d-none').length) {
continue;
}
if (!inputs[i].checkValidity()) {
pass = false;
break;
}
}
$("#" + tabId).addClass("was-validated");
if (pass) {
const nextTabId = Number(tabId.replace("tab_", "")) + 1;
$('[href="#' + tabId + '"]').addClass("filled");
$('[href="#tab_' + nextTabId + '"]').addClass("filled").click();
switch (nextTabId) {
case 2:
$("#shipping_cost").text(number_format(Number($("#courier option:selected").attr("data-price")), 2));
$(".order-total-price")
.text(number_format(Number($("#sub_total").val()) + Number($("#courier option:selected").attr("data-price")), 2));
$(".multi-step-form-2").removeClass("d-none");
break;
}
}
});
$('[name="payment_method_id"]').on("change", function() {
$(".payment-method-detail").addClass("d-none");
const val = $(this).val();
$(`#payment_method_${val}`).removeClass("d-none");
setRequired(".payment-method-detail");
});
if ($('[name="payment_method_id"]').length === 1) {
$('[name="payment_method_id"]').first().click();
}
$('[name="payment_frequency"]').on("change", function () {
const option = $(this).find("option:selected");
const enddate = option.attr("data-end-date");
const val = option.attr("data-min");
$('[name="topup_amount"]')
.attr('min', val)
.val(val);
$('[name="payment_end_date"]')
.val(enddate);
});
});
</script>
@endpush