@extends('layouts.app')

@section('title', 'Project Dashboard')
@section('description', 'Manage your projects and track funding progress')

@section('content')
<div class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <div class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Project Dashboard</h1>
                    <p class="text-gray-600">Manage your projects and track funding progress</p>
                </div>
                <div class="flex space-x-3">
                    <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>New Project
                    </a>
                    <a href="{{ route('reports.create') }}" class="bg-csr-blue text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                        <i class="fas fa-file-pdf mr-2"></i>Generate Report
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Total Projects -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-csr-blue rounded-lg flex items-center justify-center">
                            <i class="fas fa-project-diagram text-white"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Total Projects</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['total_projects'] ?? '0' }}</p>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-blue-600">
                        <i class="fas fa-plus mr-1"></i>
                        {{ $stats['active_projects'] ?? '0' }} active
                    </span>
                </div>
            </div>

            <!-- Total Funding -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-csr-green rounded-lg flex items-center justify-center">
                            <i class="fas fa-money-bill-wave text-white"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Total Funding</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['total_funding'] ?? '₦0' }}</p>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-green-600">
                        <i class="fas fa-arrow-up mr-1"></i>
                        {{ $stats['funding_growth'] ?? '0' }}% this month
                    </span>
                </div>
            </div>

            <!-- Beneficiaries -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center">
                            <i class="fas fa-users text-white"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Beneficiaries</p>
                        <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_beneficiaries'] ?? 0) }}</p>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-purple-600">
                        <i class="fas fa-chart-line mr-1"></i>
                        Growing impact
                    </span>
                </div>
            </div>

            <!-- Project Views -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
                            <i class="fas fa-eye text-white"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Total Views</p>
                        <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_views'] ?? 0) }}</p>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-orange-600">
                        <i class="fas fa-trending-up mr-1"></i>
                        {{ $stats['views_growth'] ?? '0' }}% increase
                    </span>
                </div>
            </div>
        </div>

        <!-- Charts and Analytics -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Funding Progress Chart -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Funding Progress</h3>
                <div class="h-64">
                    <canvas id="fundingProgressChart"></canvas>
                </div>
            </div>

            <!-- Project Status Distribution -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Project Status</h3>
                <div class="h-64">
                    <canvas id="projectStatusChart"></canvas>
                </div>
            </div>
        </div>

        <!-- My Projects -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900">My Projects</h3>
                    <a href="{{ route('projects.create') }}" class="text-csr-green hover:text-green-600 font-medium">
                        <i class="fas fa-plus mr-1"></i>Add New Project
                    </a>
                </div>
            </div>
            <div class="p-6">
                @if($projects->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($projects as $project)
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <!-- Project Header -->
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-project-diagram text-white text-sm"></i>
                                        </div>
                                        <div class="ml-3">
                                            <h4 class="text-sm font-medium text-gray-900">{{ $project->title }}</h4>
                                            <p class="text-xs text-gray-500">{{ $project->region }}</p>
                                        </div>
                                    </div>
                                    <div class="flex space-x-1">
                                        @if($project->status === 'approved')
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                                Approved
                                            </span>
                                        @elseif($project->status === 'pending')
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                Pending
                                            </span>
                                        @elseif($project->status === 'rejected')
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                                Rejected
                                            </span>
                                        @elseif($project->status === 'completed')
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                                Completed
                                            </span>
                                        @endif
                                    </div>
                                </div>

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

                                <!-- Funding Progress -->
                                <div class="mb-3">
                                    <div class="flex justify-between text-xs mb-1">
                                        <span>Progress</span>
                                        <span>{{ 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>{{ $project->formatted_funding_raised }} raised</span>
                                        <span>Goal: {{ $project->formatted_funding_goal }}</span>
                                    </div>
                                </div>

                                <!-- Project Stats -->
                                <div class="flex justify-between items-center text-xs text-gray-500 mb-3">
                                    <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>
                                    <span class="flex items-center">
                                        <i class="fas fa-users mr-1"></i>
                                        {{ number_format($project->current_beneficiaries) }}
                                    </span>
                                </div>

                                <!-- Action Buttons -->
                                <div class="flex space-x-2">
                                    <a href="{{ route('projects.show', $project) }}" 
                                       class="flex-1 bg-csr-blue text-white text-center py-2 px-3 rounded text-xs hover:bg-blue-600 transition-colors">
                                        View Details
                                    </a>
                                    @if($project->status === 'pending')
                                        <a href="{{ route('projects.edit', $project) }}" 
                                           class="bg-gray-500 text-white py-2 px-3 rounded text-xs hover:bg-gray-600 transition-colors">
                                            Edit
                                        </a>
                                    @endif
                                    @if($project->status === 'approved')
                                        <a href="#" 
                                           class="bg-csr-green text-white py-2 px-3 rounded text-xs hover:bg-green-600 transition-colors">
                                            Update
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-project-diagram text-gray-400 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No projects yet</h3>
                        <p class="text-gray-600 mb-4">Start making an impact by creating your first project</p>
                        <a href="{{ route('projects.create') }}" class="bg-csr-green text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors">
                            Create Your First Project
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Updates -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Recent Project Updates</h3>
            </div>
            <div class="p-6">
                @if($recentUpdates->count() > 0)
                    <div class="space-y-4">
                        @foreach($recentUpdates as $update)
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center mb-2">
                                            <h4 class="text-sm font-medium text-gray-900">{{ $update->title }}</h4>
                                            <span class="ml-2 text-xs text-gray-500">{{ $update->created_at->diffForHumans() }}</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-2">{{ Str::limit($update->content, 150) }}</p>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <span class="flex items-center">
                                                <i class="fas fa-project-diagram mr-1"></i>
                                                {{ $update->project->title }}
                                            </span>
                                        </div>
                                    </div>
                                    <a href="{{ route('projects.show', $update->project) }}" 
                                       class="text-csr-blue hover:text-blue-600 text-sm font-medium">
                                        View Project
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-bullhorn text-gray-400 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No updates yet</h3>
                        <p class="text-gray-600">Start posting updates to keep your funders informed about project progress</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

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

@push('scripts')
<script>
// Funding Progress Chart
const fundingProgressCtx = document.getElementById('fundingProgressChart').getContext('2d');
const fundingProgressChart = new Chart(fundingProgressCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($projects->pluck('title')->take(5)->toArray()) !!},
        datasets: [{
            label: 'Funding Progress (%)',
            data: {!! json_encode($projects->take(5)->pluck('funding_progress')->toArray()) !!},
            backgroundColor: '#10B981',
            borderColor: '#10B981',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 100,
                ticks: {
                    callback: function(value) {
                        return value + '%';
                    }
                }
            }
        }
    }
});

// Project Status Chart
const projectStatusCtx = document.getElementById('projectStatusChart').getContext('2d');
const projectStatusChart = new Chart(projectStatusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Approved', 'Pending', 'Completed', 'Rejected'],
        datasets: [{
            data: [
                {{ $projects->where('status', 'approved')->count() }},
                {{ $projects->where('status', 'pending')->count() }},
                {{ $projects->where('status', 'completed')->count() }},
                {{ $projects->where('status', 'rejected')->count() }}
            ],
            backgroundColor: [
                '#10B981',
                '#F59E0B',
                '#3B82F6',
                '#EF4444'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
@endpush
@endsection