@extends('front.layouts.app-auth')
@section('content')
<div class="welcome">
    <div class="welcome-left">
        <h2>Welcome back, {{ $user->first_name }} 👋</h2>
        <p>Here's your latest activity and performance summary.</p>
    </div>
    <div class="welcome-actions">

        <a href="#" class="btn-orange">Edit Profile</a>
    </div>
</div>

<!-- Stat Cards -->
<div class="stats">

    <div class="stat-card green">
        <div class="stat-icon"><i data-lucide="chart-no-axes-column-increasing"></i></div>
        <div class="stat-value">2</div>
        <div class="stat-label">Active Campaigns</div>
    </div>

    <div class="stat-card blue">
        <div class="stat-icon"><i data-lucide="handshake"></i></div>
        <div class="stat-value">3</div>
        <div class="stat-label">Active Sponsors</div>
    </div>

    <div class="stat-card orange">
        <div class="stat-icon"><i data-lucide="users"></i></div>
        <div class="stat-value">$1,350</div>
        <div class="stat-label">Wallet Balance</div>
    </div>
    <div class="stat-card purple">
        <div class="stat-icon"><i data-lucide="star"></i></div>
        <div class="stat-value">84 / 100</div>
        <div class="stat-label">Performance Rating</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <!-- Fundraising Campaigns -->
        <div class="col-sm-7 ps-0">

            <div class="campaign-box">
                <div class="campaign-header">
                    <h2>Fundraising Campaigns</h2>
                    <div class="view-all">View All Campaigns</div>
                </div>
                <div class="textarea-camp-area">


                    <div class="textarea-camp">
                        <span class="textarea-camp-head">$5,600</span>
                        <span class="textarea-camp-txt">Total Raised</span>

                    </div>

                    <div class="textarea-camp">
                        <span class="textarea-camp-head">$8,000</span>
                        <span class="textarea-camp-txt">Total Goal</span>

                    </div>

                    <div class="textarea-camp">
                        <span class="textarea-camp-head green">70%</span>
                        <span class="textarea-camp-txt">Avg Completion</span>

                    </div>
                </div>
                <div class="campaign-item  account-progress-bar">


                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>

                    <div class="campaign-footer">
                        <div>$4,000 of $5,000 raised</div>
                        <div class="percentage">80%</div>
                    </div>
                </div>
                <div class="campaign-item  account-progress-bar">


                    <div class="progress-bar">
                        <div class="progress-fill-orange" style="width: 65%;"></div>
                    </div>

                    <div class="campaign-footer">
                        <div>$1,950 of $3,000 raised</div>
                        <div class="percentage-orange">65%</div>
                    </div>
                </div>
            </div>
            <div class="card sponser">
                <div class="card-header sponser-header">
                    <div class="card-title">Active Sponsorships</div>
                    <div class="card-link">Manage Sponsorships</div>
                </div>

                <div class="sponsor-item">
                    <div class="sponsor-left">
                        <div class="sponsor-icon blue"><img src="{{ asset('front/assets/images/sp-1.png') }}"></div>
                        <div class="sponsor-info">
                            <h4>SportsPro Ltd</h4>
                            <p>Equipment Sponsor</p>
                        </div>
                    </div>
                    <div class="sponsor-right">
                        <div class="sponsor-amount">$500/month</div>
                        <div class="status">Active</div>
                    </div>
                </div>

                <div class="sponsor-item">
                    <div class="sponsor-left">
                        <div class="sponsor-icon orange"><img src="{{ asset('front/assets/images/sp-2.png') }}"></div>
                        <div class="sponsor-info">
                            <h4>FitFuel</h4>
                            <p>Product Sponsor</p>
                        </div>
                    </div>
                    <div class="sponsor-right">
                        <div class="sponsor-amount">Products</div>
                        <div class="status">Active</div>
                    </div>
                </div>
            </div>


        </div>
        <div class="col-sm-5 pe-0">

            <!-- Active Sponsorships -->
            <div class="card-sponser">
                <div class="header">
                    <h2>Active Sponsorships</h2>
                    <button class="manage">Manage All</button>
                </div>

                <div class="sponsor-list">
                    <div class="sponsor-item">
                        <div class="sponsor-left">
                            <h3>SportsPro Ltd.</h3>
                            <p>Training Kit Sponsor</p>
                        </div>
                        <div class="amount orange">$1,000/month</div>
                    </div>

                    <div class="sponsor-item">
                        <div class="sponsor-left">
                            <h3>FitFuel Nutrition</h3>
                            <p>Product Support</p>
                        </div>
                        <div class="amount blue">In-Kind</div>
                    </div>

                    <div class="sponsor-item">
                        <div class="sponsor-left">
                            <h3>Nike Youth Grant</h3>
                            <p>League Sponsorship</p>
                        </div>
                        <div class="amount green">$5,000</div>
                    </div>
                </div>
            </div>

            <!-- Wallet Overview -->
            <div class="wallet">
                <h2>Wallet Overview</h2>
                <div class="balance-box">
                    <div class="balance-box-txt">
                        <span>Current Balance</span>
                        <span class="balance-amount">$2,450</span>
                    </div>
                    <div class="balance-box-txt">
                        <span>Pending Transactions</span>
                        <span class="balance-amount balane-orangetxt">$400</span>
                    </div>
                    <div class="balance-box-txt"><span>Total Withdrawn</span>
                        <span class="balance-amount">$5,600</span>
                    </div>
                </div>
                <a href="#" class="btn-dark-blue"> Withdraw Funds</a>
                <a href="#" class="btn-dark-white">View History</a>

            </div>
            <div class="activity-card">
                <div class="activity-title">Recent Activity</div>

                <div class="activity-list">

                    <!-- Item 1 -->
                    <div class="activity-item">
                        <div class="icon green"><i data-lucide="dollar-sign"></i></div>
                        <div class="activity-text">
                            <h4>Received $100 from sponsor SportsPro Ltd.</h4>
                            <div class="activity-time">2 hours ago</div>
                        </div>
                    </div>

                    <!-- Item 2 -->
                    <div class="activity-item">
                        <div class="icon blue"><i data-lucide="heart"></i></div>
                        <div class="activity-text">
                            <h4>New fan contribution to campaign Road to Nationals.</h4>
                            <div class="activity-time">1 day ago</div>
                        </div>
                    </div>

                    <!-- Item 3 -->
                    <div class="activity-item">
                        <div class="icon orange"><i data-lucide="wallet"></i></div>
                        <div class="activity-text">
                            <h4>Wallet withdrawal processed: $250.</h4>
                            <div class="activity-time">3 days ago</div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="team-card per-snap">
                <div class="team-header">
                    <h2>Performance Snapshot</h2>
                    <div class="full-report">Full Report</div>
                </div>

                <div class="stats-box">
                    <div class="stat">
                        <div class="stat-value">12</div>
                        <div class="stat-label">Matches Played</div>
                    </div>

                    <div class="stat">
                        <div class="stat-value green-txt">8</div>
                        <div class="stat-label">Wins</div>
                    </div>

                    <div class="stat">
                        <div class="stat-value blue-txt">17.4</div>
                        <div class="stat-label">Avg PPG</div>
                    </div>


                </div>
                <a href="#" class="btn-dark-blue">  🏆 Regional Finalist</a>
            </div>



        </div>

    </div>
</div>
@endsection