@extends('frontend.layouts.app')

@section('title', 'Contest Payment')

@section('content')

    <section class="section-padding">
        <div class="container">

            <div class="row justify-content-center">

                <div class="col-lg-6">

                    <div class="card shadow border-0">

                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">Contest Payment</h4>
                        </div>
                        <div class="card-body">

                            <div class="text-center mb-4">

                                <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center"
                                    style="width:80px;height:80px;">

                                    <i class="fas fa-credit-card text-primary fs-2"></i>

                                </div>

                                <h4 class="mt-3 mb-1">{{ $contest->title }}</h4>

                                <p class="text-muted mb-0">
                                    Complete your payment to confirm your contest registration.
                                </p>

                            </div>

                            <table class="table table-borderless">

                                <tr>
                                    <th class="text-muted">Contest</th>
                                    <td class="text-end fw-semibold">
                                        {{ $contest->title }}
                                    </td>
                                </tr>

                                <tr>
                                    <th class="text-muted">Category</th>
                                    <td class="text-end">
                                        <span class="badge bg-primary">
                                            {{ $contest->category->name }}
                                        </span>
                                    </td>
                                </tr>

                                <tr>
                                    <th class="text-muted">Entry Fee</th>
                                    <td class="text-end">
                                        ₹{{ number_format($contest->entry_fee, 2) }}
                                    </td>
                                </tr>

                                <tr>
                                    <th class="text-muted">Payment Method</th>
                                    <td class="text-end">
                                        Razorpay Secure Checkout
                                    </td>
                                </tr>

                                <tr class="border-top">

                                    <th class="fs-5">
                                        Total Payable
                                    </th>

                                    <td class="text-end">

                                        <h4 class="text-success mb-0">
                                            ₹{{ number_format($contest->entry_fee, 2) }}
                                        </h4>

                                    </td>

                                </tr>

                            </table>

                            <button id="payBtn" class="btn btn-primary btn-lg w-100 mt-3">

                                <i class="fas fa-lock me-2"></i>

                                Pay Securely (Razorpay)

                            </button>

                            <div class="mt-3">
                                @if (auth()->user()->wallet_balance >= $contest->entry_fee)
                                    <form action="{{ route('contest.pay-wallet', $contest->id) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-lg w-100">
                                            <i class="fas fa-wallet me-2"></i> Pay from Wallet (Balance: ₹{{ number_format(auth()->user()->wallet_balance, 2) }})
                                        </button>
                                    </form>
                                @else
                                    <div class="alert alert-warning text-center py-2 mb-0">
                                        <i class="fas fa-exclamation-triangle me-1"></i> Insufficient wallet balance (₹{{ number_format(auth()->user()->wallet_balance, 2) }}) to pay with wallet.
                                    </div>
                                @endif
                            </div>

                            <div class="text-center mt-4">

                                <small class="text-muted">

                                    <i class="fas fa-shield-alt text-success me-1"></i>

                                    100% Secure Payment powered by Razorpay

                                </small>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </section>


    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

    <script>
        document.getElementById('payBtn').onclick = function(e) {

            var options = {

                key: "{{ config('services.razorpay.key') }}",

                amount: "{{ $order['amount'] }}",

                currency: "INR",

                name: "{{ config('app.name') }}",

                description: "{{ $contest->title }}",

                order_id: "{{ $order['id'] }}",

                handler: function(response) {

                    let form = document.createElement('form');

                    form.method = 'POST';
                    form.action = "{{ route('payment.verify') }}";

                    form.innerHTML = `
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="contest_id" value="{{ $contest->id }}">
        <input type="hidden" name="razorpay_payment_id" value="${response.razorpay_payment_id}">
        <input type="hidden" name="razorpay_order_id" value="${response.razorpay_order_id}">
        <input type="hidden" name="razorpay_signature" value="${response.razorpay_signature}">
    `;

                    document.body.appendChild(form);
                    form.submit();
                },

                prefill: {

                    name: "{{ auth()->user()->name }}",

                    email: "{{ auth()->user()->email }}",

                    contact: "{{ auth()->user()->phone ?? '' }}"

                },

                theme: {

                    color: "#0d6efd"

                }

            };

            var rzp = new Razorpay(options);

            rzp.open();

            e.preventDefault();
        }
    </script>
@endsection