@extends('layouts.frontend.app')
@section('content')
<style>  .checkout-container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .checkout-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .section-header {
            display: flex;
            align-items: center;
            padding: 1.5rem;
            border-bottom: 1px solid #e9ecef;
            background-color: #fff;
            justify-content: space-between
        }
        .section-header i {
            font-size: 1.2rem;
            margin-right: 0.75rem;
            color: #6c757d;
        }
        .section-header h6 {
            margin: 0;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #495057;
            font-size: 0.875rem;
        }
        .section-content {
            padding: 1.5rem;
        }
        .delivery-option {
            display: flex;
            align-items: flex-start;
            padding: 1rem 0;
        }
        .delivery-icon {
            color: #dc3545;
            font-size: 1.2rem;
            margin-right: 1rem;
            margin-top: 0.2rem;
            position: relative;
            top: 12px;
                right: -8px;
        }
        .delivery-details h6 {
            margin: 0 0 0.25rem 0;
            font-weight: 600;
            color: #212529;
            font-size: 0.95rem;
        }
        .delivery-details p {
            margin: 0;
            color: #6c757d;
            font-size: 0.875rem;
            line-height: 1.4;
        }
        .change-btn {
            color: #495057;
            /* text-decoration: none; */
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .change-btn:hover {
            color: #212529;
            text-decoration: underline;
        }
        .product-item {
            display: flex;
            align-items: center;
            padding: 1rem 0;
        }
        .product-image {
            width: 120px;
            height: 80px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-right: 1rem;
            overflow: hidden;
        }
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-details h6 {
            margin: 0 0 0.25rem 0;
            font-weight: 600;
            color: #212529;
            font-size: 0.95rem;
        }
        .product-details p {
            margin: 0;
            color: #6c757d;
            font-size: 0.875rem;
        }
        .product-price {
            font-size: 1.1rem;
            font-weight: 600;
            color: #212529;
            text-align: start
        }
        .order-summary {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        .summary-row:last-child {
            margin-bottom: 0;
            padding-top: 0.75rem;
            border-top: 1px solid #dee2e6;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .summary-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .summary-value {
            color: #212529;
            font-weight: 500;
        }
        .total-label {
            color: #212529;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.9rem;
        }
        .total-value {
            color: #212529;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .about-frist-row svg{
                stroke: red;
        }
        </style>

    <section class="checkout-page setion-cform pt-0">
        <div class="about-section ">

    <div class="container ">
        <div class="row">
            <div class="col-md-6 about-frist-row d-flex gap-2">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" width="50" height="50" stroke="currentColor" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>

                <h1>Checkout Your Cart</h1>
                
            </div>
        </div>
    </div>
</div>
    

<div class="container mb-5 py-5">
    <div class="row">
        <div class="col-lg-8">
            <!-- Delivery Section -->
            <div class="checkout-card mb-4">
                <div class="section-header">
                    <div class="address d-flex">
 <i class="fas fa-home"></i>
                    <h6>Postal Address</h6>
                    </div>
                   
                    <div class="">
                        <i class="fas fa-map-marker-alt me-2" style="color: #6c757d;"></i>
                        <span style="color: #6c757d; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;"><a style="color: #e65425;" href="{{route('user.address')}}">Click & Collect</a></span>
                    </div>
                </div>
                <div class="section-content">
                    @foreach($addresses as $address)
                        <div class="d-flex justify-content-between align-items-center mb-3 gap-2">
                          <input class="form-check-input" type="radio" 
                                                      name="address_id" 
                                                      value="{{ $address->id }}" 
                                                      @if($loop->first) checked @endif
                                                      id="address{{ $address->id }}">
                            <div class="delivery-option flex-grow-1">
                                <i class="fas fa-map-marker-alt delivery-icon"></i>
                                
                                <div class="delivery-details">
                                    <h6>{{ $address->address_title }}</h6>
                                    <p>{{ $address->address_line1 }}, {{ $address->city }}<br>{{ $address->postcode }}</p>
                                    <a href="#" style="color: #6c757d; font-size: 0.875rem; text-decoration: none;">View map and opening hours</a>
                                </div>
                            </div>
                            <a href="{{route('user.address.addEdit',base64_encode($address->id))}}" class="change-btn">Change</a>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Customer Details Section -->
            <div class="checkout-card">
                <div class="section-header">
                    <h6>My Details</h6>
                    <div class="ms-auto">
                        <a href="{{route('user.personal.info')}}" class="change-btn">Change</a>
                    </div>
                </div>
                <div class="section-content">
                    <p class="mb-1" style="color: #212529; font-weight: 500;">{{ ucwords(auth()->user()->name) }}</p>
                    <p class="mb-0" style="color: #6c757d; font-size: 0.875rem;">{{ auth()->user()->phone }}</p>
                     <p class="mb-0" style="color: #6c757d; font-size: 0.875rem;">{{ auth()->user()->email }}</p>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Order Summary -->
            <div class="checkout-card">
                <!-- Product Items -->
                @foreach($items as $item)
                    <div class="section-content border-bottom">
                        <div class="product-item d-flex">
                            <div class="product-image" style="width: 80px; height: 80px; margin-right: 15px;">
                                <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                            <div class="product-details flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <div class="product-price mb-1">₹{{ number_format($item['price']), 2 }}</div>
                                        <h6>{{ $item['title'] }}</h6>
                                        <p>Qty: {{ $item['quantity'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                       <h5 class="section-content border-bottom"><i class="fa fa-gift text-danger"></i> Add Gift Wrap</h5>

                        <div class="section-content border-bottom">
                            <input class="form-check-input" type="checkbox" 
                                name="gift_reference" 
                                value="100" 
                                id="gift1">
                             <label class="form-check-label" for="gift1">
                                <i class="fa fa-gift text-warning"></i> ₹100 Add Gift Wrap
                            </label>
                        </div>
                <!-- Order Summary -->
                <div class="section-content">
                    <form action="{{ route('order.place') }}" method="POST" id="checkoutForm">
                        @csrf
                            <input type="hidden" id="selectedAddress" name="address_id">
                            <input type="hidden" name="subtotal" value="{{ $subtotal }}">
                            <input type="hidden" name="shipping" value="{{ $shipping }}">
                            <input type="hidden" name="tax" value="{{ $tax }}">
                            <input type="hidden" name="discount" value="{{ $discount }}">
                            <input type="hidden" id="total_val_id" name="total" value="{{ $finalTotal }}">
                            <input type="hidden" name="gift_reference" id="selectedGift">
                        <div class="order-summary">

                            
                            <div class="summary-row d-flex justify-content-between">
                                <span class="summary-label">Subtotal</span>
                                <span class="summary-value">₹{{ number_format($subtotal), 2 }}</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between">
                                <span class="summary-label">Shipping</span>
                                <span class="summary-value">₹{{number_format($shipping),2 }}</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between">
                                <span class="summary-label">Tax</span>
                                <span class="summary-value">₹{{ $tax }}</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between">
                                <span class="summary-label">Discount</span>
                                <span class="summary-value">₹{{ number_format($discount), 2 }}</span>
                            </div>
                             <div class="summary-row d-flex justify-content-between">
                                <span class="summary-label">Gift Reference</span>
                                <span class="summary-value" id="gift_val">₹0</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between mt-2">
                                <span class="total-label fw-bold">Total to Pay</span>
                                <span class="total-value fw-bold" id="total_amount_id">₹{{number_format($finalTotal), 2 }}</span>
                            </div>
                        </div>
                        <button type="button" id="payBtn" class="checkout-btn">
                        <i class="bi bi-lock-fill me-2"></i> Place Order
                        </button>

                        {{-- <div class="checkout">
                        <button type="submit" id="payBtn" class="checkout-btn">  <i class="bi bi-lock-fill me-2"></i> Place Order</button>
                        </div> --}}
                    </form>
                </div>

             
              
            </div>
        </div>
    </div>
</div>

    </section>






<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
// Update hidden input whenever gift radio changes
$("input[name='gift_reference']").on('click', function() {
    let $this = $(this);
    if ($this.data('waschecked') === true) {
        $this.prop('checked', false);
        $this.data('waschecked', false);
       
        let total_val = parseFloat($('#total_val_id').val()) || 0;
         $("#selectedGift").val('');
        $("#gift_val").text('₹' + 0);
        $("#total_amount_id").text('₹' + total_val);
    } else {
        $("input[name='gift_reference']").data('waschecked', false);
        $this.data('waschecked', true);
        let val = parseFloat($(this).val()) || 0;
        let total_val = parseFloat($('#total_val_id').val()) || 0;
        let total_amount = total_val + val;
  
        $("#selectedGift").val(val);
        $("#gift_val").text('₹' + val);
         $("#total_amount_id").text('₹' + total_amount);
    }
});

// On page load, set default if any checked

$("input[name='address_id']").on('change', function() {
    $("#selectedAddress").val($(this).val());
});



// On page load, set default checked radio
$(document).ready(function() {
    let selected = $("input[name='address_id']:checked").val();
    $("#selectedAddress").val(selected);
});
document.getElementById('payBtn').onclick = function(e){
    e.preventDefault();
    let form = document.getElementById('checkoutForm');
    let formData = new FormData(form);
    let selected = $("#selectedAddress").val();
   
    if(!selected){
            e.preventDefault();
            alert("Please select an address.");
            return;
        }
        $("#selectedAddress").val(selected);
    // Step 1: Place order and get order_id
    fetch('{{ route("order.place") }}', {
        method:'POST',
        headers:{ 'X-CSRF-TOKEN':'{{ csrf_token() }}' },
        body: formData
    })
    .then(res=>res.json())
    .then(data=>{
        if(!data.success){ alert(data.message); return; }

        // Step 2: Create Razorpay order
        fetch('{{ route("razorpay.order") }}',{
            method:'POST',
            headers:{
                'X-CSRF-TOKEN':'{{ csrf_token() }}',
                'Content-Type':'application/json'
            },
            body: JSON.stringify({
                order_id: data.order_id,
                amount: data.total
            })
        })
        .then(res=>res.json())
        .then(rp=>{
            var options = {
                key: '{{ config("razorpay.key") }}',
                amount: rp.amount,
                currency: rp.currency,
                order_id: rp.razorpay_order_id,
                name: "Your Store",
                description: "Order Payment",
                handler: function(response){
                    // Step 3: Verify payment
                    fetch('{{ route("verify.payment") }}',{
                        method:'POST',
                        headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'},
                        body: JSON.stringify({
                            order_id: data.order_id,
                            razorpay_payment_id: response.razorpay_payment_id,
                            razorpay_order_id: response.razorpay_order_id,
                            razorpay_signature: response.razorpay_signature
                        })
                    })
                    .then(res=>res.json())
                    .then(res2=>{
                        if(res2.success) window.location.href = res2.redirect_url;
                        else alert(res2.message);
                    });
                },
                theme:{color:"#3399cc"}
            };
            var rzp = new Razorpay(options);
            rzp.open();
        });
    });
};
</script>



@endsection