{% 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">Withdrawal History</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 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-10">Transaction History (Withdrawals)</h3>
        <div>
            

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Withdrawal ID
                </th>
                <th scope="col" class="px-6 py-3">
                    Date
                </th>
                <th scope="col" class="px-6 py-3">
                    Amount
                </th>
                <th scope="col" class="px-6 py-3">
                    Payment Method
                </th>
                <th scope="col" class="px-6 py-3">
                    Processing Fee
                </th>
                <th scope="col" class="px-6 py-3">
                    Proof
                </th>
                <th scope="col" class="px-6 py-3">
                    Status
                </th>
            </tr>
        </thead>
        <tbody>
            @php
                $counter=1 ;
                foreach($withdrawals['data'] as $withdrawal): 

            @endphp
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <th scope="row" class="px-6 py-4 font-medium whitespace-nowrap">
                    <!--
                    <span class="text-sm font-bold">{{ $deposit->id }}</span>
                    -->
                    <button id="reveal-{{ $counter}}" onclick="revealID('{{ $withdrawal->id }}')" class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 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">Reveal ID</button>
                </th>
                <td class="px-6 py-4">
                    {{ $withdrawal->withdrawal_date }}
                </td>
                <td class="px-6 py-4">
                    ${{ $withdrawal->withdraw_amount }}
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm font-bold">
                        {{ $withdrawal->withdrawal_type }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    ${{ $withdrawal->withdraw_charges }}
                </td>
                <td class="px-6 py-4">
                    @php if(strlen($withdrawal->payment_proof) > 5): @endphp
                    Uploaded
                    @php else: @endphp
                    <a href="{% url withdrawDetail %}/{{ $withdrawal->id }}">Upload Proof</a>
                    @php endif; @endphp
                </td>
                <td class="px-6 py-4">
                    PENDING
                </td>
            </tr>
            @php
                $counter++;
                endforeach; 
            @endphp
        </tbody>
    </table>
</div>

        </div>
    </div>
</section>
{% endblock %}

{% block js %}
<script>
    const revealID = (data) => {
        Swal.fire({
                title: 'Tranaction Id',
                text: `Your Transaction ID is:  ${data}`,
                icon: 'info',
                confirmButtonText: 'Okay'
        });
    }

    $("#depositForm").submit(function(e){
        e.preventDefault();

        const paymentMethod = $("#paymentMethod").val();
        const depositAmount = $("#depositAmount").val();
        const minimumDeposit = 500;

        if(depositAmount < minimumDeposit){
            Swal.fire({
                title: 'Error',
                text: `The minimum deposit is $${minimumDeposit}`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }

        $.post({
            method: 'POST',
            url: "{% url deposit-to-wallet %}",
            data: {
                'paymentMethod': paymentMethod,
                'depositAmount': depositAmount,
                'minimumDeposit': minimumDeposit,
            },
            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;
                    case 'success':
                        window.location = result.data.url;
                }
            },
        });



    })
</script>
{% endblock %}