@extends('layouts.app')

@section('title', 'Browse Projects')
@section('description', 'Discover impactful CSR projects across Nigeria')

@section('content')
<div class="bg-white">
    <!-- Header -->
    <div class="bg-gradient-to-r from-csr-blue to-csr-green text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center">
                <h1 class="text-4xl font-bold mb-4">Discover Impactful Projects</h1>
                <p class="text-xl text-blue-100 max-w-2xl mx-auto">
                    Browse and fund youth-led initiatives aligned with Sustainable Development Goals
                </p>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form method="GET" action="{{ route('projects.index') }}" class="space-y-6">
                <!-- Search Bar -->
                <div>
                    <label for="search" class="sr-only">Search projects</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" name="search" id="search" value="{{ request('search') }}"
                               class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-csr-blue focus:border-csr-blue"
                               placeholder="Search projects by title, description, or location...">
                    </div>
                </div>

                <!-- Filters -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- SDG Filter -->
                    <div>
                        <label for="sdg" class="block text-sm font-medium text-gray-700 mb-2">SDG Category</label>
                        <select name="sdg" id="sdg" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                            <option value="">All SDGs</option>
                            <option value="1" {{ request('sdg') == '1' ? 'selected' : '' }}>SDG 1 - No Poverty</option>
                            <option value="2" {{ request('sdg') == '2' ? 'selected' : '' }}>SDG 2 - Zero Hunger</option>
                            <option value="3" {{ request('sdg') == '3' ? 'selected' : '' }}>SDG 3 - Good Health</option>
                            <option value="4" {{ request('sdg') == '4' ? 'selected' : '' }}>SDG 4 - Quality Education</option>
                            <option value="5" {{ request('sdg') == '5' ? 'selected' : '' }}>SDG 5 - Gender Equality</option>
                            <option value="6" {{ request('sdg') == '6' ? 'selected' : '' }}>SDG 6 - Clean Water</option>
                            <option value="7" {{ request('sdg') == '7' ? 'selected' : '' }}>SDG 7 - Clean Energy</option>
                            <option value="8" {{ request('sdg') == '8' ? 'selected' : '' }}>SDG 8 - Decent Work</option>
                            <option value="9" {{ request('sdg') == '9' ? 'selected' : '' }}>SDG 9 - Industry Innovation</option>
                            <option value="10" {{ request('sdg') == '10' ? 'selected' : '' }}>SDG 10 - Reduced Inequalities</option>
                            <option value="11" {{ request('sdg') == '11' ? 'selected' : '' }}>SDG 11 - Sustainable Cities</option>
                            <option value="12" {{ request('sdg') == '12' ? 'selected' : '' }}>SDG 12 - Responsible Consumption</option>
                            <option value="13" {{ request('sdg') == '13' ? 'selected' : '' }}>SDG 13 - Climate Action</option>
                            <option value="14" {{ request('sdg') == '14' ? 'selected' : '' }}>SDG 14 - Life Below Water</option>
                            <option value="15" {{ request('sdg') == '15' ? 'selected' : '' }}>SDG 15 - Life on Land</option>
                            <option value="16" {{ request('sdg') == '16' ? 'selected' : '' }}>SDG 16 - Peace & Justice</option>
                            <option value="17" {{ request('sdg') == '17' ? 'selected' : '' }}>SDG 17 - Partnerships</option>
                        </select>
                    </div>

                    <!-- Region Filter -->
                    <div>
                        <label for="region" class="block text-sm font-medium text-gray-700 mb-2">Region</label>
                        <select name="region" id="region" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                            <option value="">All Regions</option>
                            <option value="North Central" {{ request('region') == 'North Central' ? 'selected' : '' }}>North Central</option>
                            <option value="North East" {{ request('region') == 'North East' ? 'selected' : '' }}>North East</option>
                            <option value="North West" {{ request('region') == 'North West' ? 'selected' : '' }}>North West</option>
                            <option value="South East" {{ request('region') == 'South East' ? 'selected' : '' }}>South East</option>
                            <option value="South South" {{ request('region') == 'South South' ? 'selected' : '' }}>South South</option>
                            <option value="South West" {{ request('region') == 'South West' ? 'selected' : '' }}>South West</option>
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                        <select name="status" id="status" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                            <option value="">All Status</option>
                            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                            <option value="funding" {{ request('status') == 'funding' ? 'selected' : '' }}>Funding</option>
                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        </select>
                    </div>

                    <!-- Sort By -->
                    <div>
                        <label for="sort" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                        <select name="sort" id="sort" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                            <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest</option>
                            <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Most Popular</option>
                            <option value="funding" {{ request('sort') == 'funding' ? 'selected' : '' }}>Funding Progress</option>
                            <option value="deadline" {{ request('sort') == 'deadline' ? 'selected' : '' }}>Deadline</option>
                        </select>
                    </div>
                </div>

                <!-- Filter Buttons -->
                <div class="flex justify-between items-center">
                    <button type="submit" class="bg-csr-blue text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors">
                        Apply Filters
                    </button>
                    @if(request('search') || request('sdg') || request('region') || request('status') || request('sort'))
                        <a href="{{ route('projects.index') }}" class="text-gray-600 hover:text-gray-800">
                            Clear Filters
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Projects Grid -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
        <!-- Results Count -->
        <div class="flex justify-between items-center mb-6">
            <p class="text-gray-600">
                Showing <span class="font-semibold">{{ $projects->count() }}</span> projects
                @if(request('search') || request('sdg') || request('region') || request('status'))
                    matching your criteria
                @endif
            </p>
            @auth
                @if(auth()->user()->isProjectOwner())
                    <a href="{{ route('projects.create') }}" class="bg-csr-green text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">
                        <i class="fas fa-plus mr-2"></i>Submit Project
                    </a>
                @endif
            @endauth
        </div>

        <!-- Projects Grid -->
        @if($projects->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($projects as $project)
                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden card-hover">
                        <!-- Project Image -->
                        <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 relative">
                            @if($project->featured_image)
                                <img src="{{ $project->featured_image }}" alt="{{ $project->title }}" class="w-full h-full object-cover">
                            @endif
                            @if($project->is_featured)
                                <div class="absolute top-4 right-4 bg-white px-2 py-1 rounded text-sm font-semibold text-csr-green">
                                    Featured
                                </div>
                            @endif
                            @if($project->status === 'completed')
                                <div class="absolute top-4 left-4 bg-green-500 text-white px-2 py-1 rounded text-sm font-semibold">
                                    Completed
                                </div>
                            @endif
                        </div>

                        <!-- Project Content -->
                        <div class="p-6">
                            <!-- SDG Tags -->
                            <div class="flex items-center mb-3">
                                @foreach($project->sdg_tags as $sdg)
                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">
                                        SDG {{ $sdg }}
                                    </span>
                                @endforeach
                            </div>

                            <!-- Project Title -->
                            <h3 class="text-xl font-semibold mb-2 text-gray-900">
                                <a href="{{ route('projects.show', $project) }}" class="hover:text-csr-blue transition-colors">
                                    {{ $project->title }}
                                </a>
                            </h3>

                            <!-- Project Description -->
                            <p class="text-gray-600 mb-4 line-clamp-2">
                                {{ Str::limit($project->short_description ?? $project->description, 120) }}
                            </p>

                            <!-- Funding Progress -->
                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">{{ $project->formatted_funding_raised }} raised</span>
                                    <span class="font-semibold">{{ number_format($project->funding_progress, 1) }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-csr-green h-2 rounded-full transition-all duration-300" 
                                         style="width: {{ min(100, $project->funding_progress) }}%"></div>
                                </div>
                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                    <span>Goal: {{ $project->formatted_funding_goal }}</span>
                                    <span>{{ $project->duration_months ?? 'N/A' }} months</span>
                                </div>
                            </div>

                            <!-- Project Meta -->
                            <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                    {{ $project->location ?? $project->region }}
                                </div>
                                <div class="flex items-center space-x-4 text-sm text-gray-500">
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-1"></i>
                                        {{ number_format($project->views_count) }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-heart mr-1"></i>
                                        {{ number_format($project->likes_count) }}
                                    </span>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="mt-4 flex space-x-2">
                                <a href="{{ route('projects.show', $project) }}" 
                                   class="flex-1 bg-csr-blue text-white text-center py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
                                    View Details
                                </a>
                                @auth
                                    @if(auth()->user()->isCorporate() && $project->status === 'approved')
                                        <a href="{{ route('projects.fund.form', $project) }}" 
                                           class="bg-csr-green text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
                                            Fund
                                        </a>
                                    @endif
                                @endauth
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            @if($projects->hasPages())
                <div class="mt-12">
                    {{ $projects->links() }}
                </div>
            @endif
        @else
            <!-- Empty State -->
            <div class="text-center py-12">
                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-search text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No projects found</h3>
                <p class="text-gray-600 mb-6">
                    @if(request('search') || request('sdg') || request('region') || request('status'))
                        Try adjusting your search criteria or filters.
                    @else
                        There are currently no projects available. Check back soon!
                    @endif
                </p>
                @auth
                    @if(auth()->user()->isProjectOwner())
                        <a href="{{ route('projects.create') }}" class="bg-csr-green text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors">
                            Submit Your First Project
                        </a>
                    @endif
                @endauth
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endpush
@endsection