@php
    use Illuminate\Support\Facades\DB;
    use App\Models\DepositCoin;
    use Illuminate\Support\Facades\Cache;

    function getCurrencyByCoin($id)
    {
        // Try to retrieve the coins from the cache
        $coins = Cache::get('coins');

        // If coins are not in the cache, retrieve them from the database and cache them
        if (!$coins) {
            $coins = DepositCoin::all();
            Cache::forever('coins', $coins);
        }

        // Find and return the coin by ID
        $coin = $coins->find($id);
        return $coin;
    }

    $startDate = now()->subDays(6);
    $endDate = now();

    $deposit_data = user()
        ->deposits()
        ->selectRaw('DATE(created_at) as date, SUM(amount) as total_deposit')
        ->whereBetween('created_at', [$startDate, $endDate])
        ->groupBy('date')
        ->orderBy('date')
        ->get();

    $withdrawal_data = user()
        ->withdrawals()
        ->selectRaw('DATE(created_at) as date, SUM(amount) as total_withdrawal')
        ->whereBetween('created_at', [$startDate, $endDate])
        ->groupBy('date')
        ->orderBy('date')
        ->get();

    $graph_info = [];
    $days = [];
    $deposit_amount = [];
    $deposits_graph = [];
    $withdrawals_graph = [];

    // Create an associative array with all days within the date range and initial values of 0
    $currentDate = $startDate;
    while ($currentDate <= $endDate) {
        $formatted_date = $currentDate->format('d-m');
        $graph_info[$formatted_date] = ['deposit' => 0, 'withdrawal' => 0];
        $currentDate->addDay();
        array_push($days, $formatted_date);
    }

    // Populate the graph_info array with actual data from $chart_data
    foreach ($deposit_data as $data) {
        $formatted_date = date('d-m', strtotime($data->date));
        // $graph_info[$formatted_date] = [
        //     'deposit' => $data->total_deposit,
        // ];
        $graph_info[$formatted_date]['deposit'] = $data->total_deposit;
    }

    foreach ($withdrawal_data as $data) {
        $formatted_date = date('d-m', strtotime($data->date));
        // $graph_info[$formatted_date] = [
        //     'withdrawal' => $data->total_withdrawal,
        // ];
        $graph_info[$formatted_date]['withdrawal'] = $data->total_withdrawal;
    }

    foreach ($graph_info as $day => $data) {
        array_push($days, $day);
        array_push($deposits_graph, $data['deposit']);
        array_push($withdrawals_graph, $data['withdrawal']);
    }
    $days = array_slice($days, -7);

    //////////////////////////////// merge deposit and wihdrawal
    // Merge both collections and sort by created_at

    $user_id = user()->id;
    $deposits_blade = DB::select("SELECT * FROM deposits WHERE user_id = $user_id ORDER BY id DESC LIMIT 5");
    $withdrawals_blade = DB::select("SELECT * FROM withdrawals WHERE user_id = $user_id ORDER BY id DESC LIMIT 5");

    $deposits_and_withdrawals = collect(array_merge((array) $deposits_blade, (array) $withdrawals_blade));

    // Sort the combined collection by 'created_at' in descending order
    $deposits_and_withdrawals = $deposits_and_withdrawals->sortByDesc('created_at');

    // Now $deposits_and_withdrawals contains a combined collection of deposits and withdrawals ordered by 'created_at'

    // Corrected dd() to dump the correct variables
    //dd($deposits_and_withdrawals, $deposits_blade, $withdrawals_blade);

@endphp



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

@section('css')
@endsection

@section('contents')
    <div class="transition-all duration-300 ease-in-out"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">
        <div class="min-h-screen m-2 lg:m-4" id="refreshPage">
            <!-- Top Navigation Spacer for Desktop -->
            <div class="hidden lg:block h-24"></div>
            
            
            
            
            <style>
                .carousel-container {
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    scroll-behavior: smooth;
                }
            
                .carousel-slide {
                    scroll-snap-align: start;
                    flex-shrink: 0;
                }
            
                .carousel-container::-webkit-scrollbar {
                    display: none;
                }
            
                @media (min-width: 768px) {
                    .carousel-slide {
                        width: 400px;
                        height: 200px;
                    }
                }
            </style>
            
            <div class="max-w-12xl mx-auto">
                <!-- Carousel Container -->
                <div class="relative mb-0">
                    <div class="carousel-container flex overflow-x-auto space-x-4 pb-0" id="carousel">
                        @foreach($notices as $index => $notice)
                            <div class="carousel-slide w-80 md:w-96 h-48 md:h-52 bg-gradient-to-br from-[{{ $notice->color }}] to-[{{ $notice->color }}] rounded-2xl overflow-hidden flex-shrink-0 snap-start">
                                <div class="flex items-center h-full p-6">
                                    <!-- Left Image Section -->
                                    <div class="flex-shrink-0 w-20 md:w-24 mr-4 md:mr-6">
                                        <img src="{{ asset('notices/' . $notice->image) }}" class="object-cover rounded" width="150px" />
                                    </div>
            
                                    <!-- Right Content Section -->
                                    <div class="flex-1 text-white">
                                        <h2 class="text-lg md:text-xl font-bold mb-2 leading-tight">💰 {{ $notice->title }}</h2>
                                        <p class="text-purple-100 text-xs md:text-sm mb-4 leading-relaxed">
                                            {{ $notice->message }} 💸 
                                        </p>
                                        <a href="{{ $notice->link }}" class="bg-white bg-opacity-20 flex justify-between hover:bg-opacity-30 transition-all duration-200 text-white px-4 md:px-6 py-2 md:py-3 rounded-full font-medium text-sm md:text-base flex items-center space-x-2">
                                            <span>{{ $notice->button }}</span>
                                            <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
            
                    <!-- Pagination Dots -->
                    <div class="flex justify-center space-x-2 mt-4">
                        @foreach($notices as $index => $notice)
                            <div class="w-2 h-2 bg-gray-300 rounded-full dot transition-all duration-200 {{ $loop->first ? 'bg-purple-600' : '' }}" data-slide="{{ $index }}"></div>
                        @endforeach
                    </div>
                </div>
            </div>
            
           <script>
    document.addEventListener('DOMContentLoaded', function () {
        const carousel = document.getElementById('carousel');
        const dots = document.querySelectorAll('.dot');
        const slides = carousel.children;
        const slideCount = slides.length;
        let currentIndex = 0;
        let autoSlideInterval;

        function goToSlide(index) {
            const slideWidth = slides[0].offsetWidth + 16; // + spacing
            carousel.scrollTo({
                left: slideWidth * index,
                behavior: 'smooth'
            });
            updateDots(index);
        }

        function updateDots(index) {
            dots.forEach((dot, i) => {
                dot.classList.toggle('bg-purple-600', i === index);
                dot.classList.toggle('bg-gray-300', i !== index);
            });
        }

        function startAutoSlide() {
            stopAutoSlide(); // ensure no duplicate intervals
            autoSlideInterval = setInterval(() => {
                currentIndex = (currentIndex + 1) % slideCount;
                goToSlide(currentIndex);
            }, 2000);
        }

        function stopAutoSlide() {
            clearInterval(autoSlideInterval);
        }

        // Start auto-slide initially
        startAutoSlide();

        // Pause on hover over the entire carousel area
        carousel.addEventListener('mouseenter', stopAutoSlide);
        carousel.addEventListener('mouseleave', startAutoSlide);

        // Allow dot click navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentIndex = index;
                goToSlide(currentIndex);
            });
        });

        // Sync dot highlight when user scrolls manually
        carousel.addEventListener('scroll', () => {
            const slideWidth = slides[0].offsetWidth + 16;
            const index = Math.round(carousel.scrollLeft / slideWidth);
            if (index !== currentIndex) {
                currentIndex = index;
                updateDots(index);
            }
        });
    });
</script>



            <!-- Content Area -->
            <div class="text-black dark:text-white" x-data="tradingData">
                
            <!--add a slider courassels for the notices autoscrolling with icons to scroll manually-->
            
 


                
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
        


        <!-- Left Column -->
        <div class="lg:col-span-8 space-y-4">

            <!-- Stats Section -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <!-- All Time PNL Card -->
                <div class="bg-white dark:bg-[#0f141a] shadow-md rounded-md p-4 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-500 dark:text-gray-400">All Time PNL</span>
                    </div>
                    <div class="text-2xl font-bold flex items-center gap-2">
                        <img src="{{ asset('/assets/templates/pandel/images/coinIcon.png') }}" alt="" />
                        {{ formatAmount($profit_fig + $capital) }}
                    </div>
                    <div class="text-green-500 text-sm font-semibold mt-2 bg-gray-100 dark:bg-gray-950 rounded-2xl p-2 w-36 text-center flex gap-2 items-center">
                        @if ($profit_percent == 0)
                            <span class="text-black dark:text-white">+{{ number_format($profit_percent, 2) }}%</span>
                        @elseif($profit_percent > 0)
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M15.22 6.268a.75.75 0 01.968-.432l5.942 2.28a.75.75 0 01.431.97l-2.28 5.941a.75.75 0 11-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 00-5.45 5.174.75.75 0 01-1.199.19L9 12.31l-6.22 6.22a.75.75 0 11-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l3.606 3.605a12.694 12.694 0 015.68-4.973l1.086-.484-4.251-1.631a.75.75 0 01-.432-.97z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="text-green-500">+{{ number_format($profit_percent, 2) }}%</span>
                        @else
                            <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M1.72 5.47a.75.75 0 011.06 0L9 11.69l3.756-3.756a.75.75 0 01.985-.066 12.698 12.698 0 014.575 6.832l.308 1.149 2.277-3.943a.75.75 0 111.299.75l-3.182 5.51a.75.75 0 01-1.025.275l-5.511-3.181a.75.75 0 01.75-1.3l3.943 2.277-.308-1.149a11.194 11.194 0 00-3.528-5.617l-3.809 3.81a.75.75 0 01-1.06 0L1.72 6.53a.75.75 0 010-1.061z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="text-red-600">{{ number_format($profit_percent, 2) }}%</span>
                        @endif
                    </div>
                </div>

                <!-- AI Bots Card -->
                <div class="bg-white dark:bg-[#0f141a] shadow-md rounded-md p-4 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-500 dark:text-gray-400">AI Bots</span>
                    </div>
                    <div class="text-2xl font-bold flex items-center gap-2">
                        <img src="{{ asset('/assets/templates/pandel/images/dashBotsIcon.png') }}" alt="" />
                        {{ user()->botActivations()->count() }}
                    </div>
                    <div class="text-green-500 text-sm font-semibold mt-2 bg-gray-100 dark:bg-gray-950 rounded-2xl p-2 w-36 text-center flex gap-2 items-center">
                        @php
                            $tradeCount = user()->botHistory()->count();
                        @endphp
                        @if ($tradeCount <= 0)
                            <span class="text-black dark:text-white">{{ $tradeCount }} trades</span>
                        @else
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M15.22 6.268a.75.75 0 01.968-.432l5.942 2.28a.75.75 0 01.431.97l-2.28 5.941a.75.75 0 11-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 00-5.45 5.174.75.75 0 01-1.199.19L9 12.31l-6.22 6.22a.75.75 0 11-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l3.606 3.605a12.694 12.694 0 015.68-4.973l1.086-.484-4.251-1.631a.75.75 0 01-.432-.97z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="text-green-500">+{{ $tradeCount }} trades</span>
                        @endif
                    </div>
                </div>

            </div>

            <!-- Chart Section -->
            <div class="bg-white dark:bg-black shadow-md rounded-md p-4">
                <h2 class="text-gray-900 dark:text-white font-semibold text-lg text-center mb-2">
                    7 Days PNL
                </h2>
                <h3 class="text-gray-500 dark:text-gray-400 mb-4 text-center">
                    Cumulative PNL Chart history for the last 7 days
                </h3>
                <div class="h-64">
                    <canvas x-ref="chart"></canvas>
                </div>
            </div>

        </div>

        <!-- Right Column -->
        <div class="lg:col-span-4 space-y-4">

            <!-- Total Balance and Transfer Form -->
            <div class="bg-white dark:bg-[#0f141a] shadow-md rounded-md p-4 border border-gray-200 dark:border-gray-700">
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-500 dark:text-gray-400">Total Balance</span>
                    </div>
                    <div class="text-2xl font-bold">{{ formatAmount(user()->balance) }}</div>
                    <div class="text-green-500 text-sm flex gap-2 items-center mt-2">
                        ...
                        <span class="text-black dark:text-white font-semibold ml-1">Up from yesterday</span>
                    </div>
                </div>

                <!-- Form -->
                <form action="{{ route('user.transfers.new') }}" method="post" id="transferForm">
                    @csrf
                    <div class="space-y-4">

                        <!-- Send Section -->
                        <div class="flex items-center bg-gray-100 dark:bg-gray-950 rounded-3xl px-3 py-2">
                            <span class="text-gray-500 dark:text-gray-400">Send</span>
                            <input type="number" name="amount" id="amount" required
                                class="w-full bg-transparent p-2 text-black dark:text-white border-none rounded-xl focus:outline-none text-right"
                                placeholder="0.00" />
                            <span class="text-gray-500 dark:text-gray-400">{{ site('currency') }}</span>
                        </div>

                        <!-- Full Name and Username -->
                        <div class="flex flex-col gap-2">
                            <input type="text" name="fullname" placeholder="Full Name"
                                class="w-full bg-gray-100 dark:bg-gray-950 p-2 text-black dark:text-white rounded-xl focus:outline-none" required>
                            <input type="text" name="username" placeholder="Username"
                                class="w-full bg-gray-100 dark:bg-gray-950 p-2 text-black dark:text-white rounded-xl focus:outline-none" required>
                        </div>

                        <!-- Min/Max Info -->
                        <div class="space-y-2">
                            <div class="flex justify-between text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-950 px-3 py-2 rounded-3xl">
                                <span>Min Deposit:</span>
                                <span>{{ formatAmount(site('min_transfer')) }}</span>
                            </div>
                            <div class="flex justify-between text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-950 px-3 py-2 rounded-3xl">
                                <span>Max Deposit:</span>
                                <span>{{ formatAmount(site('max_transfer')) }}</span>
                            </div>
                        </div>

                        <!-- Confirm Button -->
                        <button type="submit"
                            class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium">
                            Confirm
                        </button>

                    </div>
                </form>

            </div>

        </div>

    </div>
</div>


            <!-- recent trades section  -->
           <div class="mt-6">
    <div class="items-start justify-between gap-6 bg-white dark:bg-[#0f141a] shadow-md rounded-md p-4 text-black dark:text-white">
        <div class="w-full">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-lg font-semibold text-black dark:text-white">
                    Recent Trades
                </h2>
            </div>
            <div class="w-full px-2 md:px-6">
                <div class="w-full">
                    <div class="w-full">
                        <div class="relative overflow-hidden  custom-scrollbar">
                            <div class="overflow-y-auto h-96" id="recentTradesContainer">
                                <table class="w-full text-sm text-left">
                                    <thead class="bg-gray-100 dark:bg-[#0f141a] sticky top-0">
                                        <tr class="text-black dark:text-white">
                                            <th scope="col" class="p-3">AI Bots</th>
                                            <th scope="col" class="p-3">Trading Pairs</th>
                                            <th scope="col" class="p-3">24H</th>
                                            <th scope="col" class="p-3">Date</th>
                                            <th scope="col" class="p-3">Time</th>
                                            <th scope="col" class="p-3">Profit/Loss</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($histories as $history)
                                            <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150">
                                                <td class="p-3 whitespace-nowrap">
                                                    <div class="flex items-center gap-2">
                                                        <img src="{{ asset('storage/bots/' . $history->botActivation->bot->logo) }}"
                                                            class="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700" />
                                                        <span class="font-medium">{{ $history->botActivation->bot->name }}</span>
                                                    </div>
                                                </td>
                                                <td class="p-3 whitespace-nowrap font-medium">
                                                    {{ $history->pair }}
                                                </td>
                                                <td class="p-3 whitespace-nowrap">
                                                    @if ($history->profit < 0)
                                                        <span class="text-red-600">
                                                            {{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                        </span>
                                                    @else
                                                        <span class="text-green-500">
                                                            +{{ formatAmount(str_replace('-', '', $history->profit)) }}
                                                        </span>
                                                    @endif
                                                </td>
                                                <td class="p-3 whitespace-nowrap">
                                                    {{ date('d-m-y', $history->timestamp) }}
                                                </td>
                                                <td class="p-3 whitespace-nowrap">
                                                    {{ date('H:i:s', $history->timestamp) }}
                                                </td>
                                                <td class="p-3 whitespace-nowrap">
                                                    @if ($history->profit < 0)
                                                        <span class="text-red-600">
                                                            {{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                        </span>
                                                    @else
                                                        <span class="text-green-500">
                                                            +{{ number_format((($history->exit_price - $history->entry_price) / $history->entry_price) * 100, 2) }}%
                                                        </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="p-4">
                                                    <div class="w-full flex justify-center items-center gap-2 bg-gray-50 dark:bg-[#0f141a] rounded-md border border-gray-200 dark:border-gray-700 p-4">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500" fill="currentColor" 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>No record found!</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


            <!-- my bots/ portfolio balance section  -->
            <div class="mt-6 bg-white dark:bg-[#0f141a] p-6 rounded-md shadow-md text-black dark:text-white">
    <div class="flex flex-col lg:flex-row justify-between items-start overflow-y-auto h-96">
        <table class="table-auto w-full">
            <thead>
                <tr>
                    <th colspan="2" class="text-left md:text-2xl">My Bots</th>
                    <th class="text-right md:text-2xl">Portfolio Balance</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($activations as $bot)
                    <tr class="border-b border-gray-200 dark:border-gray-700">
                        <td class="py-4 flex items-center gap-4">
                            <img src="{{ asset('storage/bots/' . $bot->bot->logo) }}" alt="Bot Image"
                                class="w-8 md:w-12 h-8 md:h-12 rounded-full bg-gray-200 dark:bg-gray-700" />
                            <div class="flex flex-col">
                                <span class="font-medium">{{ $bot->bot->name }}</span>
                                <p class="text-sm flex gap-2 items-center">
                                    <span class="text-gray-500 dark:text-gray-400">PNL:</span>
                                    @if ($bot->profit < 0)
                                        <span class="text-red-600 flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-4 h-4">
                                                <path fill-rule="evenodd"
                                                    d="M1.72 5.47a.75.75 0 011.06 0L9 11.69l3.756-3.756a.75.75 0 01.985-.066 12.698 12.698 0 014.575 6.832l.308 1.149 2.277-3.943a.75.75 0 111.299.75l-3.182 5.51a.75.75 0 01-1.025.275l-5.511-3.181a.75.75 0 01.75-1.3l3.943 2.277-.308-1.149a11.194 11.194 0 00-3.528-5.617l-3.809 3.81a.75.75 0 01-1.06 0L1.72 6.53a.75.75 0 010-1.061z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            {{ round(($bot->profit / ($bot->capital + 0.0001)) * 100, 2) }}%
                                        </span>
                                    @else
                                        <span class="text-green-500 flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-4 h-4">
                                                <path fill-rule="evenodd"
                                                    d="M15.22 6.268a.75.75 0 01.968-.432l5.942 2.28a.75.75 0 01.431.97l-2.28 5.941a.75.75 0 11-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 00-5.45 5.174.75.75 0 01-1.199.19L9 12.31l-6.22 6.22a.75.75 0 11-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l3.606 3.605a12.694 12.694 0 015.68-4.973l1.086-.484-4.251-1.631a.75.75 0 01-.432-.97z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            +{{ round(($bot->profit / ($bot->capital + 0.0001)) * 100, 2) }}%
                                        </span>
                                    @endif
                                </p>
                            </div>
                        </td>
                        <td class="py-4"></td>
                        <td class="py-4 text-right font-semibold">
                            {{ formatAmount($bot->balance) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3">
                            <div
                                class="w-full flex justify-center items-center gap-2 bg-gray-50 dark:bg-[#0f141a] rounded-md border border-gray-200 dark:border-gray-700 p-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500"
                                    fill="currentColor" 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>No record found!</span>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>


            <!-- recent deposits section -->
           <div class="mt-8">
    <h2 class="text-black dark:text-white text-lg font-semibold mb-4">
        Recent Deposits
    </h2>
    <div class="max-w-full overflow-x-auto max-h-96 bg-white dark:bg-[#0f141a] rounded-md shadow-md p-6">
        <div class="min-w-[800px]">

            <!-- Table Header -->
            <div class="grid grid-cols-5 bg-gray-100 dark:bg-[#0f141a] border-b border-gray-200 dark:border-gray-700">
                <div class="text-gray-600 dark:text-gray-400 px-4 py-3 font-semibold">AI Bots</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 py-3 font-semibold">Holdings</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 py-3 font-semibold">Date</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 py-3 font-semibold">Time</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 py-3 font-semibold">Status</div>
            </div>

            <!-- Table Rows -->
            @forelse ($deposits as $deposit)
                <div class="grid grid-cols-5 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-[#0f141a]">
                    <div class="px-4 py-4 flex items-center gap-2 text-black dark:text-white">
                        <img src="{{ 'https://nowpayments.io' . getCurrencyByCoin($deposit->deposit_coin_id)->logo_url }}"
                            alt="coin" class="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700" />
                        <span>{{ getCurrencyByCoin($deposit->deposit_coin_id)->name }}</span>
                    </div>

                    <div class="px-4 py-4 text-black dark:text-white">
                        {{ formatAmount($deposit->amount) }}<br />
                        <span class="text-xs">
                            <span class="text-gray-500 dark:text-gray-400">
                                {{ $deposit->converted_amount }}
                                {{ getCurrencyByCoin($deposit->deposit_coin_id)->code }}/
                            </span>
                            <span class="text-red-600">
                                {{ getCurrencyByCoin($deposit->deposit_coin_id)->network ?? getCurrencyByCoin($deposit->deposit_coin_id)->code }}
                            </span>
                        </span>
                    </div>

                    <div class="px-4 py-4 text-black dark:text-white">
                        {{ date('d-m-y', strtotime($deposit->created_at)) }}
                    </div>

                    <div class="px-4 py-4 text-black dark:text-white">
                        {{ date('H:i:s A', strtotime($deposit->created_at)) }}
                    </div>

                    <div class="px-4 py-4">
                        @if ($deposit->status == 'waiting')
                            <span
                                class="bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-1 px-4 rounded-3xl inline-flex items-center justify-center w-36 h-10">
                                {{ $deposit->status }}
                            </span>
                        @elseif ($deposit->status == 'finished')
                            <span
                                class="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-400 py-1 px-4 rounded-3xl inline-flex items-center justify-center w-36 h-10">
                                {{ $deposit->status }}
                            </span>
                        @elseif (in_array($deposit->status, ['expired', 'failed', 'refunded']))
                            <span
                                class="bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-400 py-1 px-4 rounded-3xl inline-flex items-center justify-center w-36 h-10">
                                {{ $deposit->status }}
                            </span>
                        @else
                            <span
                                class="bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-1 px-4 rounded-3xl inline-flex items-center justify-center w-36 h-10">
                                {{ $deposit->status }}
                            </span>
                        @endif
                    </div>
                </div>
            @empty
                <div
                    class="flex justify-center items-center gap-2 p-4 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-[#0f141a]">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500" fill="currentColor"
                        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>No record found!</span>
                </div>
            @endforelse

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


            <!-- recent withdrawals section  -->
            <div class="mt-6">
    <!-- Header -->
    <h2 class="text-black dark:text-white text-lg mb-4 font-semibold">
        Recent Withdrawals
    </h2>

    <div class="max-w-full overflow-x-auto overflow-y-auto max-h-96 bg-white dark:bg-[#0f141a] rounded-md shadow-md p-6">
        <div class="min-w-[800px]">

            <!-- Table Header -->
            <div class="grid grid-cols-5 bg-gray-100 dark:bg-[#0f141a] border-b border-gray-200 dark:border-gray-700 py-2">
                <div class="text-gray-600 dark:text-gray-400 px-4 font-semibold">AI Bots</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 font-semibold">Holdings</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 font-semibold">Date</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 font-semibold">Time</div>
                <div class="text-gray-600 dark:text-gray-400 px-4 font-semibold">Status / ID</div>
            </div>

            <!-- Table Rows -->
            @forelse ($withdrawals as $withdrawal)
                <div class="grid grid-cols-5 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-[#0f141a] py-4">
                    <div class="px-4 flex items-center gap-2 text-black dark:text-white">
                        <img src="{{ 'https://nowpayments.io' . getCurrencyByCoin($withdrawal->deposit_coin_id)->logo_url }}"
                            alt="coin" class="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700" />
                        <span>
                            {{-- {{ getCurrencyByCoin($withdrawal->deposit_coin_id)->name }} --}}
                            Naira
                        </span>
                    </div>

                    <div class="px-4 text-black dark:text-white">
                        {{ formatAmount($withdrawal->amount, 'ngn') }}
                        <div class="text-xs">
                            <span class="text-gray-500 dark:text-gray-400">
                                {{ $withdrawal->converted_amount }}
                                {{ getCurrencyByCoin($withdrawal->deposit_coin_id)->code }}/
                            </span>
                            <span class="text-red-600">
                                {{ getCurrencyByCoin($withdrawal->deposit_coin_id)->network ?? getCurrencyByCoin($withdrawal->deposit_coin_id)->code }}
                            </span>
                        </div>
                    </div>

                    <div class="px-4 text-black dark:text-white">
                        {{ date('d-m-y', strtotime($withdrawal->created_at)) }}
                    </div>

                    <div class="px-4 text-black dark:text-white">
                        {{ date('H:i:s A', strtotime($withdrawal->created_at)) }}
                    </div>

                    <div class="px-4">
                        <div class="mb-1">
                            @if ($withdrawal->status == 'pending')
                                <span class="text-yellow-500">{{ $withdrawal->status }}</span>
                            @elseif ($withdrawal->status == 'approved')
                                <span class="text-green-500">{{ $withdrawal->status }}</span>
                            @elseif (in_array($withdrawal->status, ['rejected', 'failed', 'refunded']))
                                <span class="text-red-500">{{ $withdrawal->status }}</span>
                            @else
                                <span class="text-gray-500">{{ $withdrawal->status }}</span>
                            @endif
                        </div>
                        <div class="text-gray-500 text-xs break-words">
                            {{ $withdrawal->wallet_address ?? $withdrawal->payment_wallet }}
                        </div>
                    </div>
                </div>
            @empty
                <div
                    class="flex justify-center items-center gap-2 p-4 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-[#0f141a]">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500" fill="currentColor"
                        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>No record found!</span>
                </div>
            @endforelse

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



        </div>


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

    </div>
@endsection

@section('scripts')
<script>
    function noticeCarousel() {
        return {
            active: 0,
            interval: null,
            notices: @json($notices),
            start() {
                this.interval = setInterval(() => this.next(), 6000);
            },
            stop() {
                clearInterval(this.interval);
            },
            next() {
                this.active = (this.active + 1) % this.notices.length;
            },
            prev() {
                this.active = (this.active - 1 + this.notices.length) % this.notices.length;
            }
        }
    }
</script>



    <!-- Trading Data Js script  -->
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data("tradingData", () => ({
                init() {
                    const ctx = this.$refs.chart.getContext("2d");

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

                    // date labels for last 7 days
                    const getLast7Days = () => {
                        const dates = [];
                        for (let i = 6; 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, "black");
                    gradient.addColorStop(0.1, "black");

                    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>

    {{-- transfer --}}
    <script>
        // handle user form
        $(document).on('submit', '#userForm', function(e) {
            e.preventDefault();
            var form = $(this);
            var formData = new FormData(this);
            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#fullname').val(response.name)

                },
                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>';
                            });
                            toastNotify('error', fieldErrors);
                        });
                    } else {
                        toastNotify('error', 'An Error occured, try again later');
                    }


                }
            });
        });


        // handle transfer form
        $(document).on('submit', '#transferForm', function(e) {
            e.preventDefault();
            var amount = $('#amount').val() * 1;
            var min_transfer = "{{ site('min_transfer') }}" * 1;
            var max_transfer = "{{ site('max_transfer') }}" * 1;
            var currency = "{{ site('currency') }}";

            //check the currency code
            var error = null;
            //check min and max transfer
            if (amount < min_transfer) {
                error = 'Minimum transfer amount is ' + currency + min_transfer;
            }

            if (amount > max_transfer) {
                error = 'Maximum transfer amount is ' + currency + max_transfer;
            }

            if (error === null) {
                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);
                //custom button style
                submitButton.removeClass(
                    'bg-blue-600 hover:bg-blue-700'
                );
                submitButton.addClass('not-allowed-cursor');


                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(response) {


                        //loadPage(form.attr('action'), submitButton, '#pageContent');
                        $("#refreshPage").load(location.href + " #refreshPage");

                        $('html, body').animate({
                            scrollTop: 0 + 100
                        }, 800);
                        toastNotify('success', response.message);




                    },
                    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>';
                                });
                                toastNotify('error', fieldErrors);
                            });
                        } else {
                            toastNotify('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(
                            'bg-blue-600 hover:bg-blue-700'
                        );
                        submitButton.removeClass('not-allowed-cursor');

                    }
                });
            } else {

                toastNotify('error', error);

            }

        });
    </script>
@endsection
