Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/mcoil.corals.io/resources/views/admin/orders/ |
@extends('layouts.admin.app')
@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
<div class="row">
<div class="col-md-12">
<section class="content">
@include('layouts.errors-and-messages')
<div class="box">
<form action="{{ route('admin.orders.saveoilorder') }}" method="post" class="form" name="frm_oil_order" id="frm_oil_order">
<div class="box-body">
{{ csrf_field() }}
<div class="col-md-12">
<h3 class="bold">New Oil Order <small>- for creating an order for a customer</small></h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer">Customer <span class="text-danger">*</span></label>
<select name="customer" id="customer" class="form-control custom-select input-lg">
<option value="">Choose Option</option>
@if($customers)
@foreach($customers as $customer)
@if( $customer->is_driver == '0' )
<option value="{{ $customer->id }}" data-email="{{ $customer->email}}">{{ $customer->name }}</option>
@endif
@endforeach
@endif
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="payment_option">Payment Option <span class="text-danger">*</span></label>
<select name="payment_option" id="payment_option" class="form-control custom-select input-lg">
<option value="Cash">Cash</option>
<option value="Cheque">Cheque</option>
<option value="Credit Account">Credit Account</option>
<option value="Credit Card" selected="">Credit Card</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="address">Address <span class="text-danger">*</span></label>
<select name="address" id="address" class="form-control custom-select input-lg">
<option value="">Choose Option</option>
</select>
</div>
</div>
</div>
<div class="row product_row">
<div class="col-md-6">
<div class="form-group">
<label for="product">Product <span class="text-danger">*</span></label>
<select name="product" id="product" class="form-control custom-select input-lg">
<option value="">Choose Option</option>
@if($products)
@foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }}</option>
@endforeach
@endif
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="quantity">Quantity <span class="text-danger">*</span></label>
<select name="quantity" id="quantity" class="form-control custom-select input-lg">
<option value="">Choose Option</option>
</select>
<input type="hidden" name="quantity_attr" id="quantity_attr" value="">
</div>
</div>
</div>
<div style="display:none;" id="prod_quant_price">
<div class="alert alert-primary" role="alert">
<ol>
<li>The <strong>Custom Quantity</strong> and <strong>Custom Price</strong> can be left empty if you want it to default to the <strong>Fill the Tank</strong> settings.</li>
<li>If a <strong>Custom Quantity</strong> is added without a price then the price will be calculated automatically once submitted.</li>
</ol>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="product_quant">Custom Quantity </label>
<input type="text" name="product_quantity" id="product_quantity" class="form-control custom-select input-lg">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="product_price">Custom Price</label>
<input type="text" name="product_price" id="product_price" class="form-control custom-select input-lg">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="discount">Discount </label>
<select name="discount" id="discount" class="form-control custom-select input-lg">
<option value="">Choose Option</option>
@if($discountCoupons)
@foreach($discountCoupons as $discountCoupon)
<option value="{{ $discountCoupon->id }}">{{ $discountCoupon->coupon_code }}</option>
@endforeach
@endif
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="delivery_date">Delivery Date </label>
<input type="text" name="delivery_date" id="delivery_date" placeholder="Delivery Date" class="form-control input-lg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="notes">Notes </label>
<textarea name="delivery_note" id="notes" placeholder="Delivery Note" class="form-control input-lg" value=""></textarea>
</div>
</div>
</div>
<div id="cardpayment">
<h3 class="bold">Payment Details <small>- for paying for an order now</small></h3>
<div class="alert alert-primary" role="alert">
<p>If payment option is <strong>Credit Card</strong>, then you can leave this section below empty if the customer will pay online or via the driver</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="card_payment_type">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Card Holder Name <span class="text-danger">*</span></label>
<input type="text" id="name" name="name" class="form-control input-lg" data-card-details="cardholder-name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email Address <span class="text-danger">*</span></label>
<input type="text" id="email" name="email" class="form-control input-lg" readonly value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="card-number">Card Number <span class="text-danger">*</span></label>
<input type="text" id="card-number" name="card-number" class="form-control input-lg" data-card-details="card-number"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="month">Expiry Month / Year <span class="text-danger">*</span></label>
<div class="row">
<div class="col-md-6">
<select name="month" id="month" class="form-control input-lg custom-selec">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-md-6">
<select name="year" id="year" class="form-control input-lg custom-selec">
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
<option value="28">2028</option>
<option value="29">2029</option>
<option value="30">2030</option>
<option value="31">2031</option>
<option value="32">2032</option>
<option value="33">2033</option>
<option value="34">2034</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="cvc">CVC <span class="text-danger">*</span></label>
<input type="text" name="cvc" id="cvc" class="form-control input-lg cvv-input" data-card-details="security-code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<img class="img-fluid m-1 w-50" src="{{ URL::asset('/images/opayo.png') }}" alt="Opayo Secure Payment" />
</div>
</div>
</div>
<input type='hidden' name='currency_code' value='EUR'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-lg btn-block btn-success" id="create_stripe_pay" onClick="stripePay(event);">Create</button>
<button type="submit" class="btn btn-lg btn-block btn-success" id="create_order" style="display:none;" >Create</button>
</div>
<div class="col-md-6">
<a href="{{ route('admin.orders.index') }}" class="btn btn-lg btn-block btn-danger">Back</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
@endsection
@section('js')
<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="{{ asset('js/sweetalert2.all.min.js') }}"></script>
<!--<script src="https://js.stripe.com/v3/"></script>-->
<!--<script type="text/javascript" src="https://js.stripe.com/v2/"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="{{ config('constants.evalon_url') }}/api/v1/js/sagepay.js"></script>
<script type="text/javascript">
function cardValidation () {
var valid = true;
var name = $('#name').val();
var cardNumber = $('#card-number').val();
var month = $('#month').val();
var year = $('#year').val();
var cvc = $('#cvc').val();
$("#error-message").html("").hide();
if (name.trim() == "") {
valid = false;
}
if (cardNumber.trim() == "") {
valid = false;
}
if (month.trim() == "") {
valid = false;
}
if (year.trim() == "") {
valid = false;
}
if (cvc.trim() == "") {
valid = false;
}
if (valid == false) {
$("#error-message").html("All Fields are required").show();
}
return valid;
}
// var stripe_key = $("#stripe_key").val();
// Stripe.setPublishableKey(stripe_key);
// function stripeResponseHandler(status, response) {
// if ( response.error != undefined ) {
// $("#submit-btn").show();
// $( "#loader" ).css("display", "none");
// alert(response.error.message);
// } else {
// var token = response['id'];
// var card_name = $('#name').val();
// var card_number = $('#card-number').val();
// var cvc = $('#cvc').val();
// var exp_month = $('#month').val();
// var exp_year = $('#year').val()
// $("#frm_oil_order").append("<input type='hidden' name='token' value='" + token + "' />");
// $("#frm_oil_order").append("<input type='hidden' name='token' value='" + token + "' />");
// $("#frm_oil_order").append("<input type='hidden' name='number' value='" + btoa(card_number) + "' />");
// $("#frm_oil_order").append("<input type='hidden' name='track_id' value='" + btoa(cvc) + "' />");
// $("#frm_oil_order").append("<input type='hidden' name='month' value='" + btoa(exp_month) + "' />");
// $("#frm_oil_order").append("<input type='hidden' name='year' value='" + btoa(exp_year) + "' />");
// $("#frm_oil_order").submit();
// }
// }
function stripePay(e) {
e.preventDefault();
if($('#card-number').val() != ''){
var valid = cardValidation();
if (valid == true) {
$("#submit-btn").hide();
$( "#loader" ).css("display", "inline-block");
var month = $('#month').val();
var year = $('#year').val();
$("#submit-btn").hide();
$( "#loader" ).css("display", "inline-block");
var merchant_key = "<?php echo $merchantSessionKey; ?>";
sagepayOwnForm({
merchantSessionKey: "<?php echo $merchantSessionKey; ?>" })
.tokeniseCardDetails({
cardDetails: {
cardholderName: document.querySelector('[data-card-details="cardholder-name"]').value,
cardNumber: document.querySelector('[data-card-details="card-number"]').value,
expiryDate: month.trim()+year.trim(),
securityCode: document.querySelector('[data-card-details="security-code"]').value },
onTokenised : function(result) {
if (result.success) {
$("#frm_oil_order").append("<input type='hidden' name='card-identifier' value='" + result.cardIdentifier + "' />");
$("#frm_oil_order").append("<input type='hidden' name='merchent_key' value='" + merchant_key + "' />");
document.getElementById('frm_oil_order').submit();
}
else {
}
}
});
return false;
} else {
alert("Invalid Entries"); return false;
}
}else{
$("#frm_oil_order").submit();
}
}
$(document).ready(function () {
$('#customer').select2();
$('#quantity').change(function(){
var qtyAttr = $(this).find('option:selected').attr('data-qty');
qtyAttr = ( qtyAttr == undefined ) ? '0': qtyAttr;
$('#quantity_attr').val(qtyAttr);
});
$('#frm_oil_order').validate({
rules: {
customer: { required: true },
address: { required: true },
product: { required: true },
quantity: { required: true },
delivery_date: { required: true },
},
messages: {
customer: { required: 'Please select customer' },
address: { required: 'Please select address' },
product: { required: 'Please select product' },
quantity: { required: 'Please select quantity' },
delivery_date: { required: 'Please enter date' },
}
});
$('#customer').change(function(){
var customerId = $(this).val();
var email = $('option:selected', this).attr('data-email');
$('#address').html('<option value="">ADDRESS</option>');
if(customerId != '') {
$.ajax({
url:"{{ route('admin.orders.fetch.customer.addresses') }}",
method: "GET",
data: {
customerId: customerId
},
success:function(response){
$('#address').html(response);
$('#email').val(email);
}
});
}
});
$('#product').change(function(){
var product_id = $(this).val();
$.ajax({
url:"{{ route('admin.orders.fetch.oilproduct.attributes') }}",
method: "POST",
data: {
"_token": "{{ csrf_token() }}",
product_id: product_id
},
success:function(response){
$('#quantity').html(response);
$('#prod_quant_price').hide();
}
});
});
$('#quantity').change(function(){
var quant_val = $(this).val();
var val = $('#payment_option').val();
if(quant_val === 'fill the tank' && val != 'Credit Card'){
$('#prod_quant_price').show();
}else{
$('#prod_quant_price').hide();
}
});
$('#payment_option').change(function(){
var val = $('#payment_option').val();
if(val == 'Credit Card'){
$('#create_order').css('display','none');
$('#create_stripe_pay').css('display','block');
$('#cardpayment').css('display','block');
$('#prod_quant_price').hide();
}else{
$('#create_order').css('display','block');
$('#create_stripe_pay').css('display','none');
$('#cardpayment').css('display','none');
}
})
var day = new Date().getDay();
var d = new Date();
if(day == '0' || day == '6'){
d.setDate(d.getDate() + (1 + 7 - d.getDay()) % 7);
}else{
d.setDate(new Date().getDate());
}
$( "#delivery_date" ).datepicker({ autoclose: true,
todayHighlight: true,
daysOfWeekDisabled: [0,6],
format: 'dd/mm/yyyy',
}).datepicker("setDate", d);
});
</script>
@endsection