@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-8 md:mt-10 lg:mt-16 lg:px-10">
                <div class="" x-data="{ activeTab: 'all', showChart: false }">
                    <div class="flex flex-col px-4 sm:px-6 lg:px-8 w-full mb-6">
                        <!-- Header with View Chart button -->
                        <div class="flex justify-between items-center mb-4">
                            <h1 class="text-2xl font-bold text-center md:text-left cursor-pointer text-black"
                                :class="activeTab === 'all' ? '' : ''" @click="activeTab = 'all'">
                                My History
                            </h1>
                            <div class="inline-flex items-center cursor-pointer whitespace-nowrap bg-[#12b7b6] text-white py-2 px-4 rounded-4xl font-semibold shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] hover:shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]"
                                @click="if (activeTab === 'ai-trading-history') showChart = !showChart"
                                :class="{ 'opacity-50 cursor-not-allowed': activeTab !== 'ai-trading-history' }">
                                <span class="text-xs truncate">Show Chart</span>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 mb-6">
                            <button
                                class="w-full sm:w-auto px-4 py-2 rounded transition-colors duration-300 ease-in-out text-blac cursor-pointer"
                                :class="activeTab === 'all' ? 'border-t-2 border-t-[#2ac4c3]' : 'text-black'"
                                @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 text-blac cursor-pointer"
                                :class="activeTab === 'activate-ai-bots' ? 'border-t-2 border-t-[#2ac4c3]' : 'text-black'"
                                @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 text-black cursor-pointer"
                                :class="activeTab === 'ai-trading-history' ? 'border-t-2 border-t-[#2ac4c3]' : 'text-black'"
                                @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 text-black cursor-pointer"
                                :class="activeTab === 'daily-summary' ? 'border-t-2 border-t-[#2ac4c3]' : 'text-black'"
                                @click="activeTab = 'daily-summary'">
                                Daily Summary
                            </button>
                        </div>
                    </div>

                    <!-- all my ai bots div -->
                    <div x-show="activeTab === 'all'" id="bots">
                        <div class="rounded-2xl p-4 relative shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)]">
                            <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="">
                                            <th class="text-black px-6 py-4 text-start w-1/3 text-sm md:text-base">
                                                My Bots
                                            </th>
                                            <th class="text-black px-6 py-4 text-center w-1/3 text-sm md:text-base">
                                                Portfolio/DT
                                            </th>
                                            <th class="text-black px-6 py-4 text-center w-1/3 text-sm md:text-base">
                                                Portfolio Balance
                                            </th>
                                            <th class="text-black 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="">
                                                <td
                                                    class="text-black 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"
                                                        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')
                                                                <img src="{{ asset('/assets/templates/gopie/images/icons-approved.svg') }}"
                                                                    alt="Approved" class="ml-1 w-6 h-6" />
                                                            @else
                                                                <img src="{{ asset('/assets/templates/gopie/images/icons-approved-gray.svg') }}"
                                                                    alt="Approved" class="ml-1 w-6 h-6" />
                                                            @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/gopie/images/green-arrow-up.svg') }}"
                                                                    class="mr-1 w-3 h-3" alt="Arrow Up" />
                                                                <span
                                                                    class="text-[#a3dc2f] text-xs">+{{ round(($bot->profit / ($bot->capital + 0.0001)) * 100, 2) }}%</span>
                                                            @else
                                                                <img src="{{ asset('/assets/templates/gopie/images/red-arrow-down.svg') }}"
                                                                    class="mr-1 w-3 h-3" alt="Arrow Up" />
                                                                <span
                                                                    class="text-red-500 text-xs">{{ round(($bot->profit / ($bot->capital + 0.0001)) * 100, 2) }}%</span>
                                                            @endif
                                                        </p>
                                                    </div>
                                                </td>
                                                <td class="text-black px-6 py-5 text-center text-sm md:text-base">
                                                    {{ formatAmount($bot->capital) }}
                                                    <span class="text-xs block text-[#12b7b6]">Activation Date/Time
                                                        <span
                                                            class="text-black text-xs block">2{{ date('d-m-y H:i:s', strtotime($bot->created_at)) }}</span></span>
                                                </td>
                                                <td class="text-black px-6 py-5 text-end text-sm md:text-base">
                                                    <p class="text-center">{{ formatAmount($bot->balance) }}</p>
                                                </td>
                                                <td class="text-black px-6 py-5 text-end text-sm md:text-base">
                                                    <div
                                                        class="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-red-500 @else text-black @endif"
                                                            id="{{ 'bot_timer_' . $loop->iteration }}"> </p>
                                                    </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>

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

                    <!-- activate ai bots tab -->
                    <div x-show="activeTab === 'activate-ai-bots'"
                        class="rounded-2xl p-4 relative shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)]"
                        x-data="{ showActivateAiModal: false }">
                        <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="">
                                            <td
                                                class="text-black px-2 py-5 text-start text-sm md:text-base flex items-center">
                                                <img src="{{ asset('storage/bots/' . $bot->logo) }}" alt="Bot"
                                                    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)
                                                            <img src="{{ asset('/assets/templates/gopie/images/icons-approved.svg') }}"
                                                                alt="Approved" class="ml-1 w-6 h-6" />
                                                        @else
                                                            <img src="{{ asset('/assets/templates/gopie/images/icons-approved-gray.svg') }}"
                                                                alt="Approved" class="ml-1 w-6 h-6" />
                                                        @endif
                                                    </h3>
                                                    <p class="text-xs text-black flex gap-2 items-center">
                                                        {{ $bot->duration . $bot->duration_type }} trading period
                                                    </p>
                                                </div>
                                            </td>
                                            <td class="text-black px-4 py-4 text-center text-sm">
                                                {{ formatAmount($bot->min) . ' - ' . formatAmount($bot->max) }}
                                            </td>
                                            <td class="text-black px-4 py-4 text-center text-sm">
                                                {{ $bot->daily_min . '% - ' . $bot->daily_max . '%' }}
                                            </td>
                                            <td class="text-black px-4 py-4 text-end">
                                                <button role="button" type="button"
                                                    class="bot shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] p-1 items-center text-xs md:text-sm rounded-xl px-2 ml-auto w-fit whitespace-nowrap hover:shadow-[inset_0px_2px_4px_0px_rgba(0,_0,_0,_0.3)]"
                                                    data-bot_id="{{ $bot->id }}"
                                                    data-bot_name="{{ $bot->name }}"
                                                    data-bot_min="{{ formatAmount($bot->min) }}"
                                                    data-bot_max="{{ formatAmount($bot->max) }}">
                                                    <p class="text-gray-700">Activate</p>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>


                        <!-- Modal -->
                        <div class="w-full">
                            <div id="aiBotActivateModal"
                                class="hidden bg-[#f3f3f3] fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center backdrop-custom">
                                <div id="modalDisplay"
                                    class="bg-[#f3f3f3] p-6 rounded-3xl w-[90%] max-w-md relative shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15),-5px_-5px_15px_0px_rgba(255,255,255,0.9)]">



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

                    </div>

                    <div id="bot-history" x-show="activeTab === 'ai-trading-history'">
                        <!-- trading history tab -->
                        <div id="bot-history-grid">
                            <div class="shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] rounded-2xl p-6 relative">
                                <!-- Chart Card - Will show when showChart is true and we're on trading history tab -->
                                <div x-show="showChart && activeTab === 'ai-trading-history'" class="mb-6">
                                    <div
                                        class="shadow-[0px_15px_35px_-5px_rgba(0,_0,_0,_0.1)] rounded-2xl p-6 bg-[#f3f3f3]">
                                        <div class="flex justify-between items-center mb-4">
                                            <div>
                                                <h2 class="text-lg font-semibold text-black">
                                                    AI Trading Overview
                                                </h2>
                                                <p class="text-sm text-black">(30 Day PNL)</p>
                                            </div>
                                            <div class="flex gap-2">
                                                <button class="text-black px-4 py-1 text-sm rounded-lg cursor-pointer">
                                                    Monthly
                                                </button>
                                                <button hidden
                                                    class="text-black px-4 py-1 text-sm rounded-lg cursor-pointer">
                                                    Yearly
                                                </button>
                                            </div>
                                        </div>

                                        <div x-data="tradingData" class="h-40 md:h-80">
                                            <canvas x-ref="chart" id="trading-chart"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <!-- Existing table code -->
                                <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-[800px]">
                                        <thead>
                                            <tr class="">
                                                <th class="text-black px-4 py-3 text-start w-1/4">
                                                    AI Bot
                                                </th>
                                                <th class="text-black px-4 py-3 text-start w-1/5">
                                                    PNL
                                                </th>
                                                <th class="text-black px-4 py-3 text-start w-1/5">
                                                    Entry Price
                                                </th>
                                                <th class="text-black px-4 py-3 text-start w-1/5">
                                                    Exiting Price
                                                </th>
                                                <th class="text-black px-4 py-3 text-start w-1/5">
                                                    Trading Pair
                                                </th>
                                                <th class="text-black px-4 py-3 text-start w-1/5">

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($histories as $history)
                                                <tr class="">
                                                    <td class="text-black px-4 py-4 text-start">
                                                        <div class="flex items-center space-x-3">
                                                            <img src="{{ asset('storage/bots/' . $history->botActivation->bot->logo) }}"
                                                                alt="Bot"
                                                                class="w-9 h-9 rounded-full flex-shrink-0" />
                                                            <div class="min-w-0">
                                                                <h3 class="font-semibold text-xs md:text-base truncate">
                                                                    {{ $history->botActivation->bot->name }}
                                                                </h3>
                                                                <p class="text-xs text-black truncate">
                                                                    {{ date('d-m-y / H:i:s', $history->timestamp) }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class=" px-4 py-4 text-start whitespace-nowrap">
                                                        @if ($history->profit < 0)
                                                            <div class="text-[#d91414]">
                                                                <p class="text-sm">
                                                                    -{{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                                </p>
                                                                <p class="flex items-center gap-1">
                                                                    <img src="{{ asset('/assets/templates/gopie/images/red-arrow-down.svg') }}"
                                                                        class="mr-1 w-3 h-3" alt="" />
                                                                    <span>{{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%</span>
                                                                </p>
                                                            </div>
                                                        @else
                                                            <div class="text-green-500">
                                                                <p class="text-sm">
                                                                    -{{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                                </p>
                                                                <p class="flex items-center gap-1">
                                                                    <img src="{{ asset('/assets/templates/gopie/images/green-arrow-up.svg') }}"
                                                                        class="mr-1 w-3 h-3" alt="" />
                                                                    <span>{{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%</span>
                                                                </p>
                                                            </div>
                                                        @endif

                                                    </td>
                                                    <td class="text-black px-4 py-4 text-start text-sm whitespace-nowrap">
                                                        {{ $history->entry_price }}
                                                    </td>
                                                    <td class="text-black px-4 py-4 text-start text-sm whitespace-nowrap">
                                                        {{ $history->exit_price }}
                                                    </td>
                                                    <td class="text-black px-4 py-4 text-start text-sm">
                                                        {{ $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-center p-1 gap-2 shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] text-xs md:text-sm rounded-xl px-2 ml-auto w-32 whitespace-nowrap hover:shadow-[inset_0px_2px_4px_0px_rgba(0,_0,_0,_0.3)] cursor-pointer view-chart ">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="12"
                                                                    height="9" viewBox="0 0 12 9" fill="none">
                                                                    <path
                                                                        d="M5.98916 6.74296C7.19183 6.74296 8.16679 5.768 8.16679 4.56533C8.16679 3.36266 7.19183 2.3877 5.98916 2.3877C4.78648 2.3877 3.81152 3.36266 3.81152 4.56533C3.81152 5.768 4.78648 6.74296 5.98916 6.74296Z"
                                                                        stroke="#12b7b6" stroke-width="0.933272" />
                                                                    <path
                                                                        d="M11.0839 3.90187C11.3253 4.19554 11.446 4.34175 11.446 4.56512C11.446 4.78848 11.3253 4.93469 11.0839 5.22836C10.2004 6.301 8.25174 8.2982 5.98949 8.2982C3.72724 8.2982 1.77857 6.301 0.895068 5.22836C0.653662 4.93469 0.532959 4.78848 0.532959 4.56512C0.532959 4.34175 0.653662 4.19554 0.895068 3.90187C1.77857 2.82923 3.72724 0.832031 5.98949 0.832031C8.25174 0.832031 10.2004 2.82923 11.0839 3.90187Z"
                                                                        stroke="#12b7b6" stroke-width="0.933272" />
                                                                </svg>
                                                                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>

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

                    <!-- daily summary tab -->
                    <div x-show="activeTab === 'daily-summary'"
                        class="shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] rounded-2xl p-6 relative">
                        <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="">
                                        <th class="text-black px-4 py-3 text-start">
                                            Date/Time
                                        </th>
                                        <th class="text-black px-4 py-3 text-center">
                                            Amount
                                        </th>
                                        <th class="text-black px-4 py-3 text-end">PNL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($daily_data as $date => $summary)
                                        @if ($summary['profit'] != 0)
                                            <tr class="mb-4">
                                                <td class="text-black px-4 py-4 text-start text-sm">
                                                    {{ $date }}
                                                </td>
                                                <td class="text-black 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-black">
                                                            <span>+{{ formatAmount($summary['profit']) }}</span>
                                                        </span>
                                                    @endif
                                                </td>
                                                <td
                                                    class="text-[#12b7b6] px-4 py-4 text-end text-sm flex items-center justify-end gap-1">
                                                    @if ($summary['profit'] < 0)
                                                        <img src="{{ asset('/assets/templates/gopie/images/red-arrow-down.svg') }}"
                                                            class="mr-1 w-3 h-3" alt="Arrow Up" />
                                                        <span
                                                            class="text-red-500 text-xs">{{ number_format($summary['profit_percent'], 2) }}%</span>
                                                    @else
                                                        <img src="{{ asset('/assets/templates/gopie/images/green-arrow-up.svg') }}"
                                                            class="mr-1 w-3 h-3" alt="Arrow Up" />
                                                        <span
                                                            class="text-[#12b7b6] text-xs">+{{ number_format($summary['profit_percent'], 2) }}%</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif
                                    @empty
                                    @endforelse

                                    <!-- Add more rows as needed with the same structure -->
                                </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 = document.getElementById("trading-chart").getContext("2d");

                    // Sample data for profits and losses
                    const profits = @json($profits).reverse();


                    // Generate date labels
                    const getLast7Days = () => {
                        const dates = [];
                        for (let i = 29; i >= 0; i--) {
                            const date = new Date();
                            date.setDate(date.getDate() - i);
                            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(9, 194, 65, 0.25)"); // Lighter Green gradient
                    gradient.addColorStop(0.5, "rgba(9, 194, 65, 0.15)");
                    gradient.addColorStop(0.1, "rgba(0, 0, 0, 0.05)");

                    new Chart(ctx, {
                        type: "line",
                        data: {
                            labels: getLast7Days(),
                            datasets: [{
                                label: "Profits",
                                data: profits,
                                borderColor: "#09c241",
                                backgroundColor: gradient,
                                tension: 0.4,
                                fill: true,
                            }, ],
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: true,
                                },
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: "rgba(0, 0, 0, 0.1)",
                                    },
                                    ticks: {
                                        color: "#666",
                                    },
                                },
                                x: {
                                    grid: {
                                        drawTicks: false,
                                        drawBorder: false,
                                        display: false, // Removes vertical grid lines
                                    },
                                    ticks: {
                                        color: "#666",
                                    },
                                },
                            },
                        },
                    });
                },
            }));
        });
    </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">
                <button id="closeAiBotActivateModal"
                    class="absolute -top-3 -right-3 text-gray-400 hover:text-gray-600 bg-[#f3f3f3] rounded-full p-2">
                    <img src="{{ asset('/assets/templates/gopie/images/close-modal-icon.svg') }}"
                        alt="" />
                </button>

                <div class="flex-1 space-y-4">
                    <h3 class="text-xl font-semibold text-black mb-6 md:mb-16">
                        AI Activation
                    </h3>

                    <div class="block mb-6">
                        <h3 class="text-black">
                            You have chosen to activate
                            <span class="text-[#12b7b6]" id="dispay_bot_name"></span> Ai bot
                        </h3>
                    </div>


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

                    <div class="flex-1 space-y-4 mb-6">

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

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


                        <div class="relative">
                            <label class="block text-xs text-black mb-1 md:mb-4">Capital Amount
                                {{ 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 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] rounded-xl p-3 pl-8 text-black focus:outline-none" />
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 mt-6 md:mt-0">
                        <div class="flex items-center space-x-2 mb-2">
                            <span class="text-sm text-black">Note</span>
                            <img src="{{ asset('/assets/templates/gopie/images/important-info-icon.svg') }}"
                                alt="" />
                        </div>
                        <div
                            class="rounded-xl p-4 space-y-2 shadow-[0px_15px_35px_-5px_rgba(0,_0,_0,_0.1)]">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-700">Minimum Capital:</span>
                                <span class="text-black" id="dispay_bot_min"></span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-700">Maximum Capital:</span>
                                <span class="text-black" id="dispay_bot_max"></span>
                            </div>
                        </div>

                        <!-- Activate Button -->
                        <button type="submit" id="activateButton"
                            class="w-full primaryBtn shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)] text-white py-3 font-semibold rounded-3xl mt-4 md:mt-8 hover:opacity-90 transition-opacity hover:shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] flex items-center justify-center">
                            Activate Now
                        </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('primaryBtn');
            submitButton.addClass('disabled-button');

            $.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');

                    $('#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('primaryBtn');
                    submitButton.removeClass('disabled-button');

                }
            });

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