{% 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">Investment Packages</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 md:flex justify-center gap-5">

    @php foreach($investments['data'] as $investment): @endphp
    <div class="w-72 max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 mb-5 md:mb-0">
        <h5 class="mb-4 text-xl font-medium text-blue-1">{{ $investment->name }}</h5>
        <div class="flex items-baseline text-gray-900">
        <span class="text-3xl font-semibold"></span>
        <span class="text-5xl font-extrabold tracking-tight">{{ $investment->returns }}%</span>
        <span class="ms-1 text-xl font-normal text-gray-500">ROI</span>
        </div>
        <ul role="list" class="space-y-5 my-7">
        <li class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 text-blue-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
        </svg>
        <span class="text-base font-normal leading-tight text-gray-500 ms-3">{{ $investment->duration }} Days</span>
        </li>
        <li class="flex">
        <svg class="flex-shrink-0 w-4 h-4 text-blue-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
        </svg>
        <span class="text-base font-normal leading-tight text-gray-500 ms-3">{{ $investment->returns }}% returns</span>
        </li>
        <li class="flex">
            <svg class="flex-shrink-0 w-4 h-4 text-blue-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
            </svg>
            <span class="text-base font-normal leading-tight text-gray-500 ms-3">${{ $investment->minimum }} minimum</span>
        </li>
        <li class="flex">
            <svg class="flex-shrink-0 w-4 h-4 text-blue-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
            </svg>
            <span class="text-base font-normal leading-tight text-gray-500 ms-3">${{ $investment->maximum }} maximum</span>
        </li>
        <!--
        <li class="flex">
            <svg class="flex-shrink-0 w-4 h-4 text-blue-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
            </svg>
            <span class="text-base font-normal leading-tight text-gray-500 ms-3">Total {{ $investment->total }}</span>
        </li>
        -->

        <!--
        <li class="flex line-through decoration-gray-500">
        <svg class="flex-shrink-0 w-4 h-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
        </svg>
        <span class="text-base font-normal leading-tight text-gray-500 ms-3">API Access</span>
        </li>
        -->
        
        </ul>
        <a href="{% url investment-detail %}/{{ $investment->id }}" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Invest Now</a>
    </div>
    @php endforeach; @endphp
</section>
{% endblock %}

{% block js %}
{% endblock %}