@extends('layouts.app')

@section('title', 'Financial Report - ' . $project->name)

@section('content')
<div class="mb-6 print:hidden">
    <a href="{{ route('projects.show', $project) }}" class="text-sm text-brand-600 hover:text-brand-700 flex items-center gap-1.5 mb-4">
        <i class="fas fa-arrow-left text-xs"></i> Back to Project
    </a>
    <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-brand-400 to-brand-600 rounded-full"></div>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Financial Report</h1>
                <p class="text-sm text-gray-500 mt-1">{{ $project->name }}</p>
            </div>
        </div>
        <button onclick="window.print()" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200 transition-colors flex items-center gap-2">
            <i class="fas fa-print"></i> Print Report
        </button>
    </div>
</div>

@php
$budget = $project->budget;
$budgetUtilization = $budget > 0 ? min(($totalExpense / $budget) * 100, 100) : 0;
$budgetRemaining = $budget > 0 ? max($budget - $totalExpense, 0) : 0;
$profitMargin = $totalIncome > 0 ? (($totalIncome - $totalExpense) / $totalIncome) * 100 : 0;
@endphp

<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
    <div class="flex items-center justify-between mb-5">
        <div>
            <h2 class="text-lg font-semibold text-gray-900">{{ $project->name }}</h2>
            <p class="text-sm text-gray-500">{{ $project->description ?? 'No description' }}</p>
        </div>
        <div class="text-right text-sm text-gray-500">
            <p>Report generated: {{ now()->format('M d, Y H:i') }}</p>
        </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
        <div>
            <span class="text-gray-500 font-medium">Status</span>
            <p class="text-gray-900 font-medium mt-0.5">{{ str_replace('_', ' ', ucfirst($project->status)) }}</p>
        </div>
        <div>
            <span class="text-gray-500 font-medium">Priority</span>
            <p class="text-gray-900 font-medium mt-0.5">{{ ucfirst($project->priority) }}</p>
        </div>
        <div>
            <span class="text-gray-500 font-medium">Timeline</span>
            <p class="text-gray-900 font-medium mt-0.5">
                @if($project->start_date)
                    {{ $project->start_date->format('M d, Y') }}
                    @if($project->end_date) &mdash; {{ $project->end_date->format('M d, Y') }} @endif
                @else
                    Not set
                @endif
            </p>
        </div>
        <div>
            <span class="text-gray-500 font-medium">Assigned To</span>
            <p class="text-gray-900 font-medium mt-0.5">{{ $project->assignedUser->name ?? 'Unassigned' }}</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-xs text-gray-500 font-medium mb-1">Budget</p>
        <p class="text-xl font-bold text-gray-900">{{ $budget ? '$' . number_format($budget, 2) : 'Not set' }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-xs text-gray-500 font-medium mb-1">Total Income</p>
        <p class="text-xl font-bold text-emerald-600">${{ number_format($totalIncome, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-xs text-gray-500 font-medium mb-1">Total Expenses</p>
        <p class="text-xl font-bold text-red-600">${{ number_format($totalExpense, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-xs text-gray-500 font-medium mb-1">Net Balance</p>
        <p class="text-xl font-bold {{ $netBalance >= 0 ? 'text-brand-600' : 'text-red-600' }}">${{ number_format($netBalance, 2) }}</p>
    </div>
</div>

@if($budget > 0)
<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
    <h3 class="text-sm font-semibold text-gray-900 mb-3">Budget Utilization</h3>
    <div class="flex items-center justify-between text-sm text-gray-500 mb-1.5">
        <span>${{ number_format($totalExpense, 2) }} of ${{ number_format($budget, 2) }} used</span>
        <span>{{ number_format($budgetUtilization, 1) }}%</span>
    </div>
    <div class="w-full h-3 bg-gray-100 rounded-full overflow-hidden">
        <div class="h-full rounded-full transition-all duration-500 {{ $budgetUtilization > 90 ? 'bg-red-500' : ($budgetUtilization > 70 ? 'bg-amber-500' : 'bg-emerald-500') }}" style="width: {{ $budgetUtilization }}%"></div>
    </div>
    <p class="text-sm text-gray-500 mt-2">
        @if($budgetRemaining > 0)
            <span class="text-emerald-600 font-medium">${{ number_format($budgetRemaining, 2) }}</span> remaining ({{ number_format(100 - $budgetUtilization, 1) }}%)
        @else
            <span class="text-red-600 font-medium">Budget fully utilized</span>
        @endif
    </p>
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <i class="fas fa-chart-pie text-brand-500"></i> Category Breakdown
        </h3>
        @if($categorySummary->count() > 0)
            <div class="space-y-3">
                @foreach($categorySummary as $cat)
                <div class="p-3 rounded-lg bg-gray-50">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-gray-700">{{ $cat['category'] }}</span>
                        <span class="text-xs text-gray-400">{{ $cat['count'] }} txns</span>
                    </div>
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-emerald-600">+${{ number_format($cat['income'], 2) }}</span>
                        <span class="text-red-600">-${{ number_format($cat['expense'], 2) }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <p class="text-sm text-gray-400">No transactions categorized</p>
        @endif
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <i class="fas fa-chart-line text-brand-500"></i> Financial KPIs
        </h3>
        <div class="space-y-4">
            <div class="p-3 rounded-lg bg-gray-50">
                <p class="text-xs text-gray-500 font-medium">Profit Margin</p>
                <p class="text-lg font-bold {{ $profitMargin >= 0 ? 'text-emerald-600' : 'text-red-600' }}">{{ number_format($profitMargin, 1) }}%</p>
                <p class="text-xs text-gray-400 mt-0.5">
                    {{ $profitMargin >= 0 ? 'Profitable' : 'Loss-making' }}
                    @if($totalIncome == 0 && $totalExpense == 0)(no transactions)@elseif($totalIncome == 0)(no income)@endif
                </p>
            </div>
            @if($budget > 0)
            <div class="p-3 rounded-lg bg-gray-50">
                <p class="text-xs text-gray-500 font-medium">Budget Remaining</p>
                <p class="text-lg font-bold text-brand-600">${{ number_format($budgetRemaining, 2) }}</p>
                <p class="text-xs text-gray-400 mt-0.5">{{ number_format(100 - $budgetUtilization, 1) }}% remaining</p>
            </div>
            @endif
            <div class="p-3 rounded-lg bg-gray-50">
                <p class="text-xs text-gray-500 font-medium">Income vs Expenses Ratio</p>
                <p class="text-lg font-bold text-gray-900">
                    {{ $totalExpense > 0 ? number_format($totalIncome / $totalExpense, 2) : ($totalIncome > 0 ? 'N/A (no expenses)' : 'N/A') }}
                </p>
            </div>
            <div class="p-3 rounded-lg bg-gray-50">
                <p class="text-xs text-gray-500 font-medium">Average Transaction</p>
                <p class="text-lg font-bold text-gray-900">
                    ${{ number_format($transactions->count() > 0 ? ($totalIncome + $totalExpense) / $transactions->count() : 0, 2) }}
                </p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <i class="fas fa-calculator text-brand-500"></i> Financial Summary
        </h3>
        <div class="space-y-3">
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span class="text-sm text-gray-600">Total Income</span>
                <span class="text-sm font-bold text-emerald-600">+${{ number_format($totalIncome, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span class="text-sm text-gray-600">Total Expenses</span>
                <span class="text-sm font-bold text-red-600">-${{ number_format($totalExpense, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-3 bg-brand-50 -mx-2 px-2 rounded-lg">
                <span class="text-sm font-bold text-gray-900">Net Balance</span>
                <span class="text-base font-bold {{ $netBalance >= 0 ? 'text-brand-600' : 'text-red-600' }}">${{ number_format($netBalance, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span class="text-sm text-gray-600">Total Transactions</span>
                <span class="text-sm font-bold text-gray-900">{{ $transactions->count() }}</span>
            </div>
            <div class="flex justify-between items-center py-2">
                <span class="text-sm text-gray-600">Created By</span>
                <span class="text-sm font-medium text-gray-900">{{ $project->creator->name ?? 'N/A' }}</span>
            </div>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2">
        <i class="fas fa-list text-brand-500"></i>
        <h3 class="text-sm font-semibold text-gray-900">Transaction History</h3>
        <span class="text-xs text-gray-400 font-medium bg-gray-200 px-2 py-0.5 rounded-full">{{ $transactions->count() }}</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Description</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Category</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Amount</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($transactions as $txn)
                <tr class="hover:bg-gray-50/50">
                    <td class="px-6 py-3 text-sm text-gray-600">{{ $txn->date->format('M d, Y') }}</td>
                    <td class="px-6 py-3">
                        @if($txn->type === 'income')
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-100 text-emerald-700">Income</span>
                        @else
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">Expense</span>
                        @endif
                    </td>
                    <td class="px-6 py-3 text-sm text-gray-700">{{ $txn->description }}</td>
                    <td class="px-6 py-3 text-sm text-gray-500">{{ $txn->category ?? '-' }}</td>
                    <td class="px-6 py-3 text-sm text-right font-medium {{ $txn->type === 'income' ? 'text-emerald-600' : 'text-red-600' }}">
                        {{ $txn->type === 'income' ? '+' : '-' }}${{ number_format($txn->amount, 2) }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-8 text-center text-gray-400">
                        <i class="fas fa-receipt text-xl mb-2 block"></i>
                        No transactions recorded
                    </td>
                </tr>
                @endforelse
            </tbody>
            @if($transactions->count() > 0)
            <tfoot class="bg-gray-50 font-semibold">
                <tr>
                    <td colspan="4" class="px-6 py-3 text-sm text-gray-700 text-right">Total</td>
                    <td class="px-6 py-3 text-sm text-right">
                        <span class="text-emerald-600">+${{ number_format($totalIncome, 2) }}</span>
                        <span class="text-red-600 ml-1">-${{ number_format($totalExpense, 2) }}</span>
                    </td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>

<style media="print">
    body { background: white !important; }
    .print\:hidden { display: none !important; }
    .bg-white { border-color: #e5e7eb !important; box-shadow: none !important; }
    @page { margin: 0.75in; }
</style>
@endsection