@include('layout.header')
<style>
    .payment_box {
        padding: 20px;
        background-color: #f5f5f5;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        margin: 0 auto;
    }

    .payment_text {
        font-size: 1.3em;
        font-weight: 500;
        margin-bottom: 15px;
        text-align: center;
        color: #333;
    }

    .upi-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .upi-box {
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        width: 120px;
        /* Smaller box size */
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        font-size: 1.1em;
        color: #666;
        text-align: center;
    }

    .upi-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .upi-box.selected {
        border-color: #007bff;
        /* Highlight color for the selected box */
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
        color: #007bff;
    }

    .upi-type {
        font-weight: 600;
        text-transform: uppercase;
    }
</style>


<!-- RECHARGE -->
<div class="recharge">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{ url('/user/dashboard') }}"><img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
                <span>Recharge</span>
        </div>
        <div class="right">
            <a href="{{ url('/user/rechargeRecord') }}">
                <i class="bi bi-list" style="font-size: 25px;"></i>
            </a>
        </div>
    </nav>
    <!-- HEADER -->

    <!-- BALANCE -->
    <div class="recharge_box">
        <form id="rechargeInputForm">
            <p class="top_text">Balance: ₹ <span>{{ user_wallet_balance() }}</span></p>
            <div class="code_input_box">
                <div class="code_input">
                    <img src="{{ asset('assets/img/recharge.png') }}" alt="" />
                    <input type="hidden" name="payment_type" id="payment_type" value="ekpay">
                    @if (!env('ADDITIONAL_GATEWAY_ENABLED'))
                        <input type="hidden" name="online_gateway" id="online_gateway"
                            value="{{ $website->online_gateway == 1 ? 'online' : 'offline' }}">
                    @else
                        <input type="hidden" name="online_gateway" id="online_gateway"
                            value="{{ env('ADDITIONAL_GATEWAY_NAME') }}">
                    @endif
                    <input type="text" id="amount" required name="amount"
                        min="{{ $payment_settings->min_recharge_amount }}"
                        placeholder="Enter or Select recharge amount" />
                </div>
            </div>
            <div class="code_input_box">
                <div class="error" style="width: 95%;"><span id="amount_error"></span></div>
            </div>
            <!-- BALANCE -->

            <!-- AMOUNT LIST -->
            <div class="amount_list">
                <button type="button" onclick="updateRechargeAmount('{{ $payment_settings->min_recharge_amount }}')">₹
                    <span>{{ $payment_settings->min_recharge_amount }}</span></button>
                <button type="button" onclick="updateRechargeAmount(500)">₹ <span>500</span></button>
                <button type="button" onclick="updateRechargeAmount(1000)">₹ <span>1000</span></button>
                <button type="button" onclick="updateRechargeAmount(5000)">₹ <span>5000</span></button>
                <button type="button" onclick="updateRechargeAmount(10000)">₹ <span>10000</span></button>
                <button type="button" onclick="updateRechargeAmount(49999)">₹ <span>49999</span></button>
            </div>
            <!-- AMOUNT LIST -->

            <!-- PAYMENT -->

            <div class="payment_box">
                <p class="payment_text">Select a Payment Method</p>

                <!-- Dynamic Loop to Render Multiple UPIs -->
                <div class="upi-grid">
                    @if (count($upis) > 0)
                        @foreach ($upis as $upi)
                            <div class="upi-box" id="{{ $upi->id }}" onclick="SelectMode(this.id)">
                                <p class="upi-type">{{ $loop->index + 1 }}. </p>
                                <p class="upi-type">{{ strtoupper($upi->type) }}</p>
                            </div>
                        @endforeach
                    @else
                        <p>No Payment Methods Available</p>
                    @endif
                </div>
            </div>



            {{-- <div class="payment_box">
                <p class="payment_text">Payment</p>
                <div class="van-radio-group">
                    <!---->
                    <div class="van-radio" id="ekpay" onclick="SelectMode(this.id)">
                        <div class="van-radio__icon" id="ekpaydiv">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <polyline fill="none" stroke="#000" stroke-width="2" points="2 14 9 20 22 4">
                                </polyline>
                            </svg>
                        </div>
                        <span class="van-radio__label ps-2"><span class="text">EKPay</span></span>
                    </div>
                    <div class="van-radio" id="winpay" onclick="SelectMode(this.id)">
                        <div class="van-radio__icon van-radio__icon--square" id="winpaydiv">
                            <i class="van-icon van-icon-success"><!----></i>
                        </div>
                        <span class="van-radio__label"><span class="text">WinPay</span></span>
                    </div>
                    <div class="van-radio" id="wowpay" onclick="SelectMode(this.id)">
                        <div class="van-radio__icon van-radio__icon--square" id="wowpaydiv">
                            <i class="van-icon van-icon-success"><!----></i>
                        </div>
                        <span class="van-radio__label"><span class="text">Wowpay</span></span>
                    </div>
                    <div class="van-radio" id="allpay" onclick="SelectMode(this.id)">
                        <div class="van-radio__icon van-radio__icon--square" id="allpaydiv">
                            <i class="van-icon van-icon-success"><!----></i>
                        </div>
                        <span class="van-radio__label"><span class="text">Allpay</span></span>
                    </div>
                </div>
            </div> --}}

            <div class="container-fluid pb-5 pt-4">
                <div class="row">
                    <div class="col-10 col-md-8 col-lg-6 mx-auto">
                        <input type="submit" class="w-100 btn btn-primary" value="Recharge" />
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- RECHARGE -->

<script>
    let min = parseInt("{{ $payment_settings->min_recharge_amount }}");
</script>

@include('layout.footer')
