@extends('layouts.user')
@section('content')
<!-- page-title -->
<div class="page-title" style="background-image: url({{ asset('user_assets/images/section/page-title.jpg') }});">
    <div class="container">
        <h3 class="heading text-center">Check Out</h3>
        <ul class="breadcrumbs d-flex align-items-center justify-content-center">
            <li><a class="link" href="{{ url('/') }}">Homepage</a></li>
            <li><i class="icon-arrRight"></i></li>
            <li><a class="link" href="{{ url('shop-default-grid') }}">Shop</a></li>
            <li><i class="icon-arrRight"></i></li>
            <li>View Cart</li>
        </ul>
    </div>
</div>
<!-- /page-title -->
<section>
    <div class="container">
        <div class="row">
            <!-- RIGHT: Cart Summary → becomes LEFT on xl screens -->
            <div class="col-xl-5 order-xl-first">
                <div class="flat-spacing flat-sidebar-checkout">
                    <div class="sidebar-checkout-content">
                        <h5 class="title">Shopping Cart</h5>
                        <div class="list-product">
                            @if(isset($checkoutData))
                                <div class="item-product d-flex align-items-start mb-3">
                                    <a href="{{ route('product.detail', ['id' => $checkoutData['product_id']]) }}" class="me-3">
                                        <img src="{{ asset('/' . $checkoutData['product_image']) }}"
                                             alt="{{ $checkoutData['product_name'] }}" width="80">
                                    </a>
                                    <div class="content-box">
                                        <div class="info">
                                            <a href="{{ route('product.detail', ['id' => $checkoutData['product_id']]) }}">
                                                <strong>{{ $checkoutData['product_name'] }}</strong>
                                            </a>
                                        </div>
                                        <div class="total-price text-button mt-1">
                                            <span class="count">{{ $checkoutData['quantity'] }}</span> ×
                                            <span class="price">₹{{ number_format($checkoutData['product_price'], 2) }}</span>
                                        </div>
                                        <div class="subtotal text-dark fw-bold">
                                            Subtotal: ₹{{ number_format($checkoutData['subtotal'], 2) }}
                                        </div>
                                    </div>
                                </div>
                            @elseif(isset($cartItems) && count($cartItems) > 0)
                                @foreach($cartItems as $item)
                                    <div class="item-product d-flex align-items-start mb-3">
                                        <a href="{{ route('product.detail', ['id' => $item->product_id]) }}" class="me-3">
                                            @if($item->product && $item->product->product_thumbnail)
                                                <img src="{{ asset('/' . $item->product->product_thumbnail) }}" alt="{{ $item->product->product_name }}" width="80">
                                            @else
                                                <img src="{{ asset('images/no-image.png') }}" alt="No Image" width="80">
                                            @endif
                                        </a>
                                        <div class="content-box">
                                            <div class="info">
                                                <a href="{{ route('product.detail', ['id' => $item->product_id]) }}">
                                                    <strong>{{ $item->product->product_name ?? 'Product Not Found' }}</strong>
                                                </a>
                                                <div class="variant text-caption-1 text-secondary">
                                                    @if($item->product_variant_id)
                                                        @php
                                                            $variant = \DB::table('product_variants')->where('variant_id', $item->product_variant_id)->first();
                                                        @endphp
                                                        @if($variant)
                                                            <span>{{ $variant->variable_name }}: {{ $variant->variable_value }}</span>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="total-price text-button mt-1">
                                                <span class="count">{{ $item->quantity }}</span> ×
                                                <span class="price">₹{{ number_format($item->price, 2) }}</span>
                                            </div>
                                            <div class="subtotal text-dark fw-bold">
                                                Subtotal: ₹{{ number_format($item->quantity * $item->price, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p>Your cart is empty.</p>
                            @endif
                        </div>
                        <!-- Coupons Section -->
                        <div class="sec-discount mt-4">
                            <button class="tf-btn btn-reset mb-2" id="viewCouponsBtn">View Coupons</button>
                            <div id="couponsContainer" style="display:none;">
                                <div dir="ltr" class="swiper tf-sw-categories" data-preview="2.25" data-tablet="3" data-mobile-sm="2.5" data-mobile="1.2" data-space-lg="20" data-space-md="20" data-space="15" data-pagination="1" data-pagination-md="1" data-pagination-lg="1">
                                    <div class="swiper-wrapper" id="couponsWrapper"></div>
                                </div>
                            </div>
                            <div class="ip-discount-code mt-2">
                                <input type="text" id="discount_code" name="discount_code" placeholder="Add voucher discount" readonly>
                            </div>
                            <div id="couponAnimation" style="display:none; color:green; font-weight:bold; margin-top:5px;">
                                Coupon Applied Successfully!
                            </div>
                        </div>
                        <!-- Totals -->
                        <div class="sec-total-price mt-3">
                            <div class="top">
                                <div class="item d-flex align-items-center justify-content-between text-button">
                                    <span>Shipping</span>
                                    <span id="shippingCost">{{ $shippingCost ?? 'Free' }}</span>
                                </div>
                                <div class="item d-flex align-items-center justify-content-between text-button">
                                    <span>Discounts</span>
                                    <span id="discountAmount">-₹{{ number_format($discountAmount ?? 0, 2) }}</span>
                                </div>
                                <!-- GST Breakdown -->
                                <div class="item d-flex flex-column gap-1 mt-2 ps-3">
                                    <div>
                                        <strong>GST Details:</strong>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>CGST</span>
                                        <span id="cgstAmount">₹0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>SGST</span>
                                        <span id="sgstAmount">₹0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>IGST</span>
                                        <span id="igstAmount">₹0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>UGST</span>
                                        <span id="ugstAmount">₹0.00</span>
                                    </div>
                                </div>
                                <!-- Total Tax -->
                                <div class="item d-flex align-items-center justify-content-between text-button mt-2">
                                    <span>Tax</span>
                                    <span id="taxAmount">₹0.00</span>
                                </div>
                            </div>
                            <div class="bottom">
                                <h5 class="d-flex justify-content-between">
                                    <span>Total</span>
                                    <span class="total-price-checkout" id="finalTotal">
                                        ₹{{ number_format($totalPrice ?? 0, 2) }}
                                    </span>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Separator -->
            <div class="col-xl-1 d-none d-xl-block"><div class="line-separation"></div></div>

            <!-- LEFT: Checkout Form → becomes RIGHT on xl screens -->
            <div class="col-xl-6 order-xl-last">
                <div class="flat-spacing tf-page-checkout">
                    <!-- Existing Addresses -->
                    <div class="wrap">
                        <h5 class="title">Information</h5>
                        <div id="address-section">
                            @if(isset($addresses) && $addresses->count() > 0)
                                <div class="existing-addresses mb-3">
                                    <p>Select Existing Address:</p>
                                    <div class="address-cards d-flex flex-wrap gap-2" id="address-cards-container">
                                        @foreach($addresses as $addr)
                                            <div class="card address-card p-2 border"
                                                 data-address-id="{{ $addr->address_id }}"
                                                 data-state-id="{{ $addr->state_id }}">
                                                <p>{{ $addr->address_line1 }}, {{ $addr->city }}, {{ $addr->zip_code }}</p>
                                                <small>{{ $addr->state->state_name ?? '' }}</small>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <!-- Add New Address -->
                    <div class="wrap mt-4">
                        <h5 class="title">Add New Address</h5>
                        <form id="addAddressForm">
                            @csrf
                            <div class="mb-2">
                                <input type="text" name="address_name" placeholder="Address Name" class="form-control" required>
                            </div>
                            <div class="mb-2">
                                <input type="text" name="address_line1" placeholder="Address Line 1" class="form-control" required>
                            </div>
                            <div class="mb-2">
                                <input type="text" name="address_line2" placeholder="Address Line 2" class="form-control">
                            </div>
                            <div class="mb-2">
                                <input type="text" name="address_line3" placeholder="Address Line 3 (Optional)" class="form-control">
                            </div>
                            <div class="mb-2">
                                <input type="text" name="address_line4" placeholder="Address Line 4 (Optional)" class="form-control">
                            </div>
                            <div class="mb-2">
                                <input type="text" name="city" placeholder="City" class="form-control" required>
                            </div>
                            <div class="mb-2">
                                <select name="state_id" class="form-control" required>
                                    <option value="">Select State</option>
                                    @php
                                        $states = \DB::table('states')->get();
                                    @endphp
                                    @foreach($states as $state)
                                        <option value="{{ $state->state_id }}">{{ $state->state_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-2">
                                <input type="text" name="zip_code" placeholder="ZIP Code" class="form-control">
                            </div>
                            <button type="button" class="tf-btn btn-reset" id="saveAddressBtn">Add Address</button>
                            <p id="addressMessage" class="mt-1"></p>
                        </form>
                    </div>
                    <!-- Payment Options -->
                    <div class="wrap mt-4">
                        <h5 class="title">Choose Payment Option:</h5>
                        <form method="POST" action="{{ route('razorpay.create') }}" class="form-payment" id="checkoutForm">
                            @csrf
                            <input type="hidden" name="address_id" id="selected_address">
                            <input type="hidden" name="final_total" id="final_total_input" value="{{ $totalPrice ?? 0 }}">
                            <input type="hidden" name="discount_amount" id="discount_amount_input" value="0">
                            <input type="hidden" name="shipping_amount" id="shipping_amount_input" value="0">
                            <input type="hidden" name="coupon_id" id="coupon_id_input" value="">
                            <input type="hidden" name="tax_amount" id="tax_amount_input" value="0">
                            @if(isset($checkoutData))
                                <input type="hidden" name="buy_now" value="1">
                                <input type="hidden" name="product_id" value="{{ $checkoutData['product_id'] }}">
                                <input type="hidden" name="variant_id" value="{{ $checkoutData['variant_id'] ?? '' }}">
                                <input type="hidden" name="quantity" value="{{ $checkoutData['quantity'] }}">
                                <input type="hidden" name="price" value="{{ $checkoutData['product_price'] }}">
                            @else
                                <input type="hidden" name="buy_now" value="0">
                            @endif
                            <div class="payment-box" id="payment-box">
                                <div class="payment-item">
                                    <label class="payment-header" data-bs-toggle="collapse" data-bs-target="#cod-payment">
                                        <input type="radio" name="payment_method" value="cash_on_delivery" checked>
                                        <span class="text-title">Cash on Delivery</span>
                                    </label>
                                </div>
                                <div class="payment-item">
                                    <label class="payment-header collapsed" data-bs-toggle="collapse" data-bs-target="#razorpay-payment">
                                        <input type="radio" name="payment_method" value="razorpay">
                                        <span class="text-title">Pay Online</span>
                                    </label>
                                </div>
                            </div>
                            <button class="tf-btn btn-reset mt-3" type="submit">Place Order</button>
                        </form>
                        <p id="orderMessage" class="mt-2"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JS Section -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    let originalTotal = parseFloat({{ $totalPrice ?? 0 }});
    let discountAmount = 0;
    let selectedCouponId = null;
    let shippingMethods = @json(\DB::table('shipping_methods')->where('shipping_status', 1)->get());
    const form = document.getElementById('checkoutForm');
    const orderMessage = document.getElementById('orderMessage');
    let storeStateId = {{ env('STORE_STATE_ID', 1) }}; // Store state ID, set in .env
    function calculateShipping(total) {
        let applicable = shippingMethods.filter(m => {
            let min = parseFloat(m.min_order_amount);
            let max = parseFloat(m.max_order_amount) || Infinity;
            return total >= min && total <= max;
        });
        if(applicable.length > 0) {
            applicable.sort((a,b) => parseFloat(a.shipping_price) - parseFloat(b.shipping_price));
            return parseFloat(applicable[0].shipping_price);
        }
        return 0;
    }
    async function calculateTaxComponents(total, userStateId) {
        const taxData = await fetch("{{ route('taxes.fetch') }}").then(res => res.json());
        let taxObj = taxData.taxes.find(t => t.status == 1);
        if(!taxObj) return { cgst: 0, sgst: 0, igst: 0, ugst: 0, totalTax: 0 };
        let taxRate = parseFloat(taxObj.tax_percent);
        let cgst = 0, sgst = 0, igst = 0, ugst = 0;
        const unionTerritories = [/* put union territory state IDs here, e.g., 4, 26 */];
        const isUnionTerritory = unionTerritories.includes(userStateId);
        if(userStateId === storeStateId) {
            cgst = (taxRate / 2) * total / 100;
            sgst = (taxRate / 2) * total / 100;
        } else if(isUnionTerritory) {
            ugst = taxRate * total / 100;
        } else {
            igst = taxRate * total / 100;
        }
        let totalTax = cgst + sgst + igst + ugst;
        return { cgst, sgst, igst, ugst, totalTax };
    }
    async function updateTotals(userStateId=null) {
        let taxAmounts = { cgst: 0, sgst: 0, igst: 0, ugst: 0, totalTax: 0 };
        if(userStateId) {
            taxAmounts = await calculateTaxComponents(originalTotal, userStateId);
        }
        let totalWithTax = originalTotal + taxAmounts.totalTax;
        let shippingCost = calculateShipping(totalWithTax);
        // Discount applies after tax and shipping are added
        let finalTotalBeforeDiscount = totalWithTax + shippingCost;
        let discountEffective = discountAmount;
        if (discountAmount > finalTotalBeforeDiscount) {
            discountEffective = finalTotalBeforeDiscount; // Prevent negative total
        }
        let finalTotal = finalTotalBeforeDiscount - discountEffective;
        // Update UI display
        document.getElementById("shippingCost").innerText = (shippingCost > 0 ? "₹" + shippingCost.toFixed(2) : "Free");
        document.getElementById("discountAmount").innerText = "-₹" + discountEffective.toFixed(2);
        document.getElementById("taxAmount").innerText = "₹" + taxAmounts.totalTax.toFixed(2);
        document.getElementById("cgstAmount").innerText = "₹" + taxAmounts.cgst.toFixed(2);
        document.getElementById("sgstAmount").innerText = "₹" + taxAmounts.sgst.toFixed(2);
        document.getElementById("igstAmount").innerText = "₹" + taxAmounts.igst.toFixed(2);
        document.getElementById("ugstAmount").innerText = "₹" + taxAmounts.ugst.toFixed(2);
        // Update hidden fields for form submission
        document.getElementById("discount_amount_input").value = discountEffective.toFixed(2);
        document.getElementById("shipping_amount_input").value = shippingCost.toFixed(2);
        document.getElementById("tax_amount_input").value = taxAmounts.totalTax.toFixed(2);
        document.getElementById("final_total_input").value = finalTotal.toFixed(2);
        document.getElementById("coupon_id_input").value = selectedCouponId ?? '';
    }
    updateTotals();
    // Address selection updates tax and totals based on state
    document.getElementById("address-cards-container")?.addEventListener("click", function(e){
        let card = e.target.closest(".address-card");
        if(!card) return;
        document.querySelectorAll(".address-card").forEach(c => c.classList.remove('border-primary'));
        card.classList.add('border-primary');
        document.getElementById("selected_address").value = card.dataset.addressId;
        let userStateId = parseInt(card.dataset.stateId);
        updateTotals(userStateId);
    });
    // Coupon toggle and fetch functionality
    document.getElementById("viewCouponsBtn").addEventListener("click", function(){
        let container = document.getElementById("couponsContainer");
        container.style.display = container.style.display === "none" ? "block" : "none";
        if(container.style.display === "block"){
            fetch("{{ route('coupons.fetch') }}")
                .then(res => res.json())
                .then(data => {
                    let wrapper = document.getElementById("couponsWrapper");
                    wrapper.innerHTML = '';
                    if (data.coupons && data.coupons.length > 0) {
                        data.coupons.forEach(coupon => {
                            let div = document.createElement('div');
                            div.className = 'swiper-slide select-coupon';
                            div.dataset.code = coupon.coupon_code;
                            div.dataset.type = coupon.discount_type;
                            div.dataset.value = coupon.value;
                            div.dataset.min = coupon.min_amount;
                            div.dataset.id = coupon.coupon_id;
                            div.innerHTML = `
                            <div class="box-discount">
                                <div class="discount-top">
                                    <div class="discount-off">
                                        <div class="text-caption-1">Discount</div>
                                        <span class="sale-off text-btn-uppercase">
                                            ${coupon.value} ${coupon.discount_type === 'percentage' ? '%' : '₹'} OFF
                                        </span>
                                    </div>
                                    <div class="discount-from">
                                        <p class="text-caption-1">For all orders <br> from ₹${parseFloat(coupon.min_amount).toFixed(2)}</p>
                                    </div>
                                </div>
                                <div class="discount-bot">
                                    <span class="text-btn-uppercase">${coupon.coupon_code}</span>
                                    <button class="tf-btn btn-apply-coupon"><span class="text">Apply Code</span></button>
                                </div>
                            </div>`;
                            wrapper.appendChild(div);
                        });
                    } else {
                        wrapper.innerHTML = '<p>No coupons available.</p>';
                    }
                });
        }
    });
    // Coupon apply logic recalculates totals with discount after tax
    document.addEventListener("click", function(e){
        if(e.target.closest(".btn-apply-coupon")){
            let couponDiv = e.target.closest(".select-coupon");
            let min = parseFloat(couponDiv.dataset.min);
            let type = couponDiv.dataset.type;
            let value = parseFloat(couponDiv.dataset.value);
            let code = couponDiv.dataset.code;
            let id = couponDiv.dataset.id;
            let userStateId = null;
            let selectedAddressCard = document.querySelector("#address-cards-container .address-card.border-primary");
            if(selectedAddressCard) {
                userStateId = parseInt(selectedAddressCard.dataset.stateId);
            }
            // Calculate tax with original total for minimum check
            calculateTaxComponents(originalTotal, userStateId).then(taxAmounts => {
                let totalWithTax = originalTotal + taxAmounts.totalTax;
                let shippingCost = calculateShipping(totalWithTax);
                let finalTotalBeforeDiscount = totalWithTax + shippingCost;
                if (finalTotalBeforeDiscount < min) {
                    alert("This coupon requires a minimum order of ₹" + min);
                    discountAmount = 0;
                    selectedCouponId = null;
                    document.getElementById("discount_code").value = '';
                } else {
                    discountAmount = type === 'percentage' ? finalTotalBeforeDiscount * value / 100 : value;
                    if (discountAmount > finalTotalBeforeDiscount) discountAmount = finalTotalBeforeDiscount;
                    selectedCouponId = id;
                    document.getElementById("discount_code").value = code;
                    document.getElementById("couponAnimation").style.display = 'block';
                    setTimeout(() => document.getElementById("couponAnimation").style.display = 'none', 3000);
                }
                updateTotals(userStateId);
            });
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('checkoutForm');
    form.addEventListener('submit', function(e){
        const selectedPayment = form.querySelector('input[name="payment_method"]:checked').value;
        if(selectedPayment === 'razorpay'){
            e.preventDefault(); // Prevent normal submit
            form.action = "{{ route('razorpay.create') }}";
            form.submit();
        }
        // Else, normal COD or PhonePe submit
    });
});
</script>
@endsection