@extends('templates.' . site('template') . '.layouts.user')

@section('contents')
    <div class="transition-all duration-300 ease-in-out"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">

        @php
            $target = request()->target;
        @endphp

        @if ($target == 'activate')
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->

                <div class="p-2 md:p-6">
                    <!-- Placeholder for main content -->
                    <div x-data="{}" class="p-4 bg-black min-h-screen text-gray-100">
                        <h1 class="text-2xl font-bold mb-4">My AI Bots</h1>

                        <div class="space-y-4 bg-gray-800 rounded-xl px-2 py-3 md:px-6 md:pt-4">
                            <!-- row  -->
                            @forelse ($bots as $bot)
                                <div class="relative border border-gray-700 rounded-xl px-4 py-4 md:py-8">
                                    <div
                                        class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
                                        <!-- Bot Details -->
                                        <div class="flex items-center space-x-3 md:w-52">
                                            <div>
                                                <span class="block font-bold">
                                                    <span class="flex gap-1">{{ $bot->name }}
                                                        @if ($bot->status == 1)
                                                            <svg width="24" height="25" viewBox="0 0 24 25"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M10.6319 1.64199C10.9859 1.28847 11.4595 1.08045 11.9593 1.05897C12.4591 1.0375 12.9489 1.20413 13.3319 1.52599L13.4599 1.64299L15.3599 3.54199H18.0459C18.5503 3.54209 19.036 3.73277 19.4058 4.07583C19.7756 4.4189 20.002 4.88901 20.0399 5.39199L20.0459 5.54199V8.22799L21.9459 10.128C22.2997 10.482 22.5079 10.9559 22.5293 11.4559C22.5508 11.956 22.384 12.4459 22.0619 12.829L21.9449 12.956L20.0449 14.856V17.542C20.045 18.0466 19.8545 18.5326 19.5114 18.9025C19.1683 19.2725 18.698 19.4992 18.1949 19.537L18.0459 19.542H15.3609L13.4609 21.442C13.1068 21.7958 12.633 22.004 12.1329 22.0255C11.6329 22.0469 11.1429 21.8801 10.7599 21.558L10.6329 21.442L8.73287 19.542H6.04587C5.54129 19.5422 5.0553 19.3516 4.68532 19.0085C4.31534 18.6654 4.08871 18.1951 4.05087 17.692L4.04587 17.542V14.856L2.14587 12.956C1.79206 12.602 1.58387 12.1281 1.56239 11.6281C1.54091 11.128 1.70772 10.6381 2.02987 10.255L2.14587 10.128L4.04587 8.22799V5.54199C4.04596 5.03759 4.23664 4.55185 4.57971 4.18208C4.92277 3.81231 5.39289 3.58582 5.89587 3.54799L6.04587 3.54199H8.73187L10.6319 1.64199Z"
                                                                    fill="#00AA39" />
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M15.1255 8.52497L10.8815 12.769L9.11345 11.001C8.92581 10.8135 8.67137 10.7082 8.4061 10.7083C8.14083 10.7084 7.88646 10.8138 7.69895 11.0015C7.51144 11.1891 7.40616 11.4436 7.40625 11.7088C7.40634 11.9741 7.51181 12.2285 7.69945 12.416L10.1035 14.82C10.2056 14.9222 10.3269 15.0032 10.4604 15.0586C10.5939 15.1139 10.737 15.1423 10.8815 15.1423C11.0259 15.1423 11.169 15.1139 11.3025 15.0586C11.436 15.0032 11.5573 14.9222 11.6595 14.82L16.5395 9.93897C16.7216 9.75037 16.8224 9.49777 16.8201 9.23557C16.8178 8.97338 16.7127 8.72256 16.5273 8.53716C16.3419 8.35175 16.0911 8.24658 15.8289 8.2443C15.5667 8.24202 15.3141 8.34282 15.1255 8.52497Z"
                                                                    fill="#F0FCFF" />
                                                            </svg>
                                                        @else
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
                                                                fill="#6b7280" class="bi bi-patch-exclamation-fill"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                            </svg>
                                                        @endif
                                                    </span>
                                                </span>
                                                <span class="text-xs text-sky-400 flex items-center gap-2 mt-6">
                                                    Trading Portfolio
                                                </span>
                                                <span
                                                    class="text-sm text-gray-400">{{ formatAmount($bot->min) . ' - ' . formatAmount($bot->max) }}</span>
                                            </div>
                                        </div>

                                        <!-- Portfolio -->
                                        <div>
                                            <span class="block text-xs text-sky-400">Trading Period</span>
                                            <span
                                                class="block text-sm text-gray-400 mb-4">{{ $bot->duration . $bot->duration_type }}
                                            </span>
                                            <span class="block text-xs text-sky-400">Avg. Daily PNL</span>
                                            <span
                                                class="block text-sm text-gray-400">{{ $bot->daily_min . '% - ' . $bot->daily_max . '%' }}</span>
                                        </div>
                                    </div>
                                    <!-- Activate badge -->
                                    <a role="button" data-bot_id="{{ $bot->id }}" data-bot_name="{{ $bot->name }}"
                                        data-bot_min="{{ formatAmount($bot->min) }}"
                                        data-bot_max="{{ formatAmount($bot->max) }}"
                                        class="bot absolute -top-2 right-2 text-xs text-gray-200 bg-gray-600 px-2 py-1 rounded-lg flex gap-1 cursor-pointer">
                                        <img src="{{ asset('storage/bots/' . $bot->logo) }}" class="w-4"
                                            alt="" />Activate
                                    </a>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>


            </div>

            <!-- Modal -->
            <div class="w-full bg-black">
                <div id="aiBotActivateModal" class="hidden fixed inset-0 bg-black bg-opacity-75 transition-opacity z-10">
                    <div id="modalDisplay" class="fixed inset-0 z-10 flex items-center justify-center">

                    </div>
                </div>
            </div>
        @elseif($target == 'history')
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->

                <div class="p-2 md:p-6" id="bot-history">
                    <h1 class="text-2xl font-bold mb-4">AI Trading History</h1>

                    <!-- Placeholder for main content -->
                    <div id="bot-history-grid" class="p-4 bg-black min-h-screen text-gray-100">
                        <h1 class="mb-4">AI Trading Overview (30 Day PNL)</h1>


                        <div x-data="tradingData" class="bg-black rounded-lg p-0 md:p-4 mb-6">
                            <div class="h-48 md:h-96">
                                <canvas x-ref="chart"></canvas>
                            </div>
                        </div>



                        <div class="bg-gray-800/50 rounded-lg p-6">
                            <div class="w-full overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bg-gray-800 border-b border-gray-700">
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                AI Bots
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                Trading pairs
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-left">24H</th>
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                Exit Time (UTC)
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Entry Price/ <span class="block">Exit Price</span>
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Profit/Loss
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($histories as $history)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-4 py-4 flex items-center">
                                                    <img src="{{ asset('storage/bots/' . $history->botActivation->bot->logo) }}"
                                                        alt="Bitcoin" class="w-6 h-6 mr-2" />
                                                    <span
                                                        class="text-sm md:mt-2">{{ $history->botActivation->bot->name }}</span>
                                                </td>
                                                <td class="text-white px-4 py-4 text-xs">{{ $history->pair }}</td>
                                                <td class="px-4 py-4 text-xs">
                                                    @if ($history->profit < 0)
                                                        <p class="text-red-600">
                                                            -{{ formatAmount(str_replace('-', '', $history->profit)) }}</
                                                                </p>
                                                        @else
                                                        <p class="text-green-500">
                                                            +{{ formatAmount($history->profit) }}
                                                        </p>
                                                    @endif

                                                    @if ($history->profit < 0)
                                                        <span class="flex gap-1 text-red-600">
                                                            <svg width="14" height="8" viewBox="0 0 14 8"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M13.5 7.5L7.85 1.85C7.75654 1.75839 7.63088 1.70707 7.5 1.70707C7.36912 1.70707 7.24346 1.75839 7.15 1.85L4.85 4.15C4.75654 4.24161 4.63088 4.29293 4.5 4.29293C4.36912 4.29293 4.24346 4.24161 4.15 4.15L0.5 0.5"
                                                                    stroke="#EA0A0E" stroke-linecap="round"
                                                                    stroke-linejoin="round" />
                                                            </svg>

                                                            {{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                        </span>
                                                    @else
                                                        <span class="flex gap-1 text-green-500">
                                                            <svg width="14" height="9" viewBox="0 0 14 9"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M13.5 8L7.85 2.35C7.75654 2.25839 7.63088 2.20707 7.5 2.20707C7.36912 2.20707 7.24346 2.25839 7.15 2.35L4.85 4.65C4.75654 4.74161 4.63088 4.79293 4.5 4.79293C4.36912 4.79293 4.24346 4.74161 4.15 4.65L0.5 1"
                                                                    stroke="#00AA39" stroke-linecap="round"
                                                                    stroke-linejoin="round" />
                                                            </svg>

                                                            +{{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                        </span>
                                                    @endif




                                                </td>
                                                <td class="text-white px-4 py-4 text-xs">
                                                    <span>{{ date('d-m-y H:i:s', $history->timestamp) }}</span>
                                                </td>
                                                <td class="text-white px-4 py-4 text-xs text-end">
                                                    {{ $history->entry_price }}
                                                    <span class="block text-gray-400">{{ $history->exit_price }}</span>
                                                </td>
                                                <td class="text-white px-4 py-4 cursor-pointer text-end">
                                                    <button data-pair="{{ $history->pair }}"
                                                        class="view-chart bg-gray-700/50 text-gray-400 py-1 px-4 rounded-3xl inline-flex items-center justify-center w-40 h-10">
                                                        <img src="{{ asset('assets/templates/pandel/images/eye-icon.png') }}"
                                                            alt="Eye Icon" class="mr-1" />
                                                        View Chart
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td
                                                    class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="w-5 h-5 text-orange-500" fill="currentColor"
                                                        class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                                                        <path
                                                            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                    </svg>
                                                    <span>You have not activated any bot</span>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="cursor-pointer simple-pagination" data-paginator="bot-history-grid">
                            {{ $histories->links('templates.' . site('template') . '.paginations.simple') }}
                        </div>
                    </div>
                </div>


            </div>
        @elseif($target == 'summary')
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->

                <div class="p-2 md:p-6">
                    <!-- Placeholder for main content -->
                    <div class="p-4 bg-black min-h-screen text-gray-100">
                        <h1 class="text-2xl font-bold mb-4">Daily Summary</h1>

                        <div class="space-y-4 bg-gray-800 rounded-xl px-2 py-3 md:px-6 md:pt-4">

                            <!-- row -->
                            @forelse ($daily_data as $date => $summary)
                                @if ($summary['profit'] != 0)
                                    <div class="relative p-4">
                                        <div
                                            class="flex flex-row items-center justify-between flex-wrap sm:flex-nowrap space-y-0 gap-4">
                                            <!-- date -->
                                            <div class="flex items-center space-x-3 md:w-52">
                                                <div>
                                                    <span class="text-sm"> {{ $date }} </span>
                                                </div>
                                            </div>

                                            <!-- trades -->
                                            <div class="text-sm text-end">
                                                <p class="block">
                                                    @if ($summary['profit'] < 0)
                                                        <span class="text-red-600">
                                                            -{{ formatAmount(str_replace('-', '', $summary['profit'])) }}
                                                        </span>
                                                    @else
                                                        <span class="text-green-500">
                                                            <span>+{{ formatAmount($summary['profit']) }}</span>
                                                        </span>
                                                    @endif
                                                </p>
                                                <p class="flex justify-end gap-1">
                                                    @if ($summary['profit'] < 0)
                                                        <span class="flex justify-end items-center gap-2 text-red-600">
                                                            <svg width="14" height="8" viewBox="0 0 14 8"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M13.5 7.5L7.85 1.85C7.75654 1.75839 7.63088 1.70707 7.5 1.70707C7.36912 1.70707 7.24346 1.75839 7.15 1.85L4.85 4.15C4.75654 4.24161 4.63088 4.29293 4.5 4.29293C4.36912 4.29293 4.24346 4.24161 4.15 4.15L0.5 0.5"
                                                                    stroke="#EA0A0E" stroke-linecap="round"
                                                                    stroke-linejoin="round" />
                                                            </svg>
                                                            {{ number_format($summary['profit_percent'], 2) }}%
                                                        </span>
                                                    @else
                                                        <span class="flex justify-end items-center gap-2 text-green-500">
                                                            <svg width="14" height="9" viewBox="0 0 14 9"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M13.5 8L7.85 2.35C7.75654 2.25839 7.63088 2.20707 7.5 2.20707C7.36912 2.20707 7.24346 2.25839 7.15 2.35L4.85 4.65C4.75654 4.74161 4.63088 4.79293 4.5 4.79293C4.36912 4.79293 4.24346 4.74161 4.15 4.65L0.5 1"
                                                                    stroke="#00AA39" stroke-linecap="round"
                                                                    stroke-linejoin="round" />
                                                            </svg>
                                                            +{{ number_format($summary['profit_percent'], 2) }}%
                                                        </span>
                                                    @endif
                                                    </span>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @empty
                            @endforelse

                        </div>

                    </div>
                </div>


            </div>
        @else
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->

                <div class="p-2 md:p-6">
                    <!-- Placeholder for main content -->
                    <div class="p-4 bg-black min-h-screen text-gray-100" id="bots">
                        <h1 class="text-2xl font-bold mb-4">My AI Bots</h1>
                        <div class="space-y-4 bg-gray-800 rounded-xl px-2 py-3 md:px-6 md:pt-4"
                            data-bot_count="{{ $activations->total() }}" id="botTable">
                            <!-- top row  -->

                            <div class="relative p-4 hidden md:block">
                                <div
                                    class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
                                    <!-- Bot Details -->
                                    <div class="flex items-center space-x-3 md:w-52 text-gray-500">
                                        My Bots
                                    </div>
                                    <!-- Activation Date -->
                                    <span class="text-sm text-gray-500">Activation Date</span>
                                    <!-- Portfolio Balance -->
                                    <span class="text-sm text-gray-500">Portfolio Balance</span>
                                    <!-- Portfolio -->
                                    <div>
                                        <span class="block text-sm text-gray-500 text-start">Portfolio</span>
                                    </div>
                                </div>
                            </div>
                            <!-- row  -->
                            @forelse ($activations as $bot)
                                <div class="relative border border-gray-700 rounded-xl p-4">
                                    <div
                                        class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
                                        <!-- Bot Details -->
                                        <div class="flex items-center space-x-3 md:w-52">
                                            <img src="{{ asset('storage/bots/' . $bot->bot->logo) }}" alt="Bot"
                                                class="h-12 w-12 rounded-full" />
                                            <div>
                                                <span class="block font-bold">
                                                    <span class="flex gap-1">
                                                        {{ $bot->bot->name }}
                                                        @if ($bot->status == 'active')
                                                            <svg width="24" height="25" viewBox="0 0 24 25"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path opacity="0.3" fill-rule="evenodd"
                                                                    clip-rule="evenodd"
                                                                    d="M10.6319 1.64199C10.9859 1.28847 11.4595 1.08045 11.9593 1.05897C12.4591 1.0375 12.9489 1.20413 13.3319 1.52599L13.4599 1.64299L15.3599 3.54199H18.0459C18.5503 3.54209 19.036 3.73277 19.4058 4.07583C19.7756 4.4189 20.002 4.88901 20.0399 5.39199L20.0459 5.54199V8.22799L21.9459 10.128C22.2997 10.482 22.5079 10.9559 22.5293 11.4559C22.5508 11.956 22.384 12.4459 22.0619 12.829L21.9449 12.956L20.0449 14.856V17.542C20.045 18.0466 19.8545 18.5326 19.5114 18.9025C19.1683 19.2725 18.698 19.4992 18.1949 19.537L18.0459 19.542H15.3609L13.4609 21.442C13.1068 21.7958 12.633 22.004 12.1329 22.0255C11.6329 22.0469 11.1429 21.8801 10.7599 21.558L10.6329 21.442L8.73287 19.542H6.04587C5.54129 19.5422 5.0553 19.3516 4.68532 19.0085C4.31534 18.6654 4.08871 18.1951 4.05087 17.692L4.04587 17.542V14.856L2.14587 12.956C1.79206 12.602 1.58387 12.1281 1.56239 11.6281C1.54091 11.128 1.70772 10.6381 2.02987 10.255L2.14587 10.128L4.04587 8.22799V5.54199C4.04596 5.03759 4.23664 4.55185 4.57971 4.18208C4.92277 3.81231 5.39289 3.58582 5.89587 3.54799L6.04587 3.54199H8.73187L10.6319 1.64199Z"
                                                                    fill="#00AA39" />
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M15.1255 8.52497L10.8815 12.769L9.11345 11.001C8.92581 10.8135 8.67137 10.7082 8.4061 10.7083C8.14083 10.7084 7.88646 10.8138 7.69895 11.0015C7.51144 11.1891 7.40616 11.4436 7.40625 11.7088C7.40634 11.9741 7.51181 12.2285 7.69945 12.416L10.1035 14.82C10.2056 14.9222 10.3269 15.0032 10.4604 15.0586C10.5939 15.1139 10.737 15.1423 10.8815 15.1423C11.0259 15.1423 11.169 15.1139 11.3025 15.0586C11.436 15.0032 11.5573 14.9222 11.6595 14.82L16.5395 9.93897C16.7216 9.75037 16.8224 9.49777 16.8201 9.23557C16.8178 8.97338 16.7127 8.72256 16.5273 8.53716C16.3419 8.35175 16.0911 8.24658 15.8289 8.2443C15.5667 8.24202 15.3141 8.34282 15.1255 8.52497Z"
                                                                    fill="#F0FCFF" />
                                                            </svg>
                                                        @else
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
                                                                fill="#6b7280" class="bi bi-patch-exclamation-fill"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                            </svg>
                                                        @endif
                                                    </span>
                                                </span>
                                                <span class="text-xs text-green-500 flex items-center gap-2">
                                                    <span class="text-red-600">PNL</span>
                                                    @if ($bot->profit < 0)
                                                        <span class="text-red-600 flex space-x-1 gap-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                                fill="currentColor" class="w-6 h-6">
                                                                <path fill-rule="evenodd"
                                                                    d="M1.72 5.47a.75.75 0 011.06 0L9 11.69l3.756-3.756a.75.75 0 01.985-.066 12.698 12.698 0 014.575 6.832l.308 1.149 2.277-3.943a.75.75 0 111.299.75l-3.182 5.51a.75.75 0 01-1.025.275l-5.511-3.181a.75.75 0 01.75-1.3l3.943 2.277-.308-1.149a11.194 11.194 0 00-3.528-5.617l-3.809 3.81a.75.75 0 01-1.06 0L1.72 6.53a.75.75 0 010-1.061z"
                                                                    clip-rule="evenodd" />
                                                            </svg>
                                                            <span>{{ ($bot->profit / $bot->capital) * 100 }}%</span>
                                                        </span>
                                                    @else
                                                        <span class="text-green-500 flex space-x-1 gap-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                                fill="currentColor" class="w-6 h-6">
                                                                <path fill-rule="evenodd"
                                                                    d="M15.22 6.268a.75.75 0 01.968-.432l5.942 2.28a.75.75 0 01.431.97l-2.28 5.941a.75.75 0 11-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 00-5.45 5.174.75.75 0 01-1.199.19L9 12.31l-6.22 6.22a.75.75 0 11-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l3.606 3.605a12.694 12.694 0 015.68-4.973l1.086-.484-4.251-1.631a.75.75 0 01-.432-.97z"
                                                                    clip-rule="evenodd" />
                                                            </svg>
                                                            <span>+{{ ($bot->profit / $bot->capital) * 100 }}%</span>
                                                        </span>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <!-- Activation Date -->
                                        <span
                                            class="text-sm text-gray-400">{{ date('d-m-y H:i:s', strtotime($bot->created_at)) }}</span>
                                        <!-- Portfolio Balance -->
                                        <span class="text-sm text-gray-400">{{ formatAmount($bot->capital) }}</span>
                                        <!-- Portfolio -->
                                        <div>
                                            <span class="block text-sm">{{ formatAmount($bot->balance) }}</span>
                                        </div>
                                    </div>
                                    <!-- Countdown/Status -->
                                    <span
                                        class="absolute -top-2 right-2 text-xs  px-2 py-1 rounded-lg  @if ($bot->expires_in < time()) text-gray-200 bg-red-900 @else text-gray-200 bg-gray-600 @endif">
                                        <a role="button" class="cursor-pointer"
                                            id="{{ 'bot_timer_' . $loop->iteration }}">
                                        </a>
                                    </span>
                                </div>
                            @empty
                                <div>
                                    <p
                                        class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500"
                                            fill="currentColor" class="bi bi-exclamation-triangle-fill"
                                            viewBox="0 0 16 16">
                                            <path
                                                d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                        </svg>
                                        <span>You have not activated any bot</span>
                                    </p>
                                </div>
                            @endforelse

                        </div>

                        <!-- navigation arrows  -->
                        <div class="cursor-pointer simple-pagination" data-paginator="bots">
                            {{ $activations->links('templates.' . site('template') . '.paginations.simple') }}
                        </div>

                    </div>
                </div>


            </div>
        @endif


        <footer>
            <div class="mt-8 text-center text-sm text-sky-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>
@endsection

@section('scripts')
    {{-- charts --}}
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data("tradingData", () => ({
                init() {
                    const ctx = this.$refs.chart.getContext("2d");

                    // Get the last 14 days of data
                    var profits = @json($profits).reverse();

                    // date labels for last 7 days
                    const getLast7Days = () => {
                        const dates = [];
                        for (let i = 29; i >= 0; i--) {
                            const date = new Date();
                            date.setDate(date.getDate() - i);
                            // Format as DD-MM
                            const formattedDate = `${date
                    .getDate()
                    .toString()
                    .padStart(2, "0")}-${(date.getMonth() + 1)
                      .toString()
                      .padStart(2, "0")}`;
                            dates.push(formattedDate);
                        }
                        return dates;
                    };

                    const gradient = ctx.createLinearGradient(0, 400, 0, 0);
                    gradient.addColorStop(1, "rgba(16, 185, 129, 0.1)");
                    gradient.addColorStop(0.5, "rgba(16, 185, 129, 0.1)");
                    gradient.addColorStop(0.1, "rgba(0, 0, 0, 0.1)");

                    new Chart(ctx, {
                        type: "line",
                        data: {
                            labels: getLast7Days(),
                            datasets: [{
                                label: "7 Days PNL",
                                data: profits,
                                borderColor: "#10B981",
                                backgroundColor: gradient,
                                tension: 0.4,
                                fill: true,
                            }, ],
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false,
                                },
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: "rgba(255, 255, 255, 0.1)",
                                    },
                                    ticks: {
                                        color: "#9CA3AF",
                                    },
                                },
                                x: {
                                    grid: {
                                        color: "rgba(255, 255, 255, 0.1)",
                                    },
                                    ticks: {
                                        color: "#9CA3AF",
                                    },
                                },
                            },
                        },
                    });
                },
            }));
        });
    </script>


    {{-- bots --}}
    @foreach ($activations as $item)
        <script>
            $(document).ready(function() {
                var target = "{{ 'bot_timer_' . $loop->iteration }}";
                var expires_in = {{ $item->expires_in }};

                // Get the current time in milliseconds
                var currentTime = new Date().getTime();

                // Calculate the remaining time in milliseconds
                var remainingTime = expires_in * 1000 - currentTime;

                // Calculate days, hours, minutes, and seconds
                var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

                // Display the countdown
                var countdownElement = document.getElementById(target);
                countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";

                // Update the countdown every second
                var countdownInterval = setInterval(function() {
                    if (remainingTime > 0) {
                        remainingTime -= 1000;

                        days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                        hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                        seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

                        countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds +
                            "s";
                    } else {
                        clearInterval(countdownInterval);
                        countdownElement.innerHTML = "Expired";
                    }
                }, 1000);
            });
        </script>
    @endforeach

    {{-- activate bots --}}
    <script>
        let interval;

        // select the bot bot
        $(document).on('click', ".bot", function(e) {


            var bot_id = $(this).data('bot_id');
            var bot_name = $(this).data('bot_name');

            var bot_min = $(this).data('bot_min');
            var bot_max = $(this).data('bot_max');

            $('#aiBotActivationModal').addClass('hidden');

            var modalContent = `
            <div class="bg-gray-900 text-white rounded-lg shadow-lg w-96 p-6 relative">
                            <h3 class="text-white text-xl font-semibold">Activate Bot</h3>

                            <!-- Close Button -->
                            <button id="closeAiBotActivateModal"
                                class="absolute top-4 right-4 text-gray-400 hover:text-white border border-gray-400 rounded-full p-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>

                            <!-- details -->
                            <form action="{{ route('user.bots.new') }}" method="post" id="botForm">
                                @csrf

                                <input type="hidden" name="bot_id" id="bot_id">

                                <p class="mb-3 text-red-500 text-xs" id="errorMessage"></p>

                                <div class="justify-center mb-6 mt-6 md:mt-16">
                                    <div class="rounded-lg mb-6 md:mb-12">
                                        <p>
                                            You have chosen to activate
                                            <span class="text-sky-400" id="dispay_bot_name"></span> Ai bot
                                        </p>
                                    </div>

                                    <div class="flex gap-4 border border-gray-400 rounded-3xl p-4 md:p-6 mb-6">
                                        <img src="{{ asset('/assets/templates/pandel/images/circle-dollar.svg') }}" alt="" />
                                        <div class="text-white">
                                            <div class="w-full">
                                                <input type="number" placeholder="Capital ({{ site('currency') }})"
                                                    id="capital"
                                                    class="w-full py-6 bg-transparent text-xl text-white border-0 focus:outline-none flex-1"
                                                    name="capital" value="0" required>
                                            </div>
                                            <span class="block text-sm text-gray-400">Capital {{ site('currency') }}</span>
                                        </div>
                                    </div>

                                    <div class="mb-6 md:mb-16">
                                        <p class="text-xs flex justify-between mb-2">
                                            <span class="text-sky-400">Minimum Capital:</span>
                                            <span class="text-white px-10" id="dispay_bot_min"></span>
                                        </p>

                                        <p class="text-xs flex justify-between">
                                            <span class="text-sky-400">Maximum Capital:</span>
                                            <span class="text-white px-10" id="dispay_bot_max"></span>
                                        </p>
                                    </div>

                                    <button type="submit" id="activateButton"
                                        class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium flex items-center justify-center">
                                        Activate
                                    </button>
                                </div>

                            </form>
                        </div>
                `;



            $('#aiBotActivateModal').removeClass("hidden");
            $('#modalDisplay').html(modalContent);

            $('#dispay_bot_name').html(bot_name);
            $("#bot_id").val(bot_id);

            /////////my update
            $('#dispay_bot_min').html(bot_min);
            $('#dispay_bot_max').html(bot_max);

        });


        // close bot activation
        $('#aiBotActivateModal').on('click', '#closeAiBotActivateModal', function() {
            // You can add code to hide the modal here.
            $('#aiBotActivateModal').addClass('hidden');
        });



        // handle bot form
        $(document).on('submit', '#botForm', function(e) {
            e.preventDefault();

            var form = $(this);
            var formData = new FormData(this);

            var submitButton = $(this).find('button[type="submit"]');
            submitButton.addClass('relative disabled bg-gray-800');
            submitButton.append('<span class="button-spinner"></span>');
            submitButton.prop('disabled', true);

            // new modification
            submitButton.removeClass(
                'bg-blue-800 hover:bg-blue-700'
            );
            submitButton.addClass('not-allowed-cursor');

            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    var link = window.location.href;
                    var targetDiv = '#bots';
                    $.ajax({
                        url: link,
                        method: 'GET',
                        success: function(response) {
                            $(targetDiv).html($(response).find(targetDiv).html());

                            var scrollTo = $(targetDiv).offset().top - 100;
                            $('.rescron-card').addClass('hidden');
                            $(targetDiv).removeClass('hidden');
                            $('html, body').animate({
                                scrollTop: scrollTo
                            }, 800);
                        }
                    });
                    toastNotify('success', 'Bot activated successfully');

                    // new modification
                    submitButton.addClass(
                        'bg-blue-800 hover:bg-blue-700'
                    );
                    submitButton.removeClass('not-allowed-cursor');


                    $('#aiBotActivateModal').addClass('hidden');
                },

                error: function(xhr, status, error) {
                    var errors = xhr.responseJSON.errors;

                    if (errors) {
                        $.each(errors, function(field, messages) {
                            var fieldErrors = '';
                            $.each(messages, function(index, message) {
                                fieldErrors += message + '<br>';
                            });
                            $('#errorMessage').html(fieldErrors);
                        });
                    } else {
                        $('#errorMessage').html('error', 'An Error occured, try again later');
                    }


                },
                complete: function() {
                    submitButton.removeClass('disabled bg-gray-800');
                    submitButton.find('.button-spinner').remove();
                    submitButton.prop('disabled', false);
                    submitButton.addClass('bg-blue-800 hover:bg-blue-700');

                }
            });

        });
    </script>

    {{-- view trading history chart --}}
    <script src="https://s3.tradingview.com/tv.js"></script>
    <script>
        $(document).on('click', '.view-chart', function(e) {
            var pair = $(this).data('pair'); // BTCUSDT

            //fetch trading view chart for the pair
            Swal.fire({
                html: `
                        <div class="mt-5 sm:overflow-x-scroll">
                            <div id="chart-container"></div>
                        </div>
                        `,
                toast: false,
                background: 'rgb(7, 3, 12, 0)',
                showConfirmButton: false,
                showCloseButton: true,
                position: 'top-left',
                allowEscapeKey: false, // Prevent closing by escape key
                allowOutsideClick: false, // Prevent closing by clicking backdrop
                willClose: () => {
                    //delete the previously generated qrcode
                    // $('#single_wallet_qrcode').html('');
                }
            });

            new TradingView.widget({
                // Define the container element for the widget
                container_id: 'chart-container', // Replace 'chart-container' with your actual container ID

                // Specify the symbol (pair) you want to display
                symbol: pair,

                // Specify the interval for the chart (e.g., '1D' for 1 day)
                interval: '1D',

                // Choose the style of the chart (e.g., 'Line' or 'Candles')
                style: 'Candles',

                // Specify the timezone for the chart
                timezone: 'Etc/UTC',
                theme: 'Dark'

            });

        });
    </script>
@endsection
