@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">
            Trial Balance
        </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.trial-balance') }}" 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($trialBalanceData)
            <!-- Report Header -->
            <div class="mb-6 text-center">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Trial Balance</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>

            <!-- Trial Balance 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">Account</th>
                                <th class="px-4 py-3 text-right">Debit ({{ getCurrencyCode() }})</th>
                                <th class="px-4 py-3 text-right">Credit ({{ getCurrencyCode() }})</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                            @foreach($trialBalanceData['accounts'] as $item)
                                <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">{{ $item['account']->account_name }}</p>
                                                <p class="text-xs text-gray-600 dark:text-gray-400">
                                                    {{ $item['account']->account_code }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-right font-mono">
                                        @if($item['debits'] > 0)
                                            {{ formatAmount($item['debits']) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-sm text-right font-mono">
                                        @if($item['credits'] > 0)
                                            {{ formatAmount($item['credits']) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            <!-- Total Row -->
                            <tr class="text-gray-700 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 font-bold">
                                <td class="px-4 py-3 text-sm font-bold">TOTAL</td>
                                <td class="px-4 py-3 text-sm text-right font-mono font-bold border-t-2 border-gray-300">
                                    {{ formatAmount($trialBalanceData['total_debits']) }}
                                </td>
                                <td class="px-4 py-3 text-sm text-right font-mono font-bold border-t-2 border-gray-300">
                                    {{ formatAmount($trialBalanceData['total_credits']) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Balance Check -->
            <div
                class="px-4 py-3 mb-8 rounded-lg shadow-md {{ $trialBalanceData['total_debits'] == $trialBalanceData['total_credits'] ? 'bg-green-100 dark:bg-green-800' : 'bg-red-100 dark:bg-red-800' }}">
                <div class="flex items-center">
                    @if($trialBalanceData['total_debits'] == $trialBalanceData['total_credits'])
                        <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">
                            Trial Balance is balanced! Debits equal Credits.
                        </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">
                            Trial Balance is not balanced! Difference:
                            {{ formatAmount(abs($trialBalanceData['total_debits'] - $trialBalanceData['total_credits'])) }}
                        </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-chart-bar 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 Trial Balance report.
                </p>
            </div>
        @endif
    </div>
@endsection