<?php
if (Auth::user()->dashboard_style == "dark") {
    $bg="dark";
    $text = "light";
} else {
    $bg="dark";
    $text = "light";
}

?>

@extends('layouts.app')

    @section('content')
        @include('user.topmenu')
        @include('user.sidebar')
<div class="main-panel bg-{{$bg}}">
            <div class="content bg-{{$bg}}" style="padding-left: 15px; padding-right: 15px;">
                <div class="page-inner" style="padding-left: 0; padding-right: 0;">
                    <div class="mt-2 mb-4">
                        <h2 class="text-{{$text}} pb-2">Welcome, {{ Auth::user()->name }}!</h2>
                            @if ($settings->enable_annoc == "on")
                                <h5 id="ann" class="text-{{$text}}op-7 mb-4">{{$settings->newupdate}}</h5>
                                @if(Session::has('getAnouc') && Session::get('getAnouc') == "true" )
                                    <script type="text/javascript">
                                        var announment = $("#ann").html();
                                        console.log(announment);
                                        swal({
                                            title: "Annoucement!",
                                            text: announment,
                                            icon: "info",
                                            buttons: {
                                                confirm: {
                                                    text: "Okay",
                                                    value: true,
                                                    visible: true,
                                                    className: "btn btn-info",
                                                    closeModal: true
                                                }
                                            }
                                        });
                                    </script>  
                                @endif
                                {{session()->forget('getAnouc')}}
                            @endif

                    </div>
                    <x-danger-alert/>
					<x-success-alert/>
                    <!-- Etowah Bank Style Dashboard -->
<div class="row" style="margin-bottom: 30px;">
    <!-- Top Summary Cards Row (Hidden on Mobile) -->
    <div class="col-12 d-none d-lg-block">
        <div class="row" style="margin-bottom: 20px;">
            <!-- Current Balance Card -->
            <div class="col-sm-6 col-lg-3" style="margin-bottom: 15px;">
                <div class="card shadow" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 20px; border: none; color: white;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div>
                            <small style="opacity: 0.9; font-size: 13px;">Current Balance</small>
                            <h4 style="font-size: 28px; font-weight: 700; margin: 5px 0;">{{$settings->currency}}{{ number_format(Auth::user()->account_bal, 2, '.', ',')}}</h4>
                        </div>
                        <div style="width: 45px; height: 45px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
                            <i class="fa fa-wallet" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monthly Income Card -->
            <div class="col-sm-6 col-lg-3" style="margin-bottom: 15px;">
                <div class="card shadow" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 15px; padding: 20px; border: none; color: white;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div>
                            <small style="opacity: 0.9; font-size: 13px;">Monthly Income</small>
                            <h4 style="font-size: 28px; font-weight: 700; margin: 5px 0;">{{$settings->currency}}{{ number_format(Auth::user()->roi, 2, '.', ',')}}</h4>
                        </div>
                        <div style="width: 45px; height: 45px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
                            <i class="fa fa-arrow-up" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monthly Outgoing Card -->
            <div class="col-sm-6 col-lg-3" style="margin-bottom: 15px;">
                <div class="card shadow" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 15px; padding: 20px; border: none; color: white;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div>
                            <small style="opacity: 0.9; font-size: 13px;">Monthly Outgoing</small>
                            <h4 style="font-size: 28px; font-weight: 700; margin: 5px 0;">{{$settings->currency}}{{ number_format(Auth::user()->bonus, 2, '.', ',')}}</h4>
                        </div>
                        <div style="width: 45px; height: 45px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
                            <i class="fa fa-arrow-down" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transaction Limit Card -->
            <div class="col-sm-6 col-lg-3" style="margin-bottom: 15px;">
                <div class="card shadow" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 15px; padding: 20px; border: none; color: #333;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div>
                            <small style="opacity: 0.8; font-size: 13px;">Transaction Limit</small>
                            <h4 style="font-size: 28px; font-weight: 700; margin: 5px 0;">{{$settings->currency}}500,000.00</h4>
                        </div>
                        <div style="width: 45px; height: 45px; border-radius: 12px; background: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; color: #9c27b0;">
                            <i class="fa fa-infinity" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Responsive Styles -->
<style>
    @media (max-width: 768px) {
        .balance-card-main {
            padding: 15px !important;
        }
        .balance-card-status {
            padding: 12px 15px !important;
        }
        .balance-card-subset {
            padding: 12px 15px !important;
        }
    }
</style>

<!-- Main Balance Card with Subset Cards -->
<div class="col-lg-8" style="margin-bottom: 20px;">
    <div class="card shadow balance-card-main" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); border-radius: 20px; padding: 35px; border: none; position: relative; overflow: hidden; min-height: 340px;">
        <!-- Decorative Background -->
        <div style="position: absolute; top: -50%; right: -20%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius: 50%;"></div>
        
        <!-- Header Section with Greeting and Time -->
        <div style="position: relative; z-index: 2;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; flex-wrap: wrap; gap: 15px;">
    <!-- Greeting Section -->
    <div style="display: flex; align-items: center; gap: 15px;">
        <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: 600;">
            {{ strtoupper(substr(Auth::user()->name, 0, 2)) }}
        </div>
        <div>
            <h4 style="margin: 0; font-size: 16px; color: rgba(255,255,255,0.9); font-weight: 400;">
                Good {{ now()->format('A') == 'AM' ? 'Morning' : (now()->format('H') < 18 ? 'Afternoon' : 'Evening') }}
            </h4>
            <h3 style="margin: 3px 0 0 0; font-size: 22px; color: white; font-weight: 600;">
                {{ Auth::user()->name }}
            </h3>
        </div>
    </div>
    
    <!-- Time Display -->
    <div style="text-align: right;">
        <div id="liveTime" style="font-size: 28px; font-weight: 700; color: white; line-height: 1;">
            {{ now()->format('H:i:s') }}
        </div>
        <div style="font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 3px;">
            {{ now()->format('l, F d, Y') }}
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        div[style*="display: flex; justify-content: space-between"] {
            flex-wrap: nowrap !important;
        }
    }
</style>

            <!-- Balance Section -->
            <div style="margin-bottom: 25px;">
                <div style="font-size: 16px; color: rgba(255,255,255,0.9); margin-bottom: 8px;">Available Balance</div>
                <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
                    <h1 id="mainBalance" style="font-size: 48px; font-weight: 700; color: white; margin: 0; letter-spacing: -2px; line-height: 1;">
                        {{$settings->currency}}{{ number_format(Auth::user()->account_bal, 2, '.', ',')}} USD
                    </h1>
                    <button onclick="toggleMainBalance()" style="width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.2); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s;">
                        <i id="toggleIcon" class="fa fa-eye" style="font-size: 18px;"></i>
                    </button>
                </div>
            </div>

            <!-- Status Section -->
            <div class="balance-card-status" style="background: rgba(255,255,255,0.15); border-radius: 12px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: white;">
                        <i class="fa fa-shield-alt" style="font-size: 20px;"></i>
                    </div>
                    <div>
                        <small style="color: rgba(255,255,255,0.8); font-size: 13px; display: block;">Account Status</small>
                        <div style="display: flex; align-items: center; gap: 8px; margin-top: 5px;">
                            <span style="background: #2ecc71; padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; color: white; display: inline-flex; align-items: center; gap: 5px;">
                                <span style="width: 6px; height: 6px; background: white; border-radius: 50%; animation: pulse 2s infinite;"></span>
                                Active
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div style="display: flex; gap: 10px;">
                    <a href="{{ route('deposits') }}" style="padding: 10px 20px; border-radius: 10px; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: all 0.3s; font-size: 14px;">
                        <i class="fa fa-exchange-alt"></i> Transactions
                    </a>
                    <a href="{{ route('deposits') }}" style="padding: 10px 20px; border-radius: 10px; background: white; color: #1e3c72; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: all 0.3s; font-size: 14px;">
                        <i class="fa fa-plus-circle"></i> Top up
                    </a>
                </div>
            </div>

            <!-- Subset Cards at Bottom -->
            <div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-end;">
                <!-- Deposit Card -->
                <div class="balance-card-subset" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 20px; min-width: 160px; border: 1px solid rgba(255,255,255,0.3);">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: white;">
                            <i class="fa fa-download" style="font-size: 16px;"></i>
                        </div>
                        <div>
                            @foreach($deposited as $deposited)
                                @if(!empty($deposited->count))
                                <h5 style="font-size: 20px; font-weight: 700; color: white; margin: 0; line-height: 1;">
                                    {{$settings->currency}}{{ number_format($deposited->count, 2, '.', ',')}}
                                </h5>
                                @else
                                <h5 style="font-size: 20px; font-weight: 700; color: white; margin: 0; line-height: 1;">
                                    {{$settings->currency}}0.00
                                </h5> 
                                @endif
                            @endforeach
                            <small style="color: rgba(255,255,255,0.9); font-size: 11px; margin-top: 3px; display: block;">Total Deposit</small>
                        </div>
                    </div>
                </div>

                <!-- Profit Card -->
                <div class="balance-card-subset" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 20px; min-width: 160px; border: 1px solid rgba(255,255,255,0.3);">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: white;">
                            <i class="fa fa-coins" style="font-size: 16px;"></i>
                        </div>
                        <div>
                            <h5 style="font-size: 20px; font-weight: 700; color: white; margin: 0; line-height: 1;">
                                {{$settings->currency}}{{ number_format(Auth::user()->roi, 2, '.', ',')}}
                            </h5>
                            <small style="color: rgba(255,255,255,0.9); font-size: 11px; margin-top: 3px; display: block;">Total Profit</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Right Sidebar - Account Statistics -->
    <div class="col-lg-4" style="margin-bottom: 20px;">
        <div class="card shadow" style="background: white; border-radius: 20px; padding: 30px; border: none; height: 100%;">
            <h3 style="font-size: 20px; font-weight: 600; color: #333; margin-bottom: 25px;">Account Statistics</h3>
            
            <!-- Transaction Limit -->
            <div style="display: flex; align-items: center; gap: 15px; padding: 18px 0; border-bottom: 1px solid #f0f0f0;">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #e3f2fd; display: flex; align-items: center; justify-content: center; color: #2196f3; font-size: 22px;">
                    <i class="fa fa-chart-line"></i>
                </div>
                <div style="flex: 1;">
                    <small style="color: #666; font-size: 13px; display: block;">Transaction Limit</small>
                    <h4 style="font-size: 24px; font-weight: 700; color: #333; margin: 5px 0 0 0;">{{$settings->currency}}500,000.00</h4>
                </div>
            </div>

            <!-- Pending Transactions -->
            <div style="display: flex; align-items: center; gap: 15px; padding: 18px 0; border-bottom: 1px solid #f0f0f0;">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #fff9e6; display: flex; align-items: center; justify-content: center; color: #ffc107; font-size: 22px;">
                    <i class="fa fa-clock"></i>
                </div>
                <div style="flex: 1;">
                    <small style="color: #666; font-size: 13px; display: block;">Pending Transactions</small>
                    <h4 style="font-size: 24px; font-weight: 700; color: #333; margin: 5px 0 0 0;">{{$settings->currency}}0.00</h4>
                </div>
            </div>

            <!-- Transaction Volume -->
            <div style="display: flex; align-items: center; gap: 15px; padding: 18px 0;">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #e8f5e9; display: flex; align-items: center; justify-content: center; color: #4caf50; font-size: 22px;">
                    <i class="fa fa-chart-bar"></i>
                </div>
                <div style="flex: 1;">
                    <small style="color: #666; font-size: 13px; display: block;">Transaction Volume</small>
                    <h4 style="font-size: 24px; font-weight: 700; color: #333; margin: 5px 0 0 0;">{{$settings->currency}}0.00</h4>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Additional Stats Cards -->
<div class="row">
    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">
        <div class="card shadow" style="background: white; border-radius: 15px; padding: 20px; border: none; transition: all 0.3s ease; cursor: pointer;">
            <div class="d-flex align-items-center">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #ffebee; display: flex; align-items: center; justify-content: center; color: #f44336; font-size: 22px; margin-right: 15px;">
                    <i class="fa fa-envelope"></i>
                </div>
                <div>
                    <h5 class="mb-1" style="font-size: 24px; font-weight: 700; color: #333; margin-bottom: 5px;">
                        <b>{{$user_plan->count()}}</b>
                    </h5>
                    <small style="color: #666; font-size: 13px;">Investment Plans</small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">
        <div class="card shadow" style="background: white; border-radius: 15px; padding: 20px; border: none; transition: all 0.3s ease; cursor: pointer;">
            <div class="d-flex align-items-center">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #e0f2f1; display: flex; align-items: center; justify-content: center; color: #009688; font-size: 22px; margin-right: 15px;">
                    <i class="fa fa-envelope-open"></i>
                </div>
                <div>
                    <h5 class="mb-1" style="font-size: 24px; font-weight: 700; color: #333; margin-bottom: 5px;">
                        <b>{{$user_plan_active->count()}}</b>
                    </h5>
                    <small style="color: #666; font-size: 13px;">Active Plans</small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">
        <div class="card shadow" style="background: white; border-radius: 15px; padding: 20px; border: none; transition: all 0.3s ease; cursor: pointer;">
            <div class="d-flex align-items-center">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #f3e5f5; display: flex; align-items: center; justify-content: center; color: #9c27b0; font-size: 22px; margin-right: 15px;">
                    <i class="fa fa-gift"></i>
                </div>
                <div>
                    <h5 class="mb-1" style="font-size: 24px; font-weight: 700; color: #333; margin-bottom: 5px;">
                        <b>{{$settings->currency}}{{ number_format(Auth::user()->bonus, 2, '.', ',')}}</b>
                    </h5>
                    <small style="color: #666; font-size: 13px;">Total Bonus</small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">
        <div class="card shadow" style="background: white; border-radius: 15px; padding: 20px; border: none; transition: all 0.3s ease; cursor: pointer;">
            <div class="d-flex align-items-center">
                <div style="width: 50px; height: 50px; border-radius: 12px; background: #fff3e0; display: flex; align-items: center; justify-content: center; color: #ff9800; font-size: 22px; margin-right: 15px;">
                    <i class="fa fa-retweet"></i>
                </div>
                <div>
                    <h5 class="mb-1" style="font-size: 24px; font-weight: 700; color: #333; margin-bottom: 5px;">
                        <b>{{$settings->currency}}{{ number_format(Auth::user()->ref_bonus, 2, '.', ',')}}</b>
                    </h5>
                    <small style="color: #666; font-size: 13px;">Referral Bonus</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Live Time and Balance Toggle -->
<script>
// Update time every second
function updateLiveTime() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const timeElement = document.getElementById('liveTime');
    if (timeElement) {
        timeElement.textContent = `${hours}:${minutes}:${seconds}`;
    }
}
setInterval(updateLiveTime, 1000);

// Toggle balance visibility
let balanceVisible = true;
const originalBalance = '{{$settings->currency}}{{ number_format(Auth::user()->account_bal, 2, '.', ',')}} USD';

function toggleMainBalance() {
    const balanceElement = document.getElementById('mainBalance');
    const iconElement = document.getElementById('toggleIcon');
    
    if (balanceVisible) {
        balanceElement.textContent = '••••••••';
        iconElement.className = 'fa fa-eye-slash';
    } else {
        balanceElement.textContent = originalBalance;
        iconElement.className = 'fa fa-eye';
    }
    balanceVisible = !balanceVisible;
}

// Hover effects
document.addEventListener('DOMContentLoaded', function() {
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
            this.style.boxShadow = '0 8px 30px rgba(0,0,0,0.12)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 15px rgba(0,0,0,0.05)';
        });
    });
});
</script>

<!-- CSS for Pulse Animation -->
<style>
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (max-width: 991px) {
    h1[style*="font-size: 48px"] {
        font-size: 36px !important;
    }
    div[style*="display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-end"] {
        justify-content: flex-start !important;
    }
}

@media (max-width: 576px) {
    h1[style*="font-size: 48px"] {
        font-size: 28px !important;
    }
    div[style*="min-width: 160px"] {
        min-width: 100% !important;
    }
}
</style>
                    
                    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            padding: 20px;
            min-height: 100vh;
        }
        
        .tesla-widget {
            max-width: 1200px;
            margin: 0 auto;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        .widget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(255,255,255,0.2);
        }
        
        .widget-title {
            font-size: 32px;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .tesla-logo {
            width: 45px;
            height: 45px;
            background: #e82127;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 28px;
        }
        
        .widget-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .refresh-btn {
            background: rgba(255,255,255,0.2);
            border: 2px solid rgba(255,255,255,0.3);
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .refresh-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }
        
        .live-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: #4CAF50;
            color: white;
            border-radius: 25px;
            font-size: 13px;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
        }
        
        .live-dot {
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.9); }
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
            margin-bottom: 25px;
        }
        
        .stat-card {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            padding: 22px;
            border-radius: 15px;
            color: white;
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            background: rgba(255,255,255,0.2);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }
        
        .stat-label {
            font-size: 13px;
            opacity: 0.95;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .change-positive {
            color: #4CAF50;
        }
        
        .change-negative {
            color: #ff5252;
        }
        
        .chart-container {
            position: relative;
            height: 400px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        }
        
        .widget-footer {
            text-align: center;
            margin-top: 20px;
            color: white;
            font-size: 13px;
            opacity: 0.9;
        }
        
        .arrow {
            font-size: 20px;
            display: inline-block;
        }
        
        @media (max-width: 768px) {
            .tesla-widget {
                padding: 20px;
            }
            
            .widget-header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .widget-title {
                font-size: 24px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 12px;
            }
            
            .stat-value {
                font-size: 22px;
            }
            
            .chart-container {
                height: 300px;
                padding: 15px;
            }
        }
    </style>

    <div class="tesla-widget">
        <div class="widget-header">
            <div class="widget-title">
                <div class="tesla-logo">T</div>
                <span>Tesla Stock (TSLA)</span>
            </div>
            <div class="widget-controls">
                <button class="refresh-btn" onclick="refreshData()">
                    <span style="font-size: 18px;">↻</span> Refresh
                </button>
                <div class="live-badge">
                    <div class="live-dot"></div>
                    LIVE
                </div>
            </div>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">Current Price</div>
                <div class="stat-value" id="currentPrice">Loading...</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Change</div>
                <div class="stat-value" id="change">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Day High</div>
                <div class="stat-value" id="high">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Day Low</div>
                <div class="stat-value" id="low">-</div>
            </div>
        </div>
        
        <div class="chart-container">
            <canvas id="stockChart"></canvas>
        </div>
        
        <div class="widget-footer">
            Last updated: <span id="lastUpdate">-</span> | Auto-refresh every 30 seconds
        </div>
    </div>

    <script>
        let chart;
        let priceData = [];
        let timeLabels = [];
        let lastPrice = 250 + Math.random() * 50;
        const MAX_POINTS = 20;
        
        // Configuration - Add your API key here
        const CONFIG = {
            API_KEY: null, // Set to your API key or leave null for demo
            API_PROVIDER: 'alphavantage', // 'alphavantage' or 'finnhub'
            REFRESH_INTERVAL: 30000 // 30 seconds
        };

        function initChart() {
            const ctx = document.getElementById('stockChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: timeLabels,
                    datasets: [{
                        label: 'TSLA Price (USD)',
                        data: priceData,
                        borderColor: '#e82127',
                        backgroundColor: 'rgba(232, 33, 39, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: '#e82127',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 7,
                        pointHoverBackgroundColor: '#e82127',
                        pointHoverBorderWidth: 3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 750,
                        easing: 'easeInOutQuart'
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                font: { size: 14, weight: 'bold' },
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(0,0,0,0.9)',
                            padding: 15,
                            titleFont: { size: 15, weight: 'bold' },
                            bodyFont: { size: 14 },
                            borderColor: '#e82127',
                            borderWidth: 2,
                            callbacks: {
                                label: (context) => `Price: $${context.parsed.y.toFixed(2)}`
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(0,0,0,0.08)',
                                drawBorder: false
                            },
                            ticks: {
                                callback: (value) => '$' + value.toFixed(2),
                                font: { size: 12, weight: '500' },
                                padding: 10
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                font: { size: 11 },
                                maxRotation: 45,
                                minRotation: 0
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        }

        async function fetchStockData() {
            try {
                let data;
                
                if (CONFIG.API_KEY) {
                    data = await fetchRealData();
                } else {
                    data = generateSimulatedData();
                }

                if (data && data.price) {
                    updateChart(parseFloat(data.price));
                    updateStats(data);
                }
            } catch (error) {
                console.error('Error:', error);
                const data = generateSimulatedData();
                updateChart(parseFloat(data.price));
                updateStats(data);
            }
        }

        async function fetchRealData() {
            if (CONFIG.API_PROVIDER === 'alphavantage') {
                const url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey=${CONFIG.API_KEY}`;
                const response = await fetch(url);
                const data = await response.json();

                if (data['Global Quote']) {
                    const quote = data['Global Quote'];
                    return {
                        price: parseFloat(quote['05. price']).toFixed(2),
                        change: parseFloat(quote['09. change']).toFixed(2),
                        changePercent: quote['10. change percent'].replace('%', ''),
                        high: parseFloat(quote['03. high']).toFixed(2),
                        low: parseFloat(quote['04. low']).toFixed(2)
                    };
                }
            } else if (CONFIG.API_PROVIDER === 'finnhub') {
                const url = `https://finnhub.io/api/v1/quote?symbol=TSLA&token=${CONFIG.API_KEY}`;
                const response = await fetch(url);
                const data = await response.json();

                if (data.c) {
                    const change = data.c - data.pc;
                    const changePercent = ((change / data.pc) * 100).toFixed(2);
                    
                    return {
                        price: data.c.toFixed(2),
                        change: change.toFixed(2),
                        changePercent: changePercent,
                        high: data.h.toFixed(2),
                        low: data.l.toFixed(2)
                    };
                }
            }
            return null;
        }

        function generateSimulatedData() {
            const volatility = 1.5;
            const price = lastPrice + (Math.random() - 0.5) * volatility;
            lastPrice = price;

            const change = (Math.random() - 0.5) * 5;
            const changePercent = (change / price * 100).toFixed(2);

            return {
                price: price.toFixed(2),
                change: change.toFixed(2),
                changePercent: changePercent,
                high: (price + Math.random() * 5).toFixed(2),
                low: (price - Math.random() * 3).toFixed(2)
            };
        }

        function updateChart(price) {
            const now = new Date();
            const timeString = now.toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            priceData.push(price);
            timeLabels.push(timeString);

            if (priceData.length > MAX_POINTS) {
                priceData.shift();
                timeLabels.shift();
            }

            chart.update();
        }

        function updateStats(data) {
            document.getElementById('currentPrice').textContent = '$' + data.price;

            const changeValue = parseFloat(data.change);
            const changeClass = changeValue >= 0 ? 'change-positive' : 'change-negative';
            const changeSign = changeValue >= 0 ? '+' : '';
            const arrow = changeValue >= 0 ? '▲' : '▼';

            document.getElementById('change').innerHTML = `
                <span class="${changeClass}">
                    ${changeSign}$${data.change} (${changeSign}${data.changePercent}%)
                </span>
                <span class="arrow ${changeClass}">${arrow}</span>
            `;

            document.getElementById('high').textContent = '$' + data.high;
            document.getElementById('low').textContent = '$' + data.low;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
        }

        function refreshData() {
            fetchStockData();
        }

        // Initialize
        initChart();
        fetchStockData();
        setInterval(fetchStockData, CONFIG.REFRESH_INTERVAL);
    </script>

                <!-- end of chart -->
            </div>
            


<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  
  .notification-container {
    position: fixed;
    top: 150px;
    right: 20px;
    z-index: 99;
    font-family: 'Inter', sans-serif;
  }
  
  .notification-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%);
    border-radius: 12px;
    padding: 16px;
    width: 280px;
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: white;
    position: relative;
    overflow: hidden;
    transform: translateX(320px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .notification-card.show {
    transform: translateX(0);
    opacity: 1;
  }
  
  .notification-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
    animation: shimmer 2s infinite;
  }
  
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  .notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  
  .notification-type {
    background: rgba(59, 130, 246, 0.3);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  
  .notification-icon {
    width: 20px;
    height: 20px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
  
  .investor-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  
  .investor-info {
    display: flex;
    flex-direction: column;
  }
  
  .investor-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffffff;
    line-height: 1.2;
  }
  
  .investor-location {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
  }
  
  .location-icon {
    width: 11px;
    height: 11px;
    margin-right: 5px;
    opacity: 0.8;
  }
  
  .pulse-dot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse 2s infinite;
    margin-left: 6px;
  }
  
  .earnings-section {
    text-align: right;
  }
  
  .earnings-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  
  .investor-earnings {
    font-size: 18px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
    line-height: 1;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }
  
  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 0 0 12px 12px;
    animation: progress 2s linear;
  }
  
  @keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
  }
</style>

<div class="notification-container">
  <div class="notification-card" id="notificationCard">
    <div class="notification-header">
      <span class="notification-type" id="notificationType">LIVE EARNINGS</span>
      <div class="notification-icon">💰</div>
    </div>
    
    <div class="investor-content">
      <div class="investor-info">
        <div class="investor-name" id="investorName">Loading...</div>
        <div class="investor-location" id="investorLocation">
          <svg class="location-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
          </svg>
          <span id="locationText">Loading...</span>
          <div class="pulse-dot"></div>
        </div>
      </div>
      
      <div class="earnings-section">
        <div class="earnings-label" id="earningsLabel">CURRENT EARNINGS</div>
        <div class="investor-earnings" id="investorEarnings">$0.00</div>
      </div>
    </div>
    
    <div class="progress-bar"></div>
  </div>
</div>

<script>
  const investors = [
    { name: "Sarah Chen", location: "Singapore", earnings: 12450.75 },
    { name: "Marcus Johnson", location: "New York, USA", earnings: 8930.20 },
    { name: "Elena Rodriguez", location: "Madrid, Spain", earnings: 15680.90 },
    { name: "David Kim", location: "Seoul, South Korea", earnings: 22100.50 },
    { name: "Amara Okafor", location: "Lagos, Nigeria", earnings: 9875.30 },
    { name: "Lucas Silva", location: "São Paulo, Brazil", earnings: 18750.85 },
    { name: "Priya Sharma", location: "Mumbai, India", earnings: 14320.40 },
    { name: "James Mitchell", location: "London, UK", earnings: 26890.60 },
    { name: "Fatima Al-Zahra", location: "Dubai, UAE", earnings: 31250.95 },
    { name: "Thomas Anderson", location: "Sydney, Australia", earnings: 19640.25 },
    { name: "Isabella Rossi", location: "Rome, Italy", earnings: 13580.70 },
    { name: "Ahmed Hassan", location: "Cairo, Egypt", earnings: 11290.15 },
    { name: "Anna Kowalski", location: "Warsaw, Poland", earnings: 16840.55 },
    { name: "Carlos Mendoza", location: "Mexico City, Mexico", earnings: 20150.80 },
    { name: "Yuki Tanaka", location: "Tokyo, Japan", earnings: 28930.45 }
  ];

  const topInvestors = [
    { name: "Victoria Sterling", location: "Monaco", amount: 2850000.00 },
    { name: "Alexander Petrov", location: "Moscow, Russia", amount: 2640000.00 },
    { name: "Raj Patel", location: "London, UK", amount: 2420000.00 },
    { name: "Sophie Laurent", location: "Paris, France", amount: 2180000.00 },
    { name: "Chen Wei", location: "Hong Kong", amount: 2050000.00 },
    { name: "Roberto Benedetti", location: "Milan, Italy", amount: 1950000.00 },
    { name: "Mikhail Volkov", location: "Geneva, Switzerland", amount: 1840000.00 },
    { name: "Aria Nakamura", location: "Tokyo, Japan", amount: 1720000.00 },
    { name: "Luis Fernandez", location: "Barcelona, Spain", amount: 1680000.00 },
    { name: "Emma Thompson", location: "Toronto, Canada", amount: 1590000.00 },
    { name: "Omar Al-Rashid", location: "Riyadh, Saudi Arabia", amount: 1520000.00 },
    { name: "Nina Johansson", location: "Stockholm, Sweden", amount: 1480000.00 },
    { name: "Gabriel Santos", location: "Rio de Janeiro, Brazil", amount: 1420000.00 },
    { name: "Zara Khan", location: "Karachi, Pakistan", amount: 1380000.00 },
    { name: "Magnus Andersen", location: "Oslo, Norway", amount: 1340000.00 }
  ];

  let currentIndex = 0;
  let isTopInvestor = false;
  const card = document.getElementById('notificationCard');

  function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 2
    }).format(amount);
  }

  function showNotification(data, isTop = false) {
    // Hide current notification
    card.classList.remove('show');
    
    setTimeout(() => {
      // Update content
      document.getElementById('notificationType').textContent = isTop ? 'TOP INVESTOR' : 'LIVE EARNINGS';
      document.getElementById('investorName').textContent = data.name;
      document.getElementById('locationText').textContent = data.location;
      document.getElementById('earningsLabel').textContent = isTop ? 'TOTAL INVESTMENT' : 'CURRENT EARNINGS';
      document.getElementById('investorEarnings').textContent = formatCurrency(isTop ? data.amount : data.earnings);
      
      // Update icon
      document.querySelector('.notification-icon').textContent = isTop ? '👑' : '💰';
      
      // Show notification
      card.classList.add('show');
    }, 250);
  }

  function nextNotification() {
    if (isTopInvestor) {
      // Show top investor
      if (currentIndex >= topInvestors.length) {
        currentIndex = 0;
      }
      showNotification(topInvestors[currentIndex], true);
      currentIndex++;
      isTopInvestor = false;
    } else {
      // Show regular investor
      if (currentIndex >= investors.length) {
        currentIndex = 0;
        isTopInvestor = true; // Switch to top investors after completing regular investors
      }
      if (!isTopInvestor) {
        showNotification(investors[currentIndex], false);
        currentIndex++;
      }
      
      // After every 3 regular investors, show a top investor
      if (currentIndex % 3 === 0 && !isTopInvestor) {
        isTopInvestor = true;
        currentIndex = Math.floor(Math.random() * topInvestors.length);
      }
    }
    
    // Hide the notification after 2 seconds
    setTimeout(() => {
      card.classList.remove('show');
    }, 2000);
  }

  // Start the notification system
  setTimeout(() => {
    nextNotification();
    setInterval(nextNotification, 7000); // Show new notification every 7 seconds (2s display + 5s wait)
  }, 1000);
</script>
 


 
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

 

        .widget-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000000;
        }

           .flip-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: flip 3s infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: fixed;
    top: 400px;
    right: 1px;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .flip-icon {
        width: 45px;
        height: 45px;
        bottom: 20px;
        left: 20px;
        top: auto;
        border-radius: 8px; /* Full rounded corners for better mobile UX */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .flip-icon {
        width: 40px;
        height: 40px;
        bottom: 15px;
        leftt: 15px;
    }
}

        .flip-icon:hover {
            animation-play-state: paused;
            transform: scale(1.1);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

        .flip-icon svg {
            width: 35px;
            height: 35px;
            fill: white;
        }

        @keyframes flip {
            0%, 100% {
                transform: rotateY(0deg);
            }
            50% {
                transform: rotateY(360deg);
            }
        }

        .floating-panel {
            position: fixed;
            bottom: 110px;
            right: 30px;
            width: 450px;
            max-width: calc(100vw - 60px);
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.95);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            overflow: hidden;
        }

        .floating-panel.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .panel-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-header h3 {
            font-size: 20px;
            font-weight: 600;
        }

        .close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .panel-content {
            max-height: 70vh;
            overflow-y: auto;
        }

        /* Image Slider Section */
        .slider-section {
            padding: 25px;
            border-bottom: 2px solid #f0f0f0;
        }

        .slider-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .image-slider {
            position: relative;
            width: 100%;
            height: 250px;
            border-radius: 15px;
            overflow: hidden;
            background: #f8f9fa;
        }

        .slider-track {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            font-size: 14px;
        }

        .slider-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 10px;
        }

        .slider-btn {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .slider-btn:hover {
            background: white;
            transform: scale(1.1);
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: all 0.3s;
        }

        .dot.active {
            background: #667eea;
            width: 24px;
            border-radius: 4px;
        }

        /* Testimonials Section */
        .testimonials-section {
            padding: 25px;
        }

        .testimonials-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .testimonial-slider {
            position: relative;
            min-height: 200px;
        }

        .testimonial {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .testimonial.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .testimonial-content {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 15px;
        }

        .testimonial-text {
            font-size: 14px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 15px;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .author-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .author-info h4 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }

        .author-info p {
            font-size: 12px;
            color: #888;
        }

        .testimonial-video {
            width: 100%;
            height: 200px;
            border-radius: 12px;
            margin-top: 15px;
            background: #000;
        }

        .testimonial-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .testimonial-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .testimonial-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .testimonial-counter {
            font-size: 13px;
            color: #888;
            font-weight: 600;
        }

        /* Scrollbar */
        .panel-content::-webkit-scrollbar {
            width: 6px;
        }

        .panel-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .panel-content::-webkit-scrollbar-thumb {
            background: #667eea;
            border-radius: 3px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .widget-container {
                bottom: 20px;
                right: 20px;
            }

            .floating-panel {
                width: calc(100vw - 40px);
                bottom: 90px;
                right: 20px;
            }

            .flip-icon {
                width: 60px;
                height: 60px;
            }

            .image-slider {
                height: 200px;
            }

            .testimonial-video {
                height: 180px;
            }
        }
    </style>

    <div class="widget-container">
        <div class="flip-icon" id="flipIcon">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V13H5V7.89l7-3.11v8.2z"/>
            </svg>
        </div>

        <div class="floating-panel" id="floatingPanel">
            <div class="panel-header">
                <h3>CEO Message & Reviews</h3>
                <button class="close-btn" id="closeBtn">×</button>
            </div>

            <div class="panel-content">
                <!-- Image Slider Section -->
                <div class="slider-section">
                    <div class="slider-title">Elon Musk</div>
                    <div class="image-slider">
                        <div class="slider-track" id="sliderTrack">
                            <!-- Slides will be generated by JS -->
                        </div>
                        <div class="slider-controls">
                            <button class="slider-btn" id="prevSlide">‹</button>
                            <button class="slider-btn" id="nextSlide">›</button>
                        </div>
                    </div>
                    <div class="slider-dots" id="sliderDots"></div>
                </div>

                <!-- Testimonials Section -->
                <div class="testimonials-section">
                    <div class="testimonials-title">Customer Testimonials</div>
                    <div class="testimonial-slider" id="testimonialSlider">
                        <!-- Testimonials will be generated by JS -->
                    </div>
                    <div class="testimonial-nav">
                        <button class="testimonial-btn" id="prevTestimonial">← Previous</button>
                        <div class="testimonial-counter">
                            <span id="currentTestimonial">1</span> / <span id="totalTestimonials">20</span>
                        </div>
                        <button class="testimonial-btn" id="nextTestimonial">Next →</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Image Slider Data
        const images = [
            { url: 'https://tstockcyberspace.com/en/userimages/elon.png', caption: 'Invest in what you believe.' },
            { url: 'https://tstockcyberspace.com/en/userimages/elon1.jpg', caption: 'Don’t panic when markets drop.' },
            { url: 'https://tstockcyberspace.com/en/userimages/elon5.jpg', caption: 'Risk it when it matters.' },
            { url: 'https://tstockcyberspace.com/en/userimages/elon3.jpg', caption: 'Invest your own money first.' },
            { url: 'https://tstockcyberspace.com/en/userimages/elon4.jpg', caption: 'Conviction drives smart investing.' }
        ];

        // Testimonials Data (20 testimonials with some having videos)
        const testimonials = [
            
            
             {
                text: "Outstanding experience! Tesla Stocks delivers exactly what it promises; amazing profits made and great support!",
                author: "John Thompson",
                role: "Investor",
                avatar: "https://tstockcyberspace.com/en/userimages/Untitled-1.jpg",
                video: "https://tstockcyberspace.com/en/userimages/reviewvideo.mp4"
            },
            {
                text: "Tesla Stocks completely changed my investment journey! The returns are fast and transparent; truly impressive!",
                author: "Tom keith",
                role: "Investor",
                avatar: "https://tstockcyberspace.com/en/userimages/Untitled-3.jpg",
                video: "https://tstockcyberspace.com/en/userimages/reviewvideo1.mp4"
            },
            {
                text: "The attention to detail is remarkable. Every transaction is smooth, and I always get my payouts on time!",
                author: "Maria Garcia",
                role: "Investor",
                avatar: "https://tstockcyberspace.com/en/userimages/Untitled-2.jpg",
                video: "https://tstockcyberspace.com/en/userimages/reviewvideo2.mp4"
            },
            {
                text: "I’ve tried many platforms, but Tesla Stocks stands out for reliability and instant withdrawals. Highly recommended!",
                author: "David Thompson",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=4"
            },
            {
                text: "Professional, secure, and rewarding! My earnings have grown tremendously than I ever expected. Excellent platform!",
                author: "Jessica Williams",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=5",
                
            },
            {
                text: "Investing here was the smartest decision I made this year. Everything runs smoothly with zero stress!",
                author: "Robert Anderson",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=6"
            },
            {
                text: "Trustworthy and efficient! My withdrawals are always processed instantly, and customer support is top-notch!",
                author: "Eric Martinez",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=7"
            },
            {
                text: "Tesla Stocks has proven to be stable and profitable over time. I feel confident investing more!",
                author: "Christopher Eugene",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=8"
            },
            {
                text: "This platform makes investing effortless. Consistent returns, secure system, and amazing performance overall!",
                author: "Jennifer Klaus",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=9",
                
            },
            {
                text: "I’m genuinely impressed! Tesla Stocks delivers daily profits exactly as promised; totally dependable platform!",
                author: "Ehuang Lee",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=10"
            },
            {
                text: "Tesla Stocks gives me peace of mind. My funds are safe, and withdrawals are always instant; no delays!",
                author: "Rolf Horst",
                role: "Investor",
                avatar: "https://i.pravatar.cc/150?img=11"
            },
           
        ];

        // State
        let currentSlide = 0;
        let currentTestimonial = 0;
        let isPanelOpen = false;

        // Elements
        const flipIcon = document.getElementById('flipIcon');
        const floatingPanel = document.getElementById('floatingPanel');
        const closeBtn = document.getElementById('closeBtn');
        const sliderTrack = document.getElementById('sliderTrack');
        const sliderDots = document.getElementById('sliderDots');
        const testimonialSlider = document.getElementById('testimonialSlider');

        // Initialize Image Slider
        function initImageSlider() {
            images.forEach((img, index) => {
                const slide = document.createElement('div');
                slide.className = 'slide';
                slide.innerHTML = `
                    <img src="${img.url}" alt="${img.caption}" loading="lazy">
                    <div class="slide-caption">${img.caption}</div>
                `;
                sliderTrack.appendChild(slide);

                const dot = document.createElement('div');
                dot.className = `dot ${index === 0 ? 'active' : ''}`;
                dot.onclick = () => goToSlide(index);
                sliderDots.appendChild(dot);
            });
        }

        function goToSlide(index) {
            currentSlide = index;
            sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            document.querySelectorAll('.dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === currentSlide);
            });
        }

        document.getElementById('prevSlide').onclick = () => {
            currentSlide = (currentSlide - 1 + images.length) % images.length;
            goToSlide(currentSlide);
        };

        document.getElementById('nextSlide').onclick = () => {
            currentSlide = (currentSlide + 1) % images.length;
            goToSlide(currentSlide);
        };

        // Auto-play image slider
        setInterval(() => {
            if (isPanelOpen) {
                currentSlide = (currentSlide + 1) % images.length;
                goToSlide(currentSlide);
            }
        }, 5000);

// Initialize Testimonials
function initTestimonials() {
    testimonials.forEach((testimonial, index) => {
        const testimonialEl = document.createElement('div');
        testimonialEl.className = `testimonial ${index === 0 ? 'active' : ''}`;
        
        let videoHTML = '';
        if (testimonial.video) {
            if (testimonial.video.endsWith('.mp4')) {
                // Local video file
                videoHTML = `
                    <video class="testimonial-video" controls preload="metadata">
                        <source src="${testimonial.video}" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                `;
            } else {
                // External video (e.g., YouTube)
                videoHTML = `
                    <iframe class="testimonial-video" 
                            src="${testimonial.video}" 
                            frameborder="0" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                            allowfullscreen>
                    </iframe>
                `;
            }
        }
        
        testimonialEl.innerHTML = `
            <div class="testimonial-content">
                <div class="testimonial-text">"${testimonial.text}"</div>
                <div class="testimonial-author">
                    <img src="${testimonial.avatar}" alt="${testimonial.author}" class="author-avatar">
                    <div class="author-info">
                        <h4>${testimonial.author}</h4>
                        <p>${testimonial.role}</p>
                    </div>
                </div>
            </div>
            ${videoHTML}
        `;
        
        testimonialSlider.appendChild(testimonialEl);
    });

    document.getElementById('totalTestimonials').textContent = testimonials.length;
}


        function showTestimonial(index) {
            document.querySelectorAll('.testimonial').forEach((t, i) => {
                t.classList.toggle('active', i === index);
            });
            document.getElementById('currentTestimonial').textContent = index + 1;
        }

        document.getElementById('prevTestimonial').onclick = () => {
            currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
            showTestimonial(currentTestimonial);
        };

        document.getElementById('nextTestimonial').onclick = () => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        };

        // Toggle Panel
        flipIcon.addEventListener('mouseenter', () => {
            floatingPanel.classList.add('active');
            isPanelOpen = true;
        });

        closeBtn.addEventListener('click', () => {
            floatingPanel.classList.remove('active');
            isPanelOpen = false;
        });

        // Optional: Close when clicking outside
        document.addEventListener('click', (e) => {
            if (!floatingPanel.contains(e.target) && !flipIcon.contains(e.target)) {
                floatingPanel.classList.remove('active');
                isPanelOpen = false;
            }
        });

        // Initialize
        initImageSlider();
        initTestimonials();
    </script>

            
    @endsection
   
    