@extends('front.layouts.app')

@section('title', 'Checkout - Astrotalk')

@section('content')
    <div class="py-20 px-6">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h1 class="text-3xl md:text-4xl font-black text-white mb-4">Secure <span
                        class="text-yellow-500">Checkout</span></h1>
                <p class="text-slate-400">Complete your payment to add balance.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
                <!-- Order Summary -->
                <div class="md:col-span-7 space-y-6">
                    <div class="glass rounded-[2rem] p-8">
                        <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
                            <i data-lucide="receipt" class="w-5 h-5 text-yellow-500"></i>
                            Order Summary
                        </h3>

                        <div class="space-y-4">
                            <div class="flex justify-between items-center text-slate-300">
                                <span>Package Amount</span>
                                <span class="font-bold">₹{{ number_format($package->amount, 2) }}</span>
                            </div>

                            @php
                                $taxAmount = 0;
                                if ($package->is_taxable) {
                                    $taxAmount = ($package->amount * $package->tax_percentage) / 100;
                                }
                                $totalAmount = $package->amount + $taxAmount;
                            @endphp

                            @if($package->is_taxable)
                                <div class="flex justify-between items-center text-slate-400 text-sm">
                                    <span>Tax ({{ $package->tax_percentage }}% GST)</span>
                                    <span>+ ₹{{ number_format($taxAmount, 2) }}</span>
                                </div>
                            @endif

                            <div class="pt-4 border-t border-white/10 flex justify-between items-center">
                                <span class="text-lg font-bold text-white">Total Payable</span>
                                <span
                                    class="text-xl font-black text-yellow-500">₹{{ number_format($totalAmount, 2) }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div class="glass rounded-[2rem] p-8">
                        <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
                            <i data-lucide="credit-card" class="w-5 h-5 text-blue-500"></i>
                            Payment Method
                        </h3>

                        @php
                            $activeGateway = $settings['active_payment_gateway'] ?? 'manual';
                        @endphp

                        @if($activeGateway === 'razorpay' && !empty($settings['razorpay_key']))
                            <div class="flex items-center gap-4 p-4 rounded-xl bg-slate-800/50 border border-blue-500/30">
                                <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center">
                                    <img src="https://cdn.razorpay.com/logos/RQ741585574577.png" alt="Razorpay"
                                        class="w-8 h-8 object-contain">
                                </div>
                                <div>
                                    <h4 class="font-bold text-white">Razorpay Secure</h4>
                                    <p class="text-xs text-slate-400">Cards, UPI, NetBanking, Wallets</p>
                                </div>
                                <div class="ml-auto">
                                    <i data-lucide="check-circle" class="w-6 h-6 text-blue-500"></i>
                                </div>
                            </div>

                            <button id="rzp-button1"
                                class="w-full mt-6 py-4 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold uppercase tracking-widest shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center gap-2">
                                Pay ₹{{ number_format($totalAmount, 2) }}
                                <i data-lucide="arrow-right" class="w-5 h-5"></i>
                            </button>
                        @elseif($activeGateway === 'paypal')
                            <div class="text-center py-8 text-slate-400">
                                PayPal integration coming soon...
                            </div>
                        @elseif($activeGateway === 'stripe')
                            <div class="text-center py-8 text-slate-400">
                                Stripe integration coming soon...
                            </div>
                        @else
                            <div class="text-center py-8 text-slate-400">
                                Manual payment is active. Please contact support.
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Benefits -->
                <div class="md:col-span-5">
                    <div
                        class="glass rounded-[2rem] p-8 bg-gradient-to-b from-yellow-500/10 to-transparent border-yellow-500/20">
                        <h3 class="text-lg font-bold text-white mb-6">Why Recharge?</h3>
                        <ul class="space-y-6">
                            <li class="flex gap-4">
                                <div
                                    class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center flex-shrink-0">
                                    <i data-lucide="shield-check" class="w-5 h-5 text-yellow-500"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-slate-200 text-sm">100% Secure</h4>
                                    <p class="text-xs text-slate-400 mt-1">Your payment details are encrypted and safe.</p>
                                </div>
                            </li>
                            <li class="flex gap-4">
                                <div
                                    class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center flex-shrink-0">
                                    <i data-lucide="zap" class="w-5 h-5 text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-slate-200 text-sm">Instant Credit</h4>
                                    <p class="text-xs text-slate-400 mt-1">Balance added to your wallet immediately.</p>
                                </div>
                            </li>
                            @if($package->cashback_amount > 0)
                                <li class="flex gap-4">
                                    <div
                                        class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center flex-shrink-0">
                                        <i data-lucide="gift" class="w-5 h-5 text-green-500"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-200 text-sm">Cashback Reward</h4>
                                        <p class="text-xs text-slate-400 mt-1">Get ₹{{ $package->cashback_amount }} cashback on
                                            this recharge.</p>
                                    </div>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($activeGateway === 'razorpay' && !empty($settings['razorpay_key']))
        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
        <script>
            var options = {
                "key": "{{ $settings['razorpay_key'] }}",
                "amount": "{{ $totalAmount * 100 }}", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                "currency": "INR",
                "name": "Astrotalk",
                "description": "Wallet Recharge - ₹{{ $package->amount }}",
                "image": "https://astrotalk.com/assets/images/astrotalk-logo.png",
                "handler": function (response) {
                    // alert(response.razorpay_payment_id);
                    // alert(response.razorpay_order_id);
                    // alert(response.razorpay_signature)
                    window.location.href = "{{ route('payment.success') }}?payment_id=" + response.razorpay_payment_id + "&package_id={{ $package->id }}";
                },
                "prefill": {
                    "name": "{{ auth()->user()->name }}",
                    "email": "{{ auth()->user()->email }}",
                    "contact": "{{ auth()->user()->mobile ?? '' }}"
                },
                "notes": {
                    "address": "Astrotalk Corporate Office"
                },
                "theme": {
                    "color": "#eab308"
                }
            };
            var rzp1 = new Razorpay(options);
            
            rzp1.on('payment.failed', function (response){
                alert("Payment Failed: " + response.error.description);
                console.error(response.error);
            });

            document.getElementById('rzp-button1').onclick = function (e) {
                rzp1.open();
                e.preventDefault();
            }
        </script>
    @endif

@endsection