@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">
            Statement of Changes in Equity
        </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.equity-statement') }}" 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($equityData)
            <!-- Report Header -->
            <div class="mb-6 text-center">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Statement of Changes in Equity</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    For the period from {{ Carbon\Carbon::parse($startDate)->format('F d, Y') }} to {{ Carbon\Carbon::parse($endDate)->format('F d, Y') }}
                </p>
            </div>

            <!-- Equity Statement Table -->
            <div class="w-full overflow-hidden rounded-lg shadow-xs mb-8">
                <div class="w-full overflow-x-auto">
                    <table class="w-full whitespace-no-wrap">
                        <thead>
                            <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                                <th class="px-4 py-3">Description</th>
                                <th class="px-4 py-3 text-right">Amount ({{ getCurrencyCode() }})</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">
                                        <div>
                                            <p class="font-semibold">Opening Capital</p>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">Balance as of {{ Carbon\Carbon::parse($startDate)->format('M d, Y') }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm text-right font-mono">
                                    {{ formatAmount($equityData['opening_balance']) }}
                                </td>
                            </tr>

                            @if($equityData['additions'] > 0)
                                <tr class="text-gray-700 dark:text-gray-400">
                                    <td class="px-4 py-3">
                                        <div class="flex items-center text-sm">
                                            <div>
                                                <p class="font-semibold text-green-600 dark:text-green-400">Add: Capital Injections</p>
                                                <p class="text-xs text-gray-600 dark:text-gray-400">Additional capital during the period</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-right font-mono text-green-600 dark:text-green-400">
                                        +{{ formatAmount($equityData['additions']) }}
                                    </td>
                                </tr>
                            @endif

                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">
                                        <div>
                                            <p class="font-semibold {{ $equityData['net_profit'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                {{ $equityData['net_profit'] >= 0 ? 'Add: Net Profit' : 'Less: Net Loss' }}
                                            </p>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">Profit/Loss for the period</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm text-right font-mono {{ $equityData['net_profit'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                    {{ $equityData['net_profit'] >= 0 ? '+' : '-' }}{{ formatAmount(abs($equityData['net_profit'])) }}
                                </td>
                            </tr>

                            @if($equityData['withdrawals'] > 0)
                                <tr class="text-gray-700 dark:text-gray-400">
                                    <td class="px-4 py-3">
                                        <div class="flex items-center text-sm">
                                            <div>
                                                <p class="font-semibold text-red-600 dark:text-red-400">Less: Withdrawals/Drawings</p>
                                                <p class="text-xs text-gray-600 dark:text-gray-400">Owner withdrawals during the period</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-right font-mono text-red-600 dark:text-red-400">
                                        -{{ formatAmount($equityData['withdrawals']) }}
                                    </td>
                                </tr>
                            @endif

                            <!-- Closing Balance Row -->
                            <tr class="text-gray-700 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 font-bold border-t-2 border-gray-300 dark:border-gray-600">
                                <td class="px-4 py-3 text-sm font-bold">
                                    <div class="flex items-center">
                                        <div>
                                            <p class="font-bold text-lg">Closing Capital</p>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">Balance as of {{ Carbon\Carbon::parse($endDate)->format('M d, Y') }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-lg text-right font-mono font-bold">
                                    {{ formatAmount($equityData['closing_balance']) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Opening Balance</h4>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                        {{ formatAmount($equityData['opening_balance']) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Period Changes</h4>
                    <p class="text-lg font-semibold {{ ($equityData['additions'] + $equityData['net_profit'] - $equityData['withdrawals']) >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                        {{ ($equityData['additions'] + $equityData['net_profit'] - $equityData['withdrawals']) >= 0 ? '+' : '' }}{{ formatAmount($equityData['additions'] + $equityData['net_profit'] - $equityData['withdrawals']) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Net Profit/Loss</h4>
                    <p class="text-lg font-semibold {{ $equityData['net_profit'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                        {{ formatAmount($equityData['net_profit']) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Closing Balance</h4>
                    <p class="text-lg font-semibold text-purple-600 dark:text-purple-400">
                        {{ formatAmount($equityData['closing_balance']) }}
                    </p>
                </div>
            </div>

            <!-- Analysis Section -->
            <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Equity Analysis</h4>
                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Period Performance</h5>
                        @if($equityData['net_profit'] > 0)
                            <p class="text-sm text-green-600 dark:text-green-400">
                                <i class="fa fa-arrow-up mr-1"></i>
                                The business generated a profit of {{ formatAmount($equityData['net_profit']) }} during this period.
                            </p>
                        @elseif($equityData['net_profit'] < 0)
                            <p class="text-sm text-red-600 dark:text-red-400">
                                <i class="fa fa-arrow-down mr-1"></i>
                                The business incurred a loss of {{ formatAmount(abs($equityData['net_profit'])) }} during this period.
                            </p>
                        @else
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                The business broke even during this period.
                            </p>
                        @endif
                    </div>
                    <div>
                        <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Equity Change</h5>
                        @php
                            $equityChange = $equityData['closing_balance'] - $equityData['opening_balance'];
                            $changePercentage = $equityData['opening_balance'] != 0 ? ($equityChange / $equityData['opening_balance']) * 100 : 0;
                        @endphp
                        @if($equityChange > 0)
                            <p class="text-sm text-green-600 dark:text-green-400">
                                <i class="fa fa-trending-up mr-1"></i>
                                Equity increased by {{ formatAmount($equityChange) }} ({{ formatAmount($changePercentage) }}%)
                            </p>
                        @elseif($equityChange < 0)
                            <p class="text-sm text-red-600 dark:text-red-400">
                                <i class="fa fa-trending-down mr-1"></i>
                                Equity decreased by {{ formatAmount(abs($equityChange)) }} ({{ formatAmount(abs($changePercentage)) }}%)
                            </p>
                        @else
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                <i class="fa fa-minus mr-1"></i>
                                No change in equity during this period.
                            </p>
                        @endif
                    </div>
                </div>

                <!-- Additional Details Section -->
                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Detailed Breakdown</h5>
                    <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
                        <div class="bg-blue-50 dark:bg-blue-900 p-3 rounded-lg">
                            <p class="text-xs text-blue-600 dark:text-blue-400 uppercase tracking-wide">Opening Capital</p>
                            <p class="text-lg font-semibold text-blue-800 dark:text-blue-200">{{ formatAmount($equityData['opening_balance']) }}</p>
                        </div>
                        @if($equityData['additions'] > 0)
                            <div class="bg-green-50 dark:bg-green-900 p-3 rounded-lg">
                                <p class="text-xs text-green-600 dark:text-green-400 uppercase tracking-wide">Capital Additions</p>
                                <p class="text-lg font-semibold text-green-800 dark:text-green-200">+{{ formatAmount($equityData['additions']) }}</p>
                            </div>
                        @endif
                        <div class="bg-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-50 dark:bg-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-900 p-3 rounded-lg">
                            <p class="text-xs text-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-600 dark:text-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-400 uppercase tracking-wide">
                                {{ $equityData['net_profit'] >= 0 ? 'Net Profit' : 'Net Loss' }}
                            </p>
                            <p class="text-lg font-semibold text-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-800 dark:text-{{ $equityData['net_profit'] >= 0 ? 'green' : 'red' }}-200">
                                {{ $equityData['net_profit'] >= 0 ? '+' : '-' }}{{ formatAmount(abs($equityData['net_profit'])) }}
                            </p>
                        </div>
                        @if($equityData['withdrawals'] > 0)
                            <div class="bg-red-50 dark:bg-red-900 p-3 rounded-lg">
                                <p class="text-xs text-red-600 dark:text-red-400 uppercase tracking-wide">Withdrawals</p>
                                <p class="text-lg font-semibold text-red-800 dark:text-red-200">-{{ formatAmount($equityData['withdrawals']) }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Key Performance Indicators -->
                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Key Performance Indicators</h5>
                    <div class="grid gap-4 md:grid-cols-3">
                        <div class="text-center">
                            <div class="text-2xl mb-1">
                                @if($equityData['net_profit'] > 0)
                                    <i class="fa fa-arrow-up text-green-500"></i>
                                @elseif($equityData['net_profit'] < 0)
                                    <i class="fa fa-arrow-down text-red-500"></i>
                                @else
                                    <i class="fa fa-minus text-gray-500"></i>
                                @endif
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Profitability</p>
                            <p class="text-xs text-gray-500 dark:text-gray-500">
                                {{ $equityData['net_profit'] > 0 ? 'Profitable' : ($equityData['net_profit'] < 0 ? 'Loss Making' : 'Break Even') }}
                            </p>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl mb-1">
                                @if($equityChange > 0)
                                    <i class="fa fa-trending-up text-green-500"></i>
                                @elseif($equityChange < 0)
                                    <i class="fa fa-trending-down text-red-500"></i>
                                @else
                                    <i class="fa fa-equals text-gray-500"></i>
                                @endif
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Equity Growth</p>
                            <p class="text-xs text-gray-500 dark:text-gray-500">
                                {{ $equityChange > 0 ? 'Growing' : ($equityChange < 0 ? 'Declining' : 'Stable') }}
                            </p>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl mb-1">
                                @if($equityData['withdrawals'] == 0)
                                    <i class="fa fa-shield-alt text-green-500"></i>
                                @elseif($equityData['withdrawals'] <= ($equityData['net_profit'] * 0.5))
                                    <i class="fa fa-balance-scale text-yellow-500"></i>
                                @else
                                    <i class="fa fa-exclamation-triangle text-red-500"></i>
                                @endif
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Capital Retention</p>
                            <p class="text-xs text-gray-500 dark:text-gray-500">
                                @if($equityData['withdrawals'] == 0)
                                    Full Retention
                                @elseif($equityData['withdrawals'] <= ($equityData['net_profit'] * 0.5))
                                    Moderate Withdrawal
                                @else
                                    High Withdrawal
                                @endif
                            </p>
                        </div>
                    </div>
                </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-chart-pie 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 Statement of Changes in Equity.
                </p>
            </div>
        @endif
    </div>
@endsection