@extends('astrologer.layouts.app')

@section('title', 'Enrollment Fee')

@section('content')
    <div class="h-[80vh] flex flex-col items-center justify-center">
        <div class="glass-card max-w-md w-full p-8 rounded-3xl text-center border-t border-white/10 shadow-2xl">
            <div
                class="w-20 h-20 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-6 ring-4 ring-blue-600/10">
                <i data-lucide="crown" class="w-10 h-10 text-blue-500"></i>
            </div>

            <h1 class="text-3xl font-bold text-white mb-2">Welcome to Astrotalk</h1>
            <p class="text-slate-400 mb-8">To verify your commitment and maintain platform quality, a one-time enrollment
                fee is required to activate your dashboard.</p>

            <div class="bg-slate-900/50 rounded-2xl p-6 mb-8 border border-white/5">
                <p class="text-sm font-medium text-slate-500 uppercase tracking-wider mb-1">Enrollment Fee</p>
                <div class="flex items-center justify-center gap-1">
                    <span class="text-2xl text-slate-400 font-medium">₹</span>
                    <span class="text-5xl font-bold text-white tracking-tight">{{ number_format($feeAmount, 2) }}</span>
                </div>
            </div>

            @php
                $razorpayEnabled = ($paymentSettings['razorpay_status'] ?? 0) == 1;
                $phonepeEnabled = ($paymentSettings['phonepe_status'] ?? 0) == 1;
                $hasGateway = $razorpayEnabled || $phonepeEnabled;
            @endphp

            @if($hasGateway)
                <div class="space-y-4">
                    @if($razorpayEnabled)
                        <button id="rzp-button1"
                            class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-blue-600/25 flex items-center justify-center gap-2 group">
                            <i data-lucide="credit-card" class="w-5 h-5"></i>
                            <span>Pay with Razorpay</span>
                        </button>
                    @endif

                    @if($phonepeEnabled)
                        <form action="{{ route('astrologer.enrollment.pay') }}" method="POST">
                            @csrf
                            <input type="hidden" name="payment_method" value="phonepe">
                            <button type="submit"
                                class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-purple-600/25 flex items-center justify-center gap-2 group">
                                <i data-lucide="smartphone" class="w-5 h-5"></i>
                                <span>Pay with PhonePe</span>
                            </button>
                        </form>
                    @endif
                </div>
            @else
                <div class="bg-red-500/10 border border-red-500/20 rounded-2xl p-4 text-red-400 text-sm mb-6">
                    <p>Online payment is currently unavailable. Please contact administration.</p>
                </div>
            @endif

            <div class="mt-6 flex items-center justify-center gap-2 text-xs text-slate-500">
                <i data-lucide="shield-check" class="w-4 h-4 text-green-500"></i>
                <span>Secure Payment Processed via Our Partners</span>
            </div>
        </div>
    </div>

    @if($razorpayEnabled)
        <form action="{{ route('astrologer.enrollment.pay') }}" method="POST" id="razorpay-form" style="display: none;">
            @csrf
            <input type="hidden" name="payment_method" value="razorpay">
            <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
        </form>

        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
        <script>
            var options = {
                "key": "{{ $paymentSettings['razorpay_key'] ?? '' }}",
                "amount": "{{ $feeAmount * 100 }}",
                "currency": "INR",
                "name": "Astrotalk Enrollment",
                "description": "Verification Fee for {{ auth()->user()->name }}",
                "image": "https://astrotalk.com/assets/images/astrotalk-logo.png",
                "handler": function (response) {
                    document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id;
                    document.getElementById('razorpay-form').submit();
                },
                "prefill": {
                    "name": "{{ auth()->user()->name }}",
                    "email": "{{ auth()->user()->email }}",
                    "contact": "{{ auth()->user()->mobile ?? '' }}"
                },
                "theme": {
                    "color": "#2563eb"
                }
            };
            var rzp1 = new Razorpay(options);
            document.getElementById('rzp-button1').onclick = function (e) {
                rzp1.open();
                e.preventDefault();
            }
        </script>
    @endif
@endsection