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

{% block title %}
Crypto Project Manager
{% endblock %}

{% block content %}
<form id="updateForm">
<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">Details for User: {{ $user->email }}</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">
        </thead>
        <tbody>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Name
                </td>
                <td class="px-6 py-4">
                    {{ $user->username }}
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Telephone
                </td>
                <td class="px-6 py-4">
                    {{ $user->telephone }}
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Email
                </td>
                <td class="px-6 py-4">
                    {{ $user->email }}
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Total Deposit Balance
                </td>
                <td class="px-6 py-4">
                    <input id="total_deposit" type="text" 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" value="{{ $userProfile->total_deposit_balance }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Last Deposit
                </td>
                <td class="px-6 py-4">
                    <input id="last_deposit" type="text" 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" value="{{ $userProfile->last_deposit }}" required>
                </td>
            </tr>
            <tr class="bg-white border-b cursor-pointer">
                <td class="px-6 py-4">
                    Pending Deposit
                </td>
                <td class="px-6 py-4">
                    <input id="pending_deposit" type="text" 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" value="{{ $userProfile->pending_deposit }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Rejected Deposit
                </td>
                <td class="px-6 py-4">
                    <input id="rejected_deposit" type="text" 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" value="{{ $userProfile->rejected_deposit }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Total Withdraw
                </td>
                <td class="px-6 py-4">
                    <input id="total_withdraw" type="text" 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" value="{{ $userProfile->total_withdraw_balance }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Last Withdraw
                </td>
                <td class="px-6 py-4">
                    <input id="last_withdraw" type="text" 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" value="{{ $userProfile->last_withdraw }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Pending Withdraw
                </td>
                <td class="px-6 py-4">
                    <input id="pending_withdraw" type="text" 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" value="{{ $userProfile->pending_withdraw }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Rejected Withdraw
                </td>
                <td class="px-6 py-4">
                    <input id="rejected_withdraw" type="text" 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" value="{{ $userProfile->rejected_withdraw }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Total Interest
                </td>
                <td class="px-6 py-4">
                    <input id="total_interest" type="text" 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" value="{{ $userProfile->total_interest_balance }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Completed Interest
                </td>
                <td class="px-6 py-4">
                    <input id="completed_interest" type="text" 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" value="{{ $userProfile->completed_interest }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Running Interest
                </td>
                <td class="px-6 py-4">
                    <input id="running_interest" type="text" 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" value="{{ $userProfile->running_interest }}" required>
                </td>
            </tr>
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    Last Interest
                </td>
                <td class="px-6 py-4">
                    <input id="last_interest" type="text" 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" value="{{ $userProfile->last_interest }}" required>
                </td>
            </tr>

        </tbody>
    </table>
</div>

        </div>
        <div class="mt-5" align="right">
            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" id="updateBtn" type="submit">Update User Information</button>
        </div>
    </div>
</section>
</form>
{% endblock %}

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

        const total_deposit = $("#total_deposit").val();
        const last_deposit = $("#last_deposit").val();
        const pending_deposit = $("#pending_deposit").val();
        const rejected_deposit = $("#rejected_deposit").val();

        const total_withdraw = $("#total_withdraw").val();
        const last_withdraw = $("#last_withdraw").val();
        const pending_withdraw = $("#pending_withdraw").val();
        const rejected_withdraw = $("#rejected_withdraw").val();

        const total_interest = $("#total_interest").val();
        const completed_interest = $("#completed_interest").val();
        const running_interest = $("#running_interest").val();
        const last_interest = $("#last_interest").val();
        const user_id = "{{ $user->id }}";

        $.post({
            method: 'POST',
            url: "{% url update-user-info %}",
            data: {
                'user_id': user_id,
                'total_deposit': total_deposit,
                'last_deposit': last_deposit,
                'pending_deposit': pending_deposit,
                'rejected_deposit': rejected_deposit,
                'total_withdraw': total_withdraw,
                'last_withdraw': last_withdraw,
                'pending_withdraw': pending_withdraw,
                'rejected_withdraw': rejected_withdraw,
                'total_interest': total_interest,
                'completed_interest': completed_interest,
                'running_interest': running_interest,
                'last_interest': last_interest,
            },
            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':
                        Swal.fire({
                            title: 'Success',
                            text: `${result.msg}`,
                            icon: 'success',
                            confirmButtonText: 'Okay'
                        }).then(outcome => {
                            if(outcome.isConfirmed){
                                window.location.reload();
                            }
                        })
                }
            },
        });



    })
</script>
{% endblock %}