{% extends "users/base.html"%}

{% block title %}
Withdrawals
{% endblock %}

{% block content %}
<section id="topBar" class="flex items-center justify-between pt-2 pb-2 pr-3 pl-3 bg-blue-1">
    <div>
        <h1 class="text-white font-bold text-xl">Withdrawal</h1>
    </div>
    <div class="hidden md:block w-[200px] text-white">
        <div>
            <div class="flex items-center justify-center gap-2">
                <p>{{ $username }}</p>
                <div>
                    <svg fill="white" style="width:30%;height:auto;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M759.2 419.8L697.4 358 512 543.4 326.6 358l-61.8 61.8L512 667z"/></svg>
                </div>
            </div>
            
            <p class="font-bold text-sm">{{ $email }}</p>
        </div>
    </div>
    <div class="md:hidden text-white" data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example">
        <div align="right">
            <svg style="width:20%;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6H20M4 12H20M4 18H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
</section>

<section class="p-5">
    <a href="javascript:void(0)" class="py-3 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2" onclick="window.location='{% url withdrawHistory %}'">Withdrawal History</a>
</section>

<section class="p-5">
    <h4 class="text-blue-1 font-bold text-xl">For withdrawals, there are two methods available. Please use one of the forms below to make your withdrawals</h4>
</section>

<section class="mt-3 p-5 flex justify-around gap-5">
    <div class="bg-blue-100 md:px-20 md:py-10 p-5 rounded-xl">
        <h3 class="font-bold text-blue-1 text-xl mb-10">Make A Withdrawal (Crypto)</h3>
        <div>
            <form class="" id="withdrawFormCrypto">
                <div class="md:flex items-center justify-start gap-10 mt-10">
                    <div class="mb-5">
                        <label for="email" class="block mb-2 text-sm font-bold text-blue-1">Payment Gateway</label>
                        <select id="paymentMethod" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-72 w-[100%] p-2.5">
                            @php foreach($payment_methods['data'] as $method): @endphp
                            <option value="{{ $method->name }}">{{ $method->name }}</option>
                            @php endforeach; @endphp
                        </select>
                    </div>
                </div>
                
                <div class="mb-5">
                        <label for="Withdrawal Address" class="block mb-2 text-sm font-bold text-blue-1">Wallet Address</label>
                        <input type="text" id="walletAddress" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-72 w-[100%] p-2.5" required />
                    </div>
                    <div class="mb-5">
                        <label for="Withdrawal Amount" class="block mb-2 text-sm font-bold text-blue-1">Withdrawal Amount</label>
                        <input type="number" id="withdrawAmountCrypto" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-72 w-[100%] p-2.5" required />
                    </div>

                <div class="flex items-start mb-2">
                </div>
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Withdraw Now</button>
                <div class=mt-5>
                    <p class="text-sm text-red-400 font-bold">It is Mandatory that you submit your KYC Information in order for us to approve your withdrawals.</p>
                </div>
                <div class=mt-5>
                    <p class="text-sm text-red-400 font-bold">Also, Payment (especially cryptocurrencies) might take up to 12 hours to reflect in your wallet due to the volume of activities on the blockchain network</p>
                </div>
            </form>
        </div>
    </div>
</section>



<section class="mt-3 p-5 flex justify-around gap-5">
    <div class="bg-blue-100 md:px-20 md:py-10 p-5 rounded-xl">
        <h3 class="font-bold text-blue-1 text-xl mb-10">Make A Withdrawal (Wire Transfer)</h3>
        <div>
            <form class="" id="withdrawForm">
                <div class="md:flex items-center justify-start gap-10 mt-10">
                    <div class="mb-5">
                        <label for="Bank Name" class="block mb-2 text-sm font-bold text-blue-1">Bank Name</label>
                        <input type="text" id="bankName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-full w-[100%] p-2.5" required />
                    </div>
                    <div class="mb-5">
                        <label for="Account Name" class="block mb-2 text-sm font-bold text-blue-1">Account Name</label>
                        <input type="text" id="accountName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-full w-[100%] p-2.5" required />
                    </div>
                </div>
                <div class="md:flex items-center justify-start gap-10">
                    <div class="mb-5">
                        <label for="Routing Number" class="block mb-2 text-sm font-bold text-blue-1">Routing Number</label>
                        <input type="text" id="routingNumber" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-full w-[100%] p-2.5" required />
                    </div>
                    <div class="mb-5">
                        <label for="Account Number" class="block mb-2 text-sm font-bold text-blue-1">Account Number</label>
                        <input type="text" id="accountNumber" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block md:w-full w-[100%] p-2.5" required />
                    </div>
                </div>
                <div class="md:flex items-center justify-start gap-10">
                    <div class="mb-5">
                        <label for="Withdrawal Amount" class="block mb-2 text-sm font-bold text-blue-1">Withdrawal Amount</label>
                        <input type="number" id="withdrawAmount" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5" required />
                    </div>
                </div>
                

                <div class="flex items-start mb-2">
                </div>
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Withdraw Now</button>
                <div class=mt-5>
                    <p class="text-sm text-red-400 font-bold">It is Mandatory that you submit your KYC Information in order for us to approve your withdrawals.</p>
                </div>
                <div class=mt-5>
                    <p class="text-sm text-red-400 font-bold">Also, Payment (especially cryptocurrencies) might take up to 12 hours to reflect in your wallet due to the volume of activities on the blockchain network</p>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}

{% block js %}
<script>
    $("#withdrawForm").submit(function(e){
        e.preventDefault();
        const bankName = $("#bankName").val();
        const accountName = $("#accountName").val();
        const routingNumber = $("#routingNumber").val();
        const accountNumber = $("#accountNumber").val();
        const withdrawAmount = $("#withdrawAmount").val();
        
        const depositWallet = Number("{{ $user_profile->total_deposit_balance }}")
        const interestWallet = Number("{{ $user_profile->total_interest_balance }}")

        if(withdrawAmount == 0 ){
            Swal.fire({
                title: 'Error',
                text: `Can't Withdraw 0 dollars`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }
        if(withdrawAmount > depositWallet && withdrawAmount > interestWallet){
            Swal.fire({
                title: 'Error',
                text: `You Do not have up to this amount in either of your wallets`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }
        
        $.post({
            method: 'POST',
            url: '{% url processWithdrawBank %}',
            data: {
                'bankName': bankName,
                'accountName': accountName,
                'routingNumber': routingNumber,
                'accountNumber': accountNumber,
                'withdrawAmount': withdrawAmount,
            },
            success: function(response){
                const result = JSON.parse(response);
                if(result.status == 'success'){
                    
                    Swal.fire({
                        title: 'Withdrawal Pending',
                        text: result.msg,
                        icon: 'success',
                        confirmButtonText: 'Okay'
                    }).then((outcome) => {
                        if(outcome.isConfirmed){
                            id = result.data.id;
                            window.location = `{% url withdrawDetail %}/${id}`
                        }
                    })
                    
                }
            }
            
        })
        
    })
    
    $("#withdrawFormCrypto").submit(function(e){
        e.preventDefault();

        const paymentMethod = $("#paymentMethod").val();
        const withdrawAmount = $("#withdrawAmountCrypto").val();
        const walletAddress = $("#walletAddress").val();

        const depositWallet = Number("{{ $user_profile->total_deposit_balance }}")
        const interestWallet = Number("{{ $user_profile->total_interest_balance }}")

        if(withdrawAmount == 0 ){
            Swal.fire({
                title: 'Error',
                text: `Can't Withdraw 0 dollars`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }
        if(withdrawAmount > depositWallet && withdrawAmount > interestWallet){
            Swal.fire({
                title: 'Error',
                text: `You Do not have up to this amount in either of your wallets`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }
        
        $.post({
            method: 'POST',
            url: '{% url processWithdrawCrypto %}',
            data: {
                'paymentMethod': paymentMethod,
                'withdrawAmount': withdrawAmount,
                'walletAddress': walletAddress
            },
            success: function(response){
                const result = JSON.parse(response);
                if(result.status == 'success'){
                    Swal.fire({
                        title: 'Withdrawal Pending',
                        text: result.msg,
                        icon: 'success',
                        confirmButtonText: 'Okay'
                    }).then((outcome) => {
                        if(outcome.isConfirmed){
                            id = result.data.id;
                            window.location = `{% url withdrawDetail %}/${id}`
                        }
                    })
                }
            }
        })

    })
</script>
{% endblock %}