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

{% block title %}
Crypto Project
{% 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">Deposit</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="mt-3 p-5 flex justify-around gap-5">
    <div class="bg-blue-100 p-5 md:px-20 md:py-10 rounded-xl">
        <h3 class="font-bold text-blue-1 text-xl mb-5">You have requested <strong>{{ $requestedAmount }}</strong> Please Pay <strong>{{ $requestedAmount }}</strong> USD for successful payment</h3>
        <p class="font-bold text-sm">Kindly Make Payment to the following Address</p>
        <p class="font-bold text-blue-1">Wallet Address: {{ $paymentMethod->wallet_address }}</p>
        <p>Payment Method: - {{ $paymentMethod->name }}</p>
        <p>Payment Network: - {{ $paymentMethod->network }}</p>
        <p></p>
        
        <div class="mt-5">
            <form class="" id="submitProofForm">
                <div class="mb-5">
                    <label for="password" class="block mb-2 text-sm font-bold text-blue-1">Proof of Deposit</label>
                    <input type="file" id="imageProof" accept="image/png, image/jpeg, .jpg, .pdf" id="investAmount" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <p class="text-sm font-bold text-blue-1">Supported Files: JPG, JPEG, PNG, PDF</p>
                <div class="mt-5">
                    <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">Submit Proof</button>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}

{% block js %}
<script>
    $("#submitProofForm").submit(function(e){
        e.preventDefault();

        const paymentMethod = "{{ $_SESSION['paymentMethod'] }}";
        const requestedAmount = Number("{{ $_SESSION['investAmount'] }}");
        const fd = new FormData();
        const files = $("#imageProof")[0].files[0];
        fd.append('file', files);
        fd.append('paymentMethod', paymentMethod);
        fd.append('requestedAmount', requestedAmount);

        $.ajax({
            url: '{% url submit-proof %}',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                const result = JSON.parse(response);
                switch(result.status){
                    case 'success':
                        Swal.fire({
                            title: 'Success',
                            text: result.msg,
                            icon: 'success',
                            confirmButtonText: 'Okay'
                        }).then((outcome) => {
                            if(outcome.isConfirmed){
                                window.location = "{% url dashboard %}";
                            }
                        })  
                    break;
                    case 'error':
                        Swal.fire({
                            title: 'Error',
                            text: result.msg,
                            icon: 'error',
                            confirmButtonText: 'Okay'
                        }).then((outcome) => {
                            //if(outcome.isConfirmed){
                            //window.location = "{% url login %}";
                            //}
                        })


                }
            }
        })

        
            Swal.fire({
                title: 'Error',
                text: `The minimum investment must be $${investMinimum}`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
        

        $.post({
            method: 'POST',
            url: "{% url pay_for_investment %}",
            data: {
                'paymentMethod': paymentMethod,
                'investAmount': investAmount,
                'investMinimum': investMinimum,
            },
            success: function(data){
                result = JSON.parse(data)
                switch(result.status){
                    case 'error':
                        Swal.fire({
                            title: 'Error',
                            text: `${result.msg}`,
                            icon: 'error',
                            confirmButtonText: 'Go to Deposit'
                        }).then((outcome) => {
                            if(outcome.isConfirmed){
                                window.location = "{% url deposit %}";
                            }
                        });
                        break;
                }
            },
        });



    })
</script>
{% endblock %}