@extends('layouts.main')

@section('title', 'Profit & Loss Report')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Profit & Loss Report</h2>
        <p class="text-gray-500 dark:text-gray-400">Period: {{ $startDate->format('M d, Y') }} - {{ $endDate->format('M d, Y') }}</p>
    </div>
    <a href="{{ route('dashboard') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg">
        <i class="fas fa-arrow-left mr-2"></i> Back
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-green-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Revenue</p>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1">${{ number_format($revenue, 2) }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-red-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Expenses</p>
        <p class="text-2xl font-bold text-red-600 dark:text-red-400 mt-1">${{ number_format($totalExpenses, 2) }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-blue-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Net Profit</p>
        <p class="text-2xl font-bold {{ $netProfit >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-red-600 dark:text-red-400' }} mt-1">
            ${{ number_format($netProfit, 2) }}
        </p>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Expense Breakdown by Category</h3>
    @if($expenses->count() > 0)
        <table class="w-full">
            <thead>
                <tr class="border-b dark:border-gray-700">
                    <th class="py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Category</th>
                    <th class="py-3 text-right text-gray-500 dark:text-gray-400 font-medium">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($expenses as $category => $amount)
                    <tr class="border-b dark:border-gray-700">
                        <td class="py-3 text-gray-800 dark:text-white">{{ $category }}</td>
                        <td class="py-3 text-right font-medium text-red-600 dark:text-red-400">${{ number_format($amount, 2) }}</td>
                    </tr>
                @endforeach
                <tr class="bg-gray-50 dark:bg-gray-700">
                    <td class="py-3 font-bold text-gray-800 dark:text-white">Total Expenses</td>
                    <td class="py-3 text-right font-bold text-red-600 dark:text-red-400">${{ number_format($totalExpenses, 2) }}</td>
                </tr>
            </tbody>
        </table>
    @else
        <p class="text-gray-500 dark:text-gray-400 text-center py-4">No expenses recorded for this period</p>
    @endif
</div>
@endsection