@extends('layouts.user')
@section('content')

<div class="main-content ">
        <div class="page-content dark:bg-zinc-700" style="padding-bottom: 450px; padding-top: 120px;">
            <div class="container-fluid px-[0.625rem]">

                <div class="grid grid-cols-1 mb-5">
                    <div class="flex items-center justify-between">
                        <h4 class="mb-sm-0 text-lg font-semibold grow text-gray-800 dark:text-gray-100">Member Performance Info</h4>
                    </div>
                </div>

                <div class="grid items-stretch grid-cols-12 mb-4">
                        <div class="self-center col-span-12 lg:col-span-6">
                            <p class="text-gray-600 dark:text-gray-100">Name &rarr; {{ $user->first_name }} {{ $user->last_name }}</p>
                            <p class="text-gray-600 dark:text-gray-100">Email &rarr; {{ $user->email }}</p>
                            <p class="text-gray-600 dark:text-gray-100">Username &rarr; {{ $user->username }}</p>
                            <p class="text-gray-600 dark:text-gray-100">Generation &rarr; 
                                @if($user->referrer->id == auth()->user()->id)
                                    First Generation
                                @elseif($user->referrer->referrer->id == auth()->user()->id)
                                    Second Generation
                                @elseif($user->referrer->referrer->referrer->id == auth()->user()->id)
                                    Third Generation
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
                    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body">
                            <div>
                                <div class="grid grid-cols-12 gap-5 items-center">
                                    <div class="col-span-12">
                                        <span class="text-gray-700 dark:text-zinc-100">First Generation Total</span>
                                        <h4 class="my-4 text-xl @if(count($first) > 0) text-green-500 @else text-red-500 @endif">
                                           {{ count($first) }}
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body">
                            <div>
                                <div class="grid grid-cols-12 gap-5 items-center">
                                    <div class="col-span-12">
                                        <span class="text-gray-700 dark:text-zinc-100">Second Generation Total</span>
                                        <h4 class="my-4 text-xl @if(count($second) > 0) text-green-500 @else text-red-500 @endif">
                                           {{ count($second) }}
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body">
                            <div>
                                <div class="grid grid-cols-12 gap-5 items-center">
                                    <div class="col-span-12">
                                        <span class="text-gray-700 dark:text-zinc-100">Third Generation Total</span>
                                        <h4 class="my-4 text-xl @if(count($third) > 0) text-green-500 @else text-red-500 @endif">
                                           {{ count($third) }}
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card  dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body">
                            <div>
                                <div class="grid grid-cols-12 gap-5 items-center">
                                    <div class="col-span-6">
                                        <span class="text-gray-700 dark:text-zinc-100">Trade Total</span>
                                        <h4 class="my-4 text-xl text-gray-800 dark:text-gray-100">
                                            <span class="counter-value" data-target="865.2">{{ count($user->investment) }} Trade(s)</span>
                                        </h4>
                                    </div>
                                    <div class="col-span-6">
                                        <div id="mini-chart4" data-colors='["#5156be"]' class="apex-charts mb-2"></div>
                                    </div>
                                </div>
                            </div>
                            @if(count($user->investment) > 0)
                            <div class="flex items-center">
                                <span class="text-xs py-[1px] px-1 bg-green-50/60 text-green-500 rounded font-medium dark:bg-green-500/30">Active Trader</span>
                                <span class="ltr:ml-1.5 rtl:mr-1.5 text-gray-700 text-13 dark:text-zinc-100"></span>
                            </div> 
                            @else
                            <div class="flex items-center">
                                <span class="text-xs py-[1px] px-1 bg-red-50/60 text-red-500 rounded font-medium dark:bg-red-500/30">No Trades Yet</span>
                                <span class="ltr:ml-1.5 rtl:mr-1.5 text-gray-700 text-13 dark:text-zinc-100"></span>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>


                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-5">
                    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body pb-0">
                           <div class="flex flex-wrap items-center mb-2">
                                <h5 class="text-15 mr-2 text-gray-800 dark:text-gray-100">Trading History</h5>
                            </div>
                        </div>
                        <div class="card-body px-0">
                            <div class="px-3" data-simplebar style="max-height: 352px;">
                                <ul class="overflow-hidden">
                                @forelse($user->investment as $trade)
                                    <li class="flex pl-12 pb-6 relative">
                                        <div>
                                            <div class="flex">
                                                <div class="grow mr-4 ml-2 overflow-hidden w-72">
                                                    <h5 class="text-sm mb-1 text-green-500">{{ $trade->plan->name }} [USDT {{ number_format($trade->amount) }}]</h5>
                                                    <small>
                                                    @if($trade->status == 2)
                                                        <div class="text-yellow-700">Ongoing</div>
                                                    @elseif($trade->status == 3)
                                                        <div class="text-green-700">Completed</div>
                                                    @else
                                                        <div class="text-yellow-700">Pending...</div>
                                                    @endif
                                                    </small>
                                                    <div class="text-gray-800 dark:text-gray-100 text-xs mt-1">
                                                        {{ date('M j Y', strtotime($trade->buy_date)) }} - {{ date('M j Y', strtotime($trade->end_date)) }}
                                                    </div>
                                                    <!-- <p class="text-13 overflow-hidden text-ellipsis whitespace-nowrap text-gray-500 dark:text-zinc-100">{{ auth()->user()->wallet }}</p> -->
                                                </div>
                                            </div>
                                        </div> 
                                        <div class="after:contant-[] after:absolute after:h-20 after:border-l-2 after:border-dashed after:border-gray-100 after:left-5 after:z-0 dark:after:border-zinc-600"></div>
                                    </li>
                                    @empty
                                        <p class="text-gray-400 dark:text-zinc-400 my-12 text-center">Not Traded Yet!</p>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                        <div class="card-body pb-0">
                           <div class="flex flex-wrap items-center mb-2">
                                <h5 class="text-15 mr-2 text-gray-800 dark:text-gray-100">Your Rebate Bonuses From {{ $user->first_name }}</h5>
                            </div>
                        </div>
                        <div class="card-body px-0">
                            <div class="px-3" data-simplebar style="max-height: 352px;">
                                <table class="table w-full">
                                    <tbody>
                                        @forelse($user->inTransaction as $rebate)
                                            <tr>
                                                <td class="p-3"  style="width: 50px;">
                                                    <div class="text-22 text-green-500">
                                                        <i class="bx bx-down-arrow-circle d-block"></i>
                                                    </div>
                                                </td>

                                                <td class="p-3">
                                                    <div>
                                                        <h5 class="text-sm mb-1 text-gray-700 dark:text-gray-100">Rebate Bonus Received</h5>
                                                        <p class="text-gray-600 dark:text-zinc-100 mb-0 text-xs">From: {{ $rebate->user->username }}</p>
                                                    </div>
                                                </td>

                                                <td class="p-3">
                                                    <div class="text-end">
                                                        <h5 class="text-sm mb-0 text-green-500">USDT {{ $rebate->amount }}</h5>
                                                        <p class="text-gray-600 dark:text-zinc-100 mb-0 text-xs">{{ date('M j Y', strtotime($rebate->created_at)) }}</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <p class="text-gray-400 dark:text-zinc-400 my-12 text-center">You have not yet received any rebate bonuses from {{ $user->first_name }}!</p>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

@endsection


<script>

function updateSection() {

    // Get the entered amount
    const amountInput = document.getElementById('amount');
    const enteredAmount = amountInput.value;

    // Format the amount with commas
    const formattedAmount = new Intl.NumberFormat().format(enteredAmount);

    // Update the display section
    const displaySection = document.getElementById('display-section');
    displaySection.value = `$${formattedAmount}`;
}

</script>