@extends('layouts.app')

@section('content')
<div class="mb-6">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <h1 class="text-2xl font-bold text-gray-800">Project Details: {{ $project->name }}</h1>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('expenses.create') }}?project_id={{ $project->id }}" class="flex items-center rounded-lg bg-primary px-4 py-2 text-white shadow-md hover:bg-secondary transition-colors duration-200">
                <i class="fas fa-plus mr-2"></i> Add Expense
            </a>
            <a href="{{ route('projects.edit', $project) }}" class="flex items-center rounded-lg bg-warning px-4 py-2 text-white shadow-md hover:bg-warning-dark transition-colors duration-200">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <a href="{{ route('projects.index') }}" class="flex items-center rounded-lg bg-gray-600 px-4 py-2 text-white shadow-md hover:bg-gray-700 transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i> Back to Projects
            </a>
        </div>
    </div>
</div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
                <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-primary"></i> Project Information
                    </h2>
                    @php
                        $statusColors = [
                            'completed' => 'bg-success text-white',
                            'in_progress' => 'bg-primary text-white',
                            'on_hold' => 'bg-warning text-gray-800',
                            'planning' => 'bg-gray-500 text-white'
                        ];
                        $statusColor = $statusColors[$project->status] ?? 'bg-gray-500 text-white';
                    @endphp
                    <span class="px-2 py-1 text-xs rounded-full inline-block {{ $statusColor }}">
                        {{ ucfirst(str_replace('_', ' ', $project->status)) }}
                    </span>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Name:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->name }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Location:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->location ?? 'N/A' }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Client:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->client_name ?? 'Self' }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Contact:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->client_contact ?? '0771234567' }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Budget:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->formatted_budget }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Expenses:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->formatted_total_expenses }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Remaining:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->formatted_budget_remaining }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Start Date:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->start_date ? $project->start_date->format('M d, Y') : 'N/A' }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">End Date:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->end_date ? $project->end_date->format('M d, Y') : 'N/A' }}</div>
                    </div>
                    <div class="grid grid-cols-3">
                        <div class="col-span-1 font-medium text-gray-700">Description:</div>
                        <div class="col-span-2 text-gray-800">{{ $project->description ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>

            <!-- Budget Progress -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
                <div class="p-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-chart-pie mr-2 text-primary"></i> Budget Progress
                    </h2>
                </div>
                <div class="p-6">
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <span class="text-gray-700">Budget Utilization</span>
                            <span class="font-medium {{ $project->budget_percentage_used > 100 ? 'text-danger' : 'text-success' }}">{{ round($project->budget_percentage_used) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="{{ $project->budget_percentage_used > 100 ? 'bg-danger' : 'bg-success' }} h-2.5 rounded-full" 
                                style="width: {{ min($project->budget_percentage_used, 100) }}%">
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="text-center p-3 bg-primary bg-opacity-10 rounded-lg">
                            <div class="text-xs font-medium text-primary uppercase mb-1">Budget</div>
                            <div class="text-lg font-bold text-gray-800">{{ $project->formatted_budget }}</div>
                        </div>
                        <div class="text-center p-3 bg-accent bg-opacity-10 rounded-lg">
                            <div class="text-xs font-medium text-accent uppercase mb-1">Spent</div>
                            <div class="text-lg font-bold text-gray-800">{{ $project->formatted_total_expenses }}</div>
                        </div>
                        <div class="text-center p-3 bg-success bg-opacity-10 rounded-lg">
                            <div class="text-xs font-medium text-success uppercase mb-1">Remaining</div>
                            <div class="text-lg font-bold text-gray-800">{{ $project->formatted_budget_remaining }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="md:col-span-2">
            <!-- Expenses by Category Chart -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
                <div class="p-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-chart-pie mr-2 text-primary"></i> Expenses by Category
                    </h2>
                </div>
                <div class="p-6">
                    @if($expensesByCategory->count() > 0)
                        <div class="chart-container h-72">
                            <canvas id="expensesByCategoryChart"></canvas>
                        </div>
                    @else
                        <div class="text-center py-10">
                            <p class="text-gray-500">No expense data available for this project.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Project Expenses -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-receipt mr-2 text-primary"></i> Project Expenses
                    </h2>
                    <a href="{{ route('expenses.create') }}?project_id={{ $project->id }}" class="flex items-center rounded-lg bg-primary px-3 py-1.5 text-white text-sm shadow-md hover:bg-secondary transition-colors duration-200">
                        <i class="fas fa-plus mr-2"></i> Add Expense
                    </a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($project->expenses as $expense)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-gray-700">{{ $expense->expense_date->format('M d, Y') }}</td>
                                <td class="px-4 py-3 font-medium text-gray-800">{{ $expense->title }}</td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs rounded-full text-white inline-block" style="background-color: {{ $expense->category->color }}">
                                        {{ $expense->category->name }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 font-medium text-gray-700">{{ $expense->formatted_amount }}</td>
                                <td class="px-4 py-3">
                                    <div class="flex space-x-2">
                                        <a href="{{ route('expenses.show', $expense) }}" class="p-1.5 bg-accent text-white rounded-lg hover:bg-accent-dark transition-colors duration-200">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('expenses.edit', $expense) }}" class="p-1.5 bg-warning text-white rounded-lg hover:bg-warning-dark transition-colors duration-200">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-4 py-8 text-center text-gray-500">No expenses recorded for this project yet.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Expenses by Category Chart
    const categoryData = @json($expensesByCategory);
    
    if (categoryData.length > 0) {
        const categoryCtx = document.getElementById('expensesByCategoryChart').getContext('2d');
        new Chart(categoryCtx, {
            type: 'pie',
            data: {
                labels: categoryData.map(item => item.name),
                datasets: [{
                    data: categoryData.map(item => item.total),
                    backgroundColor: categoryData.map(item => item.color),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${context.label}: LKR ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
</script>
@endsection