@extends('layout.main')
@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Balance Sheet
        </h2>

        <!-- Date Filter Form -->
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
                Filter by Date Range
            </h4>
            <form method="GET" action="{{ route('financial-statements.balance-sheet') }}" class="grid gap-6 md:grid-cols-3">
                <div>
                    <label for="start_date" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">
                        Start Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" id="start_date" name="start_date" value="{{ $startDate }}"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-input focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                        required>
                </div>
                <div>
                    <label for="end_date" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">
                        End Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" id="end_date" name="end_date" value="{{ $endDate }}"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-input focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                        required>
                </div>
                <div class="flex items-end">
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                        Generate Report
                    </button>
                </div>
            </form>
        </div>

        @if($balanceSheetData)
            <!-- Report Header -->
            <div class="mb-6 text-center">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Balance Sheet</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    As of {{ Carbon\Carbon::parse($endDate)->format('F d, Y') }}
                </p>
            </div>

            <div class="grid gap-8 md:grid-cols-2">
                <!-- Assets Section -->
                <div class="bg-white rounded-lg shadow-md dark:bg-gray-800">
                    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">ASSETS</h4>
                    </div>
                    <div class="p-4">
                        @if(count($balanceSheetData['assets']) > 0)
                            @foreach($balanceSheetData['assets'] as $asset)
                                <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                                    <div>
                                        <span
                                            class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $asset['account']->account_name }}</span>
                                        <span
                                            class="text-xs text-gray-500 dark:text-gray-400 block">{{ $asset['account']->account_code }}</span>
                                    </div>
                                    <span class="font-mono text-sm font-medium text-gray-900 dark:text-gray-100">
                                        {{ formatAmount($asset['balance']) }}
                                    </span>
                                </div>
                            @endforeach
                        @else
                            <p class="text-gray-500 dark:text-gray-400 text-center py-4">No assets found</p>
                        @endif

                        <div
                            class="flex justify-between items-center py-3 border-t-2 border-gray-300 dark:border-gray-600 mt-4">
                            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Total Assets</span>
                            <span class="font-mono text-lg font-bold text-gray-900 dark:text-gray-100">
                                {{ formatAmount($balanceSheetData['total_assets']) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Liabilities & Equity Section -->
                <div class="bg-white rounded-lg shadow-md dark:bg-gray-800">
                    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">LIABILITIES & EQUITY</h4>
                    </div>
                    <div class="p-4">
                        <!-- Liabilities -->
                        <div class="mb-6">
                            <h5 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-2">Liabilities:</h5>
                            @if(count($balanceSheetData['liabilities']) > 0)
                                @foreach($balanceSheetData['liabilities'] as $liability)
                                    <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                                        <div>
                                            <span
                                                class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $liability['account']->account_name }}</span>
                                            <span
                                                class="text-xs text-gray-500 dark:text-gray-400 block">{{ $liability['account']->account_code }}</span>
                                        </div>
                                        <span class="font-mono text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {{ formatAmount($liability['balance']) }}
                                        </span>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-gray-500 dark:text-gray-400 text-sm">No liabilities found</p>
                            @endif
                        </div>

                        <!-- Equity -->
                        <div class="mb-6">
                            <h5 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-2">Equity:</h5>
                            @if(count($balanceSheetData['equity']) > 0)
                                @foreach($balanceSheetData['equity'] as $equityItem)
                                    <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                                        <div>
                                            <span
                                                class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $equityItem['account']->account_name }}</span>
                                            <span
                                                class="text-xs text-gray-500 dark:text-gray-400 block">{{ $equityItem['account']->account_code }}</span>
                                        </div>
                                        <span class="font-mono text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {{ formatAmount($equityItem['balance']) }}
                                        </span>
                                    </div>
                                @endforeach
                            @endif

                            <!-- Net Profit/Loss -->
                            <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ $balanceSheetData['net_profit'] >= 0 ? 'Net Profit' : 'Net Loss' }}
                                </span>
                                <span
                                    class="font-mono text-sm font-medium {{ $balanceSheetData['net_profit'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                    {{ formatAmount(abs($balanceSheetData['net_profit'])) }}
                                </span>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-3 border-t-2 border-gray-300 dark:border-gray-600">
                            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Total Liabilities + Equity</span>
                            <span class="font-mono text-lg font-bold text-gray-900 dark:text-gray-100">
                                {{ formatAmount($balanceSheetData['total_liabilities'] + $balanceSheetData['total_equity'] + $balanceSheetData['net_profit']) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Balance Check -->
            <div
                class="px-4 py-3 mt-8 rounded-lg shadow-md {{ abs($balanceSheetData['total_assets'] - ($balanceSheetData['total_liabilities'] + $balanceSheetData['total_equity'] + $balanceSheetData['net_profit'])) < 0.01 ? 'bg-green-100 dark:bg-green-800' : 'bg-red-100 dark:bg-red-800' }}">
                <div class="flex items-center">
                    @if(abs($balanceSheetData['total_assets'] - ($balanceSheetData['total_liabilities'] + $balanceSheetData['total_equity'] + $balanceSheetData['net_profit'])) < 0.01)
                        <i class="fa fa-check-circle text-green-600 dark:text-green-400 mr-2"></i>
                        <span class="text-green-800 dark:text-green-200 font-medium">
                            Balance Sheet is balanced! Assets equal Liabilities + Equity.
                        </span>
                    @else
                        <i class="fa fa-exclamation-triangle text-red-600 dark:text-red-400 mr-2"></i>
                        <span class="text-red-800 dark:text-red-200 font-medium">
                            Balance Sheet is not balanced! Please review the accounts.
                        </span>
                    @endif
                </div>
            </div>

        @else
            <div class="px-4 py-8 text-center bg-white rounded-lg shadow-md dark:bg-gray-800">
                <i class="fa fa-balance-scale text-4xl text-gray-400 mb-4"></i>
                <p class="text-gray-500 dark:text-gray-400 text-lg">No data to display</p>
                <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">
                    Please select a date range to generate the Balance Sheet report.
                </p>
            </div>
        @endif
    </div>
@endsection