@extends('frontend.layouts.app')

@section('title', 'Secure Wallet Payment')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">
            <div class="row">
                {{-- Sidebar --}}
                <div class="col-lg-3 col-xl-2 mb-4">
                    <button class="dashboard-menu-btn d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#dashboardSidebar">
                        <i class="fa-solid fa-bars"></i>
                        <span>Menu</span>
                    </button>
                    <div class="d-none d-lg-block">
                        @include('frontend.dashboard.sidebar')
                    </div>
                </div>

                {{-- Checkout Card Content --}}
                <div class="col-lg-9 col-xl-8 col-xxl-6">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                        <div class="card-header bg-primary bg-gradient text-white py-4 px-4 border-0">
                            <div class="d-flex align-items-center gap-3">
                                <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="fa-solid fa-wallet fs-4 text-white"></i>
                                </div>
                                <div>
                                    <h4 class="fw-bold mb-0">Secure Deposit</h4>
                                    <p class="text-white-50 small mb-0">Powered by Razorpay Secure Gateway</p>
                                </div>
                            </div>
                        </div>

                        <div class="card-body p-4 p-md-5">
                            <div class="mb-4">
                                <h5 class="fw-bold text-dark mb-3">Deposit Summary</h5>
                                <div class="p-3 bg-light rounded-3 mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted">Transaction Type</span>
                                        <span class="fw-semibold text-primary">Wallet Deposit</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted">Order ID</span>
                                        <span class="font-monospace text-dark small">{{ $order['id'] }}</span>
                                    </div>
                                    <hr class="my-2 border-secondary border-opacity-10">
                                    <div class="d-flex justify-content-between align-items-end">
                                        <span class="fw-bold text-dark mb-1">Total Payable Amount</span>
                                        <h3 class="fw-bold text-success mb-0">₹{{ number_format($amount, 2) }}</h3>
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-3">
                                <button id="payBtn" class="btn btn-primary btn-lg rounded-pill fw-bold py-3 shadow-sm">
                                    <i class="fa-solid fa-shield-halved me-2"></i> Pay Securely Now
                                </button>
                                <a href="{{ route('dashboard.wallet') }}" class="btn btn-outline-secondary btn-lg rounded-pill fw-bold py-3">
                                    <i class="fa-solid fa-arrow-left me-2"></i> Cancel & Return
                                </a>
                            </div>

                            <div class="row text-center g-3 mt-4 pt-3 border-top">
                                <div class="col-4">
                                    <i class="fa-solid fa-lock text-success fs-4 mb-2"></i>
                                    <p class="small text-muted mb-0">PCI-DSS Compliant</p>
                                </div>
                                <div class="col-4">
                                    <i class="fa-solid fa-shield text-success fs-4 mb-2"></i>
                                    <p class="small text-muted mb-0">SSL Secured</p>
                                </div>
                                <div class="col-4">
                                    <i class="fa-solid fa-circle-check text-success fs-4 mb-2"></i>
                                    <p class="small text-muted mb-0">Instant Credit</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        document.getElementById('payBtn').onclick = function(e) {
            var options = {
                key: "{{ $razorpayKey }}",
                amount: "{{ $order['amount'] }}",
                currency: "INR",
                name: "{{ config('app.name', 'BRAINTHINKS') }}",
                description: "Wallet Refill - Deposit",
                order_id: "{{ $order['id'] }}",
                handler: function(response) {
                    let form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ route('dashboard.wallet.deposit.verify') }}";
                    form.innerHTML = `
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="amount" value="{{ $amount }}">
                        <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 }}"
                },
                theme: {
                    color: "#0d6efd"
                }
            };
            var rzp = new Razorpay(options);
            rzp.open();
            e.preventDefault();
        };
    </script>
@endsection