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

@section('contents')
    <div class="min-h-screen">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-6">
            <section class="mt-6 md:mt-12 lg:px-20">
                <div class="" x-data="{ activeTab: 'all' }">
                    <div
                        class="flex flex-col md:flex-row md:justify-between md:items-center mb-6 px-4 sm:px-6 lg:px-8 w-full">
                        <h1 class="text-2xl font-bold mb-4 md:mb-0 text-center md:text-left cursor-pointer"
                            :class="activeTab === 'all' ? '' : ''" @click="activeTab = 'all'">
                            My AI Bots
                        </h1>
                        <div
                            class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center md:justify-end">
                            <button class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out"
                                :class="activeTab === 'all' ? 'gradient-btn-filled2' : 'text-white'"
                                @click="activeTab = 'all'">
                                My Bots
                            </button>
                            <button class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out"
                                :class="activeTab === 'activate-ai-bots' ? 'gradient-btn-filled2' : 'text-white'"
                                @click="activeTab = 'activate-ai-bots'">
                                Activate AI Bots
                            </button>
                            <button class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out"
                                :class="activeTab === 'ai-trading-history' ? 'gradient-btn-filled2' : 'text-white'"
                                @click="activeTab = 'ai-trading-history'">
                                AI Trading History
                            </button>
                            <button class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out"
                                :class="activeTab === 'daily-summary' ? 'gradient-btn-filled2' : 'text-white'"
                                @click="activeTab = 'daily-summary'">
                                Daily Summary
                            </button>
                        </div>
                    </div>

                    <div x-show="activeTab === 'all'" id="bots">
                        <!-- all my ai bots div  -->
                        <div class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-4 relative">
                            <div class="absolute inset-0 rounded-2xl"
                                style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                            </div>

                            <div
                                class="w-full overflow-x-auto rounded-lg max-h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                                <table class="w-full min-w-[600px]">
                                    <thead>
                                        <tr class="bg-gray-800 border-b border-gray-700">
                                            <th class="text-gray-500 px-6 py-4 text-start w-1/3 text-sm md:text-base">
                                                My Bots
                                            </th>
                                            <th class="text-gray-500 px-6 py-4 text-center w-1/3 text-sm md:text-base">
                                                Portfolio Balance/DT
                                            </th>
                                            <th class="text-gray-500 px-6 py-4 text-end w-1/3 text-sm md:text-base">
                                                Countdown
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($activations as $bot)
                                            <tr class="border-b border-gray-700">
                                                <td
                                                    class="text-white px-6 py-5 text-start text-sm md:text-base flex items-center space-x-3">
                                                    <img src="{{ asset('storage/bots/' . $bot->bot->logo) }}" alt="Bot Icon"
                                                        class="w-12 h-12 rounded-full" />
                                                    <div>
                                                        <h3 class="font-semibold flex text-xs md:text-base">
                                                            {{ $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 width="24" height="24" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path opacity="0.3" fill-rule="evenodd"
                                                                        clip-rule="evenodd"
                                                                        d="M10.6324 1.621C10.9863 1.26747 11.46 1.05945 11.9598 1.03798C12.4596 1.0165 12.9494 1.18314 13.3324 1.505L13.4604 1.622L15.3604 3.521H18.0464C18.5508 3.52109 19.0365 3.71177 19.4063 4.05483C19.776 4.3979 20.0025 4.86801 20.0404 5.371L20.0464 5.521V8.207L21.9464 10.107C22.3002 10.461 22.5084 10.9349 22.5298 11.4349C22.5513 11.935 22.3845 12.4249 22.0624 12.808L21.9454 12.935L20.0454 14.835V17.521C20.0455 18.0256 19.8549 18.5116 19.5119 18.8815C19.1688 19.2515 18.6985 19.4782 18.1954 19.516L18.0464 19.521H15.3614L13.4614 21.421C13.1073 21.7748 12.6335 21.983 12.1334 22.0045C11.6334 22.026 11.1434 21.8591 10.7604 21.537L10.6334 21.421L8.73336 19.521H6.04636C5.54178 19.5212 5.05579 19.3306 4.68581 18.9875C4.31583 18.6444 4.0892 18.1742 4.05136 17.671L4.04636 17.521V14.835L2.14636 12.935C1.79255 12.581 1.58435 12.1071 1.56288 11.6071C1.5414 11.107 1.70821 10.6171 2.03036 10.234L2.14636 10.107L4.04636 8.207V5.521C4.04645 5.01659 4.23713 4.53085 4.58019 4.16108C4.92326 3.79131 5.39337 3.56483 5.89636 3.527L6.04636 3.521H8.73236L10.6324 1.621Z"
                                                                        fill="#A8A5AA"></path>
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M15.1255 8.50434L10.8815 12.7483L9.11345 10.9803C8.92581 10.7928 8.67137 10.6875 8.4061 10.6876C8.14083 10.6877 7.88646 10.7932 7.69895 10.9808C7.51144 11.1685 7.40616 11.4229 7.40625 11.6882C7.40634 11.9535 7.51181 12.2078 7.69945 12.3953L10.1035 14.7993C10.2056 14.9015 10.3269 14.9826 10.4604 15.0379C10.5939 15.0932 10.737 15.1217 10.8815 15.1217C11.0259 15.1217 11.169 15.0932 11.3025 15.0379C11.436 14.9826 11.5573 14.9015 11.6595 14.7993L16.5395 9.91835C16.7216 9.72974 16.8224 9.47714 16.8201 9.21494C16.8178 8.95275 16.7127 8.70193 16.5273 8.51653C16.3419 8.33112 16.0911 8.22595 15.8289 8.22367C15.5667 8.22139 15.3141 8.32219 15.1255 8.50434Z"
                                                                        fill="#F0FCFF"></path>
                                                                </svg>
                                                            @endif
                                                        </h3>
                                                        <p class="text-xs md:text-sm flex gap-2 items-center">
                                                            <span class="text-red-500">PNL</span>
                                                            @if ($bot->profit < 0)
                                                                <img src="{{ asset('/assets/templates/cavit/images/red-arrow-right-down.svg') }}"
                                                                    alt="" />
                                                                <span
                                                                    class="text-red-500">{{ ($bot->profit / $bot->capital) * 100 }}%</span>
                                                            @else
                                                                <img src="{{ asset('/assets/templates/cavit/images/green-arrow-left-up.svg') }}"
                                                                    alt="" />
                                                                <span
                                                                    class="text-green-600">+{{ ($bot->profit / $bot->capital) * 100 }}%</span>
                                                            @endif
                                                        </p>
                                                    </div>
                                                </td>
                                                <td class="text-white px-6 py-5 text-center text-sm md:text-base">
                                                    {{ formatAmount($bot->capital) }}
                                                    <span class="text-xs block text-[#fc8b09]">Activation Date/Time
                                                        <span
                                                            class="text-white text-xs block">{{ date('d-m-y H:i:s', strtotime($bot->created_at)) }}</span></span>
                                                </td>
                                                <td class="text-white px-6 py-5 text-end text-sm md:text-base">
                                                    <div
                                                        class="bg-gray-400/25 p-2 items-center text-xs md:text-sm rounded px-2 ml-auto w-fit whitespace-nowrap">
                                                        <p class=" @if ($bot->expires_in < time()) text-[#fc72d5] @else text-red-500 @endif"
                                                            id="{{ 'bot_timer_' . $loop->iteration }}">
                                                        </p>
                                                    </div>
                                                    <p class="text-gray-400">{{ formatAmount($bot->balance) }}</p>
                                                </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>
                        <!-- navigation arrows  -->
                        <div class="cursor-pointer simple-pagination" data-paginator="bots">
                            {{ $activations->links('templates.' . site('template') . '.paginations.simple') }}
                        </div>
                    </div>


                    <div x-show="activeTab === 'activate-ai-bots'"
                        class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-6 relative"
                        x-data="{ showActivateAiModal: false }">
                        <div class="absolute inset-0 rounded-2xl"
                            style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                        </div>
                        <div
                            class="w-full overflow-x-auto rounded-lg max-h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                            <table class="w-full min-w-[600px]">
                                <thead>
                                </thead>
                                <tbody>
                                    @forelse ($bots as $bot)
                                        <tr class="border-b border-gray-700">
                                            <td
                                                class="text-white px-2 py-5 text-start text-sm md:text-base flex items-center">
                                                <img src="{{ asset('storage/bots/' . $bot->logo) }}" alt="Bot Icon"
                                                    class="w-6 h-6 rounded-full mr-1" />
                                                <div>
                                                    <h3 class="font-semibold flex text-xs md:text-base">
                                                        {{ $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 width="24" height="24" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path opacity="0.3" fill-rule="evenodd"
                                                                    clip-rule="evenodd"
                                                                    d="M10.6324 1.621C10.9863 1.26747 11.46 1.05945 11.9598 1.03798C12.4596 1.0165 12.9494 1.18314 13.3324 1.505L13.4604 1.622L15.3604 3.521H18.0464C18.5508 3.52109 19.0365 3.71177 19.4063 4.05483C19.776 4.3979 20.0025 4.86801 20.0404 5.371L20.0464 5.521V8.207L21.9464 10.107C22.3002 10.461 22.5084 10.9349 22.5298 11.4349C22.5513 11.935 22.3845 12.4249 22.0624 12.808L21.9454 12.935L20.0454 14.835V17.521C20.0455 18.0256 19.8549 18.5116 19.5119 18.8815C19.1688 19.2515 18.6985 19.4782 18.1954 19.516L18.0464 19.521H15.3614L13.4614 21.421C13.1073 21.7748 12.6335 21.983 12.1334 22.0045C11.6334 22.026 11.1434 21.8591 10.7604 21.537L10.6334 21.421L8.73336 19.521H6.04636C5.54178 19.5212 5.05579 19.3306 4.68581 18.9875C4.31583 18.6444 4.0892 18.1742 4.05136 17.671L4.04636 17.521V14.835L2.14636 12.935C1.79255 12.581 1.58435 12.1071 1.56288 11.6071C1.5414 11.107 1.70821 10.6171 2.03036 10.234L2.14636 10.107L4.04636 8.207V5.521C4.04645 5.01659 4.23713 4.53085 4.58019 4.16108C4.92326 3.79131 5.39337 3.56483 5.89636 3.527L6.04636 3.521H8.73236L10.6324 1.621Z"
                                                                    fill="#A8A5AA"></path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M15.1255 8.50434L10.8815 12.7483L9.11345 10.9803C8.92581 10.7928 8.67137 10.6875 8.4061 10.6876C8.14083 10.6877 7.88646 10.7932 7.69895 10.9808C7.51144 11.1685 7.40616 11.4229 7.40625 11.6882C7.40634 11.9535 7.51181 12.2078 7.69945 12.3953L10.1035 14.7993C10.2056 14.9015 10.3269 14.9826 10.4604 15.0379C10.5939 15.0932 10.737 15.1217 10.8815 15.1217C11.0259 15.1217 11.169 15.0932 11.3025 15.0379C11.436 14.9826 11.5573 14.9015 11.6595 14.7993L16.5395 9.91835C16.7216 9.72974 16.8224 9.47714 16.8201 9.21494C16.8178 8.95275 16.7127 8.70193 16.5273 8.51653C16.3419 8.33112 16.0911 8.22595 15.8289 8.22367C15.5667 8.22139 15.3141 8.32219 15.1255 8.50434Z"
                                                                    fill="#F0FCFF"></path>
                                                            </svg>
                                                        @endif
                                                    </h3>
                                                    <p class="text-xs text-gray-400 flex gap-2 items-center">
                                                        {{ $bot->duration . $bot->duration_type }} trading period
                                                    </p>
                                                </div>
                                            </td>
                                            <td class="text-white px-4 py-4 text-center text-sm">
                                                {{ formatAmount($bot->min) . ' - ' . formatAmount($bot->max) }}
                                            </td>
                                            <td class="text-white px-4 py-4 text-center text-sm">
                                                {{ $bot->daily_min . '% - ' . $bot->daily_max . '%' }}
                                            </td>
                                            <td class="text-white px-4 py-4 cursor-pointer text-end">
                                                <div role="button" class="bot" data-bot_id="{{ $bot->id }}"
                                                    data-bot_name="{{ $bot->name }}"
                                                    data-bot_min="{{ formatAmount($bot->min) }}"
                                                    data-bot_max="{{ formatAmount($bot->max) }}">
                                                    <div
                                                        class="bg-[#ecc1fe]/8 p-1 items-center text-xs md:text-sm rounded-xl px-2 ml-auto w-fit whitespace-nowrap">
                                                        <p class="text-[#ebbaff]">Activate</p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Modal -->
                        <div class="w-full bg-black">
                            <div id="aiBotActivateModal"
                                class="hidden fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">
                                <div id="modalDisplay" class="bg-[#1c1c1c] p-6 rounded-3xl w-[90%] max-w-md">

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

                        <!-- Activate AI Bot Modal -->
                        {{-- <div
                            class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">
                            <div class="bg-[#1c1c1c] p-6 rounded-3xl w-[90%] max-w-md">

                                <div class="block">
                                    <div class="flex justify-end items-center mb-6">

                                        <button class="text-gray-400 hover:text-white">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                                fill="currentColor">
                                                <path fill-rule="evenodd"
                                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="block mb-2">
                                        <h3 class="text-lg text-white">
                                            You have chosen to activate
                                            <span class="text-[#f272d5]" id="dispay_bot_name"></span> Ai bot
                                        </h3>
                                    </div>

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

                                        <div class="space-y-4">

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

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


                                            <!-- Amount Input -->
                                            <div class="relative">
                                                <label class="block text-xs text-gray-400 mb-1">Capital
                                                    {{ site('currency') }}</label>
                                                <div class="relative">
                                                    <span
                                                        class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">$</span>
                                                    <input type="number" placeholder="Capital ({{ site('currency') }})"
                                                        id="capital" name="capital" value="0" required
                                                        class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 pl-8 text-white focus:outline-none focus:border-blue-500" />
                                                </div>
                                            </div>

                                            <div class="mb-6">
                                                <p class="text-xs flex justify-between mb-2">
                                                    <span class="text-[#f272d5]">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-[#f272d5]">Maximum Capital:</span>
                                                    <span class="text-white px-10" id="dispay_bot_max"></span>
                                                </p>
                                            </div>

                                            <!-- Activate Button -->
                                            <button type="submit" id="activateButton"
                                                class="w-full gradient-btn-filled mt-4">
                                                Activate
                                            </button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div> --}}
                    </div>

                    <div x-show="activeTab === 'ai-trading-history'"
                        class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-6 relative">
                        <div id="bot-history" class="" x-data="{ activeTab: 'alldaily' }">
                            <div
                                class="flex flex-col md:flex-row md:justify-between md:items-center mb-6 px-4 sm:px-6 lg:px-8 w-full">
                                <h1 class="text-2xl font-bold mb-4 md:mb-0 text-center md:text-left"></h1>
                                <div
                                    class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center md:justify-end">
                                    <button
                                        class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out"
                                        :class="activeTab === 'alldaily' ? 'gradient-btn' : 'text-white'"
                                        @click="activeTab = 'alldaily'">
                                        Ai Trading History
                                    </button>
                                </div>
                            </div>

                            <div id="bot-history-grid" x-show="activeTab === 'alldaily'" class="block">

                                <h1 class="text-2xl font-bold 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="shadow-lg border border-transparent bg-clip-border rounded-2xl p-4 relative">


                                    <div class="absolute inset-0 rounded-2xl"
                                        style="z-index: -1; background: linear-gradient( to bottom, #ff3bff, #5c24ff ); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                                    </div>

                                    <div
                                        class="w-full overflow-x-auto rounded-lg h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                                        <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">
                                                        PNL
                                                    </th>
                                                    <th class="text-gray-500 px-4 py-3 text-end">
                                                        Entry Price
                                                    </th>
                                                    <th class="text-gray-500 px-4 py-3 text-end">
                                                        Exit Price
                                                    </th>
                                                    <th class="text-gray-500 px-4 py-3 text-end">
                                                        Trading Pair
                                                    </th>
                                                    <th></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="coin" class="w-6 h-6 mr-2" />
                                                            <p>
                                                                {{ $history->botActivation->bot->name }}
                                                                <span
                                                                    class="text-gray-400 text-xs block mt-1">{{ date('d-m-y H:i:s', $history->timestamp) }}</span>
                                                            </p>
                                                        </td>
                                                        <td class="text-white px-4 py-4 text-sm">
                                                            <div class="flex justify-center">
                                                                <div class="">
                                                                    @if ($history->profit < 0)
                                                                        -{{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                                        <p class="flex gap-2">
                                                                            <img src="{{ asset('/assets/templates/cavit/images/red-arrow-right-down.svg') }}"
                                                                                alt="" />
                                                                            <span class="text-red-500">
                                                                                {{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                                            </span>
                                                                        </p>
                                                                    @else
                                                                        +{{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                                        <p class="flex gap-2">
                                                                            <img src="{{ asset('/assets/templates/cavit/images/green-arrow-left-up.svg') }}"
                                                                                alt="" />
                                                                            <span class="text-green-600">
                                                                                +{{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                                            </span>
                                                                        </p>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="text-white px-4 py-4 text-end text-sm">
                                                            {{ $history->entry_price }}
                                                        </td>
                                                        <td class="text-white px-4 py-4 text-end text-sm">
                                                            {{ $history->exit_price }}
                                                        </td>
                                                        <td class="text-white px-4 py-4 cursor-pointer text-end">
                                                            {{ $history->pair }}
                                                        </td>
                                                        <td class="px-4 py-4 text-end text-sm">
                                                            <div class="flex justify-end">
                                                                <button type="button" data-pair="{{ $history->pair }}"
                                                                    class="flex items-center justify-end p-2 rounded-lg text-purple-400 text-sm cursor-pointer view-chart ">
                                                                    <img src="{{ asset('/assets/templates/cavit/images/eye-icon.svg') }}"
                                                                        alt="" class="w-4 h-4 mr-1" />
                                                                    View Chart
                                                                </button>
                                                            </div>
                                                        </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>

                    <div x-show="activeTab === 'daily-summary'"
                        class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-6 relative">
                        <div class="absolute inset-0 rounded-2xl"
                            style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                        </div>
                        <div
                            class="w-full overflow-x-auto rounded-lg max-h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                            <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-start">
                                            Date/Time
                                        </th>
                                        <th class="text-gray-500 px-4 py-3 text-center">
                                            Amount
                                        </th>
                                        <th class="text-gray-500 px-4 py-3 text-end">
                                            Status
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($daily_data as $date => $summary)
                                        @if ($summary['profit'] != 0)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-4 py-4 text-start text-sm">
                                                    {{ $date }}
                                                </td>
                                                <td class="text-white px-4 py-4 text-center text-sm">
                                                    @if ($summary['profit'] < 0)
                                                        <span class="text-red-500">
                                                            -{{ formatAmount(str_replace('-', '', $summary['profit'])) }}
                                                        </span>
                                                    @else
                                                        <span class="text-green-500">
                                                            <span>+{{ formatAmount($summary['profit']) }}</span>
                                                        </span>
                                                    @endif
                                                </td>
                                                <td
                                                    class=" px-4 py-4 cursor-pointer text-end flex justify-end items-center gap-1 text-sm">
                                                    @if ($summary['profit'] < 0)
                                                        <img src="{{ asset('/assets/templates/cavit/images/red-arrow-right-down.svg') }}"
                                                            alt="" />
                                                        <span
                                                            class="text-red-500">{{ number_format($summary['profit_percent'], 2) }}%</span>
                                                    @else
                                                        <img src="{{ asset('/assets/templates/cavit/images/green-arrow-left-up.svg') }}"
                                                            alt="" />
                                                        <span
                                                            class="text-green-600">+{{ number_format($summary['profit_percent'], 2) }}%</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@section('scripts')
    {{-- 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

    {{-- 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>

    {{-- 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="block">
                <div class="flex justify-end items-center mb-6">

                    <button id="closeAiBotActivateModal" class="text-gray-400 hover:text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>

                <div class="block mb-2">
                    <h3 class="text-lg text-white">
                        You have chosen to activate
                        <span class="text-[#f272d5]" id="dispay_bot_name"></span> Ai bot
                    </h3>
                </div>

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

                    <div class="space-y-4">

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

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


                        <!-- Amount Input -->
                        <div class="relative">
                            <label class="block text-xs text-gray-400 mb-1">Capital
                                {{ site('currency') }}</label>
                            <div class="relative">
                                <span
                                    class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">$</span>
                                <input type="number" placeholder="Capital ({{ site('currency') }})"
                                    id="capital" name="capital" value="0" required
                                    class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 pl-8 text-white focus:outline-none focus:border-blue-500" />
                            </div>
                        </div>

                        <div class="mb-6">
                            <p class="text-xs flex justify-between mb-2">
                                <span class="text-[#f272d5]">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-[#f272d5]">Maximum Capital:</span>
                                <span class="text-white px-10" id="dispay_bot_max"></span>
                            </p>
                        </div>

                        <!-- Activate Button -->
                        <button type="submit" id="activateButton"
                            class="w-full gradient-btn-filled mt-4 flex items-center justify-center p-2">
                            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-black');
            submitButton.append('<span class="button-spinner"></span>');
            submitButton.prop('disabled', true);

            // new modification
            submitButton.removeClass(
                'gradient-btn-filled'
            );
            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(
                        'gradient-btn-filled'
                    );
                    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-black');
                    submitButton.find('.button-spinner').remove();
                    submitButton.prop('disabled', false);
                    submitButton.addClass('gradient-btn-filled');

                }
            });

        });
    </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
