@extends('layouts.app')

@section('title', 'Projects Report')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); }
</style>
@endpush

@section('content')
@can('view_projects')

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-teal-400 to-teal-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Projects Report</h1>
                <p class="text-secondary mt-1">Financial overview and budget tracking for all projects</p>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('reports.projects.pdf', request()->query()) }}" class="btn-primary flex items-center gap-2">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
            <a href="{{ route('projects.index') }}" class="btn-ghost px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-arrow-left"></i> Projects
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="flex flex-wrap items-end gap-4">
        <div>
            <label class="block text-xs text-slate-400 mb-1.5 font-medium">From</label>
            <input type="date" name="date_from" value="{{ request('date_from', $dateFrom ?? now()->startOfMonth()->format('Y-m-d')) }}" class="input-modern">
        </div>
        <div>
            <label class="block text-xs text-slate-400 mb-1.5 font-medium">To</label>
            <input type="date" name="date_to" value="{{ request('date_to', $dateTo ?? now()->format('Y-m-d')) }}" class="input-modern">
        </div>
        <button type="submit" class="btn-primary">
            <i class="fas fa-filter mr-1"></i> Filter
        </button>
        <a href="{{ route('reports.projects') }}" class="btn-ghost px-3 py-2 rounded-lg text-xs transition-colors">Clear</a>
    </form>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-teal-500/20 flex items-center justify-center">
                <i class="fas fa-tasks text-teal-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Total Projects</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ count($reportData) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
                <i class="fas fa-coins text-blue-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Total Budget</p>
        </div>
        <p class="text-2xl font-extrabold text-white">${{ number_format($totalBudget, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center">
                <i class="fas fa-arrow-down text-green-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Total Income</p>
        </div>
        <p class="text-2xl font-extrabold text-white">${{ number_format($totalIncomeOverall, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                <i class="fas fa-arrow-up text-red-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Total Expense</p>
        </div>
        <p class="text-2xl font-extrabold text-white">${{ number_format($totalExpenseOverall, 2) }}</p>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
                <i class="fas fa-scale-balanced text-purple-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Net Balance</p>
        </div>
        <p class="text-2xl font-extrabold {{ $totalNetBalance >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
            ${{ number_format($totalNetBalance, 2) }}
        </p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                <i class="fas fa-chart-pie text-amber-400"></i>
            </div>
            <p class="text-xs text-slate-400 font-medium">Budget Utilization</p>
        </div>
        <p class="text-2xl font-extrabold text-white">
            {{ $totalBudget > 0 ? round(($totalExpenseOverall / $totalBudget) * 100, 1) : 0 }}%
        </p>
    </div>
</div>

@if(count($reportData) > 0)
<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="p-5" style="border-bottom: 1px solid var(--border-color);">
        <h3 class="text-lg font-semibold text-white">Project Details</h3>
        <span class="text-xs text-slate-400 bg-slate-700/50 px-3 py-1.5 rounded-full font-medium">{{ count($reportData) }} Projects</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-400 uppercase tracking-wider">Project</th>
                    <th class="px-5 py-3.5 text-center text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Budget</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Income</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Expense</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Net</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Budget Used</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Margin</th>
                    <th class="px-5 py-3.5 text-center text-xs font-semibold text-slate-400 uppercase tracking-wider">Transactions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($reportData as $project)
                <tr class="table-row">
                    <td class="px-5 py-3.5">
                        <a href="{{ route('projects.show', $project['id']) }}" class="text-sm font-bold text-white hover:text-indigo-400 transition-colors">
                            {{ $project['name'] }}
                        </a>
                    </td>
                    <td class="px-5 py-3.5 text-center">
                        @php
                            $statusColors = ['planned' => 'emerald', 'in_progress' => 'amber', 'completed' => 'blue', 'on_hold' => 'slate'];
                            $color = $statusColors[$project['status']] ?? 'slate';
                        @endphp
                        <span class="badge badge-{{ $color }} text-xs">{{ ucfirst(str_replace('_', ' ', $project['status'])) }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-sm text-right text-slate-300">${{ number_format($project['budget'], 2) }}</td>
                    <td class="px-5 py-3.5 text-sm text-right text-emerald-400 font-medium">${{ number_format($project['total_income'], 2) }}</td>
                    <td class="px-5 py-3.5 text-sm text-right text-red-400 font-medium">${{ number_format($project['total_expense'], 2) }}</td>
                    <td class="px-5 py-3.5 text-sm text-right font-semibold {{ $project['net_balance'] >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                        ${{ number_format($project['net_balance'], 2) }}
                    </td>
                    <td class="px-5 py-3.5 text-sm text-right">
                        @if($project['budget'] > 0)
                            <div class="flex items-center justify-end gap-2">
                                <div class="w-16 h-1.5 bg-slate-700 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full {{ $project['budget_utilization'] > 100 ? 'bg-red-500' : ($project['budget_utilization'] > 80 ? 'bg-amber-500' : 'bg-emerald-500') }}"
                                         style="width: {{ min($project['budget_utilization'], 100) }}%">
                                    </div>
                                </div>
                                <span class="text-xs {{ $project['budget_utilization'] > 100 ? 'text-red-400' : 'text-slate-400' }}">
                                    {{ $project['budget_utilization'] }}%
                                </span>
                            </div>
                        @else
                            <span class="text-slate-500">-</span>
                        @endif
                    </td>
                    <td class="px-5 py-3.5 text-sm text-right {{ $project['profit_margin'] >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                        {{ $project['profit_margin'] }}%
                    </td>
                    <td class="px-5 py-3.5 text-sm text-center text-slate-300">{{ $project['transaction_count'] }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@else
<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="flex flex-col items-center justify-center py-16">
        <div class="w-16 h-16 rounded-2xl bg-slate-700/50 flex items-center justify-center mb-4">
            <i class="fas fa-tasks text-slate-500 text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-white mb-1">No Projects</h3>
        <p class="text-sm text-slate-500">No projects have been created yet.</p>
    </div>
</div>
@endif

@endcan
@endsection