@extends('layouts.user')

@section('title')
    AI Models
@endsection

@section('content')

<style>
    .ai-hub { font-family: 'DM Sans', sans-serif; }

    /* tab bar */
    .ai-tabs { display: flex; gap: .4rem; background: #f1f5f9; border-radius: 12px; padding: .35rem; margin-bottom: 1.75rem; }
    .dark .ai-tabs { background: rgba(255,255,255,.06); }
    .ai-tab-btn {
        flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .5rem;
        padding: .7rem 1rem; border-radius: 9px; border: none; background: transparent; cursor: pointer;
        font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 700; color: #64748b;
        white-space: nowrap; transition: background .15s ease, color .15s ease;
    }
    .dark .ai-tab-btn { color: #94a3b8; }
    .ai-tab-btn svg { flex-shrink: 0; }
    .ai-tab-btn:hover { color: #1e293b; }
    .dark .ai-tab-btn:hover { color: #f1f5f9; }
    .ai-tab-btn.is-active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
    .dark .ai-tab-btn.is-active { background: #0f172a; color: #fff; }
    .ai-tab-label { overflow: hidden; text-overflow: ellipsis; }
    .ai-tab-count {
        flex-shrink: 0; font-size: .68rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99px;
        background: rgba(100,116,139,.12); color: #64748b;
    }
    .ai-tab-btn.is-active .ai-tab-count { background: rgba(249,115,22,.14); color: #f97316; }
    
    /* mobile: no overflow, no scroll — shrink everything down */
    @media (max-width: 560px) {
        .ai-tabs { padding: .3rem; gap: .25rem; }
        .ai-tab-btn { flex-direction: column; gap: .3rem; padding: .55rem .3rem; font-size: .66rem; white-space: normal; }
        .ai-tab-btn svg { width: 15px; height: 15px; }
        .ai-tab-label { text-align: center; line-height: 1.15; }
        .ai-tab-count { font-size: .6rem; padding: .05rem .4rem; }
    }

    /* panels */
    .ai-panel { display: none; }
    .ai-panel.is-active { display: block; animation: aiFadeIn .18s ease; }
    @keyframes aiFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    .ai-empty-row { padding: 3rem 0; text-align: center; color: #94a3b8; font-size: .88rem; }
    .ai-list-item { border-top: 1px solid rgba(100,116,139,.12); }
    .ai-list-item:first-child { border-top: none; }
</style>

<div class="ai-hub">

    <!-- Start Hero -->
    <section class="relative table w-full py-20 lg:py-24 bg-gray-50 dark:bg-slate-800">
        <div class="container relative">
            <div class="grid grid-cols-1 text-center mt-14">
                <h3 class="text-3xl font-semibold leading-normal">AI Models</h3>
                <p class="text-slate-500">Browse our AI Models catalogue, and track your active and completed AI models, all in one place.</p>
            </div>
        </div>

        <div class="absolute z-10 mx-3 text-center bottom-5 start-0 end-0">
            <ul class="tracking-[0.5px] mb-0 inline-block">
                <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out hover:text-orange-500"><a href="{{ url('/') }}">home</a></li>
                <li class="inline-block text-base text-slate-950 dark:text-white mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="mdi mdi-chevron-right"></i></li>
                <li class="inline-block uppercase text-[13px] font-bold text-orange-500" aria-current="page">AI Bots</li>
            </ul>
        </div>
    </section>
    <!-- End Hero -->

    <section class="relative py-16 md:py-24">
        <div class="container relative">

            <x-alert />

            {{-- Tab bar --}}
            <div class="ai-tabs" role="tablist">
                <button type="button" class="ai-tab-btn" role="tab" aria-selected="true" data-ai-tab="plans">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>
                    <span class="ai-tab-label">Browse AI Models</span>
                    <span class="ai-tab-count">{{ $plans->count() }}</span>
                </button>
                @auth
                <button type="button" class="ai-tab-btn is-active" role="tab" aria-selected="false" data-ai-tab="running">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    <span class="ai-tab-label">Active AI Models</span>
                    <span class="ai-tab-count">{{ $activeInvestments->count() }}</span>
                </button>
                <button type="button" class="ai-tab-btn" role="tab" aria-selected="false" data-ai-tab="completed">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    <span class="ai-tab-label">Completed AI Models</span>
                    <span class="ai-tab-count">{{ $completedInvestments->count() }}</span>
                </button>
                @endauth
            </div>

            {{-- Panel 1: Browse Plans --}}
            <div class="ai-panel" data-ai-panel="plans">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                    @foreach($plans as $plan)
                    <div class="overflow-hidden transition-transform transform bg-white border rounded-lg shadow-lg hover:scale-105">
                        <div class="p-1 bg-orange-500"></div>
                        <div class="p-8">
                            <div class="flex justify-start">
                                <img style="height: 50px;" src="{{ asset('images/bot.png') }}"/>
                            </div>
                            <h2 class="mb-4 text-2xl font-bold text-gray-800">{{ $plan->name }}</h2>
                            <p class="mb-6 text-gray-600">{{ $plan->description }}</p>
                            <p class="mb-6 text-4xl font-bold text-gray-800">${{ number_format($plan->price) }}</p>
                            <ul class="mb-6 text-sm text-gray-600">
                                <li class="flex items-center mb-2">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Minimum Funding Of ${{ number_format($plan->min_fund) }}
                                </li>
                                <li class="flex items-center mb-2">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Maximum Funding Of ${{ number_format($plan->max_fund) }}
                                </li>
                                <li class="flex items-center mb-2">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    One Time Funding
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Runs For 30 days
                                </li>
                            </ul>
                        </div>
                        <div class="p-4">
                            <a href="{{ route('ai-purchase', $plan->name) }}"
                                class="px-6 py-3 text-center text-white bg-orange-500 rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800">
                                Purchase Plan
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            @auth
            {{-- Panel 2: Running Bots --}}
            <div class="ai-panel is-active" data-ai-panel="running">
                <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900 p-6">
                    @forelse($activeInvestments as $investment)
                    <div class="ai-list-item items-center justify-between py-6 md:flex">
                        <div class="mb-4 md:mb-0">
                            <h5 class="text-2xl font-semibold">${{ number_format($investment->balance, 2) }} <span class="text-base font-medium uppercase text-bgray-500">USDT</span></h5>

                            @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 ($investment->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->pfit, 2) }}</h4>
                            @endif
                            @endif

                            <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 }} - <a href="{{ route('ai-activity', [$investment->id, $investment->plan?->name]) }}" class="text-orange-500">View Bot Activity &rarr;</a></p>
                            </div>

                            <p class="mt-2 text-slate-400">&nbsp;Initial Deposit - <b>${{ number_format($investment->amount, 2) }}</b></p>
                        </div>
                        @if(($investment->funded == 1 && $investment->f_pfit == 0) || $investment->status == 3)
                            <a href="{{ route('withdraw-ai', $investment->id) }}" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-orange-400 align-middle duration-500 rounded-md"
                                style="background-color: #660066;">
                                Withdraw To Wallet
                            </a>
                        @elseif($investment->funded == 0)
                            <a href="{{ route('fund-ai', $investment->id) }}" 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">
                                Fund AI Capital
                            </a>
                        @elseif($investment->f_pfit > 0 && $investment->status != 3)
                        @else
                            <a href="{{ route('fund-ai', $investment->id) }}" 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">
                                Fund AI Capital
                            </a>
                        @endif
                    </div>
                    @empty
                    <div class="ai-empty-row">No running AI bots yet. Pick a plan from the Browse Plans tab to get started.</div>
                    @endforelse
                </div>
            </div>

            {{-- Panel 3: Completed Bots --}}
            <div class="ai-panel" data-ai-panel="completed">
                <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900 p-6">
                    @forelse($completedInvestments as $investment)
                    <div class="ai-list-item items-center justify-between py-6 md:flex">
                        <div class="mb-4 md:mb-0">
                            <h5 class="text-2xl font-semibold">${{ number_format($investment->balance, 2) }} <span class="text-base font-medium uppercase text-bgray-500">USDT</span></h5>

                            @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 ($investment->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->pfit, 2) }}</h4>
                            @endif
                            @endif

                            <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 }} - <a href="{{ route('ai-activity', [$investment->id, $investment->plan?->name]) }}" class="text-orange-500">View Bot Activity &rarr;</a></p>
                            </div>
                            <p class="mt-2 text-slate-400">&nbsp;Initial Deposit - <b>${{ number_format($investment->amount, 2) }}</b></p>
                        </div>
                        @if(($investment->funded == 1 && $investment->f_pfit == 0) || $investment->status == 3)
                        <a href="{{ route('withdraw-ai', $investment->id) }}" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-orange-400 align-middle duration-500 rounded-md"
                            style="background-color: #660066;">
                            Withdraw To Wallet
                        </a>
                        @elseif($investment->funded == 0)
                            <a href="{{ route('fund-ai', $investment->id) }}" 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">
                                Fund AI Capital
                            </a>
                        @elseif($investment->f_pfit > 0 && $investment->status != 3)
                        @else
                        <a href="{{ route('fund-ai', $investment->id) }}" 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">Fund AI Capital</a>
                        @endif
                    </div>
                    @empty
                    <div class="ai-empty-row">No completed AI bots yet.</div>
                    @endforelse
                </div>
            </div>
            @endauth

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

<script>
(function() {
    var btns = document.querySelectorAll('.ai-tab-btn');
    var panels = document.querySelectorAll('.ai-panel');
    btns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var target = btn.getAttribute('data-ai-tab');
            btns.forEach(function(b) { b.classList.remove('is-active'); b.setAttribute('aria-selected', 'false'); });
            panels.forEach(function(p) { p.classList.remove('is-active'); });
            btn.classList.add('is-active');
            btn.setAttribute('aria-selected', 'true');
            var panel = document.querySelector('.ai-panel[data-ai-panel="' + target + '"]');
            if (panel) panel.classList.add('is-active');
        });
    });
})();
</script>
@endsection