@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">
            Cash Flow Statement
        </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.cash-flow') }}" 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($cashFlowData)
            <!-- Report Header -->
            <div class="mb-6 text-center">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Cash Flow Statement</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>

            <div class="grid gap-8 lg:grid-cols-3">
                <!-- Operating Activities -->
                <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-blue-600 dark:text-blue-400">Operating Activities</h4>
                    </div>
                    <div class="p-4">
                        @if(count($cashFlowData['operating_details']) > 0)
                            @foreach($cashFlowData['operating_details'] as $detail)
                                <div class="flex justify-between items-start py-2 border-b border-gray-100 dark:border-gray-700">
                                    <div class="flex-1">
                                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ $detail['description'] }}</span>
                                        <span
                                            class="text-xs text-gray-500 dark:text-gray-400 block">{{ Carbon\Carbon::parse($detail['date'])->format('M d, Y') }}</span>
                                    </div>
                                    <span
                                        class="font-mono text-sm font-medium ml-2 {{ $detail['amount'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                        {{ $detail['amount'] >= 0 ? '+' : '' }}{{ formatAmount($detail['amount']) }}
                                    </span>
                                </div>
                            @endforeach
                        @else
                            <p class="text-gray-500 dark:text-gray-400 text-center py-4">No operating activities</p>
                        @endif

                        <div
                            class="flex justify-between items-center py-3 border-t-2 border-blue-200 dark:border-blue-700 mt-4">
                            <span class="text-md font-bold text-gray-800 dark:text-gray-200">Total Operating</span>
                            <span
                                class="font-mono text-md font-bold {{ $cashFlowData['operating_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['operating_activities']) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Investing Activities -->
                <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-purple-600 dark:text-purple-400">Investing Activities</h4>
                    </div>
                    <div class="p-4">
                        @if(count($cashFlowData['investing_details']) > 0)
                            @foreach($cashFlowData['investing_details'] as $detail)
                                <div class="flex justify-between items-start py-2 border-b border-gray-100 dark:border-gray-700">
                                    <div class="flex-1">
                                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ $detail['description'] }}</span>
                                        <span
                                            class="text-xs text-gray-500 dark:text-gray-400 block">{{ Carbon\Carbon::parse($detail['date'])->format('M d, Y') }}</span>
                                    </div>
                                    <span
                                        class="font-mono text-sm font-medium ml-2 {{ $detail['amount'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                        {{ $detail['amount'] >= 0 ? '+' : '' }}{{ formatAmount($detail['amount']) }}
                                    </span>
                                </div>
                            @endforeach
                        @else
                            <p class="text-gray-500 dark:text-gray-400 text-center py-4">No investing activities</p>
                        @endif

                        <div
                            class="flex justify-between items-center py-3 border-t-2 border-purple-200 dark:border-purple-700 mt-4">
                            <span class="text-md font-bold text-gray-800 dark:text-gray-200">Total Investing</span>
                            <span
                                class="font-mono text-md font-bold {{ $cashFlowData['investing_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['investing_activities']) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Financing Activities -->
                <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-green-600 dark:text-green-400">Financing Activities</h4>
                    </div>
                    <div class="p-4">
                        @if(count($cashFlowData['financing_details']) > 0)
                            @foreach($cashFlowData['financing_details'] as $detail)
                                <div class="flex justify-between items-start py-2 border-b border-gray-100 dark:border-gray-700">
                                    <div class="flex-1">
                                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ $detail['description'] }}</span>
                                        <span
                                            class="text-xs text-gray-500 dark:text-gray-400 block">{{ Carbon\Carbon::parse($detail['date'])->format('M d, Y') }}</span>
                                    </div>
                                    <span
                                        class="font-mono text-sm font-medium ml-2 {{ $detail['amount'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                        {{ $detail['amount'] >= 0 ? '+' : '' }}{{ formatAmount($detail['amount']) }}
                                    </span>
                                </div>
                            @endforeach
                        @else
                            <p class="text-gray-500 dark:text-gray-400 text-center py-4">No financing activities</p>
                        @endif

                        <div
                            class="flex justify-between items-center py-3 border-t-2 border-green-200 dark:border-green-700 mt-4">
                            <span class="text-md font-bold text-gray-800 dark:text-gray-200">Total Financing</span>
                            <span
                                class="font-mono text-md font-bold {{ $cashFlowData['financing_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['financing_activities']) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary -->
            <div class="mt-8 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">Cash Flow Summary</h4>
                </div>
                <div class="p-6">
                    <div class="grid gap-4 md:grid-cols-4">
                        <div class="text-center">
                            <p class="text-sm text-gray-600 dark:text-gray-400">Operating Activities</p>
                            <p
                                class="text-xl font-bold {{ $cashFlowData['operating_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['operating_activities']) }}
                            </p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm text-gray-600 dark:text-gray-400">Investing Activities</p>
                            <p
                                class="text-xl font-bold {{ $cashFlowData['investing_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['investing_activities']) }}
                            </p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm text-gray-600 dark:text-gray-400">Financing Activities</p>
                            <p
                                class="text-xl font-bold {{ $cashFlowData['financing_activities'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['financing_activities']) }}
                            </p>
                        </div>
                        <div class="text-center border-l-2 border-gray-300 dark:border-gray-600">
                            <p class="text-sm text-gray-600 dark:text-gray-400">Net Cash Flow</p>
                            <p
                                class="text-2xl font-bold {{ $cashFlowData['net_cash_flow'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ formatAmount($cashFlowData['net_cash_flow']) }}
                            </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-line 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 Cash Flow Statement.
                </p>
            </div>
        @endif
    </div>
@endsection