You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

619 lines
33 KiB

2 years ago
@extends('layouts.admin.app')
@section('title', translate('messages.Order List'))
@push('css_or_js')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@section('content')
<div class="content container-fluid">
<!-- Page Header -->
<div class="page-header">
<div class="row align-items-center mb-3">
<div class="col-sm">
<h1 class="page-header-title text-capitalize">{{ translate('messages.pos') }} {{ translate('messages.orders') }}
<span class="badge badge-soft-dark ml-2">{{ $orders->total() }}</span></h1>
</div>
</div>
</div>
<!-- End Page Header -->
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<div class="row justify-content-between align-items-center flex-grow-1">
<div class="col-lg-6 mb-3 mb-lg-0">
<form action="javascript:" id="search-form">
@csrf
<!-- Search -->
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="tio-search"></i>
</div>
</div>
<input id="datatableSearch_" type="search" name="search" class="form-control"
placeholder="{{ translate('messages.search') }}" aria-label="{{ translate('messages.search') }}"
required>
<button type="submit" class="btn btn-primary">{{ translate('messages.search') }}</button>
</div>
<!-- End Search -->
</form>
</div>
<div class="col-lg-6">
<div class="d-sm-flex justify-content-sm-end align-items-sm-center">
<!-- Unfold -->
<div class="hs-unfold mr-2">
<a class="js-hs-unfold-invoker btn btn-sm btn-white dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#usersExportDropdown",
"type": "css-animation"
}'>
<i class="tio-download-to mr-1"></i> {{ translate('messages.export') }}
</a>
<div id="usersExportDropdown"
class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm-right">
<span class="dropdown-header">{{ translate('messages.options') }}</span>
<a id="export-copy" class="dropdown-item" href="javascript:;">
<img class="avatar avatar-xss avatar-4by3 mr-2"
src="{{ asset('public/assets/admin') }}/svg/illustrations/copy.svg"
alt="Image Description">
{{ translate('messages.copy') }}
</a>
<a id="export-print" class="dropdown-item" href="javascript:;">
<img class="avatar avatar-xss avatar-4by3 mr-2"
src="{{ asset('public/assets/admin') }}/svg/illustrations/print.svg"
alt="Image Description">
{{ translate('messages.print') }}
</a>
<div class="dropdown-divider"></div>
<span class="dropdown-header">{{ translate('messages.download') }}
{{ translate('messages.options') }}</span>
<a id="export-excel" class="dropdown-item" href="javascript:;">
<img class="avatar avatar-xss avatar-4by3 mr-2"
src="{{ asset('public/assets/admin') }}/svg/components/excel.svg"
alt="Image Description">
{{ translate('messages.excel') }}
</a>
<a id="export-csv" class="dropdown-item" href="javascript:;">
<img class="avatar avatar-xss avatar-4by3 mr-2"
src="{{ asset('public/assets/admin') }}/svg/components/placeholder-csv-format.svg"
alt="Image Description">
.{{ translate('messages.csv') }}
</a>
<a id="export-pdf" class="dropdown-item" href="javascript:;">
<img class="avatar avatar-xss avatar-4by3 mr-2"
src="{{ asset('public/assets/admin') }}/svg/components/pdf.svg"
alt="Image Description">
{{ translate('messages.pdf') }}
</a>
</div>
</div>
<!-- End Unfold -->
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-sm btn-white" href="javascript:;"
data-hs-unfold-options='{
"target": "#showHideDropdown",
"type": "css-animation"
}'>
<i class="tio-table mr-1"></i> {{ translate('messages.column') }} <span
class="badge badge-soft-dark rounded-circle ml-1"></span>
</a>
<div id="showHideDropdown"
class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-right dropdown-card"
>
<div class="card card-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{ translate('messages.order') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm" for="toggleColumn_order">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_order" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{ translate('messages.date') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm" for="toggleColumn_date">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_date" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{ translate('messages.customer') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm" for="toggleColumn_customer">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_customer" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2 text-capitalize">{{ translate('messages.payment') }}
{{ translate('messages.status') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm"
for="toggleColumn_payment_status">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_payment_status" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{ translate('messages.total') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm" for="toggleColumn_total">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_total" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{ translate('messages.order') }}
{{ translate('messages.status') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm"
for="toggleColumn_order_status">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_order_status" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="mr-2">{{translate('messages.order')}} {{translate('messages.type')}}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm"
for="toggleColumn_order_type">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_order_type" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="mr-2">{{ translate('messages.actions') }}</span>
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm" for="toggleColumn_actions">
<input type="checkbox" class="toggle-switch-input"
id="toggleColumn_actions" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End Unfold -->
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive datatable-custom">
<table id="datatable"
class="table table-hover table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
data-hs-datatables-options='{
"order": [],
"orderCellsTop": true,
"paging":false
}'>
<thead class="thead-light">
<tr>
<th class="">
{{ translate('messages.#') }}
</th>
<th class="table-column-pl-0">{{ translate('messages.order') }}</th>
<th>{{ translate('messages.date') }}</th>
<th>{{ translate('messages.customer') }}</th>
<th>{{ translate('messages.payment') }} {{ translate('messages.status') }}</th>
<th>{{ translate('messages.total') }}</th>
<th>{{ translate('messages.order') }} {{ translate('messages.status') }}</th>
<th>{{ translate('messages.order') }} {{ translate('messages.type') }}</th>
<th>{{ translate('messages.actions') }}</th>
</tr>
</thead>
<tbody id="set-rows">
@foreach ($orders as $key => $order)
<tr class="status-{{ $order['order_status'] }} class-all">
<td class="">
{{ $key + $orders->firstItem() }}
</td>
<td class="table-column-pl-0">
<a
href="{{ route('admin.pos.order-details', ['id' => $order['id']]) }}">{{ $order['id'] }}</a>
</td>
<td>{{ date('d M Y', strtotime($order['created_at'])) }}</td>
<td>
@if ($order->customer)
<a href="{{ route('admin.customer.view', $order->customer->id) }}">
<label
class="badge badge-dark">{{ $order->customer['f_name'] . ' ' . $order->customer['l_name'] }}</label>
</a>
@else
<label class="badge badge-success">{{ translate('messages.walk_in_customer') }}</label>
@endif
</td>
<td>
@if ($order->payment_status == 'paid')
<span class="badge badge-soft-success">
<span class="legend-indicator bg-success"></span>{{ translate('messages.paid') }}
</span>
@else
<span class="badge badge-soft-danger">
<span class="legend-indicator bg-danger"></span>{{ translate('messages.unpaid') }}
</span>
@endif
</td>
<td>{{ \App\CentralLogics\Helpers::format_currency($order['order_amount']) }}</td>
<td class="text-capitalize">
@if ($order['order_status'] == 'pending')
<span class="badge badge-soft-info ml-2 ml-sm-3">
<span class="legend-indicator bg-info"></span>{{ translate('messages.pending') }}
</span>
@elseif($order['order_status'] == 'confirmed')
<span class="badge badge-soft-info ml-2 ml-sm-3">
<span class="legend-indicator bg-info"></span>{{ translate('messages.confirmed') }}
</span>
@elseif($order['order_status'] == 'processing')
<span class="badge badge-soft-warning ml-2 ml-sm-3">
<span
class="legend-indicator bg-warning"></span>{{ translate('messages.processing') }}
</span>
@elseif($order['order_status'] == 'picked_up')
<span class="badge badge-soft-warning ml-2 ml-sm-3">
<span
class="legend-indicator bg-warning"></span>{{ translate('messages.out_for_delivery') }}
</span>
@elseif($order['order_status'] == 'delivered')
<span class="badge badge-soft-success ml-2 ml-sm-3">
<span
class="legend-indicator bg-success"></span>{{ translate('messages.delivered') }}
</span>
@else
<span class="badge badge-soft-danger ml-2 ml-sm-3">
<span
class="legend-indicator bg-danger"></span>{{ str_replace('_', ' ', $order['order_status']) }}
</span>
@endif
</td>
<td class="text-capitalize">
@if ($order['order_type'] == 'take_away')
<span class="badge badge-soft-info ml-2 ml-sm-3">
<span class="legend-indicator bg-info"></span>{{ translate('messages.take_away') }}
</span>
@else
<span class="badge badge-soft-success ml-2 ml-sm-3">
<span
class="legend-indicator bg-success"></span>{{ translate('messages.delivery') }}
</span>
@endif
</td>
<td>
<a class="btn btn-sm btn-white"
href="{{ route('admin.pos.order-details', ['id' => $order['id']]) }}"><i
class="tio-visible"></i> {{ translate('messages.view') }}</a>
<btton class="btn btn-sm btn-white" target="_blank" type="button"
onclick="print_invoice('{{ $order->id }}')"><i class="tio-download"></i>
{{ translate('messages.invoice') }}</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- End Table -->
<!-- Footer -->
<div class="card-footer">
<!-- Pagination -->
<div class="row justify-content-center justify-content-sm-between align-items-sm-center">
{{-- <div class="col-sm mb-2 mb-sm-0">
<div class="d-flex justify-content-center justify-content-sm-start align-items-center">
<span class="mr-2">Showing:</span>
<!-- Select -->
<select id="datatableEntries" class="js-select2-custom"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm custom-select-borderless",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="25" selected>25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<!-- End Select -->
<span class="text-secondary mr-2">of</span>
<!-- Pagination Quantity -->
<span id="datatableWithPaginationInfoTotalQty"></span>
</div>
</div> --}}
<div class="col-sm-auto">
<div class="d-flex justify-content-center justify-content-sm-end">
<!-- Pagination -->
{!! $orders->links() !!}
{{-- <nav id="datatablePagination" aria-label="Activity pagination"></nav> --}}
</div>
</div>
</div>
<!-- End Pagination -->
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
</div>
<div class="modal fade" id="print-invoice" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ translate('messages.print') }} {{ translate('messages.invoice') }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body row ff-emoji">
<div class="col-md-12">
<center>
<input type="button" class="btn btn-primary non-printable" onclick="printDiv('printableArea')"
value="Proceed, If thermal printer is ready." />
<!-- <a href="{{ url()->previous() }}" class="btn btn-danger non-printable">Back</a> -->
</center>
<hr class="non-printable">
</div>
<div class="row m-auto" id="printableArea">
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script_2')
<script>
$(document).on('ready', function() {
// INITIALIZATION OF NAV SCROLLER
// =======================================================
$('.js-nav-scroller').each(function() {
new HsNavScroller($(this)).init()
});
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-select2-custom').each(function() {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
// INITIALIZATION OF DATATABLES
// =======================================================
var datatable = $.HSCore.components.HSDatatables.init($('#datatable'), {
dom: 'Bfrtip',
buttons: [{
extend: 'copy',
className: 'd-none'
},
{
extend: 'excel',
className: 'd-none'
},
{
extend: 'csv',
className: 'd-none'
},
{
extend: 'pdf',
className: 'd-none'
},
{
extend: 'print',
className: 'd-none'
},
],
select: {
style: 'multi',
selector: 'td:first-child input[type="checkbox"]',
classMap: {
checkAll: '#datatableCheckAll',
counter: '#datatableCounter',
counterInfo: '#datatableCounterInfo'
}
},
language: {
zeroRecords: '<div class="text-center p-4">' +
'<img class="w-7rem mb-3" src="{{ asset('public/assets/admin') }}/svg/illustrations/sorry.svg" alt="Image Description">' +
'<p class="mb-0">{{ translate('No data to show') }}</p>' +
'</div>'
}
});
$('#export-copy').click(function() {
datatable.button('.buttons-copy').trigger()
});
$('#export-excel').click(function() {
datatable.button('.buttons-excel').trigger()
});
$('#export-csv').click(function() {
datatable.button('.buttons-csv').trigger()
});
$('#export-pdf').click(function() {
datatable.button('.buttons-pdf').trigger()
});
$('#export-print').click(function() {
datatable.button('.buttons-print').trigger()
});
$('#toggleColumn_order').change(function(e) {
datatable.columns(1).visible(e.target.checked)
})
$('#toggleColumn_date').change(function(e) {
datatable.columns(2).visible(e.target.checked)
})
$('#toggleColumn_customer').change(function(e) {
datatable.columns(3).visible(e.target.checked)
})
$('#toggleColumn_payment_status').change(function(e) {
datatable.columns(4).visible(e.target.checked)
})
$('#toggleColumn_fulfillment_status').change(function(e) {
datatable.columns(5).visible(e.target.checked)
})
$('#toggleColumn_order_status').change(function(e) {
datatable.columns(6).visible(e.target.checked)
})
$('#toggleColumn_total').change(function(e) {
datatable.columns(5).visible(e.target.checked)
})
$('#toggleColumn_order_type').change(function(e) {
datatable.columns(7).visible(e.target.checked)
})
$('#toggleColumn_actions').change(function(e) {
datatable.columns(8).visible(e.target.checked)
})
// INITIALIZATION OF TAGIFY
// =======================================================
$('.js-tagify').each(function() {
var tagify = $.HSCore.components.HSTagify.init($(this));
});
});
</script>
<script>
$('#search-form').on('submit', function() {
var formData = new FormData(this);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.post({
url: '{{ route('admin.pos.search') }}',
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#loading').show();
},
success: function(data) {
$('#set-rows').html(data.view);
$('.card-footer').hide();
},
complete: function() {
$('#loading').hide();
},
});
});
function print_invoice(order_id) {
$.get({
url: '{{ url('/') }}/admin/pos/invoice/' + order_id,
dataType: 'json',
beforeSend: function() {
$('#loading').show();
},
success: function(data) {
console.log("success...")
$('#print-invoice').modal('show');
$('#printableArea').empty().html(data.view);
},
complete: function() {
$('#loading').hide();
},
});
}
function printDiv(divName) {
if($('html').attr('dir') === 'rtl') {
$('html').attr('dir', 'ltr')
var printContents = document.getElementById(divName).innerHTML;
document.body.innerHTML = printContents;
$('.initial-38-1').attr('dir', 'rtl')
window.print();
$('html').attr('dir', 'rtl')
location.reload();
}else{
var printContents = document.getElementById(divName).innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}
}
</script>
@endpush