@extends('front.layouts.app')

@section('title', 'Payment - ' . $order->order_number)

@section('content')
    <div class="min-h-screen py-12">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl font-black tracking-tight text-white mb-8">Select Payment Method</h1>

            <div
                class="bg-slate-900/50 backdrop-blur-xl shadow-2xl overflow-hidden rounded-2xl border border-white/10 mb-8">
                <div class="px-6 py-5 border-b border-white/10">
                    <h3 class="text-lg font-bold text-white">Order Summary</h3>
                </div>
                <div class="px-6 py-6">
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                        <div class="sm:col-span-1">
                            <dt class="text-sm font-bold text-slate-400">Order Number</dt>
                            <dd class="mt-1 text-sm font-medium text-white">{{ $order->order_number }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-bold text-slate-400 mb-2">Order Breakdown</dt>
                            <dd class="mt-1 text-sm text-slate-300 space-y-2">
                                <div class="flex justify-between">
                                    <span>Subtotal</span>
                                    <span class="text-white">₹{{ number_format($order->subtotal, 2) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Shipping</span>
                                    <span class="text-white">₹{{ number_format($order->shipping_cost, 2) }}</span>
                                </div>
                                @if($order->discount > 0)
                                    <div class="flex justify-between text-emerald-400">
                                        <span>Discount</span>
                                        <span>-₹{{ number_format($order->discount, 2) }}</span>
                                    </div>
                                @endif
                                @if($order->gift_card_discount > 0)
                                    <div class="flex justify-between text-emerald-400">
                                        <span>Gift Card</span>
                                        <span>-₹{{ number_format($order->gift_card_discount, 2) }}</span>
                                    </div>
                                @endif
                                @if($order->points_discount > 0)
                                    <div class="flex justify-between text-emerald-400">
                                        <span>Points Redeemed ({{ $order->points_redeemed }})</span>
                                        <span>-₹{{ number_format($order->points_discount, 2) }}</span>
                                    </div>
                                @endif
                                <div class="flex justify-between font-black text-lg border-t border-white/10 pt-2 mt-2">
                                    <span class="text-white">Total Amount</span>
                                    <span class="text-yellow-500">₹{{ number_format($order->total, 2) }}</span>
                                </div>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            <div class="space-y-4">
                @if($isFreeOrder ?? false)
                    <!-- Free Order -->
                    <div
                        class="bg-slate-900/50 backdrop-blur-xl shadow-lg rounded-2xl p-6 border border-emerald-500/30 flex items-center justify-between">
                        <div class="flex items-center">
                            <div
                                class="h-12 w-12 flex-shrink-0 flex items-center justify-center bg-emerald-500/10 rounded-xl text-emerald-400 border border-emerald-500/20">
                                <i data-lucide="check-circle" class="w-6 h-6"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-white">Complete Order</h4>
                                <p class="text-sm text-slate-400">Order fully paid via Gift Card / Points</p>
                            </div>
                        </div>
                        <form action="{{ route('checkout.free', $order->id) }}" method="POST">
                            @csrf
                            <button type="submit"
                                class="bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-emerald-500/20 transition-all transform hover:-translate-y-0.5">
                                Place Order
                            </button>
                        </form>
                    </div>
                @else
                    <!-- COD Option -->
                    @if($isCodEligible)
                        <div
                            class="bg-slate-900/50 backdrop-blur-xl shadow-lg rounded-2xl p-6 border border-white/10 hover:border-white/20 transition-colors flex items-center justify-between group">
                            <div class="flex items-center">
                                <div
                                    class="h-12 w-12 flex-shrink-0 flex items-center justify-center bg-white/5 rounded-xl text-emerald-400 border border-white/10 group-hover:border-emerald-400/50 transition-colors">
                                    <i data-lucide="banknote" class="w-6 h-6"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-bold text-white">Cash on Delivery</h4>
                                    <p class="text-sm text-slate-400">Pay when you receive the order</p>
                                </div>
                            </div>
                            <form action="{{ route('checkout.cod', $order->id) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="bg-white/10 hover:bg-white/20 text-white font-bold py-3 px-6 rounded-xl border border-white/10 hover:border-white/20 transition-all transform hover:-translate-y-0.5">
                                    Confirm Order
                                </button>
                            </form>
                        </div>
                    @endif


                    <!-- PhonePe Option -->
                    @if($settings->phonepe_enabled)
                        <div
                            class="bg-slate-900/50 backdrop-blur-xl shadow-lg rounded-2xl p-6 border border-purple-500/30 flex items-center justify-between group mt-4">
                            <div class="flex items-center">
                                <div
                                    class="h-12 w-12 flex-shrink-0 flex items-center justify-center bg-purple-500/10 rounded-xl text-purple-400 border border-purple-500/20">
                                    <!-- PhonePe Logo / Icon -->
                                    <i data-lucide="smartphone" class="w-6 h-6"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-bold text-white">PhonePe / UPI</h4>
                                    <p class="text-sm text-slate-400">Pay securely with UPI, Cards, or Wallet</p>
                                </div>
                            </div>
                            <form action="{{ route('checkout.phonepe.init', $order->id) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-purple-600/20 transition-all transform hover:-translate-y-0.5">
                                    Pay with PhonePe
                                </button>
                            </form>
                        </div>
                    @endif
                @endif
            </div>

            @if(!($isFreeOrder ?? false))
                <!-- Razorpay Option -->
                @if($settings->razorpay_enabled)
                    <div
                        class="bg-slate-900/50 backdrop-blur-xl shadow-lg rounded-2xl p-6 border border-blue-500/30 flex items-center justify-between mt-4">
                        <div class="flex items-center">
                            <div
                                class="h-12 w-12 flex-shrink-0 flex items-center justify-center bg-blue-500/10 rounded-xl border border-blue-500/20">
                                <!-- Simple Razorpay Icon or SVG -->
                                <svg class="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M2.213 6.944L8.7 15.116H2.213v1.981h11.458l2.91-3.667H10.51l-4.708-5.93h12.59L21.787 3H7.625l-5.412 3.944z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-white">Pay with Razorpay</h4>
                                <p class="text-sm text-slate-400">Credit/Debit Card, Netbanking, UPI</p>
                            </div>
                        </div>
                        <button id="rzp-button1"
                            class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-blue-600/20 transition-all transform hover:-translate-y-0.5">
                            Pay Now
                        </button>
                    </div>
                @endif
            @endif
        </div>

        @if(!($isFreeOrder ?? false) && $settings->razorpay_enabled)
            <form action="{{ route('checkout.razorpay', $order->id) }}" method="POST" id="razorpay-form">
                @csrf
                <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
                <input type="hidden" name="razorpay_order_id" id="razorpay_order_id">
                <input type="hidden" name="razorpay_signature" id="razorpay_signature">
            </form>

            <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
            <script>
                var options = {
                    "key": "{{ $settings->razorpay_key_id }}",
                    "amount": "{{ $order->total * 100 }}",
                    "currency": "INR",
                    "name": "{{ config('app.name') }}",
                    "description": "Order #{{ $order->order_number }}",
                    "image": "{{ asset('images/logo.png') }}",
                    "order_id": "{{ $order->razorpay_order_id }}",
                    "handler": function (response) {
                        document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id;
                        document.getElementById('razorpay_order_id').value = response.razorpay_order_id;
                        document.getElementById('razorpay_signature').value = response.razorpay_signature;
                        document.getElementById('razorpay-form').submit();
                    },
                    "prefill": {
                        "name": "{{ $order->user ? $order->user->name : $order->name }}",
                        "email": "{{ $order->email }}",
                        "contact": "{{ $order->phone }}"
                    },
                    "notes": {
                        "address": "Razorpay Corporate Office"
                    },
                    "theme": {
                        "color": "#eab308"
                    }
                };
                var rzp1 = new Razorpay(options);
                document.getElementById('rzp-button1').onclick = function (e) {
                    rzp1.open();
                    e.preventDefault();
                }
            </script>
        @endif
@endsection