{% 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 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 (Deposits)</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">
                    Transaction 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">
                    Proof
                </th>
                <th scope="col" class="px-6 py-3">
                    Status
                </th>
            </tr>
        </thead>
        <tbody>
            @php
                $counter=1 ;
                foreach($deposits['data'] as $deposit): 

            @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('{{ $deposit->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">
                    {{ $deposit->transaction_date }}
                </td>
                <td class="px-6 py-4">
                    ${{ $deposit->transaction_amount }}
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm font-bold">
                        {{ get_payment_method($deposit->payment_method)->name }}
                    </span>
                    
                </td>
                <td class="px-6 py-4">
                    @php if(strlen($deposit->deposit_transaction_proof) > 5): @endphp
                    <div>
                        <svg style="width:20%;height:auto;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z" fill="blue"/>
                        </svg>
                    </div>
                    @php endif; @endphp
                </td>
                <td class="px-6 py-4">
                    {{ $deposit->transaction_status }}
                </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 %}