@extends('ShopFrontend.Layouts.layout')
@section('title')
Checkout
@endsection
@section('body_classes')
catalog-product-view catalog-view_op1 page-order
@endsection
@section('main')
<!-- MAIN -->
<main class="site-main">
<div class="columns container">
<!-- Block Breadcrumb-->
<ol class="breadcrumb no-hide">
<li><a href="#">Home </a></li>
<li class="active"> Checkout</li>
</ol><!-- Block Breadcrumb-->
<h2 class="page-heading">
<span class="page-heading-title2"> Checkout</span>
</h2>
<div class="page-content checkout-page">
{{-- <h3 class="checkout-sep">1. Checkout Method</h3>
<div class="box-border">
<div class="row">
<div class="col-sm-6">
<h4>Checkout as a Guest or Register</h4>
<p>Register with us for future convenience:</p>
<ul>
<li><label><input name="radio1" type="radio">Checkout as Guest</label></li>
<li><label><input name="radio1" type="radio">Register</label></li>
</ul>
<br>
<h4>Register and save time!</h4>
<p>Register with us for future convenience:</p>
<p><i class="fa fa-check-circle text-primary"></i> Fast and easy check out</p>
<p><i class="fa fa-check-circle text-primary"></i> Easy access to your order history and status
</p>
<button class="button">Continue</button>
</div>
<div class="col-sm-6">
<h4>Login</h4>
<p>Already registered? Please log in below:</p>
<label>Email address</label>
<input class="form-control input" type="text">
<label>Password</label>
<input class="form-control input" type="password">
<p><a href="#">Forgot your password?</a></p>
<button class="button">Login</button>
</div>
</div>
</div> --}}
<form id="place-order" method="POST">
@csrf
<h3 class="checkout-sep">1. Billing Infomations</h3>
<div class="box-border">
<ul>
<li class="row">
<div class="col-sm-6">
<label for="first_name" class="required">First Name</label>
<input class="input form-control" name="first_name" id="first_name" type="text">
</div>
<div class="col-sm-6">
<label for="last_name" class="required">Last Name</label>
<input name="last_name" class="input form-control" id="last_name" type="text">
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="company_name">Company Name</label>
<input name="company_name" class="input form-control" id="company_name" type="text">
</div>
<div class="col-sm-6">
<label for="email_address" class="required">Email Address</label>
<input class="input form-control" name="email_address" id="email_address"
type="text">
</div>
</li>
<li class="row">
<div class="col-xs-12">
<label for="address" class="required">Address</label>
<input class="input form-control" name="address" id="address" type="text">
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="city" class="required">City</label>
<input class="input form-control" name="city" id="city" type="text">
</div>
<div class="col-sm-6">
<label class="required">State/Province</label>
<select class="input form-control" name="state">
<option value="Alabama">Alabama</option>
<option value="Illinois">Illinois</option>
<option value="Kansas">Kansas</option>
</select>
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="postal_code" class="required">Zip/Postal Code</label>
<input class="input form-control" name="postal_code" id="postal_code" type="text">
</div>
<div class="col-sm-6">
<label class="required">Country</label>
<select class="input form-control" name="country">
<option value="USA">USA</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Argentina">Argentina</option>
<option value="Canada">Canada</option>
</select>
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="telephone" class="required">Telephone</label>
<input class="input form-control" name="telephone" id="telephone" type="text">
</div>
<div class="col-sm-6">
<label for="fax">Fax</label>
<input class="input form-control" name="fax" id="fax" type="text">
</div>
</li>
{{-- <li class="row">
<div class="col-sm-6">
<label for="password" class="required">Password</label>
<input class="input form-control" name="password" id="password" type="password">
</div>
<div class="col-sm-6">
<label for="confirm" class="required">Confirm Password</label>
<input class="input form-control" name="confirm" id="confirm" type="password">
</div>
</li> --}}
{{-- <li>
<button class="button">Continue</button>
</li> --}}
</ul>
</div>
<h3 class="checkout-sep">2. Shipping Information</h3>
<div class="box-border">
<ul>
<li class="row">
<div class="col-sm-6">
<label for="first_name_1" class="required">First Name</label>
<input class="input form-control" name="first_name_1" id="first_name_1"
type="text">
</div>
<div class="col-sm-6">
<label for="last_name_1" class="required">Last Name</label>
<input class="input form-control" name="last_name_1" id="last_name_1"
type="text">
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="company_name_1">Company Name</label>
<input class="input form-control" name="company_name_1" id="company_name_1"
type="text">
</div>
<div class="col-sm-6">
<label for="email_address_1" class="required">Email Address</label>
<input class="input form-control" name="email_address_1" id="email_address_1"
type="text">
</div>
</li>
<li class="row">
<div class="col-xs-12">
<label for="address_1" class="required">Address</label>
<input class="input form-control" name="address_1" id="address_1" type="text">
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="city_1" class="required">City</label>
<input class="input form-control" name="city_1" id="city_1" type="text">
</div>
<div class="col-sm-6">
<label class="required">State/Province</label>
<div class="custom_select">
<select class="input form-control" name="state1">
<option value="Alabama">Alabama</option>
<option value="Illinois">Illinois</option>
<option value="Kansas">Kansas</option>
</select>
</div>
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="postal_code_1" class="required">Zip/Postal Code</label>
<input class="input form-control" name="postal_code_1" id="postal_code_1"
type="text">
</div>
<div class="col-sm-6">
<label class="required">Country</label>
<div class="custom_select">
<select class="input form-control" name="country1">
<option value="USA">USA</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Argentina">Argentina</option>
<option value="Canada">Canada</option>
</select>
</div>
</div>
</li>
<li class="row">
<div class="col-sm-6">
<label for="telephone_1" class="required">Telephone</label>
<input class="input form-control" name="telephone_1" id="telephone_1"
type="text">
</div>
<div class="col-sm-6">
<label for="fax_1">Fax</label>
<input class="input form-control" name="fax_1" id="fax_1" type="text">
</div>
</li>
</ul>
{{-- <button class="button">Continue</button> --}}
</div>
<h3 class="checkout-sep">3. Shipping Method</h3>
<div class="box-border">
<ul class="shipping_method">
<li>
<p class="subcaption bold">Free Shipping</p>
<label for="radio_button_3"><input checked="" name="shipping_price"
id="radio_button_3" type="radio" value="0">Free $0</label>
</li>
<li>
<p class="subcaption bold">Free Shipping</p>
<label for="radio_button_4"><input name="radio_3" id="shipping_price" type="radio"
value="5">
Standard Shipping $5.00</label>
</li>
</ul>
{{-- <button class="button">Continue</button> --}}
</div>
<h3 class="checkout-sep">4. Payment Information</h3>
<div class="box-border">
<ul>
<li>
<label for="radio_button_5"><input checked="" name="payment_method"
id="radio_button_5" type="radio" value="cash"> Check / Money order</label>
</li>
<li>
<label for="radio_button_6"><input name="payment_method" id="radio_button_6"
value="card" type="radio"> Credit
card (saved)</label>
</li>
</ul>
{{-- <button class="button">Continue</button> --}}
</div>
<div id="card-details" class="box-border" style="display: none;">
<div id="card-element"></div>
<div id="card-errors" role="alert"></div>
</div>
<h3 class="checkout-sep">5. Order Review</h3>
<div class="box-border">
<div class="table-responsive">
<table class="table table-bordered cart_summary">
<thead>
<tr>
<th class="cart_product">Product</th>
<th>Description</th>
<th>Avail.</th>
<th>Unit price</th>
<th>Qty</th>
<th>Total</th>
<th class="action"><i class="fa fa-trash-o"></i></th>
</tr>
</thead>
<tbody>
@php $total = 0; @endphp
@if (count($cartItem) > 0)
@foreach ($cartItem as $row)
@php
$details = $row->item_details;
$unitPrice = is_numeric($details['price']) ? $details['price'] : 0;
$lineTotal = $unitPrice * $row->quantity;
$total += $lineTotal;
@endphp
<tr class="cart-row-{{ $row->id }}">
<td class="cart_product">
<a href="#">
<img src="{{ $details['image'] }}" alt="Item">
</a>
</td>
<td class="cart_description">
<p class="product-name">{{ $details['title'] }}</p>
</td>
<td class="cart_avail">
<span class="label label-success">
{{ $row->product->stock_condition ?? 'Available' }}
</span>
</td>
<td class="price" id="new-price-{{ $row->id }}"
data-val="{{ $unitPrice }}">
<span>{{ is_numeric($details['price']) ? number_format($unitPrice, 2) . ' $' : $details['price'] }}</span>
</td>
<td class="qty">
<div class="input-group" style="max-width:120px;">
<button type="button"
class="btn btn-outline-secondary btn-sm qty-btn"
data-id="{{ $row->id }}" data-type="minus">−</button>
<input readonly id="qty-{{ $row->id }}"
value="{{ $row->quantity }}" class="form-control text-center"
type="text" style="width:50px; padding:0 5px;">
<button type="button"
class="btn btn-outline-secondary btn-sm qty-btn"
data-id="{{ $row->id }}" data-type="plus">+</button>
</div>
</td>
<td class="price" id="ind-total-{{ $row->id }}">
<span>{{ number_format($lineTotal, 2) }} $</span>
</td>
<td class="action">
<a href="javascript:void(0);" class="delete-cart"
data-id="{{ $row->id }}">Delete item</a>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="7" class="text-center"><strong>Cart is Empty</strong></td>
</tr>
@endif
</tbody>
<tfoot>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="3">Total products (tax incl.)</td>
<td colspan="2" class="net-total">{{ number_format($total, 2) }} $</td>
</tr>
<tr>
<td colspan="3"><strong>Total</strong></td>
<td colspan="2" class="net-total" id="net-total"
data-val="{{ $total }}">
<strong>{{ number_format($total, 2) }} $</strong>
</td>
</tr>
</tfoot>
</table>
@if (count($cartItem) > 0)
<button class="button pull-right place-order" type="submit">Place Order</button>
@endif
</div>
</div>
</form>
</div>
</div>
</main><!-- end MAIN -->
@endsection
@section('script')
<script src="https://js.stripe.com/v3/"></script>
<script>
(function($) {
"use strict";
$(document).ready(function() {
// ===== Stripe Setup =====
const stripe = Stripe("{{ config('services.stripe.key') }}"); // Publishable key
const elements = stripe.elements();
let cardMounted = false;
let cardElement;
function mountCard() {
if (!cardMounted) {
cardElement = elements.create('card', {
hidePostalCode: true,
style: {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#a0aec0'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
}
});
cardElement.mount('#card-element');
cardMounted = true;
}
}
// ===== Toggle Card Details =====
function toggleCardDetails() {
const selected = $('input[name="payment_method"]:checked').val();
if (selected === 'card') $('#card-details').slideDown(300, mountCard);
else $('#card-details').slideUp(300);
}
toggleCardDetails();
$(document).on('change', 'input[name="payment_method"]', toggleCardDetails);
// ===== Form Validation =====
function validateForm() {
let valid = true;
// Clear previous errors
$('.input').removeClass('error');
$('.error-msg').remove();
// Fields to validate
const requiredFields = [
'#first_name', '#last_name', '#email_address', '#address', '#city', '#postal_code',
'#telephone',
'#first_name_1', '#last_name_1', '#email_address_1', '#address_1', '#city_1',
'#postal_code_1', '#telephone_1',
'select[name="state"]', 'select[name="country"]', 'select[name="state1"]',
'select[name="country1"]'
];
requiredFields.forEach(function(selector) {
const field = $(selector);
if (field.length && (field.val() === '' || field.val() === null)) {
valid = false;
field.addClass('error');
field.after(
'<span class="error-msg" style="color:red;font-size:12px;">This field is required</span>'
);
}
});
// Email validation
['#email_address', '#email_address_1'].forEach(function(sel) {
const val = $(sel).val();
if (val && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
valid = false;
$(sel).addClass('error');
$(sel).after(
'<span class="error-msg" style="color:red;font-size:12px;">Invalid email</span>'
);
}
});
return valid;
}
// ===== Form Submission =====
$('#place-order').submit(function(event) {
event.preventDefault();
const form = $(this);
if (!validateForm()) {
$('html, body').animate({
scrollTop: $(".error").first().offset().top - 100
}, 500);
return false;
}
const paymentMethod = $('input[name="payment_method"]:checked').val();
if (paymentMethod === 'card') {
stripe.createToken(cardElement).then(function(result) {
if (result.error) {
$('#card-errors').text(result.error.message);
} else {
$('<input>').attr({
type: 'hidden',
name: 'stripeToken',
value: result.token.id
}).appendTo(form);
submitOrder(form);
}
});
} else {
submitOrder(form);
}
});
function submitOrder(form) {
$.ajax({
url: '{{ route('orders.store') }}',
type: 'POST',
data: form.serialize(),
dataType: 'json',
success: function(response) {
Swal.fire({
title: '✅ Order Placed Successfully!',
html: `
<p>Your order has been created successfully.</p>
<p><strong>Order Total:</strong> $${response.total}</p>
`,
icon: 'success',
confirmButtonText: 'OK'
// confirmButtonText: 'Go to Orders',
// footer: '<a href="/orders">View all your orders</a>'
}).then((result) => {
if (result.isConfirmed) {
// window.location.href = '/orders';
window.location.reload();
}
});
},
error: function(xhr) {
let msg = 'Failed to place order. Please try again later.';
if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON
.message;
Swal.fire({
title: '❌ Failed!',
text: msg,
icon: 'error',
confirmButtonText: 'OK'
});
}
});
}
// // ===== Quantity +/- buttons =====
// window.cartQuantity = function(productId, type) {
// let qtyInput = $('#qty-' + productId);
// let current = parseInt(qtyInput.val());
// if (type === 'plus') current++;
// else if (type === 'minus' && current > 1) current--;
// qtyInput.val(current);
// let price = parseFloat($('#new-price-' + productId).data('val'));
// $('#ind-total-' + productId + ' span').text((price * current).toFixed(2) + ' $');
// // Update net total
// let netTotal = 0;
// $('td.price span').each(function() {
// let val = parseFloat($(this).text());
// if (!isNaN(val)) netTotal += val;
// });
// $('#net-total strong').text(netTotal.toFixed(2) + ' $');
// $('.net-total').data('val', netTotal.toFixed(2));
// };
// // ===== Delete cart item =====
// $(document).on('click', '.delete-cart', function() {
// const id = $(this).data('id');
// $('.cart-row-' + id).remove();
// });
});
})(jQuery);
</script>
@endsection