@extends('layouts.default1400-page', ['title' => 'شارژ آنلاین کیف پول'])

@section('meta')
<link rel="stylesheet" href="/persian-datepicker/persian-datepicker.css">
@stop

@section('content')
<form action="{{ route('user.profile.wallet.online') }}" method="POST">
    @csrf
    <input type="hidden" name="redirect" value="{{ $redirect }}">
    <div class="flex m-4 w-full justify-center">

        <div class="w-3/4 lg:w-1/2">

            <div class="grid justify-items-center mb-4">
                <img src="/svgs-new1400/wallet.svg" class="w-8">
                افزایش موجودی کیف پول
            </div>

            <div class="rounded-xl border border-gray-100 text-sm text-center">

                <div class=" p-2 btn-primary text-white rounded-t-xl text-sm">
                    شما در حال افزایش موجودی کیف پول حساب
                    {{ auth()->user()->fullname_with_perfix }}
                    هستید

                    </p>
                </div>

                <div class="flex justify-center m-4 mt-10">
                    <button type="button" class="btn btn-primary mx-2 btn-incr">
                        <img src="/svgs-new1400/circle-plus-white.svg" class="w-6">
                    </button>
                    <input type="text" placeholder="مبلغ به تومان" value="{{ $amount }}" id="amount" name="amount"
                        class="input input-base-content input-bordered text-center text-bold">
                    <button type="button" class="btn btn-primary mx-2 btn-decr">
                        <img src="/svgs-new1400/circle-minus-white.svg" class="w-6">
                    </button>

                </div>
                <span class="text-gray-400 text-xs"> مبلغ وارد شده باید بین 10.000 تومان تا 10.000.000 تومان باشد</span>

                @if($amount == 0)
                <div class="flex justify-around my-10">

                    <button type="button" data-value="100000"
                        class="rounded-xl border p-2 m-2 hover:bg-blue-50 btn-set-amount ">
                        100.000 تومان
                    </button>

                    <button type="button" data-value="500000"
                        class="rounded-xl border p-2 m-2 hover:bg-blue-50 btn-set-amount ">
                        500.000 تومان
                    </button>

                    <button type="button" data-value="1000000"
                        class="rounded-xl border p-2 m-2 hover:bg-blue-50 btn-set-amount ">
                        1.000.000 تومان
                    </button>

                    <button type="button" data-value="5000000"
                        class="rounded-xl border p-2 m-2 hover:bg-blue-50 btn-set-amount ">
                        5.000.000 تومان
                    </button>

                </div>
                @endif

            </div>

            <div class="grid justify-items-center p-3">
                <button type="submit" class="btn btn-primary">
                    افزایش موجودی
                </button>

            </div>


        </div>


    </div>
</form>
@stop

@section('scripts')

<script type="text/javascript">
    $(document).ready(function () {

        $('.btn-set-amount').click(function () { 
            $('#amount').val($(this).data('value'));
        });

        $('.btn-incr').click(function () {
            var amount = parseInt($('#amount').val());
            amount = amount + 10000;
            $('#amount').val(amount);
        });

        $('.btn-decr').click(function () {
            var amount = parseInt($('#amount').val());
            amount = amount - 10000;
            if(amount >= 0)
                $('#amount').val(amount);
        });

    });
</script>

@stop