Untitled
unknown
plain_text
a year ago
112 kB
5
Indexable
@extends('layouts.app')
@push('css')
<style>
.br-0 {
border-radius: 0 !important;
}
button {
white-space: normal !important;
}
</style>
{{-- <style>--}}
{{-- @page {--}}
{{-- margin:0cm;--}}
{{-- page-break-after: always;--}}
{{-- page-break-before: always;--}}
{{-- }--}}
{{-- </style>--}}
@endpush
@section('content')
<form enctype="multipart/form-data"
action="{{isset($order) ?route('cms.pos.update', $order->_id): route('cms.pos.store')}}"
id="order_form"
method="post">
@csrf
@isset($order)
@method('PUT')
@else
@method('POST')
@endisset
<div class="row">
<div class="col-md-12">
{{-- name - code preferences--}}
<div class="card">
<div class="card-header">
<h4 class="card-title"> {{$order->code??'New Order'}} </h4>
</div>
@if (!isset($order))
<div class="card-body">
<div class="form-group">
<label for="select_user" class="form-label">Select User </label>
<div class="row">
<input type="text" id="country_code" name="country_code" value="+974" hidden/>
<div class="container" style="width: 20%;"">
<div class="dropdown" id="country-codes">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="value">+974</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" value="">-</a></li>
<li><a href="#" value="+974">Qatar (+974)</a></li>
<li><a href="#" value="+966">SA (+966)</a></li>
<li><a href="#" value="+971">UAE (+971)</a></li>
<li><a href="#" value="+968">OMN (+968)</a></li>
<li><a href="#" value="+973">BH (+973)</a></li>
</ul>
</div>
</div>
<input type="text" class="form-control" style="width: 50%; margin-left:10px; margin-right: 10px"
id="search_phone" >
<button class="btn btn-secondary" type="button" onclick="checkPhone()"><i
class="fe fe-search"></i></button>
</div>
</div>
</div>
@endif
<div class="card-body">
<div class="row">
<div class="col-md-7">
<label class="form-label" style="font-size: large">{{__('User Information')}}</label>
<div class="form-row">
<div class="form-group col-md-6 mb-0">
<div class="form-group">
<input type="text" class="form-control readonly" id="phone"
placeholder="Phone" name="phone"
required>
</div>
</div>
<div class="form-group col-md-6 mb-0">
<div class="form-group">
<input type="text" class="form-control " id="name"
placeholder="Name" name="name" required readonly>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-0">
<div class="form-group">
<input type="email" class="form-control" id="email"
name="email" placeholder="Email Address" readonly>
</div>
</div>
<div class="col-md-6 mb-0">
<div class="form-group">
<input type="text" class="form-control" id="alias_name" name="alias_name"
placeholder="Alias Name">
</div>
</div>
<div class="col-md-6 mb-0">
<div class="form-group">
<textarea style="width: 100%"
class="form-control" id="user_note" name="user_note"
placeholder="User Note"
></textarea>
</div>
</div>
@if ( isset($order))
<div class="col-md-6 mb-0">
<div class="form-group">
<a class="btn btn-secondary"
href="{{route('cms.user.edit',$order->user_id)}}"><i
class="fe fe-edit"></i> Edit User and Addresses</a>
</div>
</div>
<div class="col-md-6 mb-0">
<label class="form-label">{{__('User Note')}}</label>
<p> {{ $order->note??'' }}</p>
@if ( $order->driver_option == 'wait')
<p> Wait at the door</p>
@elseif ( $order->driver_option == 'hang')
<p> Hang it on the door</p>
@endif
</div>
@endif
</div>
</div>
<div class="col-md-5">
<label class="form-label">{{__('User Preferences')}}
@if ( isset($order))
<button class="btn btn-secondary" type="button" onclick="openPreferenceModal()">
<i class="fe fe-edit"></i></button>
@endif
</label>
<div class="row" id="preferences-list">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
{{-- collection address --}}
<div class="card">
<div class="card-header">
<h4 class="card-title">Pick up</h4>
</div>
<div class="card-body">
<div class=" form-group">
<label class="custom-switch">
<input type="checkbox" class="custom-switch-input" onchange="toggleOrderType()"
id="order_type" name="express_order">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">{{__('Express Order')}}</span>
</label>
@if (!isset($order))
<div class="form-group">
<label class="form-label" for="user_addresses"> {{__('Source')}}</label>
<select class="form-control select2-show-search"
id="select_source" name="source">
<option value="CMS">{{__('Industrial Area')}}</option>
<option value="vendom">{{__('Vendom Mall')}}</option>
<option value="rafeeq">{{__('Rafeeq')}}</option>
<option value="snoonu">{{__('Snoonu')}}</option>
<option hidden value="fifa_official">{{__('Fifa Official')}}</option>
<option hidden value="fifa_personal">{{__('Fifa Personal')}}</option>
</select>
</div>
@else
<div class="form-group">
<label class="form-label"
for="user_addresses"> {{__('Source: ').$order->source??''}}</label>
</div>
@endif
</div>
<div class="form-group ">
<div class="form-group">
<label for="collection_date" class="form-label">{{__('Date')}}</label>
<input type="datetime-local" onchange="setDate()" class="form-control"
name="collection_date" id="collection_date" required
placeholder="Collection Date">
</div>
</div>
<div class="form-group">
<label for="collection_address" class="form-label">{{__('Address')}}</label>
<input type="hidden" class="form-control" name="collection_address" id="collection_address"
required>
<input type="text" class="form-control readonly" name="collection_address_show"
id="collection_address_show"
placeholder="Collection Address" required onclick="openAddressModal(this)">
</div>
@if( isset($order) and $order->collector != null )
<div class="form-group ">
<div class="form-group">
<label class="form-label">{{__('Collected By')}}</label>
<input type="text" class="form-control"
value="{{$order->collector->name ??''}}">
</div>
</div>
<div class="form-group ">
<div class="form-group">
<label lass="form-label">{{__('Item Collected')}}</label>
<input type="text" class="form-control"
value="{{$order->items_collected??'0'}}">
</div>
</div>
@endif
<div class="form-group">
<label for="collection_note" class="form-label">{{__('PickUp Note')}}</label>
<textarea type="text" class="form-control" name="collection_note"
id="collection_note">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-md-6">
{{-- delievery address--}}
<div class="card">
<div class="card-header">
<h4 class="card-title">Delivery</h4>
</div>
<div class="card-body">
<div class="form-group ">
<label for="delivery_date" class="form-label">{{__('Date')}}</label>
<div class="form-group">
<input type="datetime-local" class="form-control" id="delivery_date"
name="delivery_date" required placeholder="Delivery Date">
</div>
</div>
@if (!isset($order))
<div class="form-group">
<label class="custom-switch">
<input type="checkbox" name="same_address" id="same_address"
class="custom-switch-input" onchange="$('#delivery_box').toggle()" checked>
<span class="custom-switch-indicator"></span>
<span
class="custom-switch-description">{{__('Delivery Address same as Collection Address')}}</span>
</label>
</div>
@endif
<div class="form-group" id="delivery_box" @if (!isset($order))style="display: none"@endif>
<label for="delivery_address" class="form-label">{{__('Delivery Address')}}</label>
<input type="hidden" class="form-control" name="delivery_address" id="delivery_address">
<input type="text" class="form-control readonly" id="delivery_address_show"
name="delivery_address_show"
placeholder="Delivery Address" onclick="openAddressModal(this)">
</div>
@if( isset($order) and $order->collector != null )
<div class="form-group">
<label class="form-label">{{__('Collected By')}}</label>
<input type="text" class="form-control"
value="{{$order->collector->name ??''}}">
</div>
<div class="form-group">
<label class="form-label">{{__('Item Collected')}}</label>
<input type="text" class="form-control"
value="{{$order->items_collected??'0'}}">
</div>
@endif
<div class="form-group">
<label for="delivery_note" class="form-label">{{__('Delivery Note')}}</label>
<textarea type="text" class="form-control" name="delivery_note"
id="delivery_note">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3 form-group">
<label for="inv_sub_total" class="form-label"
style="font-size: medium">{{__('Sub Total')}}</label>
<input type="number" step="0.01" class="form-control" id="inv_sub_total"
placeholder="00.00" readonly>
</div>
<div class="col-md-3 form-group">
<label for="inv_addons" class="form-label"
style="font-size: medium">{{__('Addons')}}</label>
<input type="number" step="0.01" class="form-control" id="inv_addons"
placeholder="00.00" readonly>
</div>
<div class="col-md-3 form-group">
<label for="promo_code" class="form-label"
style="font-size: medium">{{__('Promo Code')}}</label>
<input type="text" class="form-control" id="promo_code"
value="{{$order->promo->code??''}} - {{$order->promo->percentage??''}}"
readonly placeholder="{{__("NO PROMO")}}">
</div>
<div class="col-md-3 form-group">
<label for="inv_discount_percentage" class="form-label"
style="font-size: medium">{{__('Discount Percentage %')}}</label>
<input type="number" step="0.01" class="form-control"
id="inv_discount_percentage"
name="discount_percentage"
value="{{$order->discount_percentage??''}}"
placeholder="00.00" onkeyup="refreshCalculation('percentage')">
</div>
<div class="col-md-3 form-group">
<label for="inv_discount_amount" class="form-label"
style="font-size: medium">{{__('Discount Amount')}}</label>
<input type="number" class="form-control" id="inv_discount_amount"
name="discount_amount"
value="{{$order->discount_amount??''}}"
placeholder="0" onkeyup="refreshCalculation('amount')" >
</div>
<div class="col-md-3 form-group">
<label for="inv_total" class="form-label"
style="font-size: medium">{{__('Delivery Charge')}}</label>
<input type="number" step="0.01" class="form-control" id="delivery_charge"
value="{{$order->delivery_charge??''}}" name="delivery_fees"
placeholder="00.00" onkeyup="refreshCalculation()">
</div>
<div class="col-md-3 form-group pb-2" style="background-color: #72d2fe">
<label for="inv_total" class="form-label"
style="font-size: medium">{{__('Total')}}</label>
<input type="number" step="0.01" class="form-control" id="inv_total"
placeholder="00.00" readonly>
</div>
<div class="col-md-3 form-group">
<label for="inv_promo" class="form-label"
style="font-size: medium">{{__('Promo Code Discount')}}</label>
<input type="text" class="form-control" id="inv_promo"
placeholder="00.00" readonly>
</div>
<div class="col-md-3 form-group">
<label for="inv_discount" class="form-label"
style="font-size: medium">{{__('Discount')}}</label>
<input type="number" step="2" class="form-control" id="inv_discount"
placeholder="00.00" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Order Details</h4>
</div>
<div class="card-body">
<div id="items-list">
</div>
<div class="row">
<div class="col-12 ">
<button class="btn btn-azure mt-1 float-right" type="button" onclick="openItem()"
id="add_item">{{__('Add Item')}}</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
{{-- actions --}}
<div class="card">
<div class="card-header">
<h4 class="card-title">Actions</h4>
</div>
<div class="card-body">
@isset($order)
@if (!in_array($order->status->slug_name, ['canceled','done']))
<button type="button" onclick="makeAction('update')"
class="btn btn-primary mt-4 mb-0">{{__('Update')}}</button>
<button type="button" class="btn btn-success mt-4 mb-0"
onclick="makeAction('send_to_client')"
@if (!in_array($order->status->slug_name ,['validation','rejected']))
disabled style="cursor: unset"
@endif
>{{__('Send Order To Client')}}</button>
<button type="button" onclick="makeAction('accept')"
class="btn btn-primary mt-4 mb-0">{{__('Accept')}}</button>
<br/>
<button type="button" onclick="printTags()"
class="btn btn-azure mt-4 mb-0">{{__('Print Tags')}}</button>
<button type="button" class="btn btn-dark mt-4 mb-0" onclick="makeAction('cancel')"
@if (in_array($order->status->slug_name ,['processing','delivery','pending-payment']))
disabled style="cursor: unset"
@endif
>{{__('Cancel Order')}}</button>
{{-- <button type="button" onclick="makeAction('force_delete')" class="btn btn-primary mt-4 mb-0">{{__('Force Delete')}}</button>--}}
{{-- <a href="{{route('order.send.pdf',$order->_id)}}" target="_blank" class="btn btn-primary mt-4 mb-0">{{__('Print AR')}}</a>--}}
<button type="button" onclick="printInvoice()"
class="btn btn-primary mt-4 mb-0">{{__('Print Invoice')}}</button>
<button type="button" onclick="printReceipt()"
class="btn btn-primary mt-4 mb-0">{{__('Print Receipt')}}</button>
<br/>
<button type="button" onclick="makeAction('deliver','cash')"
class="btn btn-primary mt-4 mb-0">{{__('Deliver - Cash')}}</button>
<button type="button" onclick="makeAction('deliver','card')"
class="btn btn-primary mt-4 mb-0">{{__('Deliver - Card')}}</button>
<button type="button" onclick="makeAction('deliver','credit')"
class="btn btn-primary mt-4 mb-0">{{__('Deliver - Credit')}}</button>
@endif
@else
<button type="button" onclick="makeAction('update')"
class="btn btn-primary mt-4 mb-0">{{__('Create')}}</button>
<button type="button" onclick="makeAction('collection')"
class="btn btn-primary mt-4 mb-0">{{__('Create And Collect')}}</button>
<button type="button" onclick="makeAction('collection', 'cash')"
class="btn btn-primary mt-4 mb-0">{{__('Create And Collect - cash')}}</button>
<button type="button" onclick="makeAction('collection','card')"
class="btn btn-primary mt-4 mb-0">{{__('Create And Collect - card')}}</button>
<button type="button" onclick="makeAction('collection','credit')"
class="btn btn-primary mt-4 mb-0">{{__('Create And Collect - credit')}}</button>
@endisset
</div>
</div>
</div>
<div class="col-md-6">
{{-- status --}}
<div class="card">
<div class="card-header">
<h4 class="card-title">Statuses</h4>
</div>
<div class="card-body">
<div class="form-group">
<label class="form-label">{{__('Payment Status')}}</label>
<input type="text" class="form-control" readonly
value="{{$order->payment_type??'-'}} : {{$order->payment_status??'-'}}">
</div>
<div class="form-group">
<label class="form-label">{{__('Current Status')}}</label>
<input type="text" class="form-control" readonly
value="{{$order->status->name??'-'}}">
</div>
@if (isset($order) and in_array($order->status->slug_name, ['delivery']))
<div class="form-group">
<button type="button" onclick="makeAction('back_to_shop')"
class="btn btn-primary mt-4 mb-0">{{__('Back To Shop')}}</button>
</div>
@endif
</div>
</div>
</div>
</div>
</form>
<div class="modal" id="addressModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title" id="modal_address_title"></h6>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="form-label" for="user_addresses"> {{__('User Addresses')}}</label>
<select class="form-control select2-show-search"
data-placeholder="{{__('User Addresses')}}"
id="user_addresses" onchange="selectAddress(this)">
<option value="">{{__('Select Address')}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="hidden" class="form-control"
id="old_content">
<div class="col-md-6">
<div class="form-group">
<label for="modal_address_name" class="form-label">{{__('Address Name')}}</label>
<input type="text" class="form-control"
id="modal_address_name" required>
</div>
<div class="form-group">
<label for="modal_address_zone" class="form-label">{{__('Address Zone')}}</label>
<input type="text" class="form-control"
id="modal_address_zone" required>
</div>
<div class="form-group">
<label for="modal_address_building"
class="form-label">{{__('Address Building')}}</label>
<input type="text" class="form-control"
id="modal_address_building" required>
</div>
<div class="form-group">
<label for="modal_address_additional_info"
class="form-label">{{__('Address Nearest Landmark')}}</label>
<input type="text" class="form-control"
id="modal_address_additional_info">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="modal_address_area" class="form-label">{{__('Address Area')}}</label>
<input type="text" class="form-control"
id="modal_address_area" required>
</div>
<div class="form-group">
<label for="modal_address_street" class="form-label">{{__('Address Street')}}</label>
<input type="text" class="form-control"
id="modal_address_street" required>
</div>
<div class="form-group">
<label for="modal_address_number"
class="form-label">{{__('Address Flat/Villa#')}}</label>
<input type="text" class="form-control"
id="modal_address_number" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group" style="padding: 10px">
<input type="text" id="modal_address_map"
class="form-control map_input" required>
<input type="hidden" id="modal_address_location"/>
<div id="modal-address-map-container" style="width:100%;height:400px; ">
<div style="width: 100%; height: 100%" id="modal-address-map"></div>
</div>
</div>
</div>
</div>
<div class="row " id="error_address_message_box" style="display: none">
<div class="col">
<div class="bg-danger-transparent-2 text-danger px-4 py-2 br-3 mb-4"
role="alert" id="error_address_message"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-indigo" id="modal_address_btn_set" type="button" onclick="setAddress(this)"
data-id="">{{__('Set')}}</button>
<button class="btn btn-light" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="preferencesModel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content modal-content-demo">
<form enctype="multipart/form-data"
action="{{route('cms.ajax.set-user-pre', $order->_id??"-1")}}"
method="post">
@csrf
<div class="modal-header">
<h6 class="modal-title" id="user_pre_title">Preferences </h6>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row" id="user_pre">
</div>
<div class="row " id="error_user_pre_box" style="display: none">
<div class="col">
<div class="bg-danger-transparent-2 text-danger px-4 py-2 br-3 mb-4"
role="alert" id="error_user_pre_message"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light" type="submit">Update</button>
<button class="btn btn-light" data-dismiss="modal" type="button">Close</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="itemModal">
<div class="modal-dialog" style="max-width: 80%;" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-body">
<div class="row">
<div class="col-5">
<div class="row border-primary mb-2" style="border: 1px solid;min-height: 60px">
<label class="col-12 form-label" style="font-size: medium">{{__('Categories')}}</label>
@foreach($modal_categories as $category)
<button
class="col-4 btn btn-outline-primary br-0 py-3 mc-categories mc-{{$category->_id}}"
onclick="showItems('{{$category->_id}}')">
{{$category->name}}
</button>
@endforeach
<button class="col-4 btn btn-outline-primary br-0 py-3 mc-categories "
onclick="selectCustomItem()">
Custom Item
</button>
</div>
<div class="form-group">
<label class="form-label" for="category"> {{ __('Items') }}</label>
<select class="form-control select2-show-search"
data-placeholder="{{ __('Select Item') }}" id="select_category"
onchange="selectCategoryItem(this)">
<option value="">{{ __('Select Item') }}</option>
</select>
</div>
<div class="row border-primary mb-2" >
{{-- <label class="col-12 form-label" style="font-size: medium">{{__('Items')}}</label> --}}
@foreach($modal_items as $item)
<button
class="col-4 btn btn-outline-primary br-0 py-3 mi-items mi-{{$item->category_id}}"
onclick="showTypes('{{$item->_id}}')" id="item-{{$item->_id}}"
data-id="{{$item->_id}}" data-value="{{json_encode($item)}}">
{{$item->name}}
</button>
@endforeach
</div>
<div class="row border-primary" style="border: 1px solid;min-height:60px">
<label class="col-12 form-label" style="font-size: medium">{{__('Service')}}</label>
<button class="col-4 btn btn-outline-primary br-0 py-3 mt-type mt-pressing"
onclick="selectType(this)" data-value="p">
Pressing
</button>
<button class="col-4 btn btn-outline-primary br-0 py-3 mt-type mt-press-wash"
onclick="selectType(this)" data-value="pw">
Press & Wash
</button>
<button class="col-4 btn btn-outline-primary br-0 py-3 mt-type mt-dry-clean"
onclick="selectType(this)" data-value="dc">
Dry Clean
</button>
<button class="col-4 btn btn-outline-primary br-0 py-3 mt-type mt-dry-clean"
onclick="selectType(this)" data-value="c">
Cleaning
</button>
{{-- <button class=" btn btn-outline-primary m-1 py-3 mt-type mt-folding"--}}
{{-- onclick="toggleFolding(this)" data-value="folding">--}}
{{-- Folding--}}
{{-- </button>--}}
</div>
</div>
<div class="col-3">
<div class="row pl-5 pr-5 pb-2">
<div class="row border-primary" style="border: 1px solid;min-height:60px">
<input class="col-12 text-center form-control-lg br-0" step="2" type="text"
id="modal_quantity">
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '1';">
1
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '2';">
2
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '3';">
3
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '4';">
4
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '5';">
5
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '6';">
6
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '7';">
7
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '8';">
8
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '9';">
9
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value='';">
Clear
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=document.getElementById('modal_quantity').value.toString() + '0';">
0
</button>
<button type="button" class="col-4 btn btn-outline-primary br-0 py-3 modal-number"
onclick="document.getElementById('modal_quantity').value=
!document.getElementById('modal_quantity').value.toString().includes('.')?(document.getElementById('modal_quantity').value.toString() + '.')
:document.getElementById('modal_quantity').value.toString() ;">
.
</button>
</div>
</div>
<div class="row pl-5 pr-5 pb-2 ">
<div class="row border-primary" style="border: 1px solid;min-height:60px">
<label class="col-12 form-label" style="font-size: medium">{{__('Note')}}</label>
<textarea style="width: 90%;margin:5%" id="item_note"></textarea>
</div>
</div>
<div class="row pl-5 pr-5 pb-2 ">
<div class="row border-primary" style="border: 1px solid;min-height:60px">
<label class="col-12 form-label"
style="font-size: medium">{{__('Item Images')}}</label>
<input type="file"
multiple
data-height="180"
id="modal_image"/>
</div>
</div>
</div>
<div class="col-4">
<div class="row border-primary" style="border: 1px solid;min-height:60px">
<label class="col-12 form-label" style="font-size: medium">{{__('Addons')}}</label>
@foreach($addons as $addon)
<button class="col-4 btn btn-outline-primary br-0 py-3 mi-addons mi-{{$addon->_id}}"
onclick="toggleAddon('{{$addon->_id}}')"
id="addon-{{$addon->_id}}" style="display: none">
{{$addon->name}} <span class="price"></span>
</button>
@endforeach
</div>
<div class="row border-primary mt-2" style="border: 1px solid;min-height:60px">
<div class="col-12 form-group" id="custom_item_box" style="display: none">
<label for="modal_custom_item" class="form-label">{{__('Name')}}</label>
<input type="text" step="2" class="form-control"
id="modal_custom_item">
</div>
<div class="col-12 form-group">
<label for="modal_unit" class="form-label" style="font-weight:600">{{__('Unit')}}</label>
<input id="modal_unit" type="checkbox" class="form-control"
data-toggle="switchbutton" checked data-onlabel="Kg" data-offlabel="SqM" data-onstyle="success" data-offstyle="outline-info">
</div>
<div class="col-12 form-group" id="kgs">
<label for="modal_width" class="form-label">{{__('Kgs')}}</label>
<input type="number" step="2" class="form-control" id="modal_kg" onchange="makeRowCalculation()">
</div>
<div class="col-12 form-group" id="sqm">
<label for="modal_width" class="form-label">{{__('Width')}}</label>
<input type="number" class="form-control" id="modal_width" onchange="makeRowCalculation()">
<br/>
<label for="modal_height" class="form-label">{{__('Height')}}</label>
<input type="number" class="form-control" id="modal_height" onchange="makeRowCalculation()">
</div>
<div class="col-12 form-group">
<label for="modal_price" class="form-label">{{__('Price')}}</label>
<input type="number" step="2" class="form-control"
onchange="makeRowCalculation()"
id="modal_price">
</div>
<div class="col-12 form-group">
<label for="modal_total" class="form-label">{{__('Total')}}</label>
<input type="text" class="form-control"
id="modal_total" readonly>
</div>
<div class="col-12 form-group">
<label for="modal_discount" class="form-label">{{__('Discount %')}}</label>
<input type="number" step="0.01" class="form-control"
onchange="makeRowCalculation()"
id="modal_discount">
</div>
<div class="col-12 form-group">
<label for="modal_discount_amount" class="form-label">{{__('Discount Amount')}}</label>
<input type="number" step="0.01" class="form-control"
onchange="makeRowCalculationAmount()"
id="modal_discount_amount">
</div>
<div class="col-12 form-group">
<label for="modal_addons" class="form-label">{{__('Addons')}}</label>
<input type="text" class="form-control" readonly
id="modal_addons">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-indigo" id="modal_address_btn_set" type="button"
onclick="setItem()" data-id="">{{__('Set')}}</button>
<button class="btn btn-light" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<div id="printJS-div"></div>
@endsection
@once
@push('css')
<link href="../../assets/plugins/fancyuploder/fancy_fileupload.css" rel="stylesheet"/>
<link href="../../assets/plugins/fileupload/css/fileupload.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/plugins/select2/select2.min.css" rel="stylesheet"/>
<link href="../../assets/plugins/time-picker/jquery.timepicker.css" rel="stylesheet"/>
<link href="../../assets/plugins/date-picker/date-picker.css" rel="stylesheet"/>
<link href="../../assets/plugins/fileupload/css/fileupload.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css" rel="stylesheet">
<style>
#printJS-div {
display: none;
}
.modal {
z-index: 1001 !important;
}
.modal-backdrop {
z-index: 1000 !important;
}
.pac-container {
z-index: 1055 !important;
}
.single-item {
padding: 10px 0;
}
.single-item:nth-child(even) {
background-color: #e2e2e2;
}
.mi-items {
font-size: 12px;
}
</style>
@endpush
@push('js')
<!--Print js -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<!--Select2 js -->
<script src="../../assets/plugins/select2/select2.full.min.js"></script>
<!-- Timepicker js -->
<script src="../../assets/plugins/time-picker/jquery.timepicker.js"></script>
<script src="../../assets/plugins/time-picker/toggles.min.js"></script>
<!-- Datepicker js -->
<script src="../../assets/plugins/date-picker/date-picker.js"></script>
<script src="../../assets/plugins/date-picker/jquery-ui.js"></script>
<script src="../../assets/plugins/input-mask/jquery.maskedinput.js"></script>
<!-- fancybox js -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD09iSHyrRM-3QoqXubT6bCSQRcawyCYKo&libraries=places&callback=initialize"
async defer></script>
<!-- File uploads js -->
<script src="../../assets/plugins/fileupload/js/dropify.js"></script>
<script src="../../assets/js/filupload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"></script>
<script type="text/javascript">
$("#modal_unit").change(function(){
$("#modal_width").val('');
$("#modal_height").val('');
$("#modal_kg").val('');
if($(this).prop("checked") == true){
/* If KG is true, hide width and height */
$('#sqm').hide();
$('#kgs').show();
}else{
/* If KG is false, show width and height */
$('#kgs').hide();
$('#sqm').show();
}
makeRowCalculation()
});
$('#country-codes li a').on('click', function() {
$('#country-codes button span.value').text($(this).attr('value'));
$('input[id="country_code"]').val($(this).attr('value'));
});
$("#modal_discount").keyup(function() {
$(this).blur();
$(this).focus();
});
$("#modal_discount").change(function(){
var itemPrice = $('#modal_price').val();
var itemPricePercentage = $('#modal_discount').val();
var discount_amount = (itemPrice) * (itemPricePercentage) / 100;
$("#modal_discount_amount").val(discount_amount.toFixed(2));
makeRowCalculation();
});
$("#modal_discount_amount").keyup(function() {
$(this).blur();
$(this).focus();
});
$("#modal_discount_amount").change(function(){
var itemPrice = $('#modal_price').val();
var itemDiscountPrice = $('#modal_discount_amount').val();
var percentage = ((itemDiscountPrice)/ (itemPrice)) * 100;
$("#modal_discount").val(percentage.toFixed(2));
makeRowCalculation();
});
function setDate() {
let date = new Date($("#collection_date").val() + "Z");
if ($('#order_type').prop("checked"))
date.setDate(date.getDate() + 1)
else {
date.setDate(date.getDate() + 2)
}
$("#delivery_date").val(date.toJSON().slice(0, 16));
}
$(function () {
$('.modal-number').on('click', function () {
makeRowCalculation()
})
})
let modalSelectedItem, oldModalSelectedItem, modalSelectedFolding, modalSelectedType;
let orderItems = [];
let zones = [];
let promoCode = null;
let addonsList = [];
let retail = true;
let allAddons = @json($addons);
function walkInToggle() {
let walkin = $('#walk_in').is(':checked');
if (walkin) {
let address = @json(\App\Models\StaticInfo::query()->first()->address??'{}');
$('#collection_address').val(JSON.stringify(address));
$('#collection_address_show').val(address.name);
$('#delivery_address').val(JSON.stringify(address));
$('#delivery_address_show').val(address.name);
let now = new Date();
now.setHours(now.getHours() + 3);
$("#collection_date").val(now.toJSON().slice(0, 16));
let date = new Date($("#collection_date").val() + "Z");
if ($('#order_type').prop("checked"))
date.setDate(date.getDate() + 1)
else {
date.setDate(date.getDate() + 2)
}
$("#delivery_date").val(date.toJSON().slice(0, 16));
} else {
$('#collection_address_show').val('');
$('#collection_address').val('');
$('#delivery_address_show').val('');
$('#delivery_address').val('');
}
}
function checkPhone() {
$('#user_no_result').hide();
let phone = $('#search_phone').val();
let countryCode = $('#country_code').val();
let formattedPhone = countryCode+phone;
$.ajax({
type: 'GET',
url: '{{route('cms.ajax.pos-check-user')}}/' + formattedPhone,
dataType: 'json',
}).done(function (result) {
$('#preferences-list').html('');
if (result.user != null) {
let user = result.user;
$('#phone').val(phone);
$('#user_id').val(user._id);
$('#name').val(user.name);
$('#email').val(user.email);
$('#name').attr('readonly', 'readonly');
$('#email').attr('readonly', 'readonly');
if (Array.isArray(user.preferences_list)) {
user.preferences_list.forEach(function (item) {
let div = '<div class="col-6">' +
item.question.name + ':';
if (item.question.type == "image") {
div += '<a href="' + item.answer + '" target="_blank">Open Image</a> <br/>';
} else {
div += JSON.stringify(item.answer) + '<br/>';
}
div += '</div>';
$('#preferences-list').append(div);
});
}
retail = !(user.is_business_acoount == true || user.is_business_account == 'true');
} else {
$('#phone').val(phone);
$('#user_id').val('');
$('#name').val('');
$('#email').val('');
$('#name').removeAttr('readonly');
$('#email').removeAttr('readonly');
$('#user_no_result').show();
}
}).fail(function (data) {
});
}
function getPreferences() {
$.ajax({
type: 'GET',
url: '{{route('cms.ajax.get-user-pre', $order->user_id??'-1')}}',
dataType: 'text',
}).done(function (result) {
if (result != null) {
$('#user_pre').html(result)
}
}).fail(function (data) {
});
}
function openPreferenceModal() {
$('#preferencesModel').modal().show();
getPreferences()
}
function getAddresses() {
let phone = $('#search_phone').val();
@if ( $order??null != null )
phone = '{{$order->user->phone}}'
@endif
$('#user_addresses').empty();
$('#user_addresses').select2({
placeholder: "{{__('Select Address')}}",
allowClear: true
});
$.ajax({
type: 'GET',
url: '{{route('cms.ajax.addresses-user')}}/' + phone,
dataType: 'json',
}).done(function (result) {
if (result.addresses != null) {
$('#user_addresses').append($('<option>', {
value: "",
text: "{{__('Select Address')}}"
}));
$.each(result.addresses, function (i, item) {
$('#user_addresses').append($('<option>', {
value: JSON.stringify(item),
text: item.name
}));
});
}
}).fail(function (data) {
});
}
function openAddressModal(input) {
$('#addressModal').modal().show();
getAddresses();
var content = $('#' + input.id.replace("_show", "")).val()
.replace('"{', '{').replace('}"', '}').split('\\').join('');
if (content !== '') {
let values = JSON.parse(content);
$('#old_content').val(JSON.stringify(values));
$('#modal_address_name').val(values.name);
$('#modal_address_area').val(values.area);
$('#modal_address_zone').val(values.zone);
$('#modal_address_building').val(values.building);
$('#modal_address_number').val(values.number);
$('#modal_address_street').val(values.street);
$('#modal_address_title').html(input.placeholder);
$('#modal_address_location').val(values.coordinates);
$('#modal_address_map').val(values.coordinates);
$('#modal_address_btn_set').data('id', input.id);
$('#modal_address_additional_info').val(values.additional_info);
} else {
$('#modal_address_name').val('');
$('#modal_address_area').val('');
$('#modal_address_zone').val('');
$('#modal_address_building').val('');
$('#modal_address_number').val('');
$('#modal_address_street').val('');
$('#modal_address_title').html(input.placeholder);
$('#modal_address_location').val('');
$('#modal_address_btn_set').data('id', input.id);
$('#modal_address_additional_info').val('');
}
}
function setAddress(btn) {
$('#error_address_message').html("")
$('#error_address_message_box').hide()
if ($(btn).data('id') != null) {
let content = ""
try {
content = JSON.parse($('#old_content').val());
} catch (e) {
}
if (content !== '') {
} else {
content = {}
}
if ($('#modal_address_name').val() == '') {
$('#error_address_message').html("Name Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_area').val() == '') {
$('#error_address_message').html("Area Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_zone').val() == '') {
$('#error_address_message').html("Zone Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_building').val() == '') {
$('#error_address_message').html("Building Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_number').val() == '') {
$('#error_address_message').html("Number Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_street').val() == '') {
$('#error_address_message').html("Street Field is required")
$('#error_address_message_box').show()
return false;
}
if ($('#modal_address_location').val() == '') {
$('#error_address_message').html("Location Field is required")
$('#error_address_message_box').show()
return false;
}
content.name = $('#modal_address_name').val();
content.area = $('#modal_address_area').val();
content.zone = $('#modal_address_zone').val();
content.building = $('#modal_address_building').val();
content.number = $('#modal_address_number').val();
content.street = $('#modal_address_street').val();
content.coordinates = $('#modal_address_location').val();
content.additional_info = $('#modal_address_additional_info').val();
$('#' + $(btn).data('id').replace("_show", '')).val(JSON.stringify(content));
$('#' + $(btn).data('id')).val($('#modal_address_name').val());
$('#addressModal').modal('toggle');
}
}
function selectAddress(select) {
if ($(select).val() !== '') {
var values = JSON.parse($(select).val());
$('#old_content').val($(select).val());
$('#modal_address_name').val(values.name);
$('#modal_address_name').prop('readonly', true);
$('#modal_address_area').val(values.area);
$('#modal_address_area').prop('readonly', true);
$('#modal_address_zone').val(values.zone);
$('#modal_address_zone').prop('readonly', true);
$('#modal_address_building').val(values.building);
$('#modal_address_building').prop('readonly', true);
$('#modal_address_number').val(values.number);
$('#modal_address_number').prop('readonly', true);
$('#modal_address_street').val(values.street);
$('#modal_address_street').prop('readonly', true);
$('#modal_address_additional_info').val(values.additional_info);
$('#modal_address_additional_info').prop('readonly', true);
try {
$('#modal_address_location').val(values.coordinates[0] + "," + values.coordinates[1]);
$('#modal_address_map').val(values.coordinates[0] + "," + values.coordinates[1]);
$('#modal_address_map').prop('readonly', true);
} catch (e) {
}
} else {
$('#modal_address_name').val('');
$('#modal_address_name').removeProp('readonly');
$('#modal_address_name').removeAttr('readonly');
$('#modal_address_area').val('');
$('#modal_address_area').removeProp('readonly');
$('#modal_address_area').removeAttr('readonly');
$('#modal_address_zone').val('');
$('#modal_address_zone').removeProp('readonly');
$('#modal_address_zone').removeAttr('readonly');
$('#modal_address_building').val('');
$('#modal_address_building').removeProp('readonly');
$('#modal_address_building').removeAttr('readonly');
$('#modal_address_number').val('');
$('#modal_address_number').removeProp('readonly');
$('#modal_address_number').removeAttr('readonly');
$('#modal_address_street').val('');
$('#modal_address_street').removeProp('readonly');
$('#modal_address_street').removeAttr('readonly');
$('#modal_address_location').val('');
$('#modal_address_location').removeProp('readonly');
$('#modal_address_location').removeAttr('readonly');
$('#modal_address_map').val('');
$('#modal_address_map').removeProp('readonly');
$('#modal_address_map').removeAttr('readonly');
$('#modal_address_additional_info').val('');
$('#modal_address_additional_info').removeProp('readonly');
$('#modal_address_additional_info').removeAttr('readonly');
}
}
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
function openItem() {
if ( !retail ) {
confirm("This account is corporate, save the order first to get the account prices");
return;
}
$('#itemModal').modal().show();
showItems()
showTypes()
drawItems()
selectType()
modalSelectedItem = null;
oldModalSelectedItem = null;
modalSelectedType = null;
modalSelectedFolding = false;
addonsList = [];
fetchAddons(null, null)
$('#modal_discount').val('');
$('#modal_discount_amount').val('');
$('#modal_custom_item').val('');
$('#modal_quantity').val('');
$('#modal_price').val('');
$('#modal_total').val('');
$('#item_note').val('');
$('#modal_image').val('');
}
function showItems(id = null) {
if ($('#custom_item_box').is(":visible")) {
$('#custom_item_box').toggle()
}
getCategoryItems(id);
$('.mc-categories').removeClass('active');
$('.mc-' + id).addClass('active');
$('.mi-items').hide();
// $('.mi-' + id).show();
modalSelectedItem = null;
modalSelectedType = null;
modalSelectedFolding = false;
$('#modal_price').val(0);
makeRowCalculation()
}
function selectCategoryItem(item) {
if ($(item).val() !== '') {
var values = JSON.parse($(item).val());
showTypes(values._id);
}
}
function getCategoryItems(category_id) {
$('#select_category').empty();
$('#select_category').select2({
placeholder: "{{ __('Select Item') }}",
allowClear: true
});
$.ajax({
type: 'GET',
url: '{{ route('cms.ajax.get_category_items') }}/' + category_id,
dataType: 'json',
}).done(function(result) {
if (result.category_items != null) {
$('#select_category').append($('<option>', {
value: "",
text: "{{ __('Select Item') }}"
}));
$.each(result.category_items, function(i, item) {
$('#select_category').append($('<option>', {
value: JSON.stringify(item),
text: item.name
}));
});
}
}).fail(function(data) {
});
}
function showTypes(id = null) {
$('.mt-type').hide()
let item = $('#item-' + id).data('value');
$('.mi-items').removeClass('active');
$('#item-' + id).addClass('active');
let expressOrder = $('#order_type').is(':checked');
if (id == null) return;
//
// if ( item.price_folding != null )
// $('.mt-folding').show()
// else
// $('.mt-folding').hide()
if (!expressOrder) {
if (item.price_p != null)
$('.mt-pressing').show()
else
$('.mt-pressing').hide()
if (item.price_pw != null)
$('.mt-press-wash').show()
else
$('.mt-press-wash').hide()
if (item.price_dc != null)
$('.mt-dry-clean').show()
else
$('.mt-dry-clean').hide()
} else {
if (item.price_p_e != null)
$('.mt-pressing').show()
else
$('.mt-pressing').hide()
if (item.price_pw_e != null)
$('.mt-press-wash').show()
else
$('.mt-press-wash').hide()
if (item.price_dc_e != null)
$('.mt-dry-clean').show()
else
$('.mt-dry-clean').hide()
}
if (item != modalSelectedItem) {
addonsList = [];
}
modalSelectedItem = item;
fetchAddons(item.addons != null ? item.addons['item'] : null,
item.addons != null ? item.addons['price'] : null)
}
function fetchAddons(addons, prices) {
$('.mi-addons').hide();
$('.mi-addons').removeClass('active');
if (addons != null)
addons.forEach(function (item) {
$('#addon-' + item).show();
$('#addon-' + item).find('.price').html('');
$('#addon-' + item).find('.price')
.html(' (' + prices[addons.indexOf(item)] + ')');
});
addonsList.forEach(function (item) {
$('#addon-' + item).addClass('active');
});
}
function toggleAddon(item) {
if ($('#addon-' + item).hasClass('active')) {
if (addonsList.includes(item)) {
addonsList = addonsList.filter(function (it) {
return it !== item
})
}
$('#addon-' + item).removeClass('active')
} else {
if (!addonsList.includes(item)) {
addonsList.push(item);
}
$('#addon-' + item).addClass('active')
}
makeRowCalculation()
}
function selectType(id = null) {
$('.mt-type').removeClass('active');
$(id).addClass('active');
if (id != null) {
modalSelectedType = $(id).data('value');
setModalPrice();
} else {
modalSelectedType = null;
}
makeRowCalculation()
}
function selectCustomItem() {
showItems();
$('#custom_item_box').toggle()
}
function setModalPrice() {
let expressOrder = $('#order_type').is(':checked');
let choice = expressOrder ? (modalSelectedType + "_e") : modalSelectedType;
let price = 0;
switch (choice) {
case 'p':
price = modalSelectedItem.price_p;
break;
case 'p_e':
price = modalSelectedItem.price_p_e;
break;
case 'pw':
price = modalSelectedItem.price_pw;
break;
case 'pw_e':
price = modalSelectedItem.price_pw_e;
break;
case 'dc':
price = modalSelectedItem.price_dc;
break;
case 'dc_e':
price = modalSelectedItem.price_dc_e;
break;
case 'c':
price = modalSelectedItem.price_c;
case 'c_e':
price = modalSelectedItem.price_c_e;
break;
}
$('#modal_price').val(price)
makeRowCalculation()
}
function makeRowCalculation() {
$('#modal_total').val(0);
$('#modal_addons').val(0);
let quantity = parseInt($('#modal_quantity').val());
if (isNaN(quantity)) return;
let price = parseFloat($('#modal_price').val());
let addonPrice = 0;
addonsList.forEach(function (ad) {
addonPrice += parseFloat(modalSelectedItem.addons['price'][modalSelectedItem.addons['item']
.indexOf(ad)]);
});
let sub_total = quantity * price;
let addons_total = quantity * addonPrice;
let discount_price = 0;
if (!isNaN($('#modal_discount').val()))
discount_price = (sub_total + addons_total) * $('#modal_discount').val() / 100;
var total = 0
var width = $('#modal_width').val();
var height = $('#modal_height').val();
var kgs = $('#modal_kg').val();
if (kgs != '') {
// When Kgs are given
total = (kgs * sub_total) + addons_total - discount_price
} else if (isNaN(width) || isNaN(height) || width == '' || height == '') {
// inside normal flow
total = (sub_total + addons_total) - discount_price
} else {
// When SqM are given
total = (width * height * sub_total) + addons_total - discount_price
}
$('#modal_total').val((total).toFixed(2))
$('#modal_addons').val((addons_total).toFixed(2))
refreshCalculation()
}
/* function makeRowCalculationAmount() {
$('#modal_total').val(0);
$('#modal_addons').val(0);
let quantity = parseInt($('#modal_quantity').val());
if (isNaN(quantity)) return;
let price = parseFloat($('#modal_price').val());
let addonPrice = 0;
addonsList.forEach(function (ad) {
addonPrice += parseFloat(modalSelectedItem.addons['price'][modalSelectedItem.addons['item']
.indexOf(ad)]);
});
let sub_total = quantity * price;
let addons_total = quantity * addonPrice;
let discount_price = 0;
if (!isNaN($('#modal_discount_amount').val()))
discount_price = $('#modal_discount_amount').val();
$('#modal_total').val(((sub_total + addons_total) - discount_price).toFixed(2))
$('#modal_addons').val((addons_total).toFixed(2))
refreshCalculation()
} */
function toggleOrderType() {
let expressOrder = $('#order_type').is(':checked');
orderItems.forEach(function (item) {
item.express_order = expressOrder;
if (item.item._id !== 0) {
let choice = expressOrder ? (item.item_type + "_e") : item.item_type;
let price = 0;
switch (choice) {
case 'p':
price = item.item.price_p;
break;
case 'p_e':
price = item.item.price_p_e;
break;
case 'pw':
price = item.item.price_pw;
break;
case 'pw_e':
price = item.item.price_pw_e;
break;
case 'dc':
price = item.item.price_dc;
break;
case 'dc_e':
price = item.item.price_dc_e;
break;
}
item.price = price;
item.sub_total = item.quantity * price;
item.discount_total = item.quantity * price * item.discount / 100;
item.folding_total = item.quantity * item.item.price_folding;
item.total = item.sub_total + item.folding_total - item.discount_total;
}
})
drawItems()
}
async function setItem() {
if (isNaN($('#modal_quantity').val())) return;
let expressOrder = $('#order_type').is(':checked');
let item = {};
try {
item = JSON.parse(JSON.stringify(oldModalSelectedItem));
} catch (e) {
}
if (item == null || item == undefined)
item = {};
let quantity = parseInt($('#modal_quantity').val());
let discountPer = parseFloat(isNaN($('#modal_discount').val()) || $('#modal_discount').val() == '' || $('#modal_discount').val() == undefined? 0 : $('#modal_discount').val());
let discountAmt = parseFloat(isNaN($('#modal_discount_amount').val()) || $('#modal_discount_amount').val() == '' || $('#modal_discount_amount').val() == undefined? 0 : $('#modal_discount_amount').val());
let price = parseFloat(isNaN($('#modal_price').val() || $('#modal_price').val() == '') ? 0 : $('#modal_price').val());
if ( quantity == 0 || price == 0)return;
let addonsPrice = 0;
addonsList.forEach(function (ad) {
addonsPrice += parseFloat(modalSelectedItem.addons['price'][modalSelectedItem.addons['item']
.indexOf(ad)]);
});
if (modalSelectedItem != null) {
item.quantity = quantity;
item.price = price;
item.item_type = modalSelectedType;
item.folding = 0;
item.express_order = expressOrder;
item.item = modalSelectedItem;
item.addons_total = quantity * addonsPrice;
item.sub_total = quantity * price;
item.folding_total = 0;
let total = (item.sub_total + item.addons_total);
item.discount_amount = discountAmt;
item.discount_total = (total * discountPer / 100);
item.discount = discountPer;
item.total = total - item.discount_total;
item.addons = addonsList;
item.item_note = $('#item_note').val();
orderItems = orderItems.filter(function (ob, index, arr) {
return JSON.stringify(ob) !== JSON.stringify(oldModalSelectedItem);
});
} else {
if ($('#modal_custom_item').val() == '') return;
item.quantity = quantity;
item.discount = discount;
item.price = !isNaN(price) ? price : 0;
item.item_type = null;
item.folding = 0;
item.express_order = expressOrder;
item.item = {
_id: 0,
name: $('#modal_custom_item').val(),
price: $('#modal_price').val(),
};
item.addons_total = 0;
item.sub_total = quantity * price;
item.discount_total = quantity * price * discount / 100;
item.folding_total = 0;
item.total = item.sub_total + item.folding_total - item.discount_total;
item.addons = addonsList;
item.item_note = $('#item_note').val();
}
try {
for (let i = 0; i < $('#modal_image')[0].files.length; i++) {
let file = $('#modal_image')[0].files.item(i);
var f = await getBase64(file);
if (item.images == undefined) item.images = [];
item.images.push(f);
}
} catch (e) {
}
orderItems.push(item)
drawItems()
modalSelectedItem = null;
oldModalSelectedItem = null;
modalSelectedType = null;
modalSelectedFolding = false;
$('#modal_discount').val('');
$('#modal_discount_amount').val('');
$('#modal_custom_item').val('');
$('#modal_quantity').val('');
$('#modal_price').val('');
$('#modal_addons').val('');
$('#modal_total').val('');
showTypes()
$('#itemModal').modal('toggle');
}
function drawItems() {
$('#items-list').html('');
let expressOrder = $('#order_type').is(':checked');
orderItems.forEach(function (item) {
let type = '';
let choice = expressOrder ? (item.item_type + "_e") : item.item_type;
switch (choice) {
case 'p':
type = 'Pressing';
break;
case 'p_e':
type = 'Pressing';
break;
case 'pw':
type = 'Pressing & Wash';
break;
case 'pw_e':
type = 'Pressing & Wash';
break;
case 'dc':
type = 'Dry Clean';
break;
case 'dc_e':
type = 'Dry Clean';
break;
}
let itemrow = randomString(10);
let addonsString = ''
if (item.addons != null)
item.addons.forEach(function (it) {
allAddons.forEach(function (itt) {
if (itt._id == it) {
let p = item.item.addons['price'][item.item.addons['item']
.indexOf(it)] * item.quantity;
addonsString += (addonsString == '' ? '' : ', ') + itt.name + ' (' + p + ')';
}
})
});
let div = '<div class="row single-item">' +
'<input value="" id="' + itemrow + '" type="hidden"/>';
div += '<label class="col-6"><strong>' + item.item.name + ' [' + type + ']</strong></label>';
div += '<label class="col-6">( Price ) <strong>' + item.price + '</strong> X (QTY) <strong>' + item.quantity + '</strong> = <strong>' + item.total.toFixed(2) + '</strong></label>';
div += '<label class="col-6"> Addons: <strong>' + addonsString + '</strong></label>';
div += '<label class="col-2"> Discount Amount: <strong>' + item.discount_total.toFixed(2) + ' (' + (item.discount==undefined?0: item.discount) + '%)</strong></label>';
div += '<div class="col-1 btn btn-danger" onclick="deleteItem(this)"><i class="fa fa-trash"></i></div>';
div += '<div class="col-1 ml-1 btn btn-info" onclick="updateItem(this)"><i class="fa fa-edit"></i></div>';
@if (isset($order) and $order != null )
div += '<div class="col-1 ml-1 btn btn-success" onclick="printTags(this)"><i class="fa fa-tags"></i></div>';
@endif
div += '<label class="col-12"> Note: <strong>' + (item.item_note != '' &&
item.item_note != undefined ? item.item_note : '') + '</strong></label>';
div += '<label class="col-12"> Zone(s): <strong>' + (zones != undefined &&
zones[item.item._id] != undefined ? zones[item.item._id] : '') + '</strong></label>';
if (item.images != '' &&
item.images != undefined) {
item.images.forEach(function (it) {
div += '<a data-fancybox href="{{asset("")}}' + it + '" style="margin-inline-start:10px"> Image</a>';
})
}
div += '<br/></div>';
$('#items-list').append(div);
$('#' + itemrow).val(JSON.stringify(item));
})
refreshCalculation()
}
function deleteItem(event) {
let item = $(event).closest('.single-item').find('input').val();
orderItems = orderItems.filter(function (ob, index, arr) {
return JSON.stringify(ob) !== item;
});
drawItems()
}
function updateItem(event) {
oldModalSelectedItem = JSON.parse($(event).closest('.single-item').find('input').val());
$('#itemModal').modal().show();
$('#sqm').hide();
showItems(oldModalSelectedItem.item.category_id)
showTypes(oldModalSelectedItem.item._id)
selectType($('#itemModal').find('button[data-value="' + oldModalSelectedItem.item_type + '"]'))
$('#modal_discount').val(oldModalSelectedItem.discount);
$('#modal_discount_amount').val(oldModalSelectedItem.discount_amount);
if (oldModalSelectedItem.item._id == 0) {
selectCustomItem()
}
addonsList = oldModalSelectedItem.addons;
fetchAddons(oldModalSelectedItem.item.addons != null ? oldModalSelectedItem.item.addons['item'] : null,
oldModalSelectedItem.item.addons != null ? oldModalSelectedItem.item.addons['price'] : null)
$('#modal_custom_item').val(oldModalSelectedItem.item.name);
$('#modal_quantity').val(oldModalSelectedItem.quantity);
$('#modal_price').val(oldModalSelectedItem.price);
$('#modal_total').val(oldModalSelectedItem.total);
$('#modal_addons').val(oldModalSelectedItem.addons_total);
$('#item_note').val(oldModalSelectedItem.item_note == undefined ? '' : oldModalSelectedItem.item_note);
}
@if (isset($order) and $order != null )
$('#collection_address').val('{!! json_encode($order->collection_address) !!}');
$('#collection_address_show').val('{{$order->collection_address['name']}}');
$('#collection_date').val('{{str_replace(' ','T',$order->collection_date)}}');
$('#delivery_date').val('{{str_replace(' ','T',$order->delivery_date)}}');
if ('{{$order->express_order}}' === '1')
$('#order_type').attr('checked', 'checked');
$('#delivery_address').val('{!! json_encode($order->delivery_address) !!}');
$('#delivery_address_show').val('{{$order->delivery_address['name']}}');
$('#phone').val('{{$order->user->phone??''}}');
$('#name').val('{{$order->user->name??''}}');
$('#email').val('{{$order->user->email??''}}');
$('#alias_name').val('{{$order->user->alias_name??''}}');
$('#collection_note').html('{{$order->collection_note??''}}');
$('#delivery_note').html('{{$order->delivery_note??''}}');
$('#user_note').html("{!! str_replace(array("\r", "\n"), ' ', $order->user->user_note??'') !!} ");
$('#user_id').val('{{$order->user->_id??''}}');
orderItems = @json($order->orderDetails);
zones = @json($order->zones??'{}');
drawItems()
@endif
function refreshCalculation(type) {
let promoCodePercentage = parseFloat('{{$order->promo->percentage??0}}');
let deliveryCharge = parseFloat($('#delivery_charge').val() == '' || isNaN($('#delivery_charge').val()) ? 0 : $('#delivery_charge').val());
let discountPercentage = parseFloat($('#inv_discount_percentage').val() == '' || isNaN($('#inv_discount_percentage').val()) ? 0 : $('#inv_discount_percentage').val());
let discountAmount = parseFloat($('#inv_discount_amount').val() == '' || isNaN($('#inv_discount_amount').val()) ? 0 : $('#inv_discount_amount').val());
let sub_total = 0;
let addons = 0;
// For percentage, item.discount_amount needs to be taken into account
orderItems.forEach(function (item) {
sub_total += item.sub_total * (100 - (item.discount == undefined ? 0 : item.discount)) / 100;
addons += item.addons_total * (100 - (item.discount == undefined ? 0 : item.discount)) / 100;
});
// Calculate discount based on either percentage or amount
let discount;
if (discountAmount > 0) {
discount = discountAmount;
discountPercentage = (discountAmount / (sub_total + addons)) * 100;
$('#inv_discount_percentage').val(discountPercentage.toFixed(2));
}
else if (!discountAmount && type == "amount"){
discountPercentage = 0
discount = 0
$('#inv_discount_percentage').val(discountPercentage.toFixed(2));
}
else {
discount = (sub_total + addons) * discountPercentage / 100;
}
let promo_discount = (sub_total + addons) * promoCodePercentage / 100;
let total = (sub_total + addons) - discount - promo_discount + deliveryCharge;
$('#inv_total').val(total.toFixed(2));
$('#inv_discount').val(discount.toFixed(2));
$('#inv_promo').val(promo_discount.toFixed(2));
$('#inv_addons').val(addons.toFixed(2));
$('#inv_sub_total').val(sub_total.toFixed(2));
}
/* function refreshCalculation(){
let promoCodePercentage = parseFloat('{{$order->promo->percentage??0}}');
let deliveryCharge = parseFloat( $('#delivery_charge').val() == '' || isNaN($('#delivery_charge').val()) ? 0: $('#delivery_charge').val());
let discountPercentage = parseFloat($('#inv_discount_percentage').val() == '' || isNaN($('#inv_discount_percentage').val()) ? 0: $('#inv_discount_percentage').val());
let sub_total = 0;
let addons = 0;
orderItems.forEach(function(item){
sub_total+= item.sub_total * ( 100 - item.discount ) /100;
addons += item.addons_total * ( 100 - item.discount ) /100;
})
let discount = (sub_total+addons) * discountPercentage /100;
let promo_discount = (sub_total+addons) * promoCodePercentage / 100;
let total = (sub_total+addons) - discount - promo_discount + deliveryCharge;
$('#inv_total').val( total.toFixed(2));
$('#inv_discount').val( discount.toFixed(2));
$('#inv_promo').val( promo_discount.toFixed(2));
$('#inv_addons').val( addons.toFixed(2));
$('#inv_sub_total').val( sub_total.toFixed(2));
} */
function makeAction(action, type= null) {
swal({
title: "Are you sure?",
text: "",
icon: "warning",
buttons: true,
dangerMode: true,
}).then((willDelete) => {
if (!willDelete) {
return false;
} else {
var route = $('#order_form').attr('action');
var formData = $("#order_form").serializeArray();
formData.push({name: 'action', value: action})
formData.push({name: 'payment_type', value: type})
formData.push({name: 'order_details', value: JSON.stringify(orderItems)})
console.log({formData})
$.ajax({
url: route,
type: "POST",
data: formData,
success: function (data) {
if (action == 'update' || action == 'accept') {
window.location.href = '{{route('cms.pos.order',$order->_id??'null')}}';
} else {
window.location.href = '{{route('cms.order.index')}}';
}
},
error: function (data) {
swal(
'Error!',
data.responseJSON.message,
'error'
);
}
});
}
});
}
function printReceipt() {
@if (isset($order) and $order != null)
$.ajax({
type: 'GET',
url: '{{route('cms.ajax.pos.invoice-printer', ['id' => $order->_id])}}',
dataType: 'json',
}).done(function (result) {
if (result.view != null) {
document.getElementById('printJS-div').innerHTML = result.view;
printJS({
printable: 'printJS-div',
type: 'html',
onPrintDialogClose: () => {
document.getElementById('printJS-div').innerHTML = ''
},
});
}
}).fail(function (result) {
});
@endif
}
function printInvoice() {
@if (isset($order) and $order != null)
$.ajax({
type: 'GET',
url: '{{route('ajax.pos.order.print', ['order_id' => $order->_id])}}',
dataType: 'json',
}).done(function (result) {
if (result.view != null) {
document.getElementById('printJS-div').innerHTML = result.view;
printJS({
printable: 'printJS-div',
type: 'html',
onPrintDialogClose: () => {
document.getElementById('printJS-div').innerHTML = ''
},
});
}
}).fail(function (result) {
});
@endif
}
function printTags(event = null) {
@if (isset($order) and $order != null )
let url = '{{route('cms.ajax.pos.print-tags', ['order_id' => $order->_id])}}';
if (event != null) {
let item = JSON.parse($(event).closest('.single-item').find('input').val());
url += '/' + item.item._id;
}
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
}).done(function (result) {
if (result.views != null && result.views) {
recursivePrintIndex = 0;
recursivePrint(result.views)
}
}).fail(function (data) {
});
@endif
}
var recursivePrintIndex = 0
function recursivePrint(views) {
if (views.length == recursivePrintIndex) {
recursivePrintIndex = 0
return;
}
// recursivePrintIndex++;
// printDiv(views[recursivePrintIndex]);
document.getElementById('printJS-div').innerHTML = views[recursivePrintIndex];
printJS({
printable: 'printJS-div',
type: 'html',
onPrintDialogClose: () => {
document.getElementById('printJS-div').innerHTML = ''
recursivePrintIndex++;
recursivePrint(views);
},
});
}
function printDiv(text) {
var a = window.open('', '', 'height=3cm, width=7cm');
a.document.write('<html>');
a.document.write('<body >');
a.document.write(text);
a.document.write('</body></html>');
a.document.close();
a.print();
}
function initialize() {
$('form').on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
let latitude = 0;
let longitude = 0
try {
latitude = parseFloat(document.getElementById("modal_address_location").value.split(',')[0]) || -33.8688;
longitude = parseFloat(document.getElementById("modal_address_location").value.split(',')[1]) || 151.2195;
} catch (e) {
}
const map = new google.maps.Map(document.getElementById("modal-address-map"), {
center: {lat: latitude, lng: longitude},
zoom: 13,
mapTypeId: "roadmap",
});
// Create the search box and link it to the UI element.
const input = document.getElementById("modal_address_map");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
if (places.length == 1) {
const lat = places[0].geometry.location.lat();
const lng = places[0].geometry.location.lng();
setLocationCoordinates(lat, lng);
@if (!isset($order) )
const service = new google.maps.places.PlacesService(map);
const request = {
placeId: places[0].place_id,
fields: ["ALL"],
};
service.getDetails(request, (place, status) => {
if (
status === google.maps.places.PlacesServiceStatus.OK &&
place &&
place.geometry &&
place.geometry.location
) {
fillAddress(place)
}
});
@endisset
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
const icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function setLocationCoordinates(lat, lng) {
const location = document.getElementById("modal_address_location");
location.value = lat + "," + lng;
}
function fillAddress(place) {
for (elem in place.address_components) {
if (place.address_components[elem].types[0] == "route") {
$('#modal_address_street').val(place.address_components[elem].long_name)
}
if (place.address_components[elem].types[0] == "sublocality_level_1") {
$('#modal_address_area').val(place.address_components[elem].long_name)
}
if (place.address_components[elem].types[0] == "locality") {
$('#modal_address_zone').val(place.address_components[elem].long_name)
}
}
$('#modal_address_additional_info').val(place.formatted_address)
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
</script>
@endpush
@endonce
Editor is loading...
Leave a Comment