@extends('layouts.front')

@section('content')
@php
    $presetCount = count($rechargeAmounts);
    $highestPreset = $presetCount ? max($rechargeAmounts) : 0;
@endphp
<div class="jel-portal-page jel-wallet-page">
    <section class="jel-wallet-card">
        <span class="jel-portal-kicker">Wallet Recharge</span>
        <h1>Add balance and continue exam participation.</h1>
        <p>
            Recharge amount select kijiye. Selected amount ke according next screen par QR payment flow open hoga.
        </p>

        <div class="jel-result-summary-grid jel-history-summary-grid">
            <article>
                <span>Current Wallet</span>
                <strong>&#8377;{{ number_format((float) $walletamt, 2) }}</strong>
            </article>
            <article>
                <span>Preset Options</span>
                <strong>{{ $presetCount }}</strong>
            </article>
            <article>
                <span>Starting Recharge</span>
                <strong>&#8377;{{ number_format((float) $firstAmount, 2) }}</strong>
            </article>
            <article>
                <span>Highest Preset</span>
                <strong>&#8377;{{ number_format((float) $highestPreset, 2) }}</strong>
            </article>
        </div>

        <div class="jel-inline-actions">
            <a class="jel-portal-button jel-portal-button-muted" href="{{ route('wallethistory') }}">Recharge History</a>
            <a class="jel-portal-button jel-portal-button-secondary" href="{{ route('userwithdraw') }}">Withdraw Rewards</a>
        </div>

        @if (! empty($rechargeAmounts))
            <div class="jel-wallet-grid">
                @foreach ($rechargeAmounts as $amount)
                    <a
                        href="{{ route('walletamount', ['amt' => $amount]) }}"
                        data-amount="{{ $amount }}"
                        @class(['jel-wallet-pill', 'is-active' => $loop->first])
                    >
                        <small>Recharge</small>
                        <strong>&#8377;{{ number_format($amount, 2) }}</strong>
                    </a>
                @endforeach
            </div>

            <div class="jel-wallet-cta">
                <a class="jel-portal-button jel-wallet-button" id="walletProceedButton" href="{{ route('walletamount', ['amt' => $firstAmount]) }}">
                    Pay with Scan QR
                </a>
            </div>
            <p class="jel-wallet-helper">Tip: pehle preset select kijiye, phir QR flow open karke payment proof upload kijiye.</p>
        @else
            <div class="jel-portal-empty">
                <h2>Wallet recharge presets are not available right now.</h2>
                <p>Admin panel mein recharge amount setup hote hi yahan QR recharge options show ho jayenge.</p>
            </div>
        @endif
    </section>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const amountLinks = Array.from(document.querySelectorAll('.jel-wallet-pill'));
    const proceedButton = document.getElementById('walletProceedButton');

    if (!amountLinks.length || !proceedButton) {
        return;
    }

    amountLinks.forEach(function (link) {
        link.addEventListener('click', function (event) {
            event.preventDefault();
            amountLinks.forEach((item) => item.classList.remove('is-active'));
            link.classList.add('is-active');
            proceedButton.setAttribute('href', link.getAttribute('href'));
        });
    });
});
</script>
@endpush
