@extends('layouts.app')

@section('content')
   <script src="https://js.stripe.com/v3/"></script>

    <style>
        .StripeElement {
            padding: 12px;
            background: #f5f5f5;
            border-radius: 6px;
        }
    </style>   

<nav class="dsdsd" aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb custom-breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            
            <li class="breadcrumb-item active" aria-current="page"><span>Checkout</span></li>
        </ol>
    </div>
</nav>






 <!-- Cart Section -->
        <div class="flat-spacing-13">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8">
						<form id="payment-form">
						@csrf

                            <div class="box-ip-checkout">
                                <div class="title text-lg fw-medium">Checkout</div>
                                 <div class="checkout_form_flil">
                                 <div class="row">
                                 <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                     <div class="form-group">
                                        <input class="form-control" id="firstname" placeholder="First name" type="text" name="first_name">
                                    </div>
                                 </div> 
                                 <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                     <div class="form-group">
                                        <input class="form-control" id="lastname" placeholder="Last name" type="text"  name="last_name">
                                    </div>
                                 </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                     <div class="form-group">
                                        <input class="form-control" id="phone" type="text" name="phone"  placeholder="Phone">
                                    </div>
                                 </div>
                                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                      <div class="form-group">
                                    <input class="form-control" id="country" type="text" name="country" placeholder="Country">
                                </div>
                                 </div>
                                 <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                     <div class="form-group">
                                    <input class="form-control" id="address" type="text" name="address"  placeholder="Address">
                                </div>
                                 </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                  <div class="form-group">
                                  <input type="text" class="form-control" name="apartment" placeholder="Apartment, suite, etc (optional)">
                                </div>
                                 </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                     <div class="form-group">
                                        <input class="form-control" id="city" type="text" name="city" placeholder="City">
                                    </div>
                                 </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                     <div class="form-group">
                                        <input class="form-control" id="state" type="text" name="state"  placeholder="State">
                                    </div>
                                     </div>
                                     
                                     <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                         <div class="form-group">
                                        <input class="form-control" id="code" type="text" name="zipcode"  placeholder="Zipcode/Postal">
                                    </div>
                                     </div>
                                    
                                 
                                 </div>
                                     
                                
                            </div>
                               
                            <div class="box-ip-contact contact_inform_check">
                                @if(!auth()->check())
                                <div class="title">
                                    <div class="text-lg fw-medium">Contact Information</div>
                                    <a href="#login" data-bs-toggle="offcanvas" class="text-sm link">Log in</a>
                                </div>
                            @endif

                                <fieldset class="tf-field style-2 style-3">
                                    <input class="form-control" id="email" placeholder="Email" type="text"  name="email">
                                </fieldset>

                            </div>
                            <!--div class="box-ip-shipping">
                                <div class="title text-lg fw-medium">Shipping Method</div>
                                <fieldset class="mb_16">
                                    <label for="freeship" class="check-ship">
                                        <input type="radio" id="freeship" class="tf-check-rounded" name="checkshipping">
                                        <span class="text text-sm">
                                            <span>Free Shipping (Estimate in 7/10 - 10/10/2025)</span>
                                            <span class="price">$00.00</span>
                                        </span>
                                    </label>
                                </fieldset>
                                <fieldset>
                                    <label for="expship" class="check-ship">
                                        <input type="radio" id="expship" class="tf-check-rounded" name="checkshipping"
                                            checked>
                                        <span class="text text-sm">
                                            <span>Express Shipping (Estimate in 4/10 - 5/10/2025)</span>
                                            <span class="price">$10.00</span>
                                        </span>
                                    </label>
                                </fieldset>
                            </div>
                            <div class="box-ip-payment">
                                <div class="title">
                                    <div class="text-lg fw-medium mb_4">Payment</div>
                                    <p class="text-sm text-main">All transactions are secure and encrypted.</p>
                                </div>
                                <fieldset class="mb_12">
                                    <label for="bank-transfer" class="check-payment">
                                        <input type="checkbox" id="bank-transfer" class="tf-check-rounded"
                                            name="bank-transfer">
                                        <span class="text-payment text-sm">Direct bank transfer</span>
                                    </label>
                                </fieldset>
                                <p class="mb_16 text-main">Make your payment directly into our bank account. Please use
                                    your Order ID as the payment reference.Your order will not be shipped until the
                                    funds have cleared in our account.</p>
                                <div class="payment-method-box" id="payment-method-box">
                                    <div class="payment-item mb_16">
                                        <label for="delivery" class="payment-header collapsed" data-bs-toggle="collapse"
                                            data-bs-target="#delivery-payment" aria-controls="delivery-payment">
                                            <input type="radio" name="payment-method" class="tf-check-rounded"
                                                id="delivery">
                                            <span class="pay-title text-sm">Cash on delivery</span>
                                        </label>
                                        <div id="delivery-payment" class="collapse"
                                            data-bs-parent="#payment-method-box"></div>
                                    </div>
                                    <div class="payment-item mb_16">
                                        <label for="credit-card" class="payment-header" data-bs-toggle="collapse"
                                            data-bs-target="#credit-card-payment" aria-controls="credit-card-payment">
                                            <input type="radio" name="payment-method" class="tf-check-rounded"
                                                id="credit-card" checked>
                                            <span class="pay-title text-sm">Credit Card</span>
                                        </label>
                                        <div id="credit-card-payment" class="collapse show"
                                            data-bs-parent="#payment-method-box">
                                            <div class="payment-body">
                                                <fieldset class="ip-card mb_16">
                                                    <input type="text" class="style-2" placeholder="Card number">
                                                    <img class="card-logo" width="41" height="12"
                                                        src="images/payment/visa-2.png" alt="card">
                                                </fieldset>
                                                <div class="grid-2 mb_16">
                                                    <input type="text" class="style-2"
                                                        placeholder="Expiration date (MM/YY)">
                                                    <input type="text" class="style-2" placeholder="Sercurity code">
                                                </div>
                                                <fieldset class="mb_16">
                                                    <input type="text" class="style-2" placeholder="Name on card">
                                                </fieldset>
                                                <div class="cb-ship">
                                                    <input type="checkbox" checked class="tf-check" id="checkShip">
                                                    <label for="checkShip" class="text-sm text-main">Use shipping
                                                        address as billing address</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="payment-item paypal-payment mb_16">
                                        <label for="paypal" class="payment-header collapsed" data-bs-toggle="collapse"
                                            data-bs-target="#paypal-payment" aria-controls="paypal-payment">
                                            <input type="radio" name="payment-method" class="tf-check-rounded"
                                                id="paypal">
                                            <span class="pay-title text-sm">PayPal<img class="card-logo" width="78"
                                                    height="20" src="images/payment/paypal-2.png" alt="apple"></span>
                                        </label>
                                        <div id="paypal-payment" class="collapse" data-bs-parent="#payment-method-box">
                                        </div>
                                    </div>
                                </div>
                                <p class="text-dark-6 text-sm">Your personal data will be used to process your order,
                                    support your experience throughout this website, and for other purposes described in
                                    our <a href="#"
                                        class="fw-medium text-decoration-underline link text-sm">privacy policy.</a></p>

                            </div -->
							    <div id="card-element" class="StripeElement"></div>

                       
                    </div>
                        </div>
                    <div class="col-xl-4">
                        <div class="tf-page-cart-sidebar">
                            <div class="cart-box order-box">
                                <div class="title text-lg fw-medium">In your cart</div>
                                <ul class="list-order-product">

									@forelse($cartItems as $item)
										@php
											$product = $item->product;
											$price = $item->custom_price ?? $product->price;
											$total = $price * $item->quantity;
											$custom = $item->custom_attributes;
										@endphp

										<li class="order-item">
											<figure class="img-product">
											<a href="{{ route('product.detail', $product->slug) }}" class="img-box">

											@if($product->primary_image && $product->primary_image !== 'products/')
												<img loading="lazy"
													 src="{{ asset('storage/' . $product->primary_image) }}"
													 alt="{{ $product->name }}">
											@elseif($product->secondary_image && $product->secondary_image !== 'products/')
												<img loading="lazy"
													 src="{{ asset('storage/' . $product->secondary_image) }}"
													 alt="{{ $product->name }}">
											@else
												<img loading="lazy"
													 src="{{ asset('storage/products/PlaceholderImage01.png') }}"
													 alt="{{ $product->name }}">
											@endif
                                            </a>
												<span class="quantity">{{ $item->quantity }}</span>
											</figure>

											<div class="content">
												<div class="info">
													<p class="name text-sm fw-medium">{{ $product->name }}</p>

													<!--span class="variant text-xs text-dark-6">
														
													</span-->
												</div>

												<span class="price text-sm fw-medium">
													£ {{ number_format($total, 2) }}
												</span>
											</div>
										</li>

									@empty
										<p class="text-center text-muted">Your cart is empty.</p>
									@endforelse

								</ul>

                             
<ul class="list-total">
    <li class="total-item text-sm d-flex justify-content-between">
        <span>Subtotal:</span>
        <span class="price-sub fw-medium">
            £{{ number_format($subtotal, 2) }}
        </span>
    </li>

    <li class="total-item text-sm d-flex justify-content-between">
        <span>Discount:</span>
        <span class="price-discount fw-medium">
            -£{{ number_format($discount, 2) }}
        </span>
    </li>

    <li class="total-item text-sm d-flex justify-content-between">
        <span>Shipping:</span>
        <span class="price-ship fw-medium">
            £{{ number_format($shipping, 2) }}
        </span>
    </li>

    <li class="total-item text-sm d-flex justify-content-between">
        <span>VAT ({{ $vatPercent }}%):</span>
        <span class="price-tax fw-medium">
            £{{ number_format($vatAmount, 2) }}
        </span>
    </li>
</ul>

<div class="subtotal text-lg fw-medium d-flex justify-content-between">
    <span>Total (incl. VAT):</span>
    <span class="total-price-order">
        £{{ number_format($grandTotal, 2) }}
    </span>
</div>
                              
                                <div class="btn-order">
                                    <button type="submit"
                                        class="tf-btn btn-dark2 animate-btn w-100 text-transform-none" id="submit">Place
                                        order</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Cart Section -->


<script>
    const stripe = Stripe("{{ env('STRIPE_KEY') }}");

    const elements = stripe.elements();
    const card = elements.create("card");
    card.mount("#card-element");

    const form = document.getElementById("payment-form");
	
	form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const btn = document.getElementById("submit");
    btn.disabled = true;
    btn.innerText = "Processing...";

    let secret = await fetch("/decora/public/checkout/create-intent", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({ 
			amount: "{{ $grandTotal }}",
			first_name: document.getElementById('firstname').value,
			last_name: document.getElementById('lastname').value, 
			phone: document.getElementById('phone').value,
			zipcode: document.getElementById('code').value,
			email: document.getElementById('email').value,
			state: document.getElementById('state').value,
			city: document.getElementById('city').value,
			country: document.getElementById('country').value,
			address: document.getElementById('address').value,
		})
    }).then(res => res.json());

    console.log("Client Secret:", secret);

    if (!secret.clientSecret) {
        alert("Stripe client secret missing!");
        btn.disabled = false;
        btn.innerText = "Pay Now";
        return;
    }

   


   stripe.confirmCardPayment(secret.clientSecret, {
    payment_method: {
        card: card,
        billing_details: {
            name: document.getElementById('firstname').value+' '+ document.getElementById('lastname').value
        }
    }
})
.then(result => {


    // If Stripe returns an error
    if (result.error) {
        alert(result.error.message);
        btn.disabled = false;
        btn.innerText = "Pay Now";
        return;
    }

    // Payment completed successfully
    const paymentIntent = result.paymentIntent;

    let formData = new FormData();
    formData.append('_token', "{{ csrf_token() }}");
    formData.append('payment_intent_id', paymentIntent.id);
    formData.append('first_name', document.getElementById('firstname').value);
    formData.append('last_name', document.getElementById('lastname').value);
    formData.append('phone', document.getElementById('phone').value);
    formData.append('zipcode', document.getElementById('code').value);
    formData.append('email', document.getElementById('email').value);
    formData.append('state', document.getElementById('state').value);
    formData.append('city', document.getElementById('city').value);
    formData.append('country', document.getElementById('country').value);
    formData.append('address', document.getElementById('address').value);
    formData.append('total', "{{ $grandTotal }}");

    fetch("{{ route('checkout.process') }}", {
        method: "POST",
        body: formData
    }).then((result) => {
		console.log(result);
        window.location.href = "/decora/public/checkout/success";
    });

})
.catch(err => {
    console.log("Stripe exception:", err);
    alert("Payment failed. Please try again.");
    btn.disabled = false;
    btn.innerText = "Pay Now";
});
	});


</script>






@endsection