@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - Checkout</title>
@endpush
@section('main-section')

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 md:py-12">
        <div class="flex flex-col lg:flex-row gap-12">

            <!-- Billing Details -->
            <div class="w-full lg:w-3/5">
                <h1 class="text-3xl md:text-4xl font-extrabold mb-8">Billing Details</h1>
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-slate-200">
                    <form name="storeCheckout" action="{{ route('checkout.store') }}" method="POST" id="payment-form"
                        class="space-y-4">
                        {{ csrf_field() }}

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                            @if (auth()->user()->email)
                                <input type="email" id="email" name="email"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all bg-gray-100"
                                    value="{{ auth()->user()->email }}" required readonly>
                            @else
                                <input type="email" id="email" name="email"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                    value="{{ old('email') }}" required>
                            @endif
                        </div>

                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                            <input type="text" id="name" name="name"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                value="{{ auth()->user()->name }}" required>
                        </div>

                        <!-- Address -->
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <input type="text" id="address" name="address"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                value="{{ auth()->user()->address }}" required>
                        </div>

                        <!-- City & State Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- City -->
                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                                <input type="text" id="city" name="city"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                    value="{{ auth()->user()->city }}" required>
                            </div>

                            <!-- State -->
                            <div>
                                <label for="province" class="block text-sm font-medium text-gray-700 mb-1">State</label>
                                <input type="text" id="province" name="province"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                    value="{{ auth()->user()->state }}" required>
                            </div>
                        </div>

                        <!-- Pincode & Phone Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Pincode -->
                       <!-- Pincode -->
<div>
    <label for="postalcode" class="block text-sm font-medium text-gray-700 mb-1">Pincode</label>
    <input type="text" id="postalcode" name="postalcode"
        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
        value="{{ auth()->user()->postal_code }}" required>

    <p id="pincode-status" class="mt-2 text-sm"></p>
</div>

                            <!-- Phone -->
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                                <input type="tel" id="phone" name="phone"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all"
                                    value="{{ auth()->user()->phone }}" required>
                            </div>
                        </div>

                        <!-- Payment Elements -->
                        <!-- <div class="pt-4">
                                <div id="card-element" class="p-3 border border-gray-300 rounded-lg">
                                </div>
                                <div id="card-errors" class="text-red-500 text-sm mt-2" role="alert"></div>
                            </div> -->

                        <!-- Hidden Fields -->
                        <input type="hidden" id="rzp_paymentid" value="" name="rzp_paymentid" />

                        <!-- Submit Button -->
                        <div class="pt-6">
                            <button type="submit" id="complete-order"
                                class="yellow-gradient w-full text-blue-900 font-bold text-lg py-4 rounded-full shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] shine-effect">
                                Complete Order
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Your Order -->

            <div class="w-full lg:w-2/5">
                <h1 class="text-3xl md:text-4xl font-extrabold mb-8">Your Order</h1>
                <div class="bg-white p-6 rounded-2xl shadow-xl border border-slate-200 sticky top-28">
                    <!-- Order Items -->
                    <div class="space-y-4">
                        @if ($cart_products->count() > 0)
                            @foreach ($cart_products as $item)
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center gap-4">
                                        <!-- You'll need to add product images to your data -->
                                        <img src="{{ $item->product_images }}" alt="{{ $item->product_title }}"
                                            class="w-16 h-16 rounded-lg border object-cover">
                                        <div>
                                            <p class="font-bold">{{ $item->product_title }}</p>
                                            <p class="text-sm text-slate-500">Qty: {{ $item->product_quantity }}</p>
                                        </div>
                                    </div>
                                    <p class="font-semibold">
                                        ₹{{ $item->variant_price && $item->variant_price > 0 ? $item->variant_price : $item->product_price }}
                                    </p>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <!-- Totals -->
                    <div class="space-y-3 py-6 border-t mt-6">
                        <div class="flex justify-between">
                            <span class="text-slate-600">Subtotal</span>
                            <span class="font-semibold">
                                <i class="fas fa-rupee-sign"></i>{{ $cart_total - $tax }}
                            </span>
                        </div>

                        @if (session()->has('coupon'))
                            <div class="flex justify-between">
                                <span class="text-slate-600">Discount ({{ session()->get('coupon')['name'] }})</span>
                                <span class="text-green-600 font-semibold">
                                    -<i class="fas fa-rupee-sign"></i>{{ $discount }}
                                </span>
                            </div>
                        @endif

                        @if (!is_null($tax) && $tax > 0)
                            <div class="flex justify-between">
                                <span class="text-slate-600">GST</span>
                                <span class="font-semibold">
                                    <i class="fas fa-rupee-sign"></i>{{ $tax }}
                                </span>
                            </div>
                        @endif

                    </div>

                    <!-- <div class="flex justify-between font-bold text-xl border-t pt-4">
                        <span>Total (Inclusive of All Taxes)</span>
                        <span>
                            @php
                                $finaltotal = !is_null($tax) && $tax > 0 ? $newTotal : $cart_subtotal;
                            @endphp
                            <i class="fas fa-rupee-sign"></i>{{ $finaltotal }}
                        </span>
                    </div> -->

                    <div class="flex justify-between font-bold text-xl border-t pt-4">
                    <span>Total (Inclusive of All Taxes)</span>
                    <span>
                        @php
                            // Base total: include tax if available, else use subtotal
                            $finaltotal = !is_null($tax) && $tax > 0 ? $newTotal : $cart_subtotal;

                            // Deduct coupon discount if applied
                            if(session()->has('coupon')) {
                                $finaltotal -= $discount;
                            }

                            // Prevent negative totals
                            $finaltotal = max($finaltotal, 0);
                        @endphp
                        <i class="fas fa-rupee-sign"></i>{{ $finaltotal }}
                    </span>
                </div>



                    <input type="hidden" id="totalAmt" value="{{ isset($newTotal) ? $newTotal : $cart_total }}" />
                </div>
            </div>


        </div>
    </main>

@endsection

@section('extrascripts')
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script type="text/javascript">
        $('#complete-order').click(function(e) {
            event.preventDefault();

            var totalnewamount = $('#totalAmt').val().trim();
            var email = $('#email').val().trim();
            var name = $('#name').val().trim();
            var address = $('#address').val().trim();
            var city = $('#city').val().trim();
            var province = $('#province').val().trim();
            var postalcode = $('#postalcode').val().trim();
            var phone = $('#phone').val().trim();

            // Validation Checks
            if (email === "" || !validateEmail(email)) {
                showError("Please enter a valid email address!");
                return;
            }
            if (name === "") {
                showError("Name is required!");
                return;
            }
            if (address === "") {
                showError("Address is required!");
                return;
            }
            if (city === "") {
                showError("City is required!");
                return;
            }
            if (province === "") {
                showError("State is required!");
                return;
            }
            if (postalcode === "" || !/^\d{6}$/.test(postalcode)) {
                showError("Please enter a valid 6-digit Pincode!");
                return;
            }
            if (phone === "" || !/^\d{10}$/.test(phone)) {
                showError("Please enter a valid 10-digit phone number!");
                return;
            }
            if (totalnewamount === "" || isNaN(totalnewamount) || parseFloat(totalnewamount) <= 0) {
                showError("Invalid order amount!");
                return;
            }



            var amount = ;
            amount = Math.ceil(amount);
            if (amount < 100000 && amount > 1000) {
                amount = amount + '00';
            } else if (amount < 100000 && amount < 1000) {
                amount = amount + '00';
            } else if (amount < 100000 && amount < 1000 && amount < 100) {
                amount = amount + '00';
            } else if (amount > 100000) {
                amount = amount + '00';
            }

            let allAreFilled = true;
            document.getElementById("payment-form").querySelectorAll("[required]").forEach(function(i) {
                if (!allAreFilled) return;
                if (!i.value) allAreFilled = false;

            })
            if (!allAreFilled) {
                alert('Fill all the required fields');
            } else {
                //add this function for genrate razorpay order_id-sachhidanadn
                $.ajax({
                    type: "POST",
                    url: "/order",
                    data: {
                        "amount": amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                        "currency": "INR",
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(data) {

                        let order_id = data.order_id;

                        var options = {
                            "key": "{{ env('RAZOR_KEY') }}", // Enter the Key ID generated from the Dashboard
                            // "key": "rzp_test_E5FdFIhqJaistX", // Enter the Key ID generated from the Dashboard
                            // "key": "rzp_test_E5FdFIhqJaistX", // Enter the Key ID generated from the Dashboard
                            "amount": amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                            "currency": "INR",
                            "order_id": order_id,
                            "name": "{{ auth()->user() != null ? auth()->user()->name : '' }}",
                            "description": 'AstralArt Order',
                            "image": "", // You can give your logo url

                            "handler": function(response) {

                                // After payment successfully made response will come here
                                // send this response to Controller for update the payment response
                                // Create a form for send this data
                                // Set the data in form
                                document.getElementById('rzp_paymentid').value = response
                                    .razorpay_payment_id;
                                // document.getElementById('rzp_orderid').value = response.razorpay_order_id;
                                //document.getElementById('rzp_signature').value = response.razorpay_signature;

                                // // Let's submit the form automatically
                                //document.getElementById('rzp-paymentresponse').click();
                                $('#payment-form').submit();

                                $.ajax({
                                    url: "{{ route('coupon.destroy') }}",
                                    type: "DELETE",
                                    data: {
                                        _token: "{{ csrf_token() }}" // required for Laravel
                                    },
                                    success: function(res) {
                                        console.log("Coupon removed:", res);
                                    },
                                    error: function(xhr) {
                                        console.error("Error removing coupon:", xhr.responseText);
                                    }
                                });

                                showLoader();
                            },
                            "prefill": {
                                "name": "{{ auth()->user() != null ? auth()->user()->name : '' }}",
                                "email": "{{ auth()->user() != null ? auth()->user()->email : '' }}",

                            },
                            "notes": {
                                "address": "India",
                            },
                            "theme": {
                                "color": "#F37254"
                            }
                        };
                        var rzp1 = new Razorpay(options);

                        rzp1.open();
                        e.preventDefault();

                    }
                });

            }
        })


        // Helper Functions
        function showError(message) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: message
            });
        }

        function validateEmail(email) {
            var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#postalcode").on("keyup", function() {
        let pincode = $(this).val();

        if(pincode.length === 6) { // only check when 6 digits
            $("#pincode-status").text("Checking...").removeClass().addClass("text-blue-500");

            $.ajax({
                url: "{{ route('check.pincode') }}", // your route
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    pincode: pincode
                },
                success: function(response) {
                    if(response.status) {
                        $("#pincode-status").text("✅ Service available at this pincode.")
                            .removeClass().addClass("text-green-600");
                    } else {
                        $("#pincode-status").text("❌ Not serviceable at this pincode.")
                            .removeClass().addClass("text-red-600");
                    }
                },
                error: function() {
                    $("#pincode-status").text("⚠️ Error checking pincode.")
                        .removeClass().addClass("text-yellow-600");
                }
            });
        } else {
            $("#pincode-status").text("Enter 6-digit pincode.")
                .removeClass().addClass("text-gray-500");
        }
    });
});
</script>

@endsection