PK
@extends('frontend.layouts.master')
@section('title','Checkout page')
@section('main-content')
<!-- Breadcrumbs -->
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-12">
<div class="bread-inner">
<ul class="bread-list">
<li><a href="{{route('home')}}">Home<i class="ti-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0)">Checkout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Breadcrumbs -->
<!-- Start Checkout -->
<section class="shop checkout section">
<div class="container">
<div class="row">
<div class="col-lg-4">
<!-- Coupon Apply -->
<div class="single-widget">
<h2>Apply Coupon</h2>
<div class="content coupon">
<form action="{{ route('coupon-store') }}" method="POST">
@csrf
<div class="form-group">
<input type="text" name="code" class="form-control" placeholder="Enter your coupon code" required>
<button type="submit" class="btn">Apply</button>
</div>
<!-- <button type="submit" class="btn">Apply</button> -->
</form>
@if(session('coupon'))
<p style="color: green; margin-top: 10px;">
Coupon "<strong>{{ session('coupon')['code'] }}</strong>" applied!
<a href="{{ route('coupon.remove') }}" style="color: red; text-decoration: underline;">Remove</a>
</p>
@endif
</div>
</div>
</div>
</div>
<form class="form" method="POST" action="{{route('cart.order')}}" id="checkoutForm">
@csrf
<div class="row">
<div class="col-lg-8 col-12">
<div class="checkout-form">
<h2>Delivery Address</h2>
@if(auth()->user()->shippingAddresses->count())
<div id="saved-addresses" style="display: block;">
<div class="form-group">
<input type="hidden" id="selected_address_id" name="saved_address_id" value="{{ auth()->user()->shippingAddresses->where('isprimary', 2)->first()?->id ?? '' }}">
<label>Select a saved address:</label>
<ul class="saved-addresses-boxes">
@foreach(auth()->user()->shippingAddresses as $address)
<li class="address-item {{ $address->isprimary == 2 ? 'active' : '' }}"
data-address-id="{{ $address->id }}">
<div class="address-box">
<div class="user-name n_{{ $address->id }}">{{ $address->first_name }}</div>
<div class="user-email email e_{{ $address->id }}">{{ $address->email }}</div>
<div class="user-address a_{{ $address->id }}">{{ $address->address1 }}</div>
<div class="user-address a2_{{ $address->id }}">{{ $address->address2 }}</div>
<div class="user-location">
<span class="user-state s{{ $address->id }}">{{ $address->country }}</span>,
<span class="user-postcode sp_{{ $address->id }}">{{ $address->post_code }}</span>
</div>
<div class="user-contact-no cn_{{ $address->id }}">{{ $address->phone }}</div>
<button class="btn delivery-btn" type="button">
Deliver Here
</button>
<div class="bottom-actions">
<a class="edit-address-btn col-md-6 col-xs-6 updateaddres-btn" data-addid="{{ $address->id }}">
<i class="fa fa-pencil" aria-hidden="true"></i>Edit
</a>
<a class="delete-address-btn col-md-6 col-xs-6 deleteddres-btn" data-addid="{{ $address->id }}">
<i class="fa fa-times" aria-hidden="true"></i>Delete
</a>
</div>
</div>
</li>
@endforeach
</ul>
<small class="d-block mt-2">Or fill the new address below.</small>
<div style="clear:both;"></div>
</div>
</div>
@endif
<div class="form-group mt-2" id="new-address-btn">
<button type="button" class="btn add-to-cart-btn" id="add_new_address">add new address</button>
</div>
<!-- Form -->
<div id="add-new-address" class="row" style="display: none;">
<!-- <div id="add-new-address" class="row"> -->
<!-- <h2>Delivery Address</h2> -->
<div class="col-lg-12 col-md-12 col-12">
<div class="form-group text-right">
<button type="button" class="btn add-to-cart-btn btn-goback" id="go-back-btn">Go Back</button>
<!-- Add this update button (hidden by default) -->
<button type="submit" class="btn add-to-cart-btn" id="update-address-btn" style="display: none;">Update Address</button>
<!-- Keep the existing submit button (hidden when updating) -->
<button type="submit" class="btn add-to-cart-btn" id="submit-new-address">Save Address</button>
</div>
</div>
<input type="hidden" name="addId" id="addId" value="">
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>First Name<span>*</span></label>
<input type="text" name="first_name" id="first_name" placeholder="" required value="{{ auth()->user() ? auth()->user()->name : old('first_name') }}">
@error('first_name')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12" style="display: none;">
<div class="form-group">
<label>Email Address<span>*</span></label>
<input type="email" name="email" id="email" placeholder="" required value="{{ auth()->user() ? auth()->user()->email : old('email') }}">
@error('email')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>Phone Number <span>*</span></label>
<input type="number" name="phone" id="phone" placeholder="" value="{{old('phone')}}">
@error('phone')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>Address Line 1<span>*</span></label>
<input type="text" name="address1" id="address"placeholder="" value="{{old('address1')}}">
@error('address1')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>Address Line 2</label>
<input type="text" name="address2" id="address2" placeholder="" value="{{old('address2')}}">
@error('address2')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>Postal Code<span>*</span></label>
<input type="text" name="post_code" id="post_code" placeholder="" value="{{old('post_code')}}">
@error('post_code')
<span class='text-danger'>{{$message}}</span>
@enderror
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group">
<label>State<span>*</span></label>
<select name="country" class="mySelect">
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Dadra and Nagar Haveli and Daman and Diu">Dadra and Nagar Haveli and Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Ladakh">Ladakh</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
</select>
</div>
</div>
</div>
<!--/ End Form -->
</div>
</div>
<div class="col-lg-4 col-12">
<div class="order-details">
<!-- Order Widget -->
<div class="single-widget">
<h2>CART TOTALS</h2>
<div class="content">
<ul>
<li class="order_subtotal" data-price="{{Helper::totalCartPrice()}}">Cart Subtotal<span><i class="fa fa-inr" aria-hidden="true"></i>{{number_format(Helper::totalCartPrice(),2)}}</span></li>
<li class="shipping">
Shipping Cost
@php
$cartTotal = Helper::totalCartPrice();
$freeShippingThreshold = 500;
$flatShippingRate = 100;
@endphp
@if(count(Helper::shipping())>0 && Helper::cartCount()>0)
@if($cartTotal >= $freeShippingThreshold)
<span class="shipping-option">
<input type="hidden" name="shipping" id="free_shipping" value="0">
<label for="free_shipping">Free Shipping</label>
</span>
@else
<span class="shipping-options">
<div class="shipping-option">
<input type="hidden" name="shipping" id="flat_rate" value="{{ $flatShippingRate }}">
<label for="flat_rate"><i class="fa fa-inr" aria-hidden="true"></i>{{ $flatShippingRate }}</label>
</div>
</span>
<small style="display: block; color: #666; font-size: 11px; margin-top: 5px;">
Flat ₹100 shipping applied to orders below ₹500
</small>
@endif
@else
<span>Free</span>
@endif
</li>
@if(session('coupon'))
<li class="coupon_price" data-price="{{session('coupon')['value']}}">You Save<span><i class="fa fa-inr" aria-hidden="true"></i>{{number_format(session('coupon')['value'],2)}}</span></li>
@endif
@php
$total_amount = Helper::totalCartPrice();
if(session('coupon')) {
$total_amount = $total_amount - session('coupon')['value'];
}
// Add shipping cost if order is below ₹500
if($cartTotal < $freeShippingThreshold) {
$total_amount += $flatShippingRate;
}
@endphp
@if(session('coupon'))
<li class="last" id="order_total_price">Total<span><i class="fa fa-inr" aria-hidden="true"></i>{{number_format($total_amount,2)}}</span></li>
@else
<li class="last" id="order_total_price">Total<span><i class="fa fa-inr" aria-hidden="true"></i>{{number_format($total_amount,2)}}</span></li>
@endif
</ul>
</div>
</div>
<!--/ End Order Widget -->
<!-- Order Widget -->
<div class="single-widget">
<h2>Payments</h2>
<div class="content">
<div class="checkbox">
<form-group>
<input name="payment_method" type="radio" id="cod" value="cod" checked>
<label for="cod">Cash On Delivery</label><br>
<input name="payment_method" type="radio" id="paypal" value="paypal">
<label for="paypal">PayPal</label>
</form-group>
</div>
</div>
</div>
<!--/ End Order Widget -->
<!-- Payment Method Widget -->
<div class="single-widget payement">
<div class="content">
<img src="{{('backend/img/payment-method.png')}}" alt="#">
</div>
</div>
<!--/ End Payment Method Widget -->
<!-- Button Widget -->
<div class="single-widget get-button">
<div class="content">
<div class="button">
<!--<button type="submit" class="btn checkoutbtn">proceed to checkout</button>-->
</div>
</div>
</div>
<!--/ End Button Widget -->
</div>
</div>
</div>
</form>
</div>
</section>
<!--/ End Checkout -->
<!-- Start Shop Services Area -->
<section class="shop-services section home">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-12">
<!-- Start Single Service -->
<div class="single-service">
<i class="ti-rocket"></i>
<h4>Free shiping</h4>
<p>Orders over $100</p>
</div>
<!-- End Single Service -->
</div>
<div class="col-lg-3 col-md-6 col-12">
<!-- Start Single Service -->
<div class="single-service">
<i class="ti-reload"></i>
<h4>Free Return</h4>
<p>Within 30 days returns</p>
</div>
<!-- End Single Service -->
</div>
<div class="col-lg-3 col-md-6 col-12">
<!-- Start Single Service -->
<div class="single-service">
<i class="ti-lock"></i>
<h4>Sucure Payment</h4>
<p>100% secure payment</p>
</div>
<!-- End Single Service -->
</div>
<div class="col-lg-3 col-md-6 col-12">
<!-- Start Single Service -->
<div class="single-service">
<i class="ti-tag"></i>
<h4>Best Peice</h4>
<p>Guaranteed price</p>
</div>
<!-- End Single Service -->
</div>
</div>
</div>
</section>
<!-- End Shop Services -->
<!-- Start Shop Newsletter -->
<section class="shop-newsletter section">
<div class="container">
<div class="inner-top">
<div class="row">
<div class="col-lg-8 offset-lg-2 col-12">
<!-- Start Newsletter Inner -->
<div class="inner">
<h4>Newsletter</h4>
<p> Subscribe to our newsletter and get <span>10%</span> off your first purchase</p>
<form action="mail/mail.php" method="get" target="_blank" class="newsletter-inner">
<input name="EMAIL" placeholder="Your email address" required="" type="email">
<button class="btn">Subscribe</button>
</form>
</div>
<!-- End Newsletter Inner -->
</div>
</div>
</div>
</div>
</section>
<!-- End Shop Newsletter -->
@endsection
@push('styles')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
/* Ensure all form controls are visible when required */
/*input:required:invalid, select:required:invalid {
display: block !important;
}*/
/* Add this to your CSS */
#update-address-btn {
background-color: #ff9900;
margin-left: 10px;
}
#update-address-btn:hover {
background-color: #e68a00;
}
#submit-new-address {
background-color: #28a745;
margin-left: 10px;
}
#submit-new-address:hover {
background-color: #218838;
}
.is-invalid {
border-color: #dc3545 !important;
}
.text-danger {
color: #dc3545;
font-size: 0.875em;
}
.error {color: red!important;}
.saved-addresses-boxes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
padding: 0;
list-style: none;
margin: 10px 0 0;
}
.address-item {
cursor: pointer;
transition: all 0.2s ease;
}
.address-box {
border: 1px solid #e0e0e0;
padding: 15px;
/*border-radius: 8px;*/
height: 100%;
transition: all 0.2s ease;
background: #f9f9f9;
}
.address-item.active .address-box {
border-color: #4CAF50;
background-color: #f0fff0;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.delivery-btn {
margin-top: 12px;
margin-bottom: 30px;
width: 100%;
color: white;
border: none;
font-weight: 500;
transition: background 0.2s;
font-size: 14px;
border-radius: 0px;
background: #000;
color: #fff;
text-transform: uppercase;
padding: 0px 15px;
height: 42px;
line-height: 42px;
display: table;
}
.delivery-btn:hover {
background: #ed2025;
}
.user-name { font-weight:400; height:30px; line-height:30px; text-transform:uppercase; margin: 0 0 10px; border-bottom:1px solid #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-email {
color: #666;
font-size: 0.9em;
margin-bottom: 8px;
display: inline-block;
line-height: 18px;
}
.user-address {
margin-bottom: 5px;
color: #444;
}
.user-location {
color: #555;
font-size: 0.9em;
margin-bottom: 5px;
}
.user-phone {
color: #555;
font-size: 0.9em;
}
.address-item:hover .address-box {
border-color: #bbb;
}
</style>
<style>
li.shipping{
display: inline-flex;
width: 100%;
font-size: 14px;
}
li.shipping .input-group-icon {
width: 100%;
margin-left: 10px;
}
.input-group-icon .icon {
position: absolute;
left: 20px;
top: 0;
line-height: 40px;
z-index: 3;
}
/*.form-select {
height: 30px;
width: 100%;
}*/
/*.form-select .nice-select {
border: none;
border-radius: 0px;
height: 40px;
background: #f6f6f6 !important;
padding-left: 45px;
padding-right: 40px;
width: 100%;
}*/
.list li{
margin-bottom:0 !important;
}
.list li:hover{
background:#F7941D !important;
color:white !important;
}
/*.form-select .nice-select::after {
top: 14px;
}*/
.shop.checkout .coupon form{}
.shop.checkout .coupon form input {
width: 220px;
display: inline-block;
height: 48px;
color: #333;
padding: 0px 20px;
border: none;
box-shadow: 0px 0px 5px #0000000a;
}
.shop.checkout .coupon form .btn {
display: inline-block;
height: 48px;
border: navajowhite;
margin-left: 4px;
background: transparent;
color: #fff;
background: #000;
box-shadow: 0px 0px 5px #00000012;
}
.shop.checkout .coupon form .btn:hover{
background:#ed2025;
color:#fff;
}
</style>
<style>
.saved-addresses-boxes { padding:0px 15px; }
.saved-addresses-boxes ul { margin:0px -15px; }
.saved-addresses-boxes ul li { float:left; width:33.33%; padding:0px 10px; margin-bottom: 15px; }
.saved-addresses-boxes ul li.active .address-box{ border-color: #000; }
.saved-addresses-boxes ul li.active .my-address-btn { background: #000; color: #fff !important; }
.bottom-actions { left:0px; width:100%; bottom:0px; height:40px; border-top:#e5e5e5 solid 1px; display: flex;}
.edit-address-btn { border-right:#e5e5e5 solid 1px; height:40px; }
.saved-addresses-boxes ul li .address-box { padding:15px; min-height:300px; padding-bottom:40px; width:100%; border: 1px solid #e5e5e5; text-transform: capitalize; color:#333;
position:relative; }
.saved-addresses-boxes ul li .address-box .user-name { font-weight:400; height:30px; line-height:30px; text-transform:uppercase; margin: 0 0 10px; border-bottom:1px solid #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delete-address-btn { display:block; text-align:center; line-height:30px; font-size:12px; height:40px; line-height:40px;
color:#5d5d5d; cursor:pointer; }
.delete-address-btn:hover, .delete-address-btn:focus, .delete-address-btn:active { color:#d9534f; }
.edit-address-btn:hover, .edit-address-btn:focus, .edit-address-btn:active { color:#d9534f; }
.edit-address-btn { display:block; text-align:center; line-height:30px; font-size:12px; height:40px; line-height:40px;
color:#5d5d5d; cursor:pointer; }
.edit-address-btn .fa-pencil, .delete-address-btn .fa-times{ padding-right:5px}
/*.edit-address-btn:hover, .delete-address-btn:focus, .delete-address-btn:active { background-color:#5d5d5d; color:#fff }*/
.user-address{max-height:55px; /*overflow:hidden;*/}
.user-address, .user-state { /*display:inline-block;*/ font-size:12px; line-height:18px; }
.user-city { font-size:12px; line-height:18px; }
.user-pincode { font-size:12px;}
.user-pincode span { font-weight:600; }
.user-contact-no { font-size:12px; padding: 8px 0px; margin: 5px 0px 15px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.user-contact-no span { font-weight:600; }
.my-address-btn { text-transform:uppercase; border-radius:0px; width:100% }
.my-address-btn:hover, .my-address-btn:focus, .my-address-btn:active { background:#5d5d5d; color:#fff; }
</style>
<style>
/*.address-item.active {
border: 2px solid #4CAF50;
}
.checkoutbtn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.delivery-btn {
transition: all 0.3s ease;
}*/
.nice-select,
.nice-select.open .list {
width: 100%;
width: 325px;
border-radius: 8px;
}
.nice-select .list::-webkit-scrollbar {
width: 0
}
.nice-select .list {
margin-top: 5px;
top: 100%;
border-top: 0;
border-radius: 0 0 5px 5px;
max-height: 210px;
overflow-y: scroll;
padding: 52px 0 0
}
.nice-select.has-multiple {
white-space: inherit;
height: auto;
padding: 7px 12px;
min-height: 53px;
line-height: 22px
}
.nice-select.has-multiple span.current {
border: 1px solid #CCC;
background: #EEE;
padding: 0 10px;
border-radius: 3px;
display: inline-block;
line-height: 24px;
font-size: 14px;
margin-bottom: 3px;
margin-right: 3px
}
.nice-select.has-multiple .multiple-options {
display: block;
line-height: 37px;
margin-left: 30px;
padding: 0
}
.nice-select .nice-select-search-box {
box-sizing: border-box;
position: absolute;
width: 100%;
margin-top: 5px;
top: 100%;
left: 0;
z-index: 8;
padding: 5px;
background: #FFF;
opacity: 0;
pointer-events: none;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 0 1px rgba(68, 88, 112, .11);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(.75) translateY(-21px);
-ms-transform: scale(.75) translateY(-21px);
transform: scale(.75) translateY(-21px);
-webkit-transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out
}
.nice-select .nice-select-search {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: none;
color: #333;
display: inline-block;
vertical-align: middle;
padding: 7px 12px;
margin: 0 10px 0 0;
width: 100%!important;
min-height: 36px;
line-height: 22px;
height: auto;
outline: 0!important
}
.nice-select.open .nice-select-search-box {
opacity: 1;
z-index: 10;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0)
}
.remove:hover {
color: red
}
</style>
@endpush
@push('scripts')
<script>
$(document).ready(function() {
$('select').niceSelect();
// Add search functionality
$('.nice-select').each(function() {
// Create search box if not exists
if (!$(this).find('.nice-select-search-box').length) {
$(this).prepend(
'<div class="nice-select-search-box">' +
'<input type="text" class="nice-select-search" placeholder="Search...">' +
'</div>'
);
}
});
$(document).on('click', '.nice-select-search-box', function(event) {
event.stopPropagation();
return false;
});
// Search functionality
$('.nice-select-search').on('keyup', function() {
var searchText = $(this).val().toLowerCase();
$('.nice-select .option').each(function() {
var optionText = $(this).text().toLowerCase();
if (optionText.indexOf(searchText) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<script>
function showMe(box){
var checkbox=document.getElementById('shipping').style.display;
var vis= 'none';
if(checkbox=="none"){
vis='block';
}
if(checkbox=="block"){
vis="none";
}
document.getElementById(box).style.display=vis;
}
</script>
<script>
$(document).ready(function(){
// Calculate and update total based on cart value
function updateTotal() {
let subtotal = parseFloat($('.order_subtotal').data('price'));
let coupon = parseFloat($('.coupon_price').data('price')) || 0;
let shippingCost = 0;
@if($cartTotal < $freeShippingThreshold)
shippingCost = {{ $flatShippingRate }};
@endif
let total = subtotal + shippingCost - coupon;
$('#order_total_price span').text('₹' + total.toFixed(2));
}
// Initialize the total on page load
updateTotal();
});
</script>
<script>
$("#add_new_address").click(function() {
$("#add-new-address").show();
$("#saved-addresses").hide();
$("#new-address-btn").hide();
// Change form title
$('.checkout-form h2').text('Add New Delivery Address');
});
$(".btn-goback").on("click",function(event){
event.preventDefault();
$("#checkoutForm")[0].reset();
//function checkoutbutton() {
$("#saved-addresses").show();
$("#new-address-btn").show();
$("#add-new-address").hide();
$("#update_add_datas").hide();
// Change form title
$('.checkout-form h2').text('Delivery Address');
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const addressItems = document.querySelectorAll('.address-item');
const selectedAddressInput = document.getElementById('selected_address_id');
const checkoutForm = document.getElementById('checkoutForm');
const checkoutBtn = document.querySelector('.checkoutbtn');
// Reset all delivery buttons to their original state
function resetDeliveryButtons() {
document.querySelectorAll('.delivery-btn').forEach(btn => {
btn.textContent = 'Deliver Here';
btn.style.backgroundColor = ''; // Reset to original color
});
}
// Handle address box selection
addressItems.forEach(item => {
const button = item.querySelector('.delivery-btn');
button.addEventListener('click', function() {
// Reset all buttons and selections first
resetDeliveryButtons();
addressItems.forEach(i => i.classList.remove('active'));
// Set the new selection
const addressId = item.getAttribute('data-address-id');
selectedAddressInput.value = addressId;
item.classList.add('active');
// Update the clicked button
button.textContent = '✓ Selected';
button.style.backgroundColor = '#4CAF50';
// Enable the checkout button
checkoutBtn.disabled = false;
});
});
// Initially disable checkout button if no address is selected
if (!selectedAddressInput.value) {
checkoutBtn.disabled = true;
}
// Auto-select the primary address if it exists
const primaryAddress = document.querySelector('.address-item.active');
if (primaryAddress) {
const primaryButton = primaryAddress.querySelector('.delivery-btn');
primaryButton.textContent = '✓ Selected';
primaryButton.style.backgroundColor = '#4CAF50';
checkoutBtn.disabled = false;
}
// Form submission handling
/*checkoutForm.addEventListener('submit', function(e) {
if (!selectedAddressInput.value) {
e.preventDefault();
alert('Please select a delivery address or add a new one');
}
});*/
});
$( "#checkoutForm" ).validate( {
rules: {
first_name:{
required: true
},
phone: {
required: true,
minlength: 10,
maxlength: 10,
},
address1:{
required: true
},
post_code: {
required: true,
minlength: 6,
maxlength: 6
},
country: {
required: true
},
},
messages: {
first_name: {
required: "Please enter first name"
},
phone: {
required: "Please enter phone number",
minlength: "mobile no must be at least 10 digit long",
maxlength: "mobile no must be at least 10 digit"
},
address1: {
required: "Please enter address"
},
post_code: {
required: "Please enter pincode",
minlength: "zip code must be at least 6 digit long",
maxlength: "zip code must be at least 6 digit"
},
country: {
required: "Please enter state"
},
}
});
</script>
<script>
$(document).ready(function() {
// Delete Address
$('.deleteddres-btn').click(function(e) {
e.preventDefault();
if (!confirm('Are you sure you want to delete this address?')) {
return;
}
var addressId = $(this).data('addid');
var $addressItem = $(this).closest('.address-item');
$.ajax({
url: '/shipping-address/' + addressId,
type: 'DELETE',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
if (response.status === 'success') {
$addressItem.fadeOut(300, function() {
$(this).remove();
// If no addresses left, show the form
if ($('.address-item').length === 0) {
$("#add-new-address").show();
$("#saved-addresses").hide();
}
});
// Optional: Show success message
//alert('Address deleted successfully');
}
},
error: function(xhr) {
console.error(xhr.responseText);
alert('Error deleting address. Please check console for details.');
}
});
});
$(".updateaddres-btn").on("click", function(event) {
event.preventDefault();
var addressId = $(this).attr("data-addid");
var addressItem = $(this).closest('.address-item');
// Hide save button, show update button
$('#submit-new-address').hide();
$('#update-address-btn').show();
// Set the address ID for update
$('#addId').val(addressId);
// Populate form fields
$('#first_name').val(addressItem.find('.user-name').text().trim());
$('#email').val(addressItem.find('.user-email').text().trim());
$('#phone').val(addressItem.find('.user-contact-no').text().trim());
$('#address').val(addressItem.find('.user-address').first().text().trim());
$('#address2').val(addressItem.find('.user-address').last().text().trim());
$('#post_code').val(addressItem.find('.user-postcode').text().trim());
// Set the value on the original select element
$('#country').val(addressItem.find('.user-state').text().trim());
// Refresh Nice Select to update the visual representation
$('#country').niceSelect('update');
// Show the form
$("#add-new-address").show();
$("#saved-addresses").hide();
$("#new-address-btn").hide();
// Change form title
$('.checkout-form h2').text('Edit Delivery Address');
});
// Handle form submission for both add and edit
$('#addEditAddress').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
var method = 'POST';
var addressId = $('#addId').val();
// If we're editing (update button is visible)
if ($('#update-address-btn').is(':visible')) {
url = '/shipping-address/' + addressId;
method = 'PUT';
}
$.ajax({
url: url,
type: method,
data: form.serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
if (response.status === 'success') {
// Refresh the page to show updated addresses
window.location.reload();
}
},
error: function(xhr) {
// Handle validation errors
if (xhr.status === 422) {
/*var errors = xhr.responseJSON.errors;
$.each(errors, function(key, value) {
$('#' + key).addClass('is-invalid');
$('#' + key).next('.text-danger').remove();
$('#' + key).after('<span class="text-danger">' + value[0] + '</span>');
});*/
} else {
console.error(xhr.responseText);
alert('Error saving address. Please check console for details.');
}
}
});
});
// Handle save new address
$('#submit-new-address').click(function(e) {
e.preventDefault();
// Validate the form first
if (!$("#checkoutForm").valid()) {
return false;
}
// Prepare the form data
let formData = {
first_name: $('#first_name').val(),
email: $('#email').val() || '{{ auth()->user()->email }}',
phone: $('#phone').val(),
country: $('#country').val(),
address1: $('#address').val(),
address2: $('#address2').val(),
post_code: $('#post_code').val(),
_token: '{{ csrf_token() }}'
};
$.ajax({
url: '{{ route("shipping-address.store") }}',
type: 'POST',
data: formData,
success: function(response) {
if (response.status === 'success') {
//toastr.success('Address saved successfully');
window.location.reload(); // Refresh to show the new address
}
},
error: function(xhr) {
if (xhr.status === 422) {
// Clear previous errors
$('.is-invalid').removeClass('is-invalid');
$('.text-danger').remove();
// Display validation errors
let errors = xhr.responseJSON.errors;
$.each(errors, function(key, value) {
$('#' + key).addClass('is-invalid');
$('#' + key).after('<span class="text-danger">' + value[0] + '</span>');
});
//toastr.error('Please fix the validation errors');
} else {
console.error(xhr.responseText);
//toastr.error('Error saving address');
}
}
});
});
// Handle the checkout button click separately
$('#checkoutForm').on('submit', function(e) {
// If it's an address update/save
if ($('#update-address-btn').is(':visible') || $('#submit-new-address').is(':visible')) {
e.preventDefault();
// Your existing address update/save logic
var form = $(this);
var url = form.attr('action');
var method = 'POST';
var addressId = $('#addId').val();
// If we're editing (update button is visible)
if ($('#update-address-btn').is(':visible')) {
url = '/shipping-address/' + addressId;
method = 'PUT';
}
$.ajax({
url: url,
type: method,
data: form.serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
if (response.status === 'success') {
// Refresh the page to show updated addresses
window.location.reload();
}
},
error: function(xhr) {
// Handle validation errors
if (xhr.status === 422) {
/*var errors = xhr.responseJSON.errors;
$.each(errors, function(key, value) {
$('#' + key).addClass('is-invalid');
$('#' + key).next('.text-danger').remove();
$('#' + key).after('<span class="text-danger">' + value[0] + '</span>');
});*/
} else {
console.error(xhr.responseText);
alert('Error saving address. Please check console for details.');
}
}
});
}
// If it's the actual checkout
else if ($(this).find('button[type="submit"]').is(':visible')) {
e.preventDefault();
// Show loading state
$('.checkoutbtn[type="submit"]').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize(),
success: function(response) {
if (response.redirect) {
window.location.href = response.redirect;
}
},
error: function(xhr) {
alert('Error during checkout: ' + xhr.responseJSON.error);
}
});
}
});
});
</script>
@endpush
PK 99