@extends('front.layouts.app-auth')
@section('content')
<div class="welcome">
    <div class="welcome-left">
        <h2>Welcome back, Ridgeway Tigers <img src="assets/images/dashboard/user-icon.png" alt=""></h2>
        <p>Here's your current team performance and fundraising status.</p>
    </div>
    <div class="welcome-actions">
        <a href="#" class="btn-dark-blue"><i data-lucide="plus"></i> Start New Campaign</a>
        <a href="#" class="btn-orange"><i data-lucide="user-round-plus"></i> Add Athlete</a>
    </div>
</div>

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

    <div class="stat-card green">
        <div class="stat-icon"><i data-lucide="dollar-sign"></i></div>
        <div class="stat-value">$7,850</div>
        <div class="stat-label">Total Funds Raised</div>
    </div>

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

    <div class="stat-card orange">
        <div class="stat-icon"><i data-lucide="users"></i></div>
        <div class="stat-value">18</div>
        <div class="stat-label">Team Members</div>
    </div>
    <div class="stat-card purple">
        <div class="stat-icon"><i data-lucide="wallet"></i></div>
        <div class="stat-value">$2,450</div>
        <div class="stat-label">Wallet Balance</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="campaign-item">
                    <div class="campaign-title">🏈 Regional Finals Travel Fund</div>

                    <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">
                    <div class="campaign-title">🏋️ Equipment Upgrade Drive </div>

                    <div class="progress-bar">
                        <div class="progress-fill-orange"></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="roster-box">

                <div class="roster-header">
                    <h2>Team Roster Snapshot</h2>
                    <button class="view-btn">View Full Roster</button>
                </div>

                <!-- Player 1 -->
                <div class="player">
                    <div class="player-left">
                        <img class="player-img" src="{{ asset('front/assets/images/featured-campaigns/featured-campaigns-1.jpg') }}">
                        <div>
                            <div class="player-name">Jordan Wells</div>
                            <div class="player-role">Captain / Point Guard</div>
                        </div>
                    </div>
                    <div class="player-right">
                        <div class="rating">
                            <span class="star">★</span> 84
                        </div>
                        <button class="profile-btn">View Profile</button>
                    </div>
                </div>

                <!-- Player 2 -->
                <div class="player">
                    <div class="player-left">
                        <img class="player-img" src="{{ asset('front/assets/images/featured-campaigns/featured-campaigns-small1.jpg') }}">
                        <div>
                            <div class="player-name">Sam Lopez</div>
                            <div class="player-role">Forward</div>
                        </div>
                    </div>
                    <div class="player-right">
                        <div class="rating">
                            <span class="star">★</span> 79
                        </div>
                        <button class="profile-btn">View Profile</button>
                    </div>
                </div>

                <!-- Player 3 -->
                <div class="player">
                    <div class="player-left">
                        <img class="player-img" src="{{ asset('front/assets/images/featured-campaigns/featured-campaigns-1.jpg') }}">
                        <div>
                            <div class="player-name">Darius Cole</div>
                            <div class="player-role">Bench / Rookie</div>
                        </div>
                    </div>
                    <div class="player-right">
                        <div class="rating">
                            <span class="star">★</span> 65
                        </div>
                        <button class="profile-btn">View Profile</button>
                    </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>$250 contribution to Regional Finals Travel Fund</h4>
                            <div class="activity-time">2 hours ago</div>
                        </div>
                    </div>

                    <!-- Item 2 -->
                    <div class="activity-item">
                        <div class="icon blue"><i data-lucide="handshake"></i></div>
                        <div class="activity-text">
                            <h4>New sponsor FitFuel joined your partnership program</h4>
                            <div class="activity-time">1 day ago</div>
                        </div>
                    </div>

                    <!-- Item 3 -->
                    <div class="activity-item">
                        <div class="icon orange"><i data-lucide="users"></i></div>
                        <div class="activity-text">
                            <h4>Athlete Jordan Wells updated his profile video</h4>
                            <div class="activity-time">3 days ago</div>
                        </div>
                    </div>

                </div>
            </div>

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

                <div class="stats-box">
                    <div class="stat">
                        <div class="stat-value">15</div>
                        <div class="stat-label">Wins</div>
                    </div>

                    <div class="stat">
                        <div class="stat-value">22</div>
                        <div class="stat-label">Matches</div>
                    </div>

                    <div class="stat">
                        <div class="stat-value">47</div>
                        <div class="stat-label">Goals</div>
                    </div>

                    <div class="stat">
                        <div class="stat-value rank">#3</div>
                        <div class="stat-label">League Rank</div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>
@endsection