{% 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">Dashboard</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 pb-3">
    <h4 class="text-blue-500 font-bold text-2xl">Hello, {{ $firstname }}</h4>
</section>

<section>
    <div class="bg-yellow-100 md:flex items-center justify-between p-2 m-3 rounded-xl" style="min-height: 50px;">
        <div>
            <div class="pl-5 hidden sm:block">
                <svg fill="#000000" style="width:20%;height:auto;" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
                    <path d="M960 0c530.193 0 960 429.807 960 960s-429.807 960-960 960S0 1490.193 0 960 429.807 0 960 0Zm-9.838 1342.685c-84.47 0-153.19 68.721-153.19 153.19 0 84.47 68.72 153.192 153.19 153.192s153.19-68.721 153.19-153.191-68.72-153.19-153.19-153.19ZM1153.658 320H746.667l99.118 898.623h208.755L1153.658 320Z" fill-rule="evenodd"/>
                </svg>
            </div>
        </div>
        <div class="md:flex items-center justify-center gap-5">
            
            @php if($user_profile->kyc_status != 'submitted'): @endphp

            <div id="kycVerification" class="mb-3 text-sm bg-yellow-500 p-5 rounded-xl cursor-pointer hover:bg-blue-600 hover:text-white">
                <h4 class="font-bold">KYC Verification Required</h4>
                <p>Submit Required KYC details to enable Withdrawals</p>
            </div>
            @php endif; @endphp
            
            @php if($user_profile->total_deposit_balance <= 0): @endphp

            <div id="emptyBalance" class="mb-3 text-sm bg-yellow-500 p-5 rounded-xl cursor-pointer hover:bg-blue-600 hover:text-white">
                <h4 class="font-bold">Empty Balance</h4>
                <p>Your balance is empty. Make deposit for your next investment.</p>
            </div>
            
            @php endif; @endphp

            <script>
                const kycVerification = document.querySelector("#kycVerification").addEventListener('click', function(){window.location="{% url KYC %}"});
                const emptyBalance = document.querySelector("#emptyBalance").addEventListener('click', function(){window.location="{% url deposit %}"});
            </script>

        </div>
    </div>
</section>

<section class="" id="infoCards">
    <div class="md:flex justify-center items-center gap-5 p-3" align="center">
        <div class="md:w-1/2 bg-blue-100 rounded-lg p-5 mb-5" style="height:200px;">
            <div>
                <h3>Total Deposit Balance</h3>
                <h3 class="font-bold text-3xl text-blue-1">&dollar;{{ $user_profile->total_deposit_balance}}</h3>
            </div>
            <div class="flex items-center justify-flex-start gap-5" style="margin-top:17%;">
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h6 class="text-sm" style="font-size:.7em">Last</h6>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->last_deposit }}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Pending</h5>
                    <h5 class="text-sm font-bold text-blue-1">&dollar;{{ $user_profile->pending_deposit }}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Rejected</h5>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->rejected_deposit }}</h5>
                </div>
            </div>
        </div>
        
        <div class="md:w-1/2 bg-blue-100 rounded-lg p-5 mb-5" style="height: 200px;">
            <div>
                <h3>Total Withdraw Balance</h3>
                <h3 class="font-bold text-3xl text-blue-1">&dollar;{{ $user_profile->total_withdraw_balance }}</h3>
            </div>
            <div class="flex items-center justify-flex-start gap-5" style="margin-top:17%;">
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h6 class="text-sm" style="font-size:.6em">Last</h6>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->last_withdraw }}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Pending</h5>
                    <h5 class="text-sm font-bold text-blue-1">&dollar;{{ $user_profile->pending_withdraw}}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Rejected</h5>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->rejected_withdraw }}</h5>
                </div>
            </div>
        </div>

        <div class="md:w-1/2 bg-blue-100 rounded-lg p-5 mb-5" style="height: 200px;">
            <div>
                <h3>Total Interest Balance</h3>
                <h3 class="font-bold text-3xl text-blue-1">&dollar;{{ $user_profile->total_interest_balance }}</h3>
            </div>
            <div class="flex items-center justify-flex-start gap-5" style="margin-top:17%;">
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h6 class="text-sm" style="font-size:.7em">Completed</h6>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->completed_interest }}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Running</h5>
                    <h5 class="text-sm font-bold text-blue-1">&dollar;{{ $user_profile->running_interest }}</h5>
                </div>
                <div class="p-2 rounded-md card-small-border w-1/3">
                    <h5 class="text-sm" style="font-size:.7em">Last</h5>
                    <h5 class="font-bold text-sm text-blue-1">&dollar;{{ $user_profile->last_interest }}</h5>
                </div>
            </div>
        </div>

    </div>
</section>

<section id="charts">
    <div class="md:flex items-center justify-center p-3 gap-10 mb-0 sm:mb-5" align="center">        
        <div class="md:w-1/2">
            <h3 class="mb-5 font-bold text-xl text-blue-1">Stock Market</h3>
            <div style="height:500px;">
                @php 
                include('markets.html');
                @endphp
            </div>
        </div>
        <div class="md:w-1/2">
            <h3 class="mb-5 font-bold text-xl text-blue-1">Market Data</h3>
            <div style="height:500px;">
                @php 
                include('market-data.html');
                @endphp
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block js %}
{% endblock %}