@extends('layouts.user')

@section('title')
AI Activity
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover"
            style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                    <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Side Nav -->
                        <x-side-nav />

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

            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">

                <x-alert />

                <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="items-center justify-between p-6 border-b border-gray-100 md:flex dark:border-gray-700">
                        <div class="mb-4 md:mb-0">
                            <h5 class="text-xl font-semibold">{{ $investment->plan?->name }} Activity</h5>
                        </div>
                        <a href="{{ route('ai-dashboard') }}" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md"> &larr; Back</a>
                    </div>

                    <div class="p-6">
                        <h5 class="text-2xl font-semibold">${{ number_format($investment->balance, 2) }} <span class="text-base font-medium uppercase text-bgray-500">USDT</span></h5>
                        <div class="flex items-center justify-start">
                            <img style="height: 25px;" src="{{ asset('images/bot.png') }}" />
                            <p class="mt-2 text-slate-400">&nbsp;{{ $investment->plan?->name }}</p>
                        </div>
                        @if ($investment->f_pfit > 0)
                        <h4 style="font-size: 0.75rem; font-weight: bold; color: #0e9f6e; font-family: monospace; letter-spacing: -0.04em;">&uarr; AI ATP: +${{ number_format($investment->f_pfit, 2) }}</h4>
                        @else
                        @if(\Carbon\Carbon::parse($investment->buy_date)->gt(\Carbon\Carbon::parse('2025-03-23 00:00:00')))
                        <h4 style="font-size: 0.75rem; font-weight: bold; color: #0e9f6e; font-family: monospace; letter-spacing: -0.04em;">&uarr; AI ATP: +${{ number_format($investment->pfit, 2) }}</h4>
                        @endif
                        @endif

                        <p class="mt-2 text-slate-400">Initial Deposit - <b>${{ number_format($investment->amount, 2) }}</b></p>
                        <div class="mt-1 items-center text-slate-400">
                            <div class="md:hidden">
                                <b>Lifespan: </b>
                            </div>
                            <div>
                                <span class="text-xs md:text-sm">
                                    {{ \Carbon\Carbon::parse($investment->buy_date)->format('l, F j Y') }} - {{ \Carbon\Carbon::parse($investment->end_date)->format('l, F j Y') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>


                <div style="margin-bottom: 80px;" id="inventory"></div>
                @php
                $total = 0;
                foreach($ownerships as $o){
                $total += $o->value;
                }
                @endphp
                <h5 class="my-6 text-lg font-semibold">My AI Inventory <br>(Store Value: ${{ number_format($total) }} <span class="text-base font-medium uppercase text-bgray-500"></span>) </h5>

                <div class="p-2 rounded-md shadow dark:shadow-gray-800">
                    <ul>
                        @forelse($ownerships as $ownership)
                        <li class="flex items-center justify-between pb-6">
                            <div class="flex items-center">
                                <img src="{{ asset('storage/products/'.$ownership->product?->image1) }}" class="w-16 rounded shadow dark:shadow-gray-800" alt="">

                                <div class="ms-4">
                                    <a href="javascript:void(0)" class="text-xs font-semibold hover:text-orange-500" style="line-height: 0.1 !important;">{{ $ownership->product?->name }}</a>
                                    <p class="mt-1 text-sm text-green-600">${{ number_format($ownership->value, 2) }} <br>
                                        <span class="text-dark">
                                            {{ $ownership->product?->market?->name }} <br>
                                            Quantity: {{ $ownership->quantity }}
                                        </span>
                                    </p>
                                </div>
                            </div>

                            @if($ownership->sells->where('status', 0)->isNotEmpty())
                            @php $pendingSell = $ownership->sells->where('status', 0)->first(); @endphp
                            <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-orange-500 align-middle rounded-lg bg-orange-500/10 duration-50 nexus-countdown" data-eval-time="{{ \Carbon\Carbon::parse($pendingSell->sell_time)->addHours(24)->toIso8601String() }}" data-type="badge">
                                In Sale... <span class="countdown-text" style="font-size:0.65rem;opacity:0.8;display:block;"></span>
                            </span>
                            @endif
                        </li>
                        @empty
                        <div class="p-4 text-center">
                            <img src="{{ asset('images/store-1.png') }}" class="mx-auto h-52" alt="store" />
                            <p class="mt-6 mb-6 text-slate-400">You have no items in your store!</p>
                        </div>
                        @endforelse
                    </ul>
                </div>


                <h5 class="mt-6 text-lg font-semibold">Ai Bid & Sell History</h5>
                <small class="">Note: Only the most recent 100 records will be displayed</small>
                <div class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-12">
                    <div class="lg:col-span-12 md:col-span-12">
                        <div class="sticky top-20">
                            <ul class="p-6 bg-white rounded-md shadow flex-column dark:bg-slate-900 dark:shadow-gray-800" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
                                <li role="presentation">
                                    <button class="w-full px-4 py-2 text-base font-semibold duration-500 rounded-md text-start hover:text-orange-500" id="description-tab" data-tabs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">My AI Bids</button>
                                </li>
                                <li role="presentation">
                                    <button class="w-full px-4 py-2 mt-3 text-base font-semibold duration-500 rounded-md text-start" id="addinfo-tab" data-tabs-target="#addinfo" type="button" role="tab" aria-controls="addinfo" aria-selected="false">My AI Sell Offs</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="lg:col-span-12 md:col-span-12">
                        <div id="myTabContent" class="bg-white rounded-md shadow dark:bg-slate-900 dark:shadow-gray-800">
                            <div class="" id="description" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="relative overflow-x-auto rounded-md shadow dark:shadow-gray-800">
                                    <table class="text-start text-slate-500 dark:text-slate-400" style="width: 150%;">
                                        <thead class="text-sm uppercase bg-slate-50 dark:bg-slate-800">
                                            <tr class="text-start">
                                                <th scope="col" class="px-2 py-3 text-start">Product</th>
                                                <th scope="col" class="px-2 py-3 text-start">Total</th>
                                                <th scope="col" class="px-2 py-3 text-start">Status</th>
                                                <th scope="col" class="px-2 py-3 text-start">Market</th>
                                                <th scope="col" class="px-2 py-3 text-start">Date</th>
                                                {{--<th scope="col" style="width: 200px !important" class="px-2 py-3 text-start">Action</th>--}}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($bids as $bid)
                                            <tr class="bg-white dark:bg-slate-900 text-start">
                                                <td class="px-2 py-3 text-xs text-start">{{ mb_strimwidth($bid->product?->name, 0, 20, '...') }} <br>(X {{ $bid->quantity }})</td>
                                                <td class="px-2 py-3 text-xs text-start">${{ number_format($bid->amount * $bid->quantity, 2) }}</td>
                                                @if($bid->status == 0)
                                                <td class="px-2 py-3 text-xs text-start text-slate-400 nexus-countdown" data-eval-time="{{ \Carbon\Carbon::parse($bid->bid_time)->addHour()->toIso8601String() }}" data-type="cell"><span class="countdown-text">In Progress...</span></td>
                                                @elseif($bid->status == 1)
                                                <td class="px-2 py-3 text-xs text-green-600 text-start">Successful</td>
                                                @elseif($bid->status == 2)
                                                <td class="px-2 py-3 text-xs text-red-600 text-start">Unsuccessful</td>
                                                @endif
                                                <td class="px-2 py-3 text-xs text-start">{{ mb_strimwidth($bid->market?->name, 0, 20, '...') }}</td>
                                                <td class="px-2 py-3 text-xs text-start">{{ Carbon\Carbon::parse($bid->bid_time)->setTimezone('GMT')->format('D d-M-Y H:i:s T') }}</td>
                                                {{--<td class="px-2 py-3 text-xs text-start"><a href="javascript:void(0)" class="text-orange-500">View <i class="mdi mdi-chevron-right"></i></a></td>--}}
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="hidden overflow-x-auto" id="addinfo" role="tabpanel" aria-labelledby="addinfo-tab">
                                <table class="text-start text-slate-500 dark:text-slate-400" style="width: 150%;">
                                    <thead class="text-sm uppercase bg-slate-50 dark:bg-slate-800">
                                        <tr class="text-start">
                                            <th scope="col" class="px-2 py-3 text-start">Product</th>
                                            <th scope="col" class="px-2 py-3 text-start">Total</th>
                                            <th scope="col" class="px-2 py-3 text-start">Status</th>
                                            <th scope="col" class="px-2 py-3 text-start">Market</th>
                                            <th scope="col" class="px-2 py-3 text-start">Date</th>
                                            {{--<th scope="col" style="width: 200px !important" class="px-2 py-3 text-start">Action</th>--}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($sells as $sell)
                                        <tr class="bg-white dark:bg-slate-900 text-start">
                                            <td class="px-2 py-3 text-xs text-start">{{ mb_strimwidth($sell->product?->name, 0, 20, '...') }} <br>(X {{ $sell->quantity }})</td>
                                            <td class="px-2 py-3 text-xs text-start">${{ number_format($sell->amount * $sell->quantity, 2) }}</td>
                                            @if($sell->status == 0)
                                            <td class="px-2 py-3 text-xs text-start text-slate-400 nexus-countdown" data-eval-time="{{ \Carbon\Carbon::parse($sell->sell_time)->addHours(24)->toIso8601String() }}" data-type="cell"><span class="countdown-text">In Progress...</span></td>
                                            @elseif($sell->status == 1)
                                            <td class="px-2 py-3 text-xs text-green-600 text-start">Successful</td>
                                            @elseif($sell->status == 2)
                                            <td class="px-2 py-3 text-xs text-red-600 text-start">Unsuccessful</td>
                                            @endif
                                            <td class="px-2 py-3 text-xs text-start">{{ mb_strimwidth($sell->market?->name, 0, 20, '...') }}</td>
                                            <td class="px-2 py-3 text-xs text-start">{{ Carbon\Carbon::parse($sell->sell_time)->setTimezone('GMT')->format('D d-M-Y H:i:s T') }}</td>
                                            {{--<td class="px-2 py-3 text-xs text-start"><a href="javascript:void(0)" class="text-orange-500">View <i class="mdi mdi-chevron-right"></i></a></td>--}}
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="hidden" id="review" role="tabpanel" aria-labelledby="review-tab">

                            </div>
                        </div>
                    </div>
                </div><!--end grid-->
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Hero -->

<script>
function updateCountdowns() {
    var els = document.querySelectorAll('.nexus-countdown');
    var now = new Date().getTime();
    els.forEach(function(el) {
        var evalTime = new Date(el.getAttribute('data-eval-time')).getTime();
        var diff = evalTime - now;
        var type = el.getAttribute('data-type');
        var text = el.querySelector('.countdown-text');
        if (!text) return;

        if (diff <= 0) {
            text.textContent = type === 'badge' ? 'Evaluating now...' : 'Evaluating now...';
            return;
        }

        var hours = Math.floor(diff / (1000 * 60 * 60));
        var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var time = '';
        if (hours > 0) {
            time = hours + 'h ' + minutes + 'm';
        } else {
            time = minutes + 'm';
        }

        if (type === 'badge') {
            text.textContent = time;
        } else {
            text.textContent = 'Eval in ' + time;
        }
    });
}
updateCountdowns();
setInterval(updateCountdowns, 60000);
</script>

@endsection