@extends('web.home.layout.master')

@section('content')
    <!-- Premium Checkout Stylesheet -->
    <link rel="stylesheet" href="{{ asset('assets/css/checkout.css') }}">

    <div class="checkout-page-wrapper">
          <div class="container-fluid" style="padding-left:7.5%;padding-right:7.5%;">
            
            <!-- Breadcrumb Navigation -->
            <div class="checkout-breadcrumb">
                <a href="{{ route('american.plastic.web') }}">Home</a>
                <i class="fas fa-chevron-right"></i>
                <span class="active">Cart Checkout</span>
            </div>
            
            <!-- Page Title Section -->
            <div class="checkout-title-section">
                <h1 class="checkout-main-title">Complete Your Cart Order</h1>
                <p class="checkout-subtitle">Please enter your shipping details and select a payment method below.</p>
            </div>

            {{-- Professional Error Alerts --}}
            @if ($errors->any() || session('error'))
                <div class="checkout-card border-danger bg-light mb-4 position-relative">
                    <button type="button" class="btn-close position-absolute top-0 end-0 m-3" onclick="this.parentElement.style.display='none';" style="border: none; background: transparent; font-size: 1.2rem; cursor: pointer;">&times;</button>
                    <div class="d-flex align-items-center gap-3 mb-3 text-danger">
                        <i class="fas fa-exclamation-circle fa-2x"></i>
                        <h4 class="m-0 fw-bold">Information Required to Proceed</h4>
                    </div>
                    <ul class="text-danger fw-semibold list-unstyled ps-3 mb-0">
                        @if(session('error'))
                            <li class="position-relative mb-2"><i class="fas fa-chevron-right me-2 text-danger"></i>{{ session('error') }}</li>
                        @endif
                        @foreach ($errors->all() as $error)
                            <li class="position-relative mb-2"><i class="fas fa-chevron-right me-2 text-danger"></i>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4 border-start border-4 border-success shadow-sm" role="alert">
                    <strong><i class="fas fa-check-circle me-2"></i> Success:</strong> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @php
                $user = Auth::user();
                $cartData = App\Models\Cart::where('userid', $user->id)->get();
                $total = 0;

                foreach ($cartData as $cartItem) {
                    $total += $cartItem->total;
                }

                $cartproduct = App\Models\Cart::where('userid', $user->id)->get();
                $totalPrice = 0;
                $totalWeightInGrams = 0;
                $taxSubtotal = 0;
                $taxBaseSetting = \App\Models\SystemSetting::get('tax_calculation_base', 'selling_price');
                $taxRateSetting = (float) \App\Models\SystemSetting::get('corporate_tax_percentage', 18.00);

                foreach ($cartproduct as $product) {
                    $productData = App\Models\Product::where('id', $product->productid)->first();
                    $totalPrice += $product->total;
                    $totalWeightInGrams += ($productData->weight ?? 0) * $product->qty;
                    
                    $taxBasePrice = ($taxBaseSetting === 'cutted_price' && isset($productData->cutted_price) && $productData->cutted_price > 0) 
                        ? $productData->cutted_price 
                        : $product->product_price;
                        
                    $taxSubtotal += $taxBasePrice * $product->qty;
                }
                $totalWeightInKg = $totalWeightInGrams / 1000;

                if ($totalWeightInKg > 1) {
                    $shippingPrice = ceil($totalWeightInKg - 1) * 100;
                } else {
                    $shippingPrice = 0;
                }

                $totalPriceWithShipping = $totalPrice + $shippingPrice;

                // Hidden CSV lists for JS Session initialization
                $product_id = '';
                $qty = '';
                $color = '';

                foreach ($cartData as $item) {
                    $product_id .= $item['productid'] . ',';
                    $qty .= $item['qty'] . ',';
                    $color .= $item['color'] . ',';
                }

                $cart_product_id = rtrim($product_id, ',');
                $cart_qty = rtrim($qty, ',');
                $cart_color = rtrim($color, ',');
                
                // Get userdata
                $userdata = App\Models\Userdata::where('userid', $user->id)->first();
            @endphp

            <div class="row">
                <!-- Left Column: Shipping Form -->
                <div class="col-lg-7 col-md-12">
                    <form id="billing-form" class="checkout-form">
                        @csrf
                        @include('web.home.checkout.partials.shipping_fields')
                    </form>
                </div>

                <!-- Right Column: Order Summary & Payment Method -->
                <div class="col-lg-5 col-md-12">
                    <div class="sticky-sidebar-summary">
                        <!-- Order Summary Card -->
                        <div class="checkout-card shadow-sm">
                            <div class="card-header-custom">
                                <i class="fas fa-shopping-bag"></i>
                                <h3>Order Summary</h3>
                            </div>

                            <!-- Cart Items List -->
                            <div class="summary-items-list">
                                @foreach ($cartproduct as $cart)
                                    @php
                                        $productdata = App\Models\Product::where('id', $cart->productid)->first();
                                        $subtotal = $cart->product_price * $cart->qty;
                                        $color = $cart->color;
                                        
                                        $brown = '#6B4B36';
                                        $applegreen = '#88DB86';
                                        $avacadogreen = '#2FCBD4';
                                        $babyblue = '#61A8F8';
                                        $babypink = '#f4c2c2';
                                        $beige = '#BA9978';
                                        $black = '#000000';
                                        $blue = '#0F2D8D';
                                        $bottlegreen = '#006A4E';
                                        $clear = '#CAD3D0';
                                        $coffee = '#6F4E37';
                                        $cream = '#FFFDD0';
                                        $darkgrey = '#A9A9A9';
                                        $green = '#005E3A';
                                        $grey = '#808080';
                                        $lemonyellow = '#FEF250';
                                        $lightorange = '#FED8B1';
                                        $marblebeige = '#DDD3D1';
                                        $marbleblue = '#62ADE6';
                                        $marblegold = '#D4AF37';
                                        $marbleorange = '#FFA07A';
                                        $marblepink = '#A78B8D';
                                        $marblegreen = '#58C3C2';
                                        $marblered = '#80355C';
                                        $metalicblue = '#13598B';
                                        $metalicred = '#C40233';
                                        $metalicsilver = '#B4B4B8';
                                        $metalicviolet = '#9582BB';
                                        $orange = '#D09305';
                                        $purple = '#A286F4';
                                        $red = '#FF0000';
                                        $skyblue = '#6CD2FA';
                                        $white = '#FFFFFF';
                                        $yellow = '#FFFF00';
                                        $saffron = '#F4C430';
                                        $metalicgreen = '#3D7764';
                                        $metalicyellow = '#F8B700';

                                        $selectcolorvalue = $color;
                                        if ($color == 'Brown') { $selectcolorvalue = 'Brown'; }
                                        elseif ($color == 'Applegreen') { $selectcolorvalue = 'Apple Green'; }
                                        elseif ($color == 'Avacadogreen') { $selectcolorvalue = 'Avocado Green'; }
                                        elseif ($color == 'Babyblue') { $selectcolorvalue = 'Baby Blue'; }
                                        elseif ($color == 'Babypink') { $selectcolorvalue = 'Baby Pink'; }
                                        elseif ($color == 'Beige') { $selectcolorvalue = 'Beige'; }
                                        elseif ($color == 'Black') { $selectcolorvalue = 'Black'; }
                                        elseif ($color == 'Blue') { $selectcolorvalue = 'Blue'; }
                                        elseif ($color == 'Bottlegreen') { $selectcolorvalue = 'Bottle Green'; }
                                        elseif ($color == 'Clear') { $selectcolorvalue = 'Clear'; }
                                        elseif ($color == 'Coffee') { $selectcolorvalue = 'Coffee'; }
                                        elseif ($color == 'Cream') { $selectcolorvalue = 'Cream'; }
                                        elseif ($color == 'Darkgrey') { $selectcolorvalue = 'Dark Grey'; }
                                        elseif ($color == 'Green') { $selectcolorvalue = 'Green'; }
                                        elseif ($color == 'Grey') { $selectcolorvalue = 'Grey'; }
                                        elseif ($color == 'Lemonyellow') { $selectcolorvalue = 'Lemon Yellow'; }
                                        elseif ($color == 'Lightorange') { $selectcolorvalue = 'Light Orange'; }
                                        elseif ($color == 'Marblebeige') { $selectcolorvalue = 'Marble Beige'; }
                                        elseif ($color == 'Marbleblue') { $selectcolorvalue = 'Marble Blue'; }
                                        elseif ($color == 'Marblegold') { $selectcolorvalue = 'Marble Gold'; }
                                        elseif ($color == 'Marbleorange') { $selectcolorvalue = 'Marble Orange'; }
                                        elseif ($color == 'Marblepink') { $selectcolorvalue = 'Marble Pink'; }
                                        elseif ($color == 'Marblered') { $selectcolorvalue = 'Marble Red'; }
                                        elseif ($color == 'Metalicblue') { $selectcolorvalue = 'Metallic Blue'; }
                                        elseif ($color == 'Metalicred') { $selectcolorvalue = 'Metallic Red'; }
                                        elseif ($color == 'Metalicsilver') { $selectcolorvalue = 'Metallic Silver'; }
                                        elseif ($color == 'Metalicviolet') { $selectcolorvalue = 'Metallic Violet'; }
                                        elseif ($color == 'Orange') { $selectcolorvalue = 'Orange'; }
                                        elseif ($color == 'Purple') { $selectcolorvalue = 'Purple'; }
                                        elseif ($color == 'Red') { $selectcolorvalue = 'Red'; }
                                        elseif ($color == 'Skyblue') { $selectcolorvalue = 'Sky Blue'; }
                                        elseif ($color == 'Purewhite') { $selectcolorvalue = 'Pure White'; }
                                        elseif ($color == 'Yellow') { $selectcolorvalue = 'Yellow'; }
                                        elseif ($color == 'Saffron') { $selectcolorvalue = 'Saffron'; }
                                        elseif ($color == 'Marblegreen') { $selectcolorvalue = 'Marble Green'; }
                                        elseif ($color == 'Metalicgreen') { $selectcolorvalue = 'Metallic Green'; }
                                        elseif ($color == 'Metalicyellow') { $selectcolorvalue = 'Metallic Yellow'; }
                                    @endphp
                                    <div class="summary-item">
                                        @php
                                            $firstImage = 'default.jpg';
                                            if ($productdata && !empty($productdata->product_image)) {
                                                $imageArray = explode(',', $productdata->product_image);
                                                $firstImage = trim($imageArray[0]) ?: 'default.jpg';
                                            }
                                        @endphp
                                        <img src="{{ asset('admin/assets/img/product/' . $firstImage) }}" class="summary-item-img" alt="{{ $productdata->product_name ?? 'Product Image' }}">
                                        <div class="summary-item-details">
                                            <h4 class="summary-item-name">{{ $productdata->product_name }}</h4>
                                            <div class="summary-item-meta">
                                                <div class="color-badge-container">
                                                    <span class="color-dot" style="background-color: {{ $color }}"></span>
                                                    <span>{{ $selectcolorvalue }}</span>
                                                </div>
                                                <span>&bull;</span>
                                                <span>Qty: {{ $cart->qty }}</span>
                                            </div>
                                        </div>
                                        <div class="summary-item-price-qty">
                                            <span class="summary-item-total">LKR {{ number_format($subtotal, 2) }}</span>
                                            <span class="summary-item-subtext">LKR {{ number_format($cart->product_price, 2) }} each</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- Totals List -->
                            <div class="totals-list">
                                <div class="totals-row">
                                    <span class="label">Subtotal</span>
                                    <span class="value base-subtotal">LKR {{ number_format($total, 2) }}</span>
                                </div>
                                <div class="totals-row">
                                    <span class="label">Shipping Fee</span>
                                    <span class="value shipping-price">LKR 0.00</span>
                                </div>
                                @if(Auth::check() && Auth::user()->is_corporate)
                                    <div class="totals-row tax-row">
                                        <span class="label">Tax ({{ number_format($taxRateSetting, 1) }}%)</span>
                                        <span class="value tax-value">LKR 0.00</span>
                                    </div>
                                @endif
                                <div class="totals-row discount-row" style="display: none;">
                                    <span class="label">Discount</span>
                                    <span class="value discount-value" id="discount_display">- LKR 0.00</span>
                                </div>
                                <div class="totals-row points-row" style="display: none;">
                                    <span class="label">Points Applied</span>
                                    <span class="value points-value" id="points_display">- LKR 0.00</span>
                                </div>
                                <div class="totals-row grand-total">
                                    <span class="label">Total</span>
                                    <span class="value total-price">LKR 0.00</span>
                                </div>
                            </div>

                            @if(Auth::check())
                                <!-- Pay by Recycling Points Summary Widget -->
                                <div class="points-payment-summary-box mt-3">
                                    <div class="points-header">
                                        <div class="points-info">
                                            <div class="points-icon-wrapper">
                                                <i class="fas fa-coins"></i>
                                            </div>
                                            <div class="points-title-desc">
                                                <span class="points-title">Pay with Recycling Points</span>
                                                <span class="points-balance" id="available-points-display" data-points="{{ Auth::user()->recycling_points ?? 0 }}">Available: {{ number_format(Auth::user()->recycling_points ?? 0, 2) }} PTS</span>
                                            </div>
                                        </div>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input" type="checkbox" id="use-points-checkbox" role="switch">
                                        </div>
                                        </div>
                                    </div>
                                    <div class="error-message" id="points-error" style="display: none; margin-top: 8px;">
                                        Insufficient points for this order.
                                    </div>
                                </div>
                            @endif

                            <!-- Livewire Voucher Component Integration -->
                            <input type="hidden" id="voucher_code_input" value="">
                            <input type="hidden" id="discount_amount_input" value="0">
                            
                            <div class="voucher-box mt-4">
                                @livewire('checkout-voucher', [
                                    'subtotal' => $totalPrice,
                                    'shippingPrice' => $shippingPrice,
                                    'taxSubtotal' => $taxSubtotal
                                ])
                            </div>
                        </div>

                        <!-- Payment Selection Card -->
                        @include('web.home.checkout.partials.payment_methods')
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            cal();

            // Handle points checkbox toggle
            $('body').on('change', '#use-points-checkbox', function () {
                cal();
            });
        });

        // Deterrence for Page Inspection
        document.addEventListener('contextmenu', event => event.preventDefault());
        document.onkeydown = function(e) {
            if (e.keyCode == 123 || 
                (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'C'.charCodeAt(0) || e.keyCode == 'J'.charCodeAt(0))) || 
                (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))) {
                return false;
            }
        };

        document.addEventListener("DOMContentLoaded", function() {
            var checkbox = document.getElementById("cartTearm");
            var checkoutButton = document.getElementById("checkout-button");

            // Ensure the button is disabled on page load
            checkoutButton.disabled = true;

            checkbox.addEventListener("change", function() {
                if (checkbox.checked) {
                    checkoutButton.disabled = false;
                } else {
                    checkoutButton.disabled = true;
                }
            });
        });

        function cal() {
            var city = $('#inputCity').val() || 'Pagoda';
            var district = $('#inputdistrict').val() || '';
            let csrfToken = $('meta[name="csrf-token"]').attr('content');
            
            updateDisplayOnly();

            $.ajax({
                type: "GET",
                url: "{{ route('zone.check', ':selectedvalue') }}".replace(':selectedvalue', city) + "?district=" + encodeURIComponent(district),
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    let additionalShippingPrice = parseFloat(response) || 0;
                    let initialShippingPrice = parseFloat("{{ $shippingPrice }}".replace(/,/g, '')) || 0;
                    let totalShippingPrice = additionalShippingPrice + initialShippingPrice;
                    var existingTotal = parseFloat("{{ $total }}".replace(/,/g, '')) || 0;
                    
                    var taxSubtotal = parseFloat("{{ $taxSubtotal }}".replace(/,/g, '')) || 0;
                    var taxAmount = 0;
                    @if(Auth::check() && Auth::user()->is_corporate)
                        taxAmount = Math.round((taxSubtotal * {{ $taxRateSetting }}) / 100 * 100) / 100;
                        $('.tax-value').text('LKR ' + taxAmount.toFixed(2));
                    @endif

                    var discount = parseFloat($('#discount_amount_input').val()) || 0;
                    var grandTotal = Math.max(0, existingTotal + parseFloat(totalShippingPrice) + taxAmount - discount);

                    $('.base-subtotal').text('LKR ' + existingTotal.toFixed(2));
                    $('.shipping-price').text('LKR ' + totalShippingPrice.toFixed(2));
                    $('.total-price').text('LKR ' + grandTotal.toFixed(2));
                    $('#totalamount').val(grandTotal.toFixed(2));
                    $('#shipping_amount_hidden').val(totalShippingPrice.toFixed(2));
                    $('#tax_amount_hidden').val(taxAmount.toFixed(2));
                    validatePoints(grandTotal);
                },
                error: function(error) {
                    updateDisplayOnly();
                }
            });
        }

        function updateDisplayOnly() {
            var existingTotal = parseFloat("{{ $total }}".replace(/,/g, '')) || 0;
            var initialShippingPrice = parseFloat("{{ $shippingPrice }}".replace(/,/g, '')) || 0;
            var discount = parseFloat($('#discount_amount_input').val()) || 0;
            
            var taxAmount = 0;
            @if(Auth::check() && Auth::user()->is_corporate)
                var taxSubtotal = parseFloat("{{ $taxSubtotal }}".replace(/,/g, '')) || 0;
                taxAmount = Math.round((taxSubtotal * {{ $taxRateSetting }}) / 100 * 100) / 100;
                $('.tax-value').text('LKR ' + taxAmount.toFixed(2));
            @endif

            var grandTotal = Math.max(0, existingTotal + initialShippingPrice + taxAmount - discount);
            
            $('.base-subtotal').text('LKR ' + existingTotal.toFixed(2));
            $('.shipping-price').text('LKR ' + initialShippingPrice.toFixed(2));
            $('.total-price').text('LKR ' + grandTotal.toFixed(2));
            $('#totalamount').val(grandTotal.toFixed(2));
            $('#shipping_amount_hidden').val(initialShippingPrice.toFixed(2));
            $('#tax_amount_hidden').val(taxAmount.toFixed(2));
            validatePoints(grandTotal);
        }
        
        function validatePoints(grandTotal) {
            var displaySpan = document.getElementById('available-points-display');
            if (displaySpan) {
                var availablePoints = parseFloat(displaySpan.getAttribute('data-points')) || 0;
                var pointsCheckbox = document.getElementById('use-points-checkbox');
                var pointsError = document.getElementById('points-error');

                if (availablePoints <= 0) {
                    if (pointsCheckbox) {
                        pointsCheckbox.disabled = true;
                        pointsCheckbox.checked = false;
                    }
                    if (pointsError) {
                        pointsError.style.display = 'block';
                        pointsError.innerText = 'You do not have any recycling points.';
                    }
                } else {
                    if (pointsCheckbox) pointsCheckbox.disabled = false;
                    if (pointsError) pointsError.style.display = 'none';
                }
                
                updateTotalsWithPoints(grandTotal);
            }
        }

        function updateTotalsWithPoints(grandTotal) {
            var displaySpan = document.getElementById('available-points-display');
            var pointsCheckbox = document.getElementById('use-points-checkbox');
            var pointsRadio = document.getElementById('points');
            
            if (!displaySpan || !pointsCheckbox) return;

            var availablePoints = parseFloat(displaySpan.getAttribute('data-points')) || 0;
            
            if (pointsCheckbox.checked && availablePoints > 0) {
                var pointsApplied = Math.min(availablePoints, grandTotal);
                var remainingTotal = grandTotal - pointsApplied;

                // Update Points Applied Row
                $('.points-row').show();
                $('#points_display').text('- LKR ' + pointsApplied.toFixed(2));

                // Update Displayed Grand Total and hidden input
                $('.total-price').text('LKR ' + remainingTotal.toFixed(2));
                $('#totalamount').val(remainingTotal.toFixed(2));

                if (remainingTotal <= 0) {
                    // Fully covered by points
                    if (pointsRadio) pointsRadio.checked = true;
                    $('.payment-card-input:not(#points)').prop('checked', false);
                    $('.payment-card-grid').css('opacity', '0.5').css('pointer-events', 'none');
                } else {
                    // Partially covered by points
                    if (pointsRadio) pointsRadio.checked = false;
                    $('.payment-card-grid').css('opacity', '1').css('pointer-events', 'auto');
                }
            } else {
                // Points not checked or none available
                $('.points-row').hide();
                $('.total-price').text('LKR ' + grandTotal.toFixed(2));
                $('#totalamount').val(grandTotal.toFixed(2));
                if (pointsRadio) pointsRadio.checked = false;
                $('.payment-card-grid').css('opacity', '1').css('pointer-events', 'auto');
            }
        }
        
        $('body').on('click', '#checkout-button', function() {
            const fullNumber = iti.getNumber();
            document.querySelector("#input-telephone").value = fullNumber;

            var firstname = document.getElementById('input-firstname');
            var lastname = document.getElementById('input-lastname');
            var email = document.getElementById('input-email');
            var telephone = document.getElementById('input-telephone');
            var addressone = document.getElementById('input-address-1');
            var fullname = document.getElementById('input-fullname');

            var selectElement = document.getElementById('inputdistrict');
            var district = document.getElementById('inputdistrict');
            var city = document.getElementById('inputCity');
            var postalcode = document.getElementById('input-postcode');
            var selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked');

            var errorSpan = document.getElementById("area-error");

            if (!selectedPaymentMethod) {
                showNotification('Please select a payment method');
                return false;
            }

            if (!/^\S+@\S+\.\S+$/.test(email.value)) {
                document.getElementById('input-email').focus();
                showNotification('Please fill in your email address');
                return false;
            } else if (fullname.value === "") {
                document.getElementById('input-fullname').focus();
                showNotification('Please fill in your full name');
                return false;
            } else if (telephone.value === "" || !/^\+?\d+$/.test(telephone.value)) {
                document.getElementById('input-telephone').focus();
                showNotification('Please fill in your telephone number');
                return false;
            } else if (addressone.value === "") {
                document.getElementById('input-address-1').focus();
                showNotification('Please fill in your address');
                return false;
            } else if (district.value === "") {
                document.getElementById('inputdistrict').focus();
                showNotification('Please select district');
                return false;
            } else if (city.value === "") {
                document.getElementById('inputCity').focus();
                showNotification('Please fill your city');
                return false;
            } else {
                var grandTotal = parseFloat(document.getElementById('totalamount').value);
                var firstnameVal = document.getElementById('input-firstname').value;
                var lastnameVal = document.getElementById('input-lastname').value;
                var telephoneVal = document.getElementById('input-telephone').value;
                var emailaddressVal = document.getElementById('input-email').value;
                var companynameVal = document.getElementById('input-company').value;
                var address_oneVal = document.getElementById('input-address-1').value;
                var address_twoVal = document.getElementById('input-address-2').value;
                var cityVal = document.getElementById('inputCity').value;
                var districtVal = document.getElementById('inputdistrict').value;
                var postal_codeVal = document.getElementById('input-postcode').value;
                var order_noteVal = document.getElementById('ordernte').value;
                var fullnameVal = document.getElementById('input-fullname').value;

                var paymentMethod = selectedPaymentMethod.value;
                var description = "Cart checkout";

                var product_id = "{{ $cart_product_id }}";
                var first_name = firstnameVal;
                var last_name = lastnameVal;
                var color = "{{ $cart_color }}";
                var qty = "{{ $cart_qty }}";
                var phone = telephoneVal;
                var email = emailaddressVal;
                var company = companynameVal;
                var addressone = address_oneVal;
                var addresstwo = address_twoVal;
                var city = cityVal;
                var district = districtVal;
                var postcode = postal_codeVal;
                var ordernote = order_noteVal;
                var shippingprice = $('#shipping_amount_hidden').val() || "{{ $shippingPrice }}";
                var weight = "{{ $totalWeightInKg }}";

                var paymentData = {
                    payment_method: paymentMethod
                };

                fetch('/create-session', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        amount: grandTotal,
                        desc: description,
                        productid: product_id,
                        cus_firstname: fullnameVal,
                        cus_lastname: last_name,
                        order_color: color,
                        order_qty: qty,
                        cus_phone: phone,
                        cus_email: email,
                        cus_company: company,
                        cus_address_one: addressone,
                        cus_address_two: addresstwo,
                        cus_city: city,
                        cus_district: district,
                        cus_postcode: postcode,
                        order_note: ordernote,
                        shipping_price: shippingprice,
                        totalweight: weight,
                        voucher_code: document.getElementById('voucher_code_input') ? document.getElementById('voucher_code_input').value : '',
                        discount_amount: document.getElementById('discount_amount_input') ? document.getElementById('discount_amount_input').value : 0,
                        use_points: $('#use-points-checkbox').is(':checked') ? 1 : 0
                    }),
                })
                .then(response => response.json())
                .then(session => {
                    console.log("session created", session.session['session.id']);
                    var sessionid = session.session['session.id'];

                    if (paymentMethod === 'cod') {
                        var grandTotal = parseFloat(document.getElementById('totalamount').value);
                        var formData = {
                            amount: grandTotal,
                            description: "{{ $productdata->product_name }}",
                            order_id: "{{ uniqid() }}",
                            cus_firstname: document.getElementById('input-fullname').value,
                            cus_email: document.getElementById('input-email').value,
                            cus_lastname: last_name,
                            order_color: color,
                            order_qty: qty,
                            cus_phone: phone,
                            productid: product_id,
                            cus_company: company,
                            cus_address_one: addressone,
                            cus_address_two: addresstwo,
                            cus_city: city,
                            cus_district: district,
                            cus_postcode: postcode,
                            order_note: ordernote,
                            shipping_price: $('#shipping_amount_hidden').val() || shippingprice,
                            totalweight: weight,
                            voucher_code: document.getElementById('voucher_code_input') ? document.getElementById('voucher_code_input').value : '',
                            discount_amount: document.getElementById('discount_amount_input') ? document.getElementById('discount_amount_input').value : 0,
                            payment_data: paymentData,
                            payment_method: paymentMethod,
                            use_points: $('#use-points-checkbox').is(':checked') ? 1 : 0
                        };

                        var queryString = Object.keys(formData).map(key =>
                            key + '=' + encodeURIComponent(formData[key])
                        ).join('&');

                        window.location.href = '{{ route('american.plastic.web.order.cod.confirmed') }}?' +
                            queryString + '&session_id=' + encodeURIComponent(sessionid);
                    } else if (paymentMethod === 'points') {
                        var grandTotal = parseFloat(document.getElementById('totalamount').value);
                        var formData = {
                            amount: grandTotal,
                            description: "Cart checkout",
                            order_id: "{{ uniqid() }}",
                            cus_firstname: document.getElementById('input-fullname').value,
                            cus_email: document.getElementById('input-email').value,
                            cus_lastname: last_name,
                            order_color: color,
                            order_qty: qty,
                            cus_phone: phone,
                            productid: product_id,
                            cus_company: company,
                            cus_address_one: addressone,
                            cus_address_two: addresstwo,
                            cus_city: document.getElementById('inputCity').value,
                            cus_district: document.getElementById('inputdistrict').value,
                            cus_postcode: postcode,
                            order_note: ordernote,
                            shipping_price: $('#shipping_amount_hidden').val() || shippingprice,
                            totalweight: weight,
                            voucher_code: document.getElementById('voucher_code_input') ? document.getElementById('voucher_code_input').value : '',
                            discount_amount: document.getElementById('discount_amount_input') ? document.getElementById('discount_amount_input').value : 0,
                            payment_data: paymentData,
                            payment_method: paymentMethod,
                            use_points: 1
                        };

                        var queryString = Object.keys(formData).map(key =>
                            key + '=' + encodeURIComponent(formData[key])
                        ).join('&');

                        window.location.href = '{{ route('american.plastic.web.order.points.confirmed') }}?' +
                            queryString + '&session_id=' + encodeURIComponent(sessionid);
                    } else if (paymentMethod === 'koko') {
                        var grandTotal = parseFloat(document.getElementById('totalamount').value);
                        var selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;

                        var formData = {
                            amount: grandTotal,
                            description: "{{ $productdata->product_name }}",
                            order_id: "{{ uniqid() }}",
                            cus_firstname: document.getElementById('input-fullname').value,
                            cus_email: document.getElementById('input-email').value,
                            cus_lastname: last_name,
                            order_color: color,
                            order_qty: qty,
                            cus_phone: phone,
                            productid: product_id,
                            cus_company: company,
                            cus_address_one: addressone,
                            cus_address_two: addresstwo,
                            cus_city: city,
                            cus_district: district,
                            cus_postcode: postcode,
                            order_note: ordernote,
                            shipping_price: shippingprice,
                            totalweight: weight,
                            voucher_code: document.getElementById('voucher_code_input') ? document.getElementById('voucher_code_input').value : '',
                            discount_amount: document.getElementById('discount_amount_input') ? document.getElementById('discount_amount_input').value : 0,
                            payment_data: paymentData,
                            use_points: $('#use-points-checkbox').is(':checked') ? 1 : 0
                        };

                        var form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '{{ route('koko.payment.initiate') }}';

                        var csrfInput = document.createElement('input');
                        csrfInput.type = 'hidden';
                        csrfInput.name = '_token';
                        csrfInput.value = '{{ csrf_token() }}';
                        form.appendChild(csrfInput);

                        Object.keys(formData).forEach(key => {
                            var input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = key;
                            input.value = formData[key];
                            form.appendChild(input);
                        });

                        document.body.appendChild(form);
                        form.submit();
                    } else if(paymentMethod === 'mintpay'){
                        var grandTotal = parseFloat(document.getElementById('totalamount').value);
                        var selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;

                        var formData = {
                            amount: grandTotal,
                            description: "{{ $productdata->product_name }}",
                            order_id: "{{ uniqid() }}",
                            cus_firstname: document.getElementById('input-fullname').value,
                            cus_email: document.getElementById('input-email').value,
                            cus_lastname: last_name,
                            order_color: color,
                            order_qty: qty,
                            cus_phone: phone,
                            productid: product_id,
                            cus_company: company,
                            cus_address_one: addressone,
                            cus_address_two: addresstwo,
                            cus_city: city,
                            cus_district: district,
                            cus_postcode: postcode,
                            order_note: ordernote,
                            shipping_price: shippingprice,
                            totalweight: weight,
                            voucher_code: document.getElementById('voucher_code_input') ? document.getElementById('voucher_code_input').value : '',
                            discount_amount: document.getElementById('discount_amount_input') ? document.getElementById('discount_amount_input').value : 0,
                            payment_data: paymentData,
                            use_points: $('#use-points-checkbox').is(':checked') ? 1 : 0
                        };

                        var form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '{{ route('mintpay.checkout') }}';

                        var csrfInput = document.createElement('input');
                        csrfInput.type = 'hidden';
                        csrfInput.name = '_token';
                        csrfInput.value = '{{ csrf_token() }}';
                        form.appendChild(csrfInput);

                        Object.keys(formData).forEach(key => {
                            var input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = key;
                            input.value = formData[key];
                            form.appendChild(input);
                        });

                        document.body.appendChild(form);
                        form.submit();
                    } else if (paymentMethod === 'card') {
                        window.location.href = '{{ route('next.page') }}?session_id=' + encodeURIComponent(sessionid);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
        });

        function showNotification(message) {
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.position = 'fixed';
            notification.style.top = '20px';
            notification.style.right = '20px';
            notification.style.padding = '15px 20px';
            notification.style.backgroundColor = '#fff5f5';
            notification.style.color = '#dc3545';
            notification.style.border = '1px solid #fca5a5';
            notification.style.borderRadius = '5px';
            notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
            notification.style.zIndex = '1000';
            notification.style.fontFamily = 'Arial, sans-serif';
            notification.style.fontSize = '14px';
            notification.style.transition = 'all 0.3s ease';

            document.body.appendChild(notification);

            setTimeout(() => {
                notification.style.opacity = '0';
                setTimeout(() => {
                    if (document.body.contains(notification)) {
                        document.body.removeChild(notification);
                    }
                }, 300);
            }, 5000);
        }

        function orderconfirmed() {
            window.location.href = "{{ route('american.plastic.web.order.confirmed') }}";
        }

        document.addEventListener('livewire:initialized', () => {
            Livewire.on('voucher-applied', (data) => {
                const eventData = (Array.isArray(data) && data.length > 0) ? data[0] : data; 
                
                let voucherInput = document.getElementById('voucher_code_input');
                let discountInput = document.getElementById('discount_amount_input');
                
                if (voucherInput) voucherInput.value = eventData.code;
                if (discountInput) discountInput.value = eventData.discount;
                
                $('#discount_display').text('- LKR ' + parseFloat(eventData.discount).toFixed(2));
                $('.discount-row').show();

                cal(); // Use cal() to update all visual elements consistently
                showNotification('Voucher applied successfully!');
            });
            
            Livewire.on('voucher-removed', (data) => {
                let voucherInput = document.getElementById('voucher_code_input');
                let discountInput = document.getElementById('discount_amount_input');
                if(voucherInput) voucherInput.value = '';
                if(discountInput) discountInput.value = 0;
                
                $('.discount-row').hide();
                cal();
                showNotification('Voucher removed.');
            });
        });
    </script>
@endsection