<!DOCTYPE html>
<html lang="en">
<head>
	<?php include "includes/operations.php";?>
	<?php include "includes/headerlinks.php";?>
	<?php 
		$get_cart_items = mysqli_query($con,"select cart.*,p.* from cart inner join product p on cart.prod_id = p.product_id where cust_ip = '$ipaddress' and date_added = '$date_added'");
		$total_items = mysqli_num_rows($get_cart_items);
		if($total_items <= 0){
			header('location:index.php');
		}
	?>
	<?php
		$res = mysqli_query($con, "SELECT public_key FROM system_configuration");
		$lang = mysqli_fetch_array($res);
		$pk_key = $lang['public_key'];
	?>
</head>

<body>

    
		
	<?php include "includes/top_header.php";?>
	<?php include "includes/navigation.php";?>
	<?php include "includes/mobile_navigation.php";?>
	<?php include "includes/mobile_sticky_menus.php";?>
	<?php include "includes/cart_window.php";?>
	<?php include "includes/search.php";?>


    <main class="main__content_wrapper">
        <!-- Start slider section -->
        <section class="breadcrumb__section breadcrumb__bg">
            <div class="container-fluid">
                <div class="row row-cols-1">
                    <div class="col">
                        <div class="breadcrumb__content">
                            <h1 class="breadcrumb__content--title text-white mb-10">Checkout</h1>
                            <ul class="breadcrumb__content--menu d-flex">
                                <li class="breadcrumb__content--menu__items"><a class="text-white" href="index.php">Home</a></li>
                                <li class="breadcrumb__content--menu__items"><span class="text-white">Checkout</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End slider section -->

		<div class="checkout__page--area section--padding">
            <div class="container">
				<form method="post" action="pro.php" id="myForm">
                <div class="row">
                    <div class="col-lg-7 col-md-6">
                        <div class="main checkout__mian">
                            
                                <div class="checkout__content--step section__shipping--address">
                                    <div class="section__header mb-25">
                                        <h2 class="section__header--title h3">Billing Details</h2>
                                    </div>
                                    <div class="section__shipping--address__content">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 mb-20">
                                                <div class="checkout__input--list ">
                                                    <label class="checkout__input--label mb-5" for="input1">Name <span class="checkout__input--label__star">*</span></label>
                                                    <input class="checkout__input--field border-radius-5" name="customer_name" placeholder="Full Name" id="name" type="text" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6 mb-20">
                                                <div class="checkout__input--list">
                                                    <label class="checkout__input--label mb-5" for="input2">Email <span class="checkout__input--label__star">*</span></label>
                                                    <input class="checkout__input--field border-radius-5" name="customer_email" placeholder="Email" id="email" type="email" required>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-20">
                                                <div class="checkout__input--list">
                                                    <label class="checkout__input--label mb-5" for="input3">Phone <span class="checkout__input--label__star">*</span></label>
                                                    <input class="form-control checkout__input--field phne-field border-radius-5" name="customer_phone" placeholder="Phone" id="phone" type="tel" pattern='^(1-)?[0-9]{3}-[0-9]{3}-[0-9]{4}' oninput='formatPhoneNum(this)'>
                                                </div>
                                            </div>
											<div class="col-lg-6 mb-20">
                                                <div class="checkout__input--list">
                                                    <label class="checkout__input--label mb-5" for="input6">State <span class="checkout__input--label__star">*</span></label>
                                                    <input class="checkout__input--field border-radius-5" placeholder="State" id="state" name="user_state" type="text">
                                                <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div></div>
                                            </div>
											<div class="col-lg-6 mb-20">
                                                <div class="checkout__input--list">
                                                    <label class="checkout__input--label mb-5" for="input6">City <span class="checkout__input--label__star">*</span></label>
                                                    <input class="checkout__input--field border-radius-5" placeholder="City" id="city" name="user_city" type="text">
                                                <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div></div>
                                            </div>
											<div class="col-lg-6 mb-20">
                                                <div class="checkout__input--list">
                                                    <label class="checkout__input--label mb-5" for="input6">Postal Code <span class="checkout__input--label__star">*</span></label>
                                                    <input class="checkout__input--field border-radius-5" placeholder="Postal code" name="user_postalcode" id="code" type="text">
                                                <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div></div>
                                            </div>
											<div class="order-notes mb-20">
												<label class="checkout__input--label mb-5" for="order">Please Enter Shipping Address Here <span class="checkout__input--label__star">*</span></label>
											   <textarea class="checkout__notes--textarea__field border-radius-5" id="message" placeholder="Please Enter Shipping Address Here" name="order_address" spellcheck="false"></textarea>
											</div>
                                        </div>
                                    </div>
                                    <span id="sk_key" style="display:none"><?php echo $pk_key;?></span>
                                    <div class="checkout__checkbox" style="display:none">
                                        <input class="checkout__checkbox--input" id="checkbox2" type="checkbox">
                                        <span class="checkout__checkbox--checkmark"></span>
                                        <label class="checkout__checkbox--label" for="checkbox2">
                                            Save this information for next time</label>
                                    </div>
                                </div>
                                <div class="checkout__content--step__footer d-flex align-items-center">
                                    <a class="continue__shipping--btn primary__btn border-radius-5" style="display:none" href="index.php">Continue To Shipping</a>
                                    <a class="continue__shipping--btn primary__btn border-radius-5 d-none" href="cart.php">Return to cart</a>
                                </div>
                            
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-6">
                        <aside class="checkout__sidebar sidebar border-radius-10">
                            <h2 class="checkout__order--summary__title text-center mb-15">Your Order Summary</h2>
                            <div class="cart__table checkout__product--table">
                                <table class="cart__table--inner">
                                    <tbody class="cart__table--body">
										<?php
											$get_cart_items = mysqli_query($con,"select cart.*,p.* from cart inner join product p on cart.prod_id = p.product_id where cust_ip = '$ip_address' and date_added = '$date_added'");
											$total_items = mysqli_num_rows($get_cart_items);
											$total_price = 0;
											while($cart_items = mysqli_fetch_array($get_cart_items)){
												$total_price += $cart_items['product_price']*$cart_items['quantity'];
										?>
                                        <tr class="cart__table--body__items check_row_<?php echo $cart_items['product_id'];?>">
                                            <td class="cart__table--body__list">
                                                <div class="product__image two  d-flex align-items-center">
                                                    <div class="product__thumbnail border-radius-5">
														<input type="hidden" name="prod_id[]" value="<?php echo $cart_items['product_id'];?>" />
														<input type="hidden" name="prod_quantity[]" value="<?php echo $cart_items['quantity'];?>" />
														<input type="hidden" name="prod_price[]" id="prod_price_<?php echo $cart_items['product_id'];?>" value="<?php echo $cart_items['product_price'];?>" />
														<a class="display-block" href="product-details.php?id=<?php echo $cart_items['product_id'];?>"><img class="display-block border-radius-5" src="images/product_images/<?php echo $cart_items['product_image'];?>" alt="cart-product"></a>
                                                        <span class="product__thumbnail--quantity"><?php echo $cart_items['quantity'];?></span>
                                                    </div>
                                                    <div class="product__description">
                                                        <h4 class="product__description--name"><a href="product-details.php?id=<?php echo $cart_items['product_id'];?>"><?php echo $cart_items['product_title'];?></a></h4>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="cart__table--body__list">
                                                <span class="cart__price">$<?php echo number_format($cart_items['product_price']*$cart_items['quantity'],2);?></span>
                                            </td>
                                        </tr>
										<?php }?>
                                    </tbody>
                                </table> 
                            </div>
                            <div class="checkout__total" style="border-top:0px !important;">
                                <table class="checkout__total--table">
									<tr class="checkout__total--items">
										<td class="checkout__total--title text-left">Subtotal</td>
										<td class="checkout__total--calculated__text text-right">
											$<?php echo number_format($total_price,2);?>
										</td>
									</tr>
									<tr class="checkout__total--items">
										<td class="checkout__total--title text-left">Estimated Tax (7%)</td>
										<td class="checkout__total--calculated__text text-right">
											$<?php
												$tax = 7/100;
												echo $value_tax = $total_price * $tax;
											?>
										</td>
									</tr>
									<tr class="checkout__total--items">
										<td class="checkout__total--title text-left">Shipping Cost</td>
										<td class="checkout__total--calculated__text text-right">
											$9.95
										</td>
									</tr>
									<tr>
										<td colspan="3"><hr style="border:1px solid #e4e4e4" /></td>
									</tr>
									<?php
										$shipping_cost = 9.95;
										$final_total = $total_price + $shipping_cost + $value_tax;
									?>
                                    <tfoot class="checkout__total--footer">
                                        <tr class="checkout__total--footer__items">
                                            <td class="checkout__total--footer__title checkout__total--footer__list text-left">Total </td>
                                            <td class="checkout__total--footer__amount checkout__total--footer__list text-right">$<span id="grand_total"><?php echo number_format($final_total,2);?></span></td>
											
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
							<input type="hidden" id="total" name="total" value="<?php echo number_format($final_total,2);?>" />
							<input type="hidden" id="ip_address" name="ip_address" value="<?php echo $ip_address;?>" />
							<input type="hidden" name="shipping_cost" id="shipping_cost" value="<?php echo $shipping_cost ?>">
							<input type="hidden" id="stripeToken" name="stripeToken" />
							<input type="hidden" id="stripeEmail" name="stripeEmail" />
											
                            <button class="checkout__now--btn primary__btn" id="customButton" type="button" style="margin-top:20px">Pay Now</button>
                        </aside>
                    </div>
                    
                </div>
				</form>
            </div>
        </div>

    </main>

    <!-- Start footer section -->
    <?php include "includes/footer.php";?>
    <!-- End footer section -->

	<?php include "includes/footerlinks.php";?>
	<?php include "includes/cart_functions.php";?>
	<script>
		const formatPhoneNum = (inputField) => {
		const nums = inputField.value.split('-').join("");
		const countryCode = '1';
		const digits = nums[0] === countryCode ? 1 : 0;

		// get character position of the cursor:
		let cursorPosition = inputField.selectionStart;

		// add dashes (format 1-xxx-xxx-xxxx or xxx-xxx-xxxx):
		if (nums.length > digits+10) {
			inputField.value = `${digits === 1 ? nums.slice(0, digits) + '-' : ""}` + nums.slice(digits,digits+3) + '-' + nums.slice(digits+3,digits+6) + '-' + nums.slice(digits+6,digits+10);
		}
		else if (nums.length > digits+6) {
			inputField.value = `${digits === 1 ? nums.slice(0, digits) + '-' : ""}` + nums.slice(digits,digits+3) + '-' + nums.slice(digits+3,digits+6) + '-' + nums.slice(digits+6,nums.length);
		}
		else if (nums.length > digits+5) {
			inputField.value = `${digits === 1 ? nums.slice(0, digits) + '-' : ""}` + nums.slice(digits,digits+3) + '-' + nums.slice(digits+3,nums.length);
		}
		else if (nums.length > digits+3) {
			inputField.value = `${digits === 1 ? nums.slice(0, digits) + '-' : ""}` + nums.slice(digits, digits+3) + '-' + nums.slice(digits+3, nums.length);
		}
		else if (nums.length > 1 && digits === 1) {
			inputField.value = nums.slice(0,digits) + '-' + nums.slice(digits, nums.length);
		}

		// reseting the input value automatically puts the cursor at the end, which is annoying,
		// so reset the cursor back to where it was before, taking into account any dashes that we added...
		// if the character 1 space behind the cursor is a dash, then move the cursor up one character:
		if (inputField.value.slice(cursorPosition-1, cursorPosition) === '-') {
			cursorPosition++;
		}
		
		inputField.selectionStart = cursorPosition;
		inputField.selectionEnd = cursorPosition;
	}
	</script>
</body></html>