@extends('layouts.main')

@section('title', 'Balance Sheet')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Balance Sheet</h2>
        <p class="text-gray-500 dark:text-gray-400">As of {{ now()->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="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4 border-l-4 border-blue-500 pl-3">Assets</h3>
    @if($assets->count() > 0)
        <table class="w-full">
            <tbody>
                @foreach($assets as $account)
                    <tr class="border-b dark:border-gray-700">
                        <td class="py-2 text-gray-700 dark:text-gray-300">{{ $account->name }} ({{ $account->code }})</td>
                        <td class="py-2 text-right font-medium text-gray-800 dark:text-white">${{ number_format($account->balance, 2) }}</td>
                    </tr>
                @endforeach
                <tr class="bg-blue-50 dark:bg-blue-900/30">
                    <td class="py-3 font-bold text-lg text-gray-800 dark:text-white">Total Assets</td>
                    <td class="py-3 text-right font-bold text-lg text-blue-600 dark:text-blue-400">${{ number_format($totalAssets, 2) }}</td>
                </tr>
            </tbody>
        </table>
    @else
        <p class="text-gray-500 dark:text-gray-400 text-center py-4">No asset accounts</p>
    @endif
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <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 border-l-4 border-red-500 pl-3">Liabilities</h3>
        @if($liabilities->count() > 0)
            <table class="w-full">
                <tbody>
                    @foreach($liabilities as $account)
                        <tr class="border-b dark:border-gray-700">
                            <td class="py-2 text-gray-700 dark:text-gray-300">{{ $account->name }} ({{ $account->code }})</td>
                            <td class="py-2 text-right font-medium text-gray-800 dark:text-white">${{ number_format($account->balance, 2) }}</td>
                        </tr>
                    @endforeach
                    <tr class="bg-red-50 dark:bg-red-900/30">
                        <td class="py-3 font-bold text-gray-800 dark:text-white">Total Liabilities</td>
                        <td class="py-3 text-right font-bold text-red-600 dark:text-red-400">${{ number_format($totalLiabilities, 2) }}</td>
                    </tr>
                </tbody>
            </table>
        @else
            <p class="text-gray-500 dark:text-gray-400 text-center py-4">No liability accounts</p>
        @endif
    </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 border-l-4 border-purple-500 pl-3">Equity</h3>
        <table class="w-full">
            <tbody>
                <tr class="border-b dark:border-gray-700">
                    <td class="py-2 text-gray-700 dark:text-gray-300">Retained Earnings</td>
                    <td class="py-2 text-right font-medium text-gray-800 dark:text-white">${{ number_format($retainedEarnings, 2) }}</td>
                </tr>
                <tr class="bg-purple-50 dark:bg-purple-900/30">
                    <td class="py-3 font-bold text-gray-800 dark:text-white">Total Equity</td>
                    <td class="py-3 text-right font-bold text-purple-600 dark:text-purple-400">${{ number_format($retainedEarnings, 2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mt-6">
    <div class="flex justify-between items-center">
        <div>
            <p class="text-lg font-semibold text-gray-800 dark:text-white">Total Liabilities + Equity</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Should equal Total Assets</p>
        </div>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">
            ${{ number_format($totalLiabilities + $retainedEarnings, 2) }}
        </p>
    </div>
</div>
@endsection