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

<!-- Header Section -->
<div class="campaigns-public-header">
    <h1 class="campaigns-public-title">Support Athletes. Fuel Their Dreams.</h1>
    <p class="campaigns-public-subtitle">Browse active campaigns and help athletes reach their goals.</p>
</div>

<!-- Search and Filter Section -->
<div class="campaigns-search-filter">
    <div class="search-wrapper">
        <input type="text" id="campaignSearch" class="search-input" placeholder="e.g. Campaigns or ...">
        <i data-lucide="search" class="search-icon"></i>
    </div>
    
    <div class="filters-row">
        <div class="filter-group">
            <label for="filterSport">Filter by Sport</label>
            <select id="filterSport" class="filter-select">
                <option value="">-- Select --</option>
                @if(isset($sports))
                    @foreach($sports as $sport)
                        <option value="{{ $sport->id }}">{{ $sport->title }}</option>
                    @endforeach
                @endif
            </select>
            <i data-lucide="chevron-down" class="filter-icon"></i>
        </div>
        
        <div class="filter-group">
            <label for="filterLocation">Location</label>
            <select id="filterLocation" class="filter-select">
                <option value="">-- Select --</option>
            </select>
            <i data-lucide="chevron-down" class="filter-icon"></i>
        </div>
        
        <div class="filter-group">
            <label for="filterGoalRange">Goal Range</label>
            <select id="filterGoalRange" class="filter-select">
                <option value="">-- Select --</option>
                <option value="0-1000">$0 - $1,000</option>
                <option value="1000-5000">$1,000 - $5,000</option>
                <option value="5000-10000">$5,000 - $10,000</option>
                <option value="10000+">$10,000+</option>
            </select>
            <i data-lucide="chevron-down" class="filter-icon"></i>
        </div>
        
        <div class="filter-group">
            <label for="filterStatus">Status</label>
            <select id="filterStatus" class="filter-select">
                <option value="">-- Select --</option>
                <option value="1">Active</option>
                <option value="0">Draft</option>
                <option value="2">Completed</option>
            </select>
            <i data-lucide="chevron-down" class="filter-icon"></i>
        </div>
    </div>
</div>

<!-- Active Campaigns Section -->
<div class="campaigns-listing-section">
    <div class="campaigns-listing-header">
        <h2 class="campaigns-listing-title">Active Campaigns</h2>
        <div class="sort-wrapper">
            <label for="sortBy">Sort by:</label>
            <select id="sortBy" class="sort-select">
                <option value="recently_added">Recently Added</option>
                <option value="ending_soon">Ending Soon</option>
                <option value="most_funded">Most Funded</option>
                <option value="least_funded">Least Funded</option>
            </select>
            <i data-lucide="chevron-down" class="sort-icon"></i>
        </div>
    </div>
    
    <!-- Campaigns Grid -->
    <div class="grid">
        @forelse($campaigns ?? [] as $campaign)
            @php
                $daysLeft = round($campaign->campaign_finished_at ? now()->diffInDays(\Carbon\Carbon::parse($campaign->campaign_finished_at), false) : 0);
                $progress = $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
                $progress = min(100, max(0, $progress));
                $user = $campaign->createdBy;
                
                // Handle avatar - get from accessor (returns array with 'original', 'thumb', etc.)
                $avatarData = $user ? ($user->avatar ?? []) : [];
                $avatar = is_array($avatarData) ? ($avatarData['thumb'] ?? $avatarData['original'] ?? asset('front/assets/images/placeholder-avatar.png')) : (is_string($avatarData) && !empty($avatarData) ? $avatarData : asset('front/assets/images/placeholder-avatar.png'));
                
                // Handle campaign image
                $campaignImage = asset('front/assets/images/placeholder-campaign.jpg');
                if (is_array($campaign->campaign_image ?? [])) {
                    $campaignImage = $campaign->campaign_image['thumb'] ?? $campaign->campaign_image['original'] ?? asset('front/assets/images/placeholder-campaign.jpg');
                } elseif (is_string($campaign->campaign_image ?? null) && !empty($campaign->campaign_image)) {
                    $campaignImage = $campaign->campaign_image;
                }
                
                // Badge color based on days left
                $badgeColor = 'blue';
                if ($daysLeft <= 7) {
                    $badgeColor = 'red';
                } elseif ($daysLeft <= 14) {
                    $badgeColor = 'orange';
                } elseif ($daysLeft <= 21) {
                    $badgeColor = 'purple';
                }
            @endphp
            
            <!-- CARD -->
            <div class="card campaign-card">
                <div class="card-img-sec">
                    <div class="card-img">
                        <div class="card-img-banner campaign-banner">
                            <img src="{{ $campaignImage }}" alt="{{ $campaign->title }}">
                            
                            <!-- Days Left Badge (Top Left) -->
                            <div class="campaign-days-badge campaign-badge-{{ $badgeColor }}">
                                <i class="fas fa-clock badge-icon"></i>
                                <span>{{ $daysLeft }} days left</span>
                            </div>
                            
                            <!-- Author Overlay (Bottom Left) -->
                            <div class="campaign-author-overlay">
                                <div class="campaign-author-avatar">
                                    <img src="{{ $avatar }}" alt="{{ $user->full_name ?? 'Athlete' }}">
                                </div>
                                <div class="campaign-author-info">
                                    <div class="campaign-author-name">{{ $user->full_name ?? 'Athlete' }}</div>
                                    <div class="campaign-author-sport">
                                        <i class="fas fa-basketball-ball sport-icon"></i>
                                        {{ $campaign->category->title ?? 'Sport' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body campaign-card-body">
                    <!-- Title (Bold) -->
                    <h3 class="campaign-card-title">{{ $campaign->title }}</h3>
                    
                    <!-- Description -->
                    <p class="campaign-card-description">{{ Str::limit($campaign->summary ?? 'Help support this campaign to reach its goal.', 100) }}</p>
                    
                    <!-- Location (Dummy for now) -->
                    <div class="campaign-card-location">
                        <i class="fas fa-map-marker-alt location-icon"></i>
                        <span>{{ $campaign->location ?? 'Woodstock, Ontario, Canada' }}</span>
                    </div>
                    
                    <!-- Raised and Progress -->
                    <div class="progress-wrap campaign-progress-wrap">
                        <div class="progress-text">
                            <div class="progress-raised">Raised : {!! \App\Helpers\Helper::price($campaign->fund_raised) !!}</div>
                            <div class="progress-percent">{{ number_format($progress, 0) }}% funded</div>
                        </div>
                        <div class="bar">
                            <div class="fill" style="width:{{ $progress }}%"></div>
                        </div>
                        <div class="goal">Goal : <strong style="color:#f97316">{!! \App\Helpers\Helper::price($campaign->fund_target) !!}</strong></div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="campaign-card-actions">
                        <a href="{{ route('front.campaigns.show', ['id' => $campaign->id]) }}" class="btn-view-campaign-inline">View Campaign</a>
                        <a href="{{ route('front.campaigns.show', ['id' => $campaign->id]) }}" class="btn-contribute-inline">Contribute Now</a>
                    </div>
                </div>
            </div>
        @empty
            <div class="no-campaigns" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
                <p>No active campaigns found.</p>
            </div>
        @endforelse
    </div>
    
    <!-- Pagination -->
    @if(isset($campaigns) && method_exists($campaigns, 'links'))
        <div class="campaigns-pagination">
            {{ $campaigns->links() }}
        </div>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>

@endsection