@extends('layouts.user')

@section('content')

<div class="main-content" style="min-height: 100vh">
    <div class="page-content dark:bg-zinc-700" style="padding-bottom: 400px; padding-top: 150px;">
        <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">My Trading History</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                    </nav>
                </div>
            </div>

            
            <div class=" grid grid-cols-1">
                <div class="grid grid-cols-12 items-stretch">
                    <div class="col-span-12 lg:col-span-6 self-center">
                        <h5 class="text-15 text-gray-600 dark:text-gray-100">{{ $plan->name }}</h5>
                    </div>
                </div>
            

                <div class="mt-5 relative overflow-x-auto">
                    <table class="w-full">
                        <thead class="border-b border-gray-50 cursor-pointer dark:border-zinc-600">
                            <tr class="text-gray-700 dark:text-gray-100">
                                <th class="relative text-start p-4 dark:text-gray-100">Starting Capital
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Current Balance
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Start Date
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">End Date
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Status
                                </th>
                            </tr>
                        </thead>  
                        <tbody>
                        @forelse($trades as $trade)
                            <tr class="border-b border-gray-50 text-gray-600 dark:border-zinc-600">
                                <td class="p-4 dark:text-zinc-50">USDT {{ $trade->amount }}</td>
                                <td class="p-4 dark:text-zinc-50">USDT {{ $trade->balance }}</td>
                                <td class="p-4 dark:text-zinc-50">{{ date('M j Y', strtotime($trade->buy_date)) }}</td>
                                <td class="p-4 dark:text-zinc-50">{{ date('M j Y', strtotime($trade->end_date)) }}</td>
                                <td class="p-4 dark:text-zinc-50">
                                    @if($trade->status == 3)
                                        Completed
                                    @elseif($trade->status == 2)
                                        In Progress...
                                    @else
                                        Pending...
                                    @endif
                                </td>
                            </tr>
                        @empty
                                <p class="text-muted text-center text-gray-700 dark:text-gray-100 py-6">You Have No Trade History With This Bot!</p>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="flex items-center place-content-between mt-4 mb-16">
                    <div class="mt-4 mb-2">
                        <p class="text-gray-600 dark:text-zinc-100">Showing {{ count($trades) }} entrie(s)</p>
                    </div>
                </div>
            </div>


@endsection