@extends('front.layouts.app-auth')
@section('content')

<!-- Welcome Section -->
<div class="welcome">
    <div class="welcome-left">
        <h2>Welcome back, {{ $user->company_name ?? $user->full_name }} 👋</h2>
        <p>Here's your current sponsorship performance and funding summary.</p>
    </div>
    <div class="welcome-actions">
        <a href="{{ route('profile.sponsorships') }}" class="btn-blue">
            <i data-lucide="plus" class="btn-icon"></i>
            New Sponsorship
        </a>
        <a href="{{ route('front.athletes.index') }}" class="btn-orange">
            <i data-lucide="search" class="btn-icon"></i>
            Discover Athletes
        </a>
    </div>
</div>

<!-- Stat Cards -->
<div class="stats">
    <div class="stat-card green">
        <div class="stat-top-row">
            <div class="stat-value">{!! \App\Helpers\Helper::price($totalSponsored ?? 0) !!}</div>
            <div class="stat-icon"><i data-lucide="dollar-sign"></i></div>
        </div>
        <div class="stat-label">Total Sponsored</div>
        <div class="stat-subtext stat-subtext-green">All time contributions</div>
    </div>

    <div class="stat-card purple">
        <div class="stat-top-row">
            <div class="stat-value">{{ $activeSponsorships ?? 0 }} Active</div>
            <div class="stat-icon"><i data-lucide="gem"></i></div>
        </div>
        <div class="stat-label">Active Sponsorships</div>
        <div class="stat-subtext stat-subtext-purple">Currently supporting</div>
    </div>

    <div class="stat-card orange">
        <div class="stat-top-row">
            <div class="stat-value">{{ $campaignImpact ?? 0 }}%</div>
            <div class="stat-icon"><i data-lucide="bar-chart-3"></i></div>
        </div>
        <div class="stat-label">Campaign Impact</div>
        <div class="stat-subtext stat-subtext-orange">(Avg Goal Achievement)</div>
    </div>

    <div class="stat-card purple">
        <div class="stat-top-row">
            <div class="stat-value">{!! \App\Helpers\Helper::price($walletBalance ?? 0) !!}</div>
            <div class="stat-icon"><i data-lucide="wallet"></i></div>
        </div>
        <div class="stat-label">Wallet Balance</div>
        <div class="stat-subtext stat-subtext-purple">Available funds</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <!-- Left Column -->
        <div class="col-sm-7 ps-0 mt-4">
            <!-- Active Sponsorships Section -->
            <div class="card sponser">
                <div class="card-header sponser-header">
                    <div class="card-title">Active Sponsorships</div>
                    <div class="card-link">View All</div>
                </div>

                @forelse($activeSponsorshipsList ?? [] as $sponsorship)
                    @php
                        $athlete = $sponsorship->athlete ?? null;
                        $avatar = asset('front/assets/images/placeholder-avatar.png');
                        if ($athlete && isset($athlete->avatar)) {
                            $avatarData = is_array($athlete->avatar) ? $athlete->avatar : [];
                            $avatar = $avatarData['thumb'] ?? $avatarData['original'] ?? $avatar;
                        }
                    @endphp
                    <div class="sponsor-item">
                        <div class="sponsor-left">
                            <div class="sponsor-icon blue">
                                <img src="{{ $avatar }}" alt="{{ $athlete->full_name ?? 'Athlete' }}">
                            </div>
                            <div class="sponsor-info">
                                <h4>{{ $athlete->full_name ?? 'Athlete Name' }}</h4>
                                <p>{{ $sponsorship->sponsorship_type_name ?? 'Individual Athlete' }}</p>
                            </div>
                        </div>
                        <div class="sponsor-right">
                            <div class="sponsor-amount">{!! \App\Helpers\Helper::price($sponsorship->amount ?? 0) !!}{{ $sponsorship->frequency ? '/' . $sponsorship->frequency : ' one-time' }}</div>
                            <div class="status">Active</div>
                        </div>
                    </div>
                @empty
                    <div class="sponsor-item">
                        <div class="sponsor-left">
                            <div class="sponsor-info">
                                <p style="color: #6b7280; padding: 1rem;">No active sponsorships yet.</p>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Your Funded Campaigns Section -->
            <div class="campaign-box">
                <div class="campaign-header">
                    <h2>Your Funded Campaigns</h2>
                    <div class="view-all">View All</div>
                </div>
                
                @forelse($fundedCampaigns ?? [] as $campaign)
                    @php
                        $progress = $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
                        $progress = min(100, max(0, $progress));
                        $athlete = $campaign->createdBy ?? null;
                    @endphp
                    <div class="campaign-item account-progress-bar">
                        <div class="campaign-item-header">
                            <h4>{{ $campaign->title }}</h4>
                            <p>{{ $athlete->full_name ?? 'Athlete' }} • {!! \App\Helpers\Helper::price($campaign->fund_contributed ?? $campaign->fund_raised) !!}</p>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: {{ $progress }}%;"></div>
                        </div>
                        <div class="campaign-footer">
                            <div>{!! \App\Helpers\Helper::price($campaign->fund_raised) !!} of {!! \App\Helpers\Helper::price($campaign->fund_target) !!} raised</div>
                            <div class="percentage">{{ number_format($progress, 0) }}%</div>
                        </div>
                    </div>
                @empty
                    <div class="campaign-item" style="padding: 2rem; text-align: center; color: #6b7280;">
                        <p>No funded campaigns yet. Start supporting athletes today!</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-sm-5 pe-0">
            <!-- Sponsorship Wallet Section -->
            <div class="wallet">
                <h2>Sponsorship Wallet</h2>
                <div class="balance-box">
                    <div class="balance-box-txt">
                        <span>Current Balance</span>
                        <span class="balance-amount">{!! \App\Helpers\Helper::price($walletBalance ?? 0) !!}</span>
                    </div>
                    <div class="balance-box-txt">
                        <span>Total Sponsored</span>
                        <span class="balance-amount">{!! \App\Helpers\Helper::price($totalSponsored ?? 0) !!}</span>
                    </div>
                    <div class="balance-box-txt">
                        <span>Pending</span>
                        <span class="balance-amount balane-orangetxt">{!! \App\Helpers\Helper::price($pendingAmount ?? 0) !!}</span>
                    </div>
                </div>
                <a href="#" class="btn-dark-blue">Add Funds</a>
                <a href="#" class="btn-dark-white">View Transactions</a>
            </div>

            <!-- Recent Activity Section -->
            <div class="activity-card">
                <div class="activity-title">Recent Activity</div>
                <div class="activity-list">
                    @forelse($recentActivities ?? [] as $activity)
                        <div class="activity-item">
                            <div class="icon {{ $activity['color'] ?? 'green' }}">
                                <i data-lucide="{{ $activity['icon'] ?? 'dollar-sign' }}"></i>
                            </div>
                            <div class="activity-text">
                                <h4>{{ $activity['text'] ?? 'Activity' }}</h4>
                                <div class="activity-time">{{ $activity['time'] ?? 'Recently' }}</div>
                            </div>
                        </div>
                    @empty
                        <!-- Static fallback activities -->
                        <div class="activity-item">
                            <div class="icon green">
                                <i data-lucide="dollar-sign"></i>
                            </div>
                            <div class="activity-text">
                                <h4>Funded $1,000 to Ava Patel's campaign</h4>
                                <div class="activity-time">2 hours ago</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="icon purple">
                                <i data-lucide="refresh-cw"></i>
                            </div>
                            <div class="activity-text">
                                <h4>Renewed sponsorship with Ridgeway Tigers</h4>
                                <div class="activity-time">1 day ago</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="icon orange">
                                <i data-lucide="trophy"></i>
                            </div>
                            <div class="activity-text">
                                <h4>Campaign 'Road to Nationals' reached goal</h4>
                                <div class="activity-time">3 days ago</div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@push('page_script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    });
    </script>
@endpush
@endsection