Viewing file:  index.blade.php (45.69 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<!DOCTYPE html>
@php $siteDirection=isset(json_decode(get_settings('local_setting'))->direction)?json_decode(get_settings('local_setting'))->direction:'ltr'; @endphp
<html lang="{{session()->get('locale')}}" dir="{{$siteDirection}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{{trans('layout.pos')}}</title>
<!-- Favicon icon -->
<link rel="icon" href="{{asset('uploads/'.json_decode(get_settings('site_setting'))->favicon)}}">
<link href="{{asset('vendor/bootstrap-select/dist/css/bootstrap-select.min.css')}}" rel="stylesheet">
<link href="{{asset('vendor/lineicons/2.0/LineIcons.css')}}" rel="stylesheet">
<link rel="stylesheet" href="{{asset("vendor/toastr/css/toastr.min.css")}}">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<link href="{{asset('css/custom.css')}}" rel="stylesheet">
<style>
.logo-abbr{
width: 80px;
}
.brand-logo{
display: flex;
align-items: center;
}
.logo-compact.header-logo{
margin-left: 20px;
}
.search-item-content-sec{
height: 100% !important;
}
.pos-item-sec-list {
height: 260px;
}
.tax-discount-shipping-sec{
height: 100px;
}
.tax-discount-shipping-sec label{
font-size: 12px;
font-weight: 600;
}
.order_details_header-list li{
font-size: 12px;
}
.order_details_header-list-badge{
padding: 0px 5px !important;
border-radius: 5px !important;
font-size: 10px ;
}
.table-bg-gray{
background-color: #D1D5DB !important;
}
.table .table-bg-gray th {
font-size: 10px;
color: #000;
}
.table .table-body td {
font-size: 10px;
color: #000;
}
.modal-footer .btn-sm{
font-size: 12px !important;
padding: 10px;
}
</style>
</head>
<body class="{{$siteDirection}}" direction="{{$siteDirection}}">
@php $modules = modules_status('MultiRestaurant'); @endphp
<!-- row -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-12 p-0">
<div class="search-item-by-restaurent">
<div class="header-section-pos-system">
<div class="pos-system-logo-sec">
<a href="{{route('dashboard')}}" class="brand-logo">
<img class="logo-abbr" src="{{asset('uploads/'.json_decode(get_settings('site_setting'))->logo)}}" alt="">
<span class="logo-compact header-logo">{{json_decode(get_settings('site_setting'))->name}}</span>
</a>
</div>
@if(auth()->check())
<ul class="navbar-nav header-right">
<li class="nav-item dropdown notification_dropdown">
@if(auth()->user()->type=='customer')
@if(request()->get('table') && request()->get('id') && !$modules)
<form action="{{route('call.waiter.store')}}" method="post"
class="{{request()->segment('1')=='orders'?'d-none':''}}{{request()->segment('1') =='settings'?'d-none':''}}">
@csrf
<input type="hidden" name="restaurant" value="{{request()->get('id')}}">
<input type="hidden" name="table_id"
value="{{request()->get('table')}}">
<button type="submit"
class="btn btn-sm badge-success">{{trans('Call Waiter')}}</button>
</form>
@else
@if($modules)
<a class="nav-link bell bell-link primary" href="{{route('multirestaurant::addToCart')}}">
<i class="fa fa-shopping-basket"></i>
<span class="badge-cart">
@if(cart())
{{cart()->count()}}
@else
0
@endif
</span>
</a>
@else
<button type="btn" class="btn btn-sm badge-success call_waiter_btn {{request()->segment('1')=='orders'?'d-none':''}}{{request()->segment('1') =='settings'?'d-none':''}}">{{trans('Call Waiter')}}</button>
@endif
@endif
@endif
<li class="nav-item dropdown header-profile">
<a class="nav-link" href="#" role="button" data-toggle="dropdown">
<div class="header-info">
<span>{{trans('layout.hello')}} <strong>{{short_word(auth()->user()->name,1,'')}}</strong></span>
</div>
<img src="{{asset('uploads/'.auth()->user()->picture)}}" width="20" alt=""/>
</a>
<div class="dropdown-menu dropdown-menu-right">
@if(auth()->user()->type=='customer')
<a href="{{route('order.index')}}" class="dropdown-item ai-icon">
<i class="fa fa-list"></i>
<span class="ml-2">{{trans('layout.my_order')}} </span>
</a>
@endif
<a href="{{route('settings')}}" class="dropdown-item ai-icon">
<svg id="icon-user1" xmlns="http://www.w3.org/2000/svg" class="text-primary"
width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="ml-2">{{trans('layout.profile')}} </span>
</a>
<a href="{{route('logout')}}" class="dropdown-item ai-icon">
<svg id="icon-logout" xmlns="http://www.w3.org/2000/svg" class="text-danger"
width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" y1="12" x2="9" y2="12"></line>
</svg>
<span class="ml-2">{{trans('layout.logout')}} </span>
</a>
</div>
</li>
</ul>
@else
@if(isset($rest_categories))
<ul class="navbar-nav header-right">
<li class="nav-item dropdown notification_dropdown">
<a class="nav-link bell bell-link primary"
href="{{route('registration',['type'=>'customer','restaurant'=>request()->get('id'),'slug'=>request()->segment(2)])}}">
<i class="flaticon-381-add"></i>
<span class="nav-text">{{trans('layout.signup')}}</span>
</a>
</li>
</ul>
@endif
@endif
</div>
<div class="search-item-content-sec">
<div class="row">
<div class="col-6">
<div class="input-group mb-3">
<select name="" class="form-control pos-sys-select-form-control" name="customer_id" id="pos-customer-id-select">
<option value="walk_in_customer" selected>Walk in customer</option>
@if (isset($customers) && $customers)
@foreach ($customers as $customer)
<option value="{{$customer->name}}">{{ucfirst($customer->name)}}</option>
@endforeach
@endif
</select>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
</div>
</div>
<div class="col-6">
<div class="input-group mb-3">
<select class="form-control pos-sys-select-form-control" id="pos-restaurent-id-select" name="restaurent_id">
<option value="">Choose Restaurent</option>
@if (isset($restaurents) && $restaurents)
@foreach ($restaurents as $restaurent)
<option value="{{$restaurent->id}}">{{ucfirst($restaurent->name)}}</option>
@endforeach
@endif
</select>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-cutlery" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<hr>
<div class="pos-item-sec-list">
<table class="table">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
<th scope="col">Subtotal</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="pos-table-sec">
</tbody>
</table>
</div>
<div class="grand-total-sec" >
Grand Total : <span class="pos-grand-total_currency_symbol"></span><span id="pos-grand-total">0.00</span>
<input type="hidden" name="_token" id="csrf_token_id"
value="{{ csrf_token() }}">
</div>
<div class="tax-discount-shipping-sec">
<div class="row">
<div class="col-sm-6 pt-2 m-auto">
<label for="">Discount</label>
<div class="input-group mb-3">
<input type="text" id="pos-discount-input-item" class="form-control tax-discount-shipping-form-control" placeholder="0" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text tax-discount-shipping-input-grp-text" id="discount-currency-symbol">$</span>
</div>
</div>
</div>
</div>
</div>
<div class="button-section-restaurent-search">
<div class="reset-button">
<button type="button" class="btn reset-btn pos-btn"><i class="fa fa-power-off" aria-hidden="true"></i> Reset</button>
</div>
<div class="pay-now-button">
<button type="button" class="btn paynow-btn pos-btn"><i class="fa fa-cart-plus" aria-hidden="true"></i> Pay Now</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 small-device-col-7 col-12">
<div class="choose-item-sec">
<div class="search-by-product-sec">
<div class="search-box-sec">
<div class="input-group ">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
<input type="text" class="form-control pos-item-search-input" placeholder="Please Select And Search Product by Name"
aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div id="pos-item-search-sec-content" class="pos-item-search-list-card">
<div id="pos-item-single-list-section">
</div>
</div>
<div class="pos-items-list">
<div class="row d-none loader-img-sec" id="add-loader">
<div class="col-lg-12">
<div class="img-sec-loader">
<img src="{{asset('images/loading.webp')}}" class="img-fluid loader-img" alt="">
</div>
</div>
</div>
<div class="row d-none" id="select-restaurent-alert">
<div class="col-lg-12">
<span class="select-restaurent-alert-text">Please Select Any Restaurent</span>
</div>
</div>
<div class="row" id="no-item-available-here">
<div class="col-lg-12">
<div class="img-sec">
<img src="{{asset('images/no-item-image.svg')}}" class="img-fluid no-item-data-img" alt="">
</div>
</div>
</div>
<div class="row" id="pos-card-item-card">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Confirmation modal -->
<div class="modal fade" id="modal-confirm">
<div class="modal-dialog">
<form id="modal-form">
@csrf
<div id="customInput"></div>
<div class="modal-content">
<div class="modal-header p-2">
<h4 class="modal-title">{{trans('layout.confirmation')}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer p-2">
<button id="modal-confirm-btn" type="button"
class="btn btn-primary btn-sm">{{trans('layout.confirm')}}</button>
<button type="button" class="btn btn-secondary btn-sm"
data-dismiss="modal">{{trans('layout.cancel')}}</button>
</div>
</div>
<!-- /.modal-content -->
</form>
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Delivered Within modal -->
<div class="modal fade" id="delivered_within_modal">
<div class="modal-dialog">
<form id="delivered_within_modal_form" method="post" action="{{route('order.update.status')}}">
@csrf
<div id="deliveredWithinCustomInput"></div>
<div class="modal-content">
<div class="modal-header p-2">
<h4 class="modal-title">{{trans('layout.confirmation')}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-row">
<div class="form-group col-md-6">
<label>{{trans('layout.within')}}</label>
<input name="time" required type="number" class="form-control" placeholder="Ex: 20">
</div>
<div class="form-group col-md-6">
<label>{{trans('layout.time')}}</label>
<select name="type" class="form-control" required>
<option value="minutes">{{trans('layout.minutes')}}</option>
<option value="hours">{{trans('layout.hours')}}</option>
<option value="days">{{trans('layout.days')}}</option>
</select>
</div>
</div>
</div>
<div class="modal-footer p-2">
<button id="within-modal-confirm-btn" type="submit"
class="btn btn-primary btn-sm">{{trans('layout.confirm')}}</button>
<button type="button" class="btn btn-secondary btn-sm"
data-dismiss="modal">{{trans('layout.cancel')}}</button>
</div>
</div>
<!-- /.modal-content -->
</form>
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="modal-paynow-details">
<div class="modal-dialog modal-lg">
<form id="modal-form">
@csrf
<div id="customInput"></div>
<div class="modal-content">
<div class="modal-header p-2">
<h4 class="modal-title">{{trans('layout.order_details')}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="details-now-order">
</div>
<div class="modal-footer p-2">
<button type="button"
class="btn btn-primary btn-sm" id="print-order-id">{{trans('layout.print')}}</button>
<button type="button" class="btn btn-secondary btn-sm"
data-dismiss="modal">{{trans('layout.cancel')}}</button>
</div>
</div>
<!-- /.modal-content -->
</form>
</div>
<!-- /.modal-dialog -->
</div>
<script src="{{asset('front/js/popper.min.js')}}"></script>
<script src="{{asset('vendor/global/global.min.js')}}"></script>
<script src="{{asset('vendor/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('vendor/bootstrap-select/dist/js/bootstrap-select.min.js')}}"></script>
<script src="{{asset("vendor/toastr/js/toastr.min.js")}}"></script>
<script>
$(document).on('click', '.call_waiter_btn', function (e){
$('#callWaiterModal').modal('show');
})
</script>
<script src="{{asset("vendor/visibility/visibility.core.js")}}"></script>
<script src="{{asset("vendor/visibility/visibility.timers.js")}}"></script>
@php $site_setting=json_decode(get_settings('site_setting')) @endphp
@if(auth()->check() && isset($site_setting) && isset($site_setting->live_notification) && $site_setting->live_notification=='enable')
<script src="{{asset("js/notification-check.js")}}"></script>
@endif
<!-- Toastr -->
@php $allErrors=''; @endphp
@if (isset($errors) && count($errors) > 0)
@foreach ($errors->all() as $error)
@php $allErrors.=$error.'<br/>' @endphp
@endforeach
<script>
$(function () {
toastr.error('{!! clean($allErrors) !!}', 'Failed', {timeOut: 5000});
});
</script>
@endif
@if(session()->has('success'))
<script>
$(function () {
toastr.info('{{session()->get('success')}}', 'Success', {
positionClass: "toast-top-right",
timeOut: 5e3,
closeButton: !0,
debug: !1,
newestOnTop: !0,
progressBar: !0,
preventDuplicates: !0,
onclick: null,
showDuration: "300",
hideDuration: "1000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut",
tapToDismiss: !1
});
});
</script>
@endif
<script>
let selectedItems = [];
$(document).ready(function() {
let enterPressed = false;
$('#pos-restaurent-id-select').on('change', function() {
$('.pos-item-search-input').val('');
get_restaurent_items();
});
$('#pos-customer-id-select').on('change', function() {
get_restaurent_items();
});
var timeout_id;
$(".pos-item-search-input").on('keyup', function(e) {
clearTimeout(timeout_id);
if (!enterPressed) {
timeout_id = setTimeout(get_restaurent_items, 3000);
}
enterPressed = false;
});
$(".pos-item-search-input").on('keypress', function(e) {
if (e.which == 13) {
clearTimeout(timeout_id);
enterPressed = true;
get_restaurent_items();
}
});
function get_restaurent_items() {
const customer_Id = $('#pos-customer-id-select').val();
const restaurant_Id = $('#pos-restaurent-id-select').val();
const input_text_value = $('.pos-item-search-input').val();
if(!restaurant_Id){
$("#select-restaurent-alert").removeClass('d-none');
}
if (restaurant_Id) {
$("#add-loader").removeClass('d-none');
$("#select-restaurent-alert").addClass('d-none');
$.ajax({
method: 'GET',
url: '{{route('pos.get.items')}}',
data: { customer_id: customer_Id, restaurant_id: restaurant_Id, item_name: input_text_value },
success: function (res) {
$("#add-loader").addClass('d-none');
if (res.status == 'success' && res.data.length > 0) {
$("#no-item-available-here").addClass('d-none');
$("#pos-card-item-card").removeClass('d-none');
let html = '';
let pos_search_item_card = '';
$.each(res.data, function (index, value) {
let discount_price = 0;
let total_price = 0;
let tax_type = '';
let discount_type = '';
let tax_amount = 0;
let price = 0;
let currency_symbol = '';
if (value) {
currency_symbol = value.currency_symbol;
if (value.discount > 0) {
if (value.discount_type == 'flat') {
discount_price = value.discount;
price = value.price - discount_price;
} else if (value.discount_type == 'percent') {
discount_price = (value.price * value.discount) / 100;
price = value.price - discount_price;
}
} else {
price = value.price;
}
if (value.tax_type && value.tax_amount) {
if (value.tax_type == 'percentage') {
tax_amount = (value.tax_amount * price) / 100;
} else {
tax_amount = value.tax_amount;
}
}
let imageUrl = value.image ? '{{ asset("uploads/") }}' + '/' + value.image : '{{ asset("images/no-image.png") }}';
html += `
<div class="col-lg-3 col-6">
<div class="pos-item-card pos-item-sec-card" data-id="${value.id}">
<div class="pos-item-img-sec">
<img src="${imageUrl}" class="pos-item-img" alt="">
</div>
<div class="pos-item-content-sec">
<div class="d-none" id="currency_symbol_${value.id}">${currency_symbol}</div>
<div class="p-item-name" id="pos-item-name_${value.id}">${value.name}</div>
<div class="p-item-price"><span class="original-item-price"><del>${value.price}${currency_symbol}</del></span> <span id="pos-price-item_${value.id}">${price}${currency_symbol}</span>
<div><span class='tax-amount'>(Tax:<span class="pos-tax-amount_${value.id}">${tax_amount.toFixed(2)}${currency_symbol})</span></span></div>
</div>
</div>
</div>
</div>`;
}
});
$("#pos-card-item-card").html(html);
$("#pos-item-single-list-section").html(pos_search_item_card);
} else {
$("#no-item-available-here").removeClass('d-none');
$("#pos-card-item-card").addClass('d-none');
}
}
});
} else {
if (input_text_value) {
$("#select-restaurent-alert").removeClass('d-none');
}
$("#no-item-available-here").addClass('d-none');
}
}
});
$(document).on('click', '.pos-item-sec-card', function (e) {
var audio = new Audio('/others/notify-sound.mp3');
audio.play();
const id = $(this).attr('data-id');
let total_price = 0;
let price = parseFloat($("#pos-price-item_"+ id).text().replace('$', ''));
let itemTaxAmount = parseFloat($(".pos-tax-amount_" + id).text().replace('$', '')).toFixed(2);
let current_Quantity = 1;
const itemCurrencySymbol = $("#currency_symbol_"+ id).text();
itemTaxAmount *= current_Quantity;
total_price = price + (current_Quantity * itemTaxAmount);
const name = $("#pos-item-name_"+ id).text();
const existingRow = $("#pos-table-sec tr[data-id='" + id + "']");
if (existingRow.length > 0) {
let currentQuantity = parseInt(existingRow.find('.pos-qty-number').text());
existingRow.find('.pos-qty-number').text(currentQuantity + 1);
const subtotal = total_price * (currentQuantity + 1);
existingRow.find('.pos-subtotal').text(subtotal.toFixed(2));
} else {
posItemRow(id, name, total_price,itemCurrencySymbol);
}
calculateTotal(id);
calculateGrandTotal();
updated_items();
get_currency_symbol(itemCurrencySymbol);
});
function updated_items() {
$('#pos-table-sec .row_item').each(function() {
const updated_id = $(this).attr('data-id');
const updated_name = $(".item_name_" + updated_id).text();
const updated_price = parseFloat($(".item_price_" + updated_id).text());
const updated_quantity = parseInt($("#pos-qty-number_" + updated_id).text());
const existingItemIndex = selectedItems.findIndex(item => item.item_id === updated_id);
if (existingItemIndex !== -1) {
selectedItems[existingItemIndex].item_quantity = updated_quantity;
} else {
selectedItems.push({
item_id: updated_id,
item_name: updated_name,
item_price: updated_price,
item_quantity: updated_quantity
});
}
});
}
function posItemRow(id, name, price,currency_symbol) {
const htmlElement = `
<tr data-id="${id}" class="row_item">
<th scope="row" class="item_name_${id}">${name}</th>
<td>
<div class="item_price_${id}">${price.toFixed(2)}${currency_symbol}</div>
</td>
<td class="pos-qty-column">
<div class="qty-button-section d-flex align-items-center">
<div class="qty-plus-btn-sec">
<button type="button" class="btn btn-sm pos-qty-minus pos-qty-btn pos-qty-btn-minus-border">-</button>
</div>
<div class="pos-qty-number" id="pos-qty-number_${id}">1</div>
<div class="qty-plus-btn-sec">
<button type="button" class="btn btn-sm pos-qty-plus pos-qty-btn pos-qty-btn-plus-border">+</button>
</div>
</div>
</td>
<td class="">
<span class="pos-subtotal pos-subtotal_${id}">${price.toFixed(2)}</span><span>${currency_symbol} </span>
</td>
<td><span><i class="fa fa-times-circle-o pos-delete-btn" aria-hidden="true"></i></span></td>
</tr>`;
$("#pos-table-sec").append(htmlElement);
}
function calculateTotal(id) {
let total = 0;
const item_price = parseFloat($(".item_price_" + id).text().replace('$', ''));
let item_quantity = parseInt($('#pos-qty-number_' + id).text());
total += item_price * item_quantity ;
$(".pos-subtotal_" + id).text(total.toFixed(2));
}
$(document).on('click', '.pos-qty-plus', function () {
const qty_plus = $(this).closest('tr');
let quantity_plus = parseInt(qty_plus.find('.pos-qty-number').text());
quantity_plus++;
qty_plus.find('.pos-qty-number').text(quantity_plus);
const itemId_for_plus = qty_plus.attr('data-id');
calculateTotal(itemId_for_plus);
calculateGrandTotal();
updated_items();
});
$(document).on('click', '.pos-qty-minus', function () {
const qty_minus = $(this).closest('tr');
let quantity = parseInt(qty_minus.find('.pos-qty-number').text());
if (quantity > 1) {
quantity--;
qty_minus.find('.pos-qty-number').text(quantity);
const itemId = qty_minus.attr('data-id');
calculateTotal(itemId);
calculateGrandTotal();
updated_items();
}
});
$(document).ready(function() {
$("#pos-discount-input-item").on('keyup', function() {
calculateGrandTotal();
});
});
function calculateGrandTotal() {
let grandTotal = 0;
let item_pos_price = 0;
$('.pos-subtotal').each(function() {
item_pos_price = parseFloat($(this).text());
grandTotal = item_pos_price+grandTotal;
});
const discountAmount = parseFloat($("#pos-discount-input-item").val());
if (!isNaN(discountAmount)) {
grandTotal -= discountAmount;
}
$("#pos-grand-total").text(grandTotal.toFixed(2));
}
$(document).on('click', '.pos-delete-btn', function () {
var delete_row = $(this).closest('tr');
var itemId = delete_row.attr('data-id');
delete_row.remove();
calculateGrandTotal();
selectedItems = [];
});
$(document).ready(function() {
$('.reset-btn').on('click', function() {
location.reload();
selectedItems = [];
});
});
function get_currency_symbol(currency_symbol) {
$('.pos-grand-total_currency_symbol').html(currency_symbol);
$('#discount-currency-symbol').html(currency_symbol);
}
$(document).ready(function() {
$('#pos-restaurent-id-select').on('change', function() {
$('.pos-item-search-input').val('');
$('#pos-grand-total').html('0.00');
$('#pos-discount-input-item').val('');
$("#pos-card-item-card").empty();
$("#pos-item-single-list-section").empty();
$("#pos-table-sec").empty();
$('.pos-grand-total_currency_symbol').html('');
$('#discount-currency-symbol').html('');
selectedItems = [];
});
});
$(document).ready(function() {
let pos_discount_price = 0;
$('.paynow-btn').on('click', function() {
$('#modal-paynow-details').modal('show');
const token = $('#csrf_token_id').val();
const customer_id = $('#pos-customer-id-select').val();
const restaurant_id = $('#pos-restaurent-id-select').val();
const pos_grand_total = $('#pos-grand-total').html();
pos_discount_price = $('#pos-discount-input-item').val();
if(restaurant_id && selectedItems.length !== 0 && customer_id){
$.ajax({
method: 'POST',
url: '{{ route('pos.store') }}',
data: {
'_token' : token,
customer_id : customer_id,
restaurant_id : restaurant_id,
grand_total : pos_grand_total,
discount : pos_discount_price,
items: selectedItems
},
success: function(response) {
if(response.status=='success'){
toastr.success(response.message, 'success', {timeOut: 5000});
selectedItems = [];
$('.pos-item-search-input').val('');
$('#pos-grand-total').html('0.00');
$('#pos-discount-input-item').val('');
$("#pos-card-item-card").empty();
$("#pos-item-single-list-section").empty();
$("#pos-table-sec").empty();
$('.pos-grand-total_currency_symbol').html('');
$('#discount-currency-symbol').html('');
$('#pos-restaurent-id-select').val('');
orderdetailsajax(response.orderId);
// $('#modal-paynow-details').modal('show');
}
else {
toastr.error(response.message, 'failed', {timeOut: 5000});
selectedItems = [];
}
}
});
function orderdetailsajax(orderId) {
$.ajax({
url: `{{ route('pos.order.details') }}`,
method: 'GET',
data: {
orderId: orderId,
},
success: function (response) {
if (response.status == 'success') {
$('#details-now-order').empty();
$('#print-order-id').attr('data-print-order-id', '');
let restaurant = response.restaurant;
let order = response.order;
let payment_status = '';
let status = '';
if (order.payment_status == 'paid') {
payment_status = `<span class="badge badge-outline-success order_details_header-list-badge">Paid</span>`
}else{
payment_status = `<span class="badge badge-outline-danger order_details_header-list-badge">Unpaid</span>`
}
if (order.status == 'approved') {
status = `<span class="badge badge-outline-success order_details_header-list-badge">${order.status}</span>`
}else{
status = `<span class="badge badge-outline-danger order_details_header-list-badge">${order.status}</span>`
}
let items = '';
response.item.forEach(function(product) {
items += `
<tr>
<td>${product.item.name}</td>
<td>${product.quantity}</td>
<td>${product.price}</td>
<td>${product.discount}</td>
<td>${product.tax_amount}</td>
<td>${product.total.toFixed(2)}</td>
</tr>
`;
});
const orderDate = new Date(order.created_at);
const formattedDate = orderDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
let html = `
<div class="row">
<div class="col-lg-4">
<h6 class="order_details_header">{{trans('layout.customer_details')}}</h6>
<ul class="order_details_header-list" id="customer_details">
<li>${order.name ?? ''}</li>
<li>${order.phone_number ?? ''}</li>
<li>${order.address ?? ''}</li>
</ul>
</div>
<div class="col-lg-4">
<h6 class="order_details_header">{{trans('layout.restaurant')}}</h6>
<ul class="order_details_header-list" id="restaurant_details">
<li>${restaurant.name ?? ''}</li>
<li>${restaurant.email ?? ''}</li>
<li>${restaurant.location ?? ''}</li>
<li>${restaurant.phone_number ?? ''}</li>
</ul>
</div>
<div class="col-lg-4">
<h6 class="order_details_header">{{trans('layout.payment')}}</h6>
<ul class="order_details_header-list" id="payment_details">
<li> Date : ${formattedDate}</li>
<li>Payment Status :
${payment_status}
</li>
<li>Status :
${status}
</li>
</ul>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<h6 class="order_details_header mb-3">{{trans('layout.order_details')}}</h6>
<div class="table-responsive">
<table class="table table-hover table-md">
<thead class="table-bg-gray">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Tax</th>
<th>Total</th>
</tr>
</thead>
<tbody class="table-body">
${items}
</tbody>
</table>
</div>
</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="col-lg-6">
<h6 class="order_details_header mb-3">{{trans('Payment History')}}</h6>
<div class="table-responsive">
<table class="table table-hover table-md">
<thead class="table-bg-gray">
<tr>
<th>Date</th>
<th>Type</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="table-body">
<td>${formattedDate}</td>
<td>Cash</td>
<td>${restaurant.currency_symbol}${order.total_price.toFixed(2)}</td>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="table-responsive">
<table class="table table-hover table-md">
<tbody class="table-body">
<tr>
<td class="font-weight-bold">Discount</td>
<td class="font-weight-bold">${restaurant.currency_symbol}${order.pos_discount ?? 0}</td>
</tr>
<tr>
<td class="font-weight-bold">Grand Total</td>
<td class="font-weight-bold">${restaurant.currency_symbol}${order.total_price.toFixed(2)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;
$('#details-now-order').append(html);
$('#print-order-id').attr('data-print-order-id', order.id);
} else {
console.log('Failed to load order details.');
$('#details-now-order').empty();
$('#print-order-id').attr('data-print-order-id', '');
}
},
error: function () {
console.log('An error occurred while fetching the order details.');
$('#details-now-order').empty();
}
});
}
}
$(document).on('click', '#print-order-id', function () {
const orderId = $(this).data('print-order-id');
if (!orderId) {
return;
}
const url = `/order/print/${orderId}`;
window.open(url, '_blank');
});
});
});
</script>
</body>
</html>
|