<x-app-layout>
    <style>
        .report-card { transition: transform 0.2s ease, border-color 0.2s ease; }
        .report-card:active { transform: scale(0.98); border-color: rgba(99, 102, 241, 0.3); }
        @media (max-width: 767px) { .hide-mobile { display: none !important; } }
        @media (min-width: 768px) { .hide-desktop { display: none !important; } }
    </style>
    <div class="space-y-6">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4 md:gap-0">
            <div class="flex items-center gap-3 md:gap-4">
                <div class="header-icon-size ios-icon-container shadow-lg flex items-center justify-center">
                    <img src="{{ asset('uploads/dashboard-icons/Reports.jpg') }}" alt="Reports" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-xl md:text-2xl font-bold text-slate-800">Financial Reports & Exports</h2>
                    <p class="text-slate-500 text-sm md:text-sm mt-1">Download official UK tax summaries, bank cash flow spreadsheets, and operations registries.</p>
                </div>
            </div>
        </div>

        <div x-data="{ visible: true }" x-init="$nextTick(() => visible = true)" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 1. ANNUAL TAX SUMMARY CARD -->
            <div x-show="visible" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="report-card bg-white border border-slate-200 hover:border-brand-200 rounded-xl shadow-sm p-5 flex flex-col justify-between space-y-6 transition-all duration-300 hover:shadow-lg hover:shadow-sm">
                <div>
                    <div class="w-12 h-12 rounded-2xl bg-brand-50 border border-brand-200 flex items-center justify-center text-brand-500 text-xl mb-4">
                        📊
                    </div>
                    <h3 class="text-lg font-bold text-slate-800 mb-1">UK Annual Tax Summary</h3>
                    <p class="text-sm text-slate-500 leading-relaxed">
                        UK tax year summary (April 6th to April 5th). Gross income, cash-out refunds, categorized expenses, and net taxable profits.
                    </p>
                </div>
                
                <form action="{{ route('reports.tax-summary.pdf') }}" method="GET" class="space-y-3 pt-4 border-t border-slate-200">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-1.5">Tax Year:</label>
                        <select name="tax_year" class="w-full py-2.5 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            @foreach($availableYears as $year)
                                <option value="{{ $year }}" {{ $taxYear == $year ? 'selected' : '' }}>6 Apr {{ $year }} &rarr; 5 Apr {{ $year + 1 }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="w-full py-2.5 px-4 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition duration-150">
                        ⬇ Download Tax Summary (PDF)
                    </button>
                </form>
            </div>

            <!-- 2. BANK CASH FLOW CARD -->
            <div x-show="visible" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="report-card bg-white border border-slate-200 hover:border-brand-200 rounded-xl shadow-sm p-5 flex flex-col justify-between space-y-6 transition-all duration-300 hover:shadow-lg hover:shadow-sm">
                <div>
                    <div class="w-12 h-12 rounded-2xl bg-brand-50 border border-brand-200 flex items-center justify-center text-brand-500 text-xl mb-4">
                        💷
                    </div>
                    <h3 class="text-lg font-bold text-slate-800 mb-1">Bank Cash Flow Statement</h3>
                    <p class="text-sm text-slate-500 leading-relaxed">
                        Multi-sheet Excel with each active bank account on its own tab, listing all chronological flows.
                    </p>
                </div>

                <form action="{{ route('reports.cash-flow.excel') }}" method="GET" class="space-y-3 pt-4 border-t border-slate-200">
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">From</label>
                            <input type="date" name="date_from" value="{{ date('Y-m-01', strtotime('-3 months')) }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">To</label>
                            <input type="date" name="date_to" value="{{ date('Y-m-d') }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                    </div>
                    <button type="submit" class="w-full py-2.5 px-4 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition duration-150">
                        ⬇ Download Cash Flow (Excel)
                    </button>
                </form>
            </div>

            <!-- 3. DETAILED EXPENSES REGISTER -->
            <div x-show="visible" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="report-card bg-white border border-slate-200 hover:border-rose-400 rounded-xl shadow-sm p-5 flex flex-col justify-between space-y-6 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5">
                <div>
                    <div class="w-12 h-12 rounded-2xl bg-rose-50 border border-rose-200 flex items-center justify-center text-rose-600 text-xl mb-4">
                        💸
                    </div>
                    <h3 class="text-lg font-bold text-slate-800 mb-1">Expenses Ledger Statement</h3>
                    <p class="text-sm text-slate-500 leading-relaxed">
                        Categorized outgoings with date, parent/sub category, payee, source bank accounts, and itemized totals.
                    </p>
                </div>

                <form action="{{ route('reports.expenses.pdf') }}" method="GET" class="space-y-3 pt-4 border-t border-slate-200">
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">From</label>
                            <input type="date" name="date_from" value="{{ date('Y-m-01') }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">To</label>
                            <input type="date" name="date_to" value="{{ date('Y-m-d') }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                    </div>
                    <button type="submit" class="w-full py-2.5 px-4 bg-rose-600 hover:bg-rose-500 text-white text-sm font-semibold rounded-xl transition duration-150">
                        ⬇ Download Expenses Ledger (PDF)
                    </button>
                </form>
            </div>
        </div>

        @if(!auth()->user()->isAccountant() && !auth()->user()->isDataEntryManager())
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <!-- 4. VAT RETURN -->
            <div class="report-card bg-white border border-slate-200 hover:border-brand-200 rounded-xl shadow-sm p-5 flex flex-col justify-between space-y-6 transition-all duration-300 hover:shadow-lg hover:shadow-sm">
                <div>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-2xl bg-brand-50 border border-brand-200 flex items-center justify-center text-amber-700 text-xl shrink-0">
                            📊
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-slate-800">VAT Return (HMRC Box 1-9)</h3>
                            <p class="text-sm text-slate-500 leading-relaxed mt-0.5">
                                Generates reports matching HMRC Box 1-9 format. Output VAT, Input VAT, net values, and Net VAT Due (Box 5).
                            </p>
                        </div>
                    </div>
                </div>
                <form method="GET" class="space-y-4 pt-4 border-t border-slate-200">
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">From</label>
                            <input type="date" name="date_from" value="{{ now()->startOfQuarter()->format('Y-m-d') }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">To</label>
                            <input type="date" name="date_to" value="{{ now()->endOfQuarter()->format('Y-m-d') }}"
                                class="w-full py-2 px-2.5 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-2">
                        <button type="submit" formaction="{{ route('reports.vat-return.pdf') }}" class="py-2.5 px-3 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl text-xs md:text-sm transition text-center">
                            ⬇ PDF Report
                        </button>
                        <button type="submit" formaction="{{ route('reports.vat-return.csv') }}" class="py-2.5 px-3 bg-amber-600 hover:bg-amber-500 text-white font-semibold rounded-xl text-xs md:text-sm transition text-center">
                            ⬇ CSV Export
                        </button>
                    </div>
                </form>
            </div>

            <!-- 5. CLIENT DIRECTORY REPORT -->
            <div class="report-card bg-white border border-slate-200 hover:border-brand-200 rounded-xl shadow-sm p-5 flex flex-col justify-between space-y-6 transition-all duration-300 hover:shadow-lg hover:shadow-sm">
                <div>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-2xl bg-brand-50 border border-brand-200 flex items-center justify-center text-brand-500 text-xl shrink-0">
                            👤
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-slate-800">Client Profiles & Billing Registry</h3>
                            <p class="text-sm text-slate-500 leading-relaxed mt-0.5">
                                Full registry with total transactions, cumulative business volume, and outstanding ledger balances.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="pt-4 border-t border-slate-200">
                    <a href="{{ route('reports.clients.pdf') }}" 
                       class="w-full py-2.5 px-4 bg-brand-50 border-brand-200 text-brand-700 text-center font-semibold rounded-xl text-sm border hover:bg-brand-500 hover:text-white hover:border-brand-500 transition-all duration-200 block">
                        ⬇ Download Client Registry (PDF)
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
</x-app-layout>
