Viewing file:  ce8b45c9aaa45b71a32ccb248302e587ebd9abc7.php (59.41 KB) -rwxrwxr-x
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title',trans('layout.order_list')); ?>
<?php $__env->startSection('css'); ?>
<link href="<?php echo e(asset('vendor/datatables/css/jquery.dataTables.min.css')); ?>" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
<script>
let orderDataTable = '';
</script>
<style>
.dropdown-menu{
max-width: 30rem !important;
}
.order-cards {
background: #ffffff;
padding: 10px;
border-radius: 5px;
}
.order-card {
background: #fbfbfb;
padding: 10px;
border-radius: 5px;
}
.modal-content-section{
overflow: scroll;
}
.tbl-btn {
font-size: 13px !important;
font-weight: 700 !important;
border:1px solid #679df2 !important;
}
.order-number{
font-size: 12px !important;
}
.order-created-time{
font-size: 12px !important;
}
.total-order{
font-size: 12px !important;
}
.order-amount{
font-size: 13px !important;
}
.order-status{
font-size: 12px !important;
}
.restaurent-name {
font-size: 12px !important;
}
.order-number-text-sec{
font-size: 12px !important;
}
.order-details-table-name {
font-size: 12px !important;
}
.order-card.active{
border-color: #679df2 !important
}
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('main-content'); ?>
<?php
$auth = auth()->user();
?>
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4><?php echo e(trans('layout.order')); ?></h4>
<p class="mb-0"><?php echo e(trans('layout.your_order')); ?></p>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><?php echo e(trans('layout.home')); ?></a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0)"><?php echo e(trans('layout.orders')); ?></a></li>
</ol>
</div>
</div>
<!-- row -->
<?php if($auth->type !== 'customer'): ?>
<div class="row">
<div class="col-lg-12">
<div class="card p-2">
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label><?php echo e(trans('Search By Day')); ?></label>
<select name="search_by_day" id="search_by_day" class="form-control order-filter-btn">
<option selected value="today"><?php echo e(trans('Today')); ?></option>
<option value="last_7_days"> Last 7 Days</option>
<option value="this_month">This Month</option>
<option value="last_month">Last Month</option>
<option value="this_year">This Year</option>
</select>
</div>
</div>
<div class="col-3">
<label for=""><?php echo e(trans('layout.search_by_restaurant')); ?></label>
<select name="restaurant_id" id="restaurant_id" class="form-control order-filter-btn">
<option selected value="all"><?php echo e(trans('layout.all')); ?></option>
<?php if(isset($restaurants) && $restaurants): ?>
<?php $__currentLoopData = $restaurants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $restaurant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option
value="<?php echo e($restaurant->id); ?>"><?php echo e($restaurant->name); ?>
</option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
</select>
</div>
<div class="col-lg-2">
<div class="form-group">
<label><?php echo e(trans('layout.from_date')); ?></label>
<div class="input-group">
<input type="date" class="form-control float-right order-filter-btn" name="from_date" id="filtering_from_date">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label><?php echo e(trans('layout.to_date')); ?></label>
<div class="input-group">
<input type="date" class="form-control float-right order-filter-btn" name="to_date" id="filtering_to_date">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label><?php echo e(trans('Order Status')); ?></label>
<select name="search_by_status" id="search_by_status" class="form-control order-filter-btn">
<option selected value="all"><?php echo e(trans('All')); ?></option>
<option value="pending"> Pending</option>
<option value="approved"> Approved</option>
<option value="ready_for_delivery"> Ready For Delivery</option>
<option value="delivered">Delivered</option>
<option value="paid">Paid</option>
<option value="unpaid">Unpaid</option>
<option value="rejected">Rejected</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="row">
<div class="col-lg-12 p-0">
<div class="order-cards">
<div id="order-cards-container" class="row"></div>
</div>
<div id="pagination-container" class="mt-3 float-right"></div>
</div>
</div>
<div class="container p-2">
<div class="modal fade" id="viewOrderDetails">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="row">
<div class="col-lg-12">
<div class="pull-right print-section">
</div>
</div>
</div>
<div class="row" id="printableSection">
<div class="col-lg-12">
<div class="card mt-3">
<div class="card-header" id="detailsHeader">
</div>
<div class="card-body">
<div class="row mb-5">
<div class="mt-4 col-xl-3 col-lg-3 col-md-6 col-sm-12" id="customerInfo">
</div>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="center">#</th>
<th><?php echo e(trans('layout.item')); ?></th>
<th><?php echo e(trans('layout.quantity')); ?></th>
<th><?php echo e(trans('layout.price')); ?></th>
<th><?php echo e(trans('layout.status')); ?></th>
<th><?php echo e(trans('layout.discount')); ?></th>
<th><?php echo e(trans('layout.tax')); ?></th>
<th><?php echo e(trans('layout.total_price')); ?></th>
</tr>
</thead>
<tbody id="showOrderDetails">
</tbody>
</table>
</div>
<div id="detailsSingleInfo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="statusModal" style="z-index: 9999">
<div class="modal-dialog modal-md">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header border-0 p-3">
<h4 class="modal-title"><?php echo e(trans('Item status changed')); ?></h4>
<button type="button" class="close" data-dismiss="modal">×
</button>
</div>
<div class="modal-body">
<input type="hidden" id="orderId" name="order_id">
<input type="hidden" id="detailsId" name="details_id">
<input type="hidden" id="status" name="status">
<h5 id="confirmation"></h5>
</div>
<!-- Modal footer -->
<div class="modal-footer p-2">
<button id="itemStatusConfirm" type="submit"
class="btn btn-primary"><?php echo e(trans('layout.confirm')); ?></button>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-modal-id', 'orderDetailsModal'); ?>
<?php $__env->startSection('extra-modal-title', 'Order Details'); ?>
<?php $__env->startSection('extra-modal-content-wapper'); ?>
<form method="post" role="form" id="orderDetailsForm">
<?php echo csrf_field(); ?>
<div class="modal-body order-details-modal-body">
<div id="order-details-section-contents"></div>
<div class="order-details-modal-content" id="order-details-contents">
<div class="restaurent-name" id="restaurentName">
</div>
<div class="order-number-text-sec">
Order Number : <span id="orderNumber">#</span>
</div>
<div class="order-details-table-wrapper d-flex justify-content-between">
<div class="order-details-tbl-content">
<div class="order-details-table-sec">
<span class="order-details-table-name" id="tableName"></span>
<div class="order-details-tbl-position" id="tablePosition"></div>
</div>
<div class="tbl-order-created-time" id="modalCreatedAt"></div>
</div>
<?php if(auth()->user()->type != 'customer'): ?>
<div class="order-payment">
<button type="button" class="order-payment-text btn-order-payment-btn" id="changepaymentStatus"></button>
</div>
<?php else: ?>
<div class="order-payment">
<button type="button" class="order-payment-text btn-order-payment-btn" id="paymentStatus"></button>
</div>
<?php endif; ?>
</div>
<!-- status stages – we will highlight one with class 'order-completed-stage' -->
<div class="set-order-status-section row justify-content-around" id="orderStatusSection">
</div>
<?php if($auth->type != 'customer'): ?>
<div class="order-status-selection d-flex justify-content-between align-items-center">
<div class="order-status-cancel-button">
<button type="button" class="btn btn-danger btn-sm changeCancelStatusBtn" id="cancelOrderButton"
data-toggle="modal" data-action="<?php echo e(route('order.update.status')); ?>" data-target="#modal-confirm">
<?php echo e(trans('layout.cancel')); ?>
</button>
</div>
<div class="form-group">
<div id="changeOrderStatusButtons" class="">
</div>
</div>
</div>
<?php else: ?>
<div class="d-flex justify-content-between align-items-center">
</div>
<?php endif; ?>
<div class="table-section">
<table class="table table-hover">
<thead>
<tr>
<th>Item Name</th>
<th>QTY</th>
<th>Price</th>
<th>Discount</th>
<th>Tax Amount</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody id="itemTableBody">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-order-print" id="print-order-id" data-print-order-id=<?php echo e(''); ?>>
<?php echo e(trans('Print')); ?>
</button>
</div>
</form>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>
<script src="<?php echo e(asset('vendor/datatables/js/jquery.dataTables.min.js')); ?>"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script !src="">
"use strict";
function generateActionButton(order) {
let html = '';
const deleteHtml = `<button class="dropdown-item" type="button"
data-message="<?php echo e(trans('layout.message.order_delete_warning')); ?>"
data-action='<?php echo e(route('order.delete')); ?>'
data-input={"id":"${order.id}","_method":"delete"}
data-toggle="modal"
data-target="#modal-confirm"><?php echo e(trans('layout.delete')); ?></button>`;
if(order.order_type == 'pos'){
html = `<?php if(auth()->user()->hasPermissionTo('order_approved')): ?><button class="dropdown-item"}
type="button"><?php echo e(trans('layout.approved')); ?></button> <?php endif; ?>`;
}
else if (order.status == 'pending') {
html = `<?php if(auth()->user()->hasPermissionTo('order_approved')): ?><button class="dropdown-item" data-toggle="modal" data-input={"status":"approved","order_id":"${order.id}"}
type="button" data-target="#delivered_within_modal"><?php echo e(trans('layout.approve')); ?></button> <?php endif; ?>`;
} else if (order.status == 'approved') {
html = `<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('ready_for_delivery')): ?> <button class="dropdown-item" type="button"
data-message="<?php echo e(trans('layout.message.order_status_warning',['status'=>'ready for delivery'])); ?>"
data-action='<?php echo e(route('order.update.status')); ?>'
data-input={"status":"ready_for_delivery","order_id":"${order.id}"}
data-toggle="modal"
data-isAjax="true"
data-target="#modal-confirm"><?php echo e(trans('layout.ready_for_delivery')); ?></button> <?php endif; ?>`;
}
if (order.status == 'ready_for_delivery' || (order.order_type == 'takeaway' && order.status != 'delivered')) {
html += `<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('delivered')): ?> <button class="dropdown-item" type="button"
data-message="<?php echo e(trans('layout.message.order_status_warning',['status'=>'delivered'])); ?>"
data-action='<?php echo e(route('order.update.status')); ?>'
data-input={"status":"delivered","order_id":"${order.id}"}
data-toggle="modal"
data-isAjax="true"
data-toggle="modal"
data-target="#modal-confirm"><?php echo e(trans('layout.delivered')); ?></button> <?php endif; ?>`;
}
return html;
}
const queryString=window.location.search;
orderDataTable = $('#orderTable').DataTable({
processing: true,
ajax: {
"url": '<?php echo e(route('order.getAll')); ?>'+queryString,
"dataSrc": "data",
"type": "GET",
"data": function(d){
d.form = $("#filtering-form").serializeArray();
}
},
columnDefs: [
{targets: 0, visible: false}
],
columns: [
{data: 'row'},
{data: 'name'},
{data: 'restaurant_name_table'},
{data: 'type'},
{data: 'new_item'},
{data: 'raw_status'},
{data: 'total_price'},
{data: 'delivered_within'},
{data: 'payment_status'},
{
data: function (row) {
let html = `<div class="dropdown">
<button type="button" class="btn btn-success light sharp"
data-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<circle fill="#000000" cx="5" cy="12" r="2"/>
<circle fill="#000000" cx="12" cy="12" r="2"/>
<circle fill="#000000" cx="19" cy="12" r="2"/>
</g>
</svg>
</button>
<div class="dropdown-menu">
${generateActionButton(row)}
<a href="" data-order-id="${row.id}" class="dropdown-item details"><?php echo e(trans('layout.details')); ?></a>
</div>
</div>`;
return html;
}
},
],
order: [[0, 'asc']],
bInfo: false,
bLengthChange: false,
});
$('#check_new_order').on('click', function (e) {
e.preventDefault();
orderDataTable.ajax.reload();
})
</script>
<script !src="">
"use strict";
$(document).on('click', '.details', function (e) {
e.preventDefault();
const orderId = $(this).attr('data-order-id');
$('#viewOrderDetails').modal('show');
$.ajax({
method: "get",
url: "<?php echo e(route('quick.order.details')); ?>",
data: {
orderId: orderId,
},
success: function (res) {
let html = '';
if (res.status == 'success') {
$.each(res.data, function (index, value) {
let status = '';
let button = '';
if (value.detail_status=='pending'){
status=`<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('order_approved')): ?><button data-order-id="${value.order_id}" data-details-id="${value.id}" data-status="approved" data-confirmation="<?php echo e(trans('Are you sure to approved this item ?')); ?>" type="button"
data-confirmation="<?php echo e(trans('layout.category_inactive_confirmation')); ?>" class="changeStatus dropdown-item detailsStatus_${value.id}">
Approved
</button> <?php endif; ?>`
}else if(value.detail_status=='approved'){
status=`<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('ready_for_delivery')): ?><button data-order-id="${value.order_id}" data-details-id="${value.id}" data-status="ready_for_delivery"
data-confirmation="<?php echo e(trans('Are you sure to ready-for delivered this item ?')); ?>" type="button"
data-confirmation="<?php echo e(trans('layout.category_inactive_confirmation')); ?>" class="changeStatus dropdown-item detailsStatus_${value.id}">
<?php echo e(trans('layout.ready_for_delivery')); ?>
</button> <?php endif; ?>`
}else if(value.detail_status=='ready_for_delivery'){
status=`<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('delivered')): ?><button data-order-id="${value.order_id}" data-details-id="${value.id}" data-status="delivered"
data-confirmation="<?php echo e(trans('Are you sure to delivered this item ?')); ?>" type="button"
data-confirmation="<?php echo e(trans('layout.category_inactive_confirmation')); ?>" class="changeStatus dropdown-item detailsStatus_${value.id}">
<?php echo e(trans('layout.delivered')); ?>
</button> <?php endif; ?>`
}else if(value.detail_status=='delivered'){
status=`<button data-confirmation="<?php echo e(trans('Are you sure to approved this item ?')); ?>" type="button" class="disabled dropdown-item detailsStatus_${value.id}">
<?php echo e(trans('layout.delivered')); ?>
</button>`
}
if (value.detail_status=='pending'){
button=`<button type="button" class="btn light btn-outline-danger btn-sm dropdown-toggle detailsStatus_${value.id}" data-toggle="dropdown" aria-expanded="false">
${value.detail_status}
</button>`
}else if(value.detail_status=='approved'){
button=`<button type="button" class="btn light btn-outline-info btn-sm dropdown-toggle detailsStatus_${value.id}" data-toggle="dropdown" aria-expanded="false">
${value.detail_status}
</button>`
}else if(value.detail_status=='ready_for_delivery'){
button=`<button type="button" class="btn light btn-outline-info btn-sm dropdown-toggle detailsStatus_${value.id}" data-toggle="dropdown" aria-expanded="false">
${value.detail_status}
</button>`
}else if(value.detail_status=='delivered'){
button=`<button type="button" class="btn light btn-outline-success btn-sm dropdown-toggle detailsStatus_${value.id}" data-toggle="dropdown" aria-expanded="false">
${value.detail_status}
</button>`
}
html += `<tr>
<td class="center">${value.key}</td>
<td>${value.item_name}</td>
<td>${value.quantity}</td>
<td>${value.currency_symbol}${value.price}</td>
<td>
${button}
<div class="dropdown-menu" x-placement="bottom-start"
style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
${status}
</div>
</td>
<td>${value.currency_symbol}${value.discount}</td>
<td>${value.currency_symbol}${value.tax_amount}</td>
<td>${value.currency_symbol}${value.total}</td>
</tr>`
});
const info = `
<div class="row">
<div class="col-lg-4 col-sm-5 ml-auto">
<table class="table table-clear">
<tbody>
<tr>
<td class="left"><strong><?php echo e(trans('layout.total_discount')); ?></strong>
</td>
<td class="right">${res.info.currency_symbol}${res.info.total_discount}</td>
</tr>
<tr>
<td class="left"><strong><?php echo e(trans('layout.total_tax')); ?></strong></td>
<td class="right">${res.info.currency_symbol}${res.info.total_tax}</td>
</tr>
<tr>
<td class="left"><strong><?php echo e(trans('layout.total')); ?></strong></td>
<td class="right">${res.info.currency_symbol}${res.info.total_price}</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
const detailsHeader = `
<?php echo e(trans('layout.details')); ?> <strong><?php echo e(trans('layout.order')); ?>
${res.info.order_id}</strong> <span
class="float-right">
<strong><?php echo e(trans('layout.status')); ?>:</strong> ${res.info.order_status}</span>`;
const customer_info = `
<h6><?php echo e(trans('layout.customer')); ?>:</h6>
<div><strong>${res.info.customer_name}</strong></div>
<div><?php echo e(trans('layout.email')); ?>: ${res.info.customer_email}</div>
<div id="address"><?php echo e(trans('layout.phone')); ?>: ${res.info.phone}</div>
<div><?php echo e(trans('layout.delivery_address')); ?>: ${res.info.address}</div>
`;
const print_pdf = `
<a class="btn btn-sm btn-info" target="_blank" href="order/print/${res.info.order_id}"
type="button"><?php echo e(trans('layout.print')); ?></a>
<a class="btn btn-sm btn-info" target="_blank" href="order/print/${res.info.order_id}&type=pdf"
type="button"><?php echo e(trans('layout.pdf')); ?></a>`
$('#showOrderDetails').html(html);
$('#detailsSingleInfo').html(info);
$('#detailsHeader').html(detailsHeader);
$('#customerInfo').html(customer_info);
$('.print-section').html(print_pdf);
} else {
toastr.error(res.message, 'failed', {timeOut: 5000});
}
}
})
});
$(document).on('click', '.changeStatus', function (e) {
e.preventDefault();
const order_id = $(this).attr('data-order-id');
const details_id = $(this).attr('data-details-id');
const status = $(this).attr('data-status');
const confirmation = $(this).attr('data-confirmation');
$('#orderId').val(order_id);
$('#detailsId').val(details_id);
$('#status').val(status);
$('#confirmation').text(confirmation);
$('#statusModal').modal('show');
});
$(document).on('click', '#itemStatusConfirm', function (e) {
e.preventDefault();
const orderId = $('#orderId').val();
const details_id = $('#detailsId').val();
const status = $('#status').val();
$(this).html(' <i class="fa fa-spinner fa-spin"></i> Loading');
$.ajax({
method: "post",
url: "<?php echo e(route('order.details.status')); ?>",
data: {
orderId: orderId, details_id: details_id, status: status, _token: '<?php echo e(csrf_token()); ?>',
},
success: function (res) {
let html = '';
if (res.status == 'success') {
toastr.success(res.message, 'success', {timeOut: 5000});
$('#statusModal').modal('hide');
$('#itemStatusConfirm').html('<?php echo e(trans('layout.confirm')); ?>');
$('.detailsStatus_' + details_id).text(status);
$('#viewOrderDetails').modal('hide');
} else {
toastr.error(res.message, 'failed', {timeOut: 5000});
$('#itemStatusConfirm').html('<?php echo e(trans('layout.confirm')); ?>');
}
}
})
});
</script>
<script>
let CURRENT_PAGE = 1;
function fetchOrders(page = CURRENT_PAGE) {
CURRENT_PAGE = page;
const search_by_day = $('#search_by_day').val();
const restaurant_id = $('#restaurant_id').val();
const from_date = $('#filtering_from_date').val();
const to_date = $('#filtering_to_date').val();
const search_by_status = $('#search_by_status').val();
$.ajax({
url: "<?php echo e(route('order.getAll')); ?>",
type: "GET",
data: {
page: CURRENT_PAGE,
search_by_day,
restaurant_id,
from_date,
to_date,
search_by_status,
},
success: function(response) {
renderOrders(response.data);
renderPagination(response.meta);
},
error: function(xhr) {
console.error("Error fetching orders:", xhr);
}
});
}
function renderOrders(orders) {
const container = $("#order-cards-container");
container.empty();
orders.forEach(order => {
let orderPendingStatusClass = 'order-pending-status d-none';
let orderSuccessStatusClass = 'order-success-status d-none';
let orderStatusText = order.status.replace(/_/g, ' ');
orderStatusText = orderStatusText.charAt(0).toUpperCase() + orderStatusText.slice(1);
let order_payment_status = order.payment_status === 'paid' ? 'Paid' : 'Unpaid';
let order_payment_status_class = order.payment_status === 'paid'
? 'badge badge-success light payment-status-badge'
: 'badge badge-danger light payment-status-badge';
if (order.status === 'pending' || order.status === 'rejected') {
orderPendingStatusClass = 'order-pending-status';
} else {
orderSuccessStatusClass = 'order-success-status';
}
const orderCard = `
<div class="col-lg-4">
<div data-specific-order-id="specificOrderTrack" class="order-card mt-3 order_details_modal ACTIVE" data-toggle="modal" data-target="#orderDetailsModal"
data-order-id="${order.id}"
data-item-details='${JSON.stringify(order.item_details)}'
data-order-number="${order.order_number}"
data-order-type="${order.order_type}"
data-order-status="${order.status}"
data-restaurent-name="${order.restaurant_name}"
data-order-address="${order.address}"
data-order-payment_status="${order.payment_status}"
data-order-table-name="${order.table_name}"
data-order-table-position="${order.table_position}"
data-delivery-fee="${order.delivery_fee}">
<div class="d-flex justify-content-between">
<div class="table-details">
<div class="table-name-button-sec">
<button type="button" class="tbl-btn">
${order.order_type === 'delivery' ? `Cash On Delivery`
: order.order_type === 'pos' ? 'POS Order'
: order.order_type === 'takeaway' ? 'Takeaway'
: order.table_name}
</button>
</div>
</div>
<div class="payment-status">
<span class="${order_payment_status_class}">${order_payment_status}</span>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<div class="order-number-sec">
<div class="order-number">Order #${order.order_number}</div>
<div class="restaurent-name d-none">${order.restaurant_name}</div>
</div>
<div class="order-status">
<span class="${orderPendingStatusClass}"></span>
<span class="${orderSuccessStatusClass}"></span>
<span>Status: ${orderStatusText}</span>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="order-created-time">${order.created_at}</div>
<div class="total-order">${order.total_items} Items</div>
</div>
<div class="d-flex justify-content-between align-items-center line-break mt-2 pt-2">
<div class="order-amount">${order.total_price}</div>
<div class="order-user-name">${order.name}</div>
</div>
</div>
</div>
`;
container.append(orderCard);
});
}
function renderPagination(meta) {
const pagination_section = $('#pagination-container');
pagination_section.empty();
const current = meta.current_page;
const last = meta.last_page;
pagination_section.append(`
<button class="btn btn-sm page-btn btn-outline-primary" data-page="${current - 1}" ${current === 1 ? 'disabled' : ''}>Previous</button>
`);
pagination_section.append(`
<button class="btn btn-sm btn-primary active" disabled>${current}</button>
`);
pagination_section.append(`
<button class="btn btn-sm page-btn btn-outline-primary" data-page="${current + 1}" ${current === last ? 'disabled' : ''}>Next</button>
`);
}
$(document).on('click', '.page-btn', function () {
const page_btn = $(this).data('page');
if (page_btn && page_btn >= 1) {
fetchOrders(page_btn);
}
});
$(document).ready(function() {
fetchOrders();
setInterval(() => fetchOrders(CURRENT_PAGE), 10000);
$('.order-filter-btn').on('change', function() {
CURRENT_PAGE = 1;
fetchOrders(1);
});
});
</script>
<script>
// $(document).on("click", ".order_details_modal", function (e) {
// $('.order_details_modal').removeClass('active');
// $(this).addClass('active');
// $('#orderDetailsModal').modal('show');
// const orderDetailsId = $(this).data('order-details-id');
// const orderId = $(this).data('order-id');
// const itemId = $(this).data('item-id');
// const price = $(this).data('price');
// const quantity = $(this).data('quantity');
// const total = $(this).data('total');
// const status = $(this).data('status');
// const discount = $(this).data('discount');
// const taxAmount = $(this).data('tax-amount');
// const restaurentName = $(this).data('restaurent-name');
// const delivery_fee = $(this).data('delivery-fee');
// const itemDetails = $(this).data('item-details');
// const order_total_price = $(this).data('order-total-price');
// const order_status = $(this).data('order-status');
// const order_type = $(this).data('order-type');
// const order_number = $(this).data('order-number');
// const order_address = $(this).data('order-address');
// const order_payment_status = $(this).data('order-payment_status');
// const order_table_name = $(this).data('order-table-name');
// const order_table_position = $(this).data('order-table-position');
// $('#print-order-id').attr('data-print-order-id', orderId);
// if(!order_table_name && order_type == 'delivery'){
// const delivery_address = `${order_type} to ${order_address}`;
// $('#tableName').text(delivery_address);
// }else if(order_type == 'pos'){
// $('#tableName').text('POS Order');
// $('#tablePosition').text('');
// }
// else if(order_type == 'takeaway'){
// $('#tableName').text('Takeaway');
// $('#tablePosition').text('');
// }else{
// $('#tableName').text(order_table_name);
// $('#tablePosition').text(order_table_position);
// }
// $('#orderNumber').text('#' + order_number);
// $('#orderType').text(order_type);
// $('#restaurentName').text(restaurentName);
// $('#orderStatus').text(order_status);
// $('#paymentStatus').text(order_payment_status.charAt(0).toUpperCase() + order_payment_status.slice(1));
// let pay_ment_warning_status = '';
// if(order_payment_status == 'paid'){
// pay_ment_warning_status = 'unpaid';
// }else{
// pay_ment_warning_status = 'paid';
// }
// let inputData = {
// pay_status: pay_ment_warning_status.trim(),
// order_id: orderId
// };
// let inputDataCancel = {
// order_id: orderId,
// status: 'rejected'
// };
// $('#paymentStatus').attr('data-input', JSON.stringify(inputData));
// $('#cancelOrderButton').attr('data-input', JSON.stringify(inputDataCancel));
// let warningTemplate = <?php echo json_encode(trans('layout.message.order_status_warning', ['status' => ':status']), 512) ?>;
// let warningMessage = warningTemplate.replace(':status', pay_ment_warning_status);
// let warningRejectedMessage = warningTemplate.replace(':status', 'rejected');
// $('#paymentStatus').attr('data-message', warningMessage);
// $('#cancelOrderButton').attr('data-message', warningRejectedMessage);
// if(order_status == 'rejected' || order_status == 'delivered'){
// $('#cancelOrderButton').addClass('d-none');
// }
// const statuses = [
// { key: "pending", label: "Pending" },
// { key: "approved", label: "Approved" },
// { key: "ready_for_delivery", label: "Ready for Delivery" },
// { key: "delivered", label: "Delivered" },
// { key: "rejected", label: "Rejected" }
// ];
// $('#orderStatusSection').empty();
// const currentIndex = statuses.findIndex(s => s.key === order_status);
// statuses.forEach(function(orderStatusName, index) {
// let iconClass = (index <= currentIndex) ? 'order-completed-stage' : 'order-icon';
// let iconType = "";
// switch (orderStatusName.key) {
// case 'pending': iconType = 'fa-pause'; break;
// case 'approved': iconType = 'fa-check-circle-o'; break;
// case 'ready_for_delivery': iconType = 'fa-spinner'; break;
// case 'delivered': iconType = 'fa-paper-plane'; break;
// case 'rejected': iconType = 'fa-times-circle-o'; break;
// }
// const html = `
// <div class="col-lg-2 col-md-2">
// <div class="order-status-sec">
// <div class="order-status-icon text-center">
// <i class="fa ${iconType} ${iconClass}" aria-hidden="true"></i>
// </div>
// <div class="order-status-text">
// ${orderStatusName.label}
// </div>
// </div>
// </div>
// `;
// $('#orderStatusSection').append(html);
// });
// let buttonsHtml = '';
// let allowOptions = false;
// let nextStatus = '';
// for (let index = 0; index < statuses.length; index++) {
// const select_status_name = statuses[index];
// if (select_status_name.key === order_status) {
// allowOptions = true;
// if (select_status_name.key === 'pending' && statuses[index + 1]) {
// nextStatus = statuses[index + 1];
// if (nextStatus.key !== 'rejected') {
// if (nextStatus.key === 'approved') {
// buttonsHtml = `<button type="button" data-toggle="modal" data-target="#delivered_within_modal" data-input='{"status":"${nextStatus.key}", "order_id":"${orderId}"}' class="btn btn-primary m-1">
// Change Status to ${nextStatus.label}
// </button>`;
// } else {
// buttonsHtml = `<button type="button" data-req-order-status="${nextStatus.key}" data-req-order-id="${orderId}" class="btn btn-primary m-1 changeStatusBtn">
// Change Status to ${nextStatus.label}
// </button>`;
// }
// break;
// }
// }
// } else if (allowOptions && select_status_name.key !== 'rejected' && order_status !== 'pending') {
// if (select_status_name.key === 'approved') {
// buttonsHtml = `<button type="button" data-toggle="modal" data-target="#delivered_within_modal" data-input='{"status":"${select_status_name.key}", "order_id":"${orderId}"}' class="btn btn-primary m-1">
// Change Status to ${select_status_name.label}
// </button>`;
// } else {
// buttonsHtml = `<button type="button" data-req-order-status="${select_status_name.key}" data-req-order-id="${orderId}" class="btn btn-primary m-1 changeStatusBtn">
// Change Status to ${select_status_name.label}
// </button>`;
// }
// break;
// }
// }
// if (!buttonsHtml) {
// buttonsHtml = `<button type="button" class="btn btn-secondary d-none" disabled>No further status available</button>`;
// }
// $('#changeOrderStatusButtons').html(buttonsHtml);
// let tableRows = '';
// let totalQuantity = 0;
// let totalPrice = 0;
// let totalDiscount = 0;
// let totalTax = 0;
// let totalFinalAmount = 0;
// itemDetails.forEach((item) => {
// const quantity = parseFloat(item.quantity) || 0;
// const price = parseFloat(item.price) || 0;
// const discount = parseFloat(item.discount) || 0;
// const taxAmount = parseFloat(item.tax_amount) || 0;
// const baseAmount = parseFloat(item.amount) || 0;
// // const finalAmount = (baseAmount + taxAmount) - discount;
// const finalAmount = baseAmount;
// totalQuantity = quantity;
// totalPrice = price;
// totalDiscount = discount;
// totalTax = taxAmount;
// totalFinalAmount += finalAmount + delivery_fee;
// tableRows += `
// <tr>
// <td>${item.item_name || 'N/A'}</td>
// <td>${quantity}</td>
// <td>${price.toFixed(2)}</td>
// <td>${discount.toFixed(2)}</td>
// <td>${taxAmount.toFixed(2)}</td>
// <td>${finalAmount.toFixed(2)}</td>
// </tr>
// `;
// });
// if (delivery_fee > 0) {
// tableRows += `
// <tr style="font-weight:bold; background:#f8f9fa;">
// <td></td>
// <td></td>
// <td></td>
// <td></td>
// <td>Delivery Fee</td>
// <td>${delivery_fee.toFixed(2)}</td>
// </tr>
// `;
// }
// tableRows += `
// <tr style="font-weight:bold; background:#f8f9fa;">
// <td></td>
// <td></td>
// <td></td>
// <td></td>
// <td>Grand Total</td>
// <td>${totalFinalAmount.toFixed(2)}</td>
// </tr>
// `;
// $('#itemTableBody').html(tableRows);
// });
$(document).on("click", ".order_details_modal", function (e) {
e.preventDefault();
$('.order_details_modal').removeClass('active');
$(this).addClass('active');
$('#orderDetailsModal').modal('show');
const orderId = $(this).data('order-id');
orderdetailsajax(orderId);
});
function orderdetailsajax(orderId) {
$.ajax({
url: `<?php echo e(route('ajax.order.details')); ?>`, // adjust based on your route
method: 'GET',
data: {
orderId: orderId,
},
success: function (response) {
if (response.status == 'success') {
populateOrderModal(response.data);
} else {
console.log('Failed to load order details.');
}
},
error: function () {
console.log('An error occurred while fetching the order details.');
}
});
}
function populateOrderModal(data) {
const {
order_id,
item_details,
order_total_price,
order_status,
order_type,
order_number,
order_address,
order_payment_status,
order_table_name,
order_table_position,
restaurent_name,
delivery_fee,
pos_discount,
} = data;
$('#print-order-id').attr('data-print-order-id', order_id);
// Table name logic
if (!order_table_name && order_type === 'delivery') {
$('#tableName').text(`delivery to ${order_address}`);
} else if (order_type === 'pos') {
$('#tableName').text('POS Order');
$('#tablePosition').text('');
} else if (order_type === 'takeaway') {
$('#tableName').text('Takeaway');
$('#tablePosition').text('');
} else {
$('#tableName').text(order_table_name);
$('#tablePosition').text(order_table_position);
}
$('#orderNumber').text('#' + order_number);
$('#orderType').text(order_type);
$('#restaurentName').text(restaurent_name);
$('#orderStatus').text(order_status);
$('#changepaymentStatus').text(order_payment_status.charAt(0).toUpperCase() + order_payment_status.slice(1));
let pay_ment_warning_status = (order_payment_status === 'paid') ? 'unpaid' : 'paid';
if (order_payment_status == 'unpaid') {
$('#changepaymentStatus').prop('disabled', false);
} else {
$('#changepaymentStatus').prop('disabled', true);
}
$('#changepaymentStatus').attr('data-order_id',order_id);
$('#changepaymentStatus').attr('data-pay_status',pay_ment_warning_status);
$('#cancelOrderButton').attr('data-input', JSON.stringify({
order_id: order_id,
status: 'rejected'
}));
let warningTemplate = "Changing this order status to ':status' may impact other processes.";
$('#cancelOrderButton').attr('data-message', warningTemplate.replace(':status', 'rejected'));
if (order_status === 'rejected' || order_status === 'delivered') {
$('#cancelOrderButton').addClass('d-none');
}else{
$('#cancelOrderButton').removeClass('d-none');
}
renderStatusSteps(order_status, order_id);
renderItemTable(item_details, delivery_fee,pos_discount);
}
function renderStatusSteps(order_status, order_id) {
const statuses = [
{ key: "pending", label: "Pending" },
{ key: "approved", label: "Approved" },
{ key: "ready_for_delivery", label: "Ready for Delivery" },
{ key: "delivered", label: "Delivered" },
{ key: "rejected", label: "Rejected" }
];
const currentIndex = statuses.findIndex(s => s.key === order_status);
$('#orderStatusSection').empty();
statuses.forEach((status, index) => {
let iconClass = (index <= currentIndex) ? 'order-completed-stage' : 'order-icon';
let iconType = '';
switch (status.key) {
case 'pending': iconType = 'fa-pause'; break;
case 'approved': iconType = 'fa-check-circle-o'; break;
case 'ready_for_delivery': iconType = 'fa-spinner'; break;
case 'delivered': iconType = 'fa-paper-plane'; break;
case 'rejected': iconType = 'fa-times-circle-o'; break;
}
const html = `
<div class="col-lg-2 col-md-2">
<div class="order-status-sec">
<div class="order-status-icon text-center">
<i class="fa ${iconType} ${iconClass}" aria-hidden="true"></i>
</div>
<div class="order-status-text">${status.label}</div>
</div>
</div>
`;
$('#orderStatusSection').append(html);
});
// Render next status buttons
let buttonsHtml = '';
let allowOptions = false;
let nextStatus = '';
for (let index = 0; index < statuses.length; index++) {
const s = statuses[index];
if (s.key === order_status) {
allowOptions = true;
if (s.key === 'pending' && statuses[index + 1]) {
nextStatus = statuses[index + 1];
if (nextStatus.key !== 'rejected') {
if (nextStatus.key === 'approved') {
buttonsHtml = `<button type="button" data-toggle="modal" data-target="#delivered_within_modal" data-input='{"status":"${nextStatus.key}", "order_id":"${order_id}"}' class="btn btn-primary m-1">Change Status to ${nextStatus.label}</button>`;
} else {
buttonsHtml = `<button type="button" data-req-order-status="${nextStatus.key}" data-req-order-id="${order_id}" class="btn btn-primary m-1 changeStatusBtn">Change Status to ${nextStatus.label}</button>`;
}
break;
}
}
} else if (allowOptions && s.key !== 'rejected' && order_status !== 'pending') {
if (s.key === 'approved') {
buttonsHtml = `<button type="button" data-toggle="modal" data-target="#delivered_within_modal" data-input='{"status":"${s.key}", "order_id":"${order_id}"}' class="btn btn-primary m-1">Change Status to ${s.label}</button>`;
} else {
buttonsHtml = `<button type="button" data-req-order-status="${s.key}" data-req-order-id="${order_id}" class="btn btn-primary m-1 changeStatusBtn">Change Status to ${s.label}</button>`;
}
break;
}
}
if (!buttonsHtml) {
buttonsHtml = `<button type="button" class="btn btn-secondary d-none" disabled>No further status available</button>`;
}
$('#changeOrderStatusButtons').html(buttonsHtml);
}
function renderItemTable(itemDetails, delivery_fee = 0,pos_discount=0) {
let tableRows = '';
let totalFinalAmount = 0;
itemDetails.forEach((item) => {
const quantity = parseFloat(item.quantity) || 0;
const price = parseFloat(item.price) || 0;
const discount = parseFloat(item.discount) || 0;
const taxAmount = parseFloat(item.tax_amount) || 0;
const baseAmount = parseFloat(item.total) || 0;
const finalAmount = baseAmount;
totalFinalAmount += finalAmount;
tableRows += `
<tr>
<td>${item.item_name || 'N/A'}</td>
<td>${quantity}</td>
<td>${price.toFixed(2)}</td>
<td>${discount.toFixed(2)}</td>
<td>${taxAmount.toFixed(2)}</td>
<td>${finalAmount.toFixed(2)}</td>
</tr>
`;
});
if (delivery_fee > 0) {
totalFinalAmount += parseFloat(delivery_fee);
tableRows += `
<tr style="font-weight:bold; background:#f8f9fa;">
<td colspan="5">Delivery Fee</td>
<td>${parseFloat(delivery_fee).toFixed(2)}</td>
</tr>
`;
}
if (pos_discount > 0) {
totalFinalAmount -= parseFloat(pos_discount);
tableRows += `
<tr style="font-weight:bold; background:#f8f9fa;">
<td colspan="5">POS Discount</td>
<td>${parseFloat(pos_discount).toFixed(2)}</td>
</tr>
`;
}
tableRows += `
<tr style="font-weight:bold; background:#f8f9fa;">
<td colspan="5">Grand Total</td>
<td>${totalFinalAmount.toFixed(2)}</td>
</tr>
`;
$('#itemTableBody').html(tableRows);
}
$(document).on('click', '.changeStatusBtn', function() {
let req_status = $(this).data('req-order-status');
let req_order_id = $(this).data('req-order-id');
if(req_status && req_order_id){
changeOrderStatus(req_status, req_order_id);
}
});
// function changeOrderStatus(reqNewStatus, reqOrderId) {
// let form = document.createElement('form');
// form.method = 'POST';
// form.action = "<?php echo e(route('order.update.status')); ?>";
// form.style.display = 'none';
// let csrf = document.createElement('input');
// csrf.type = 'hidden';
// csrf.name = '_token';
// csrf.value = '<?php echo e(csrf_token()); ?>';
// form.appendChild(csrf);
// let orderInput = document.createElement('input');
// orderInput.type = 'hidden';
// orderInput.name = 'order_id';
// orderInput.value = reqOrderId;
// form.appendChild(orderInput);
// let statusInput = document.createElement('input');
// statusInput.type = 'hidden';
// statusInput.name = 'status';
// statusInput.value = reqNewStatus;
// form.appendChild(statusInput);
// document.body.appendChild(form);
// form.submit();
// }
function changeOrderStatus(reqNewStatus, reqOrderId) {
$.ajax({
url: "<?php echo e(route('order.update.status')); ?>",
type: "POST",
data: {
_token: "<?php echo e(csrf_token()); ?>",
order_id: reqOrderId,
status: reqNewStatus
},
success: function(response) {
orderdetailsajax(response.orderId);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});
}
$(document).on('click', '.btn-order-print', function () {
const orderId = $('#print-order-id').data('print-order-id');
if (!orderId) {
return;
}
const url = `/order/print/${orderId}`;
window.open(url, '_blank');
});
$(document).on('click', '#changepaymentStatus', function () {
let reqOrderId = $(this).attr('data-order_id');
let pay_status = $(this).attr('data-pay_status');
$.ajax({
url: "<?php echo e(route('order.update.status')); ?>",
type: "POST",
data: {
_token: "<?php echo e(csrf_token()); ?>",
order_id: reqOrderId,
pay_status: pay_status
},
success: function(response) {
orderdetailsajax(response.orderId);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.dashboard', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/picotech/domains/qr.picotech.app/public_html/resources/views/order/index.blade.php ENDPATH**/ ?>
|