@extends('layouts.app')

@section('title', 'Account Statement')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--accent); }
</style>
@endpush

@section('content')
@can('view_account_statement')

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-cyan-400 to-cyan-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Account Statement</h1>
                <p class="text-secondary mt-1">Detailed debit/credit ledger for payment accounts</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost flex items-center gap-2">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.account-statement.pdf', request()->query()) }}" class="btn-primary flex items-center gap-2">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium mb-1.5" style="color: var(--text-muted);">Payment Account <span class="text-red-400">*</span></label>
                <select name="account_id" required class="input-modern">
                    <option value="">Select Account</option>
                    @foreach($accounts as $acc)
                        <option value="{{ $acc->id }}" {{ $accountId == $acc->id ? 'selected' : '' }}>{{ $acc->name }} ({{ $acc->paymentMethod->name }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium mb-1.5" style="color: var(--text-muted);">From</label>
                <input type="date" name="date_from" value="{{ $dateFrom }}" class="input-modern">
            </div>
            <div>
                <label class="block text-xs font-medium mb-1.5" style="color: var(--text-muted);">To</label>
                <input type="date" name="date_to" value="{{ $dateTo }}" class="input-modern">
            </div>
            <div class="flex items-center gap-2 pb-0.5">
                <a href="{{ request()->fullUrlWithQuery(['date_from' => now()->startOfMonth()->toDateString(), 'date_to' => now()->toDateString()]) }}" class="btn-ghost">This Month</a>
                <a href="{{ request()->fullUrlWithQuery(['date_from' => now()->subMonth()->startOfMonth()->toDateString(), 'date_to' => now()->subMonth()->endOfMonth()->toDateString()]) }}" class="btn-ghost">Last Month</a>
                <a href="{{ request()->fullUrlWithQuery(['date_from' => now()->startOfYear()->toDateString(), 'date_to' => now()->toDateString()]) }}" class="btn-ghost">YTD</a>
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary">
                <i class="fas fa-search mr-1"></i> Generate Statement
            </button>
        </div>
    </form>
</div>

@if($account)
<div class="table-container rounded-2xl p-5 mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 flex items-center justify-center border border-cyan-500/20">
                <i class="fas fa-building-columns text-cyan-400 text-lg"></i>
            </div>
            <div>
                <p class="text-lg font-bold" style="color: var(--text-primary);">{{ $account->name }}</p>
                <p class="text-sm" style="color: var(--text-muted);">{{ $account->paymentMethod->name }}</p>
            </div>
        </div>
        <div class="text-right">
            <p class="text-xs uppercase tracking-wider font-medium" style="color: var(--text-muted);">Account Number</p>
            <p class="text-sm font-mono mt-0.5" style="color: var(--text-secondary);">{{ $account->account_number ?? 'N/A' }}</p>
        </div>
        <div class="text-right">
            <p class="text-xs uppercase tracking-wider font-medium" style="color: var(--text-muted);">Current Balance</p>
            <p class="text-xl font-extrabold {{ $closingBalance >= 0 ? 'text-emerald-400' : 'text-red-400' }} mt-0.5">
                ${{ number_format($closingBalance, 2) }}
            </p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-xs uppercase tracking-wider font-medium mb-1" style="color: var(--text-muted);">Opening Balance</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($openingBalance, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-xs uppercase tracking-wider font-medium mb-1" style="color: var(--text-muted);">Total Debits</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalDebit, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-xs uppercase tracking-wider font-medium mb-1" style="color: var(--text-muted);">Total Credits</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalCredit, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-xs uppercase tracking-wider font-medium mb-1" style="color: var(--text-muted);">Closing Balance</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($closingBalance, 2) }}</p>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="px-5 py-4 flex items-center justify-between" style="border-bottom: 1px solid var(--border-color);">
        <div>
            <h3 class="text-base font-semibold" style="color: var(--text-primary);">Transaction Ledger</h3>
            <p class="text-xs text-secondary mt-0.5">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
        </div>
        <span class="text-xs px-3 py-1.5 rounded-full font-medium" style="color: var(--text-muted); background: var(--table-bg);">{{ count($transactions) }} transactions</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Date</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Ref No</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Type</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Party / Details</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Debit (Out)</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Credit (In)</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Balance</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @php $runningBalance = $openingBalance; @endphp
                <tr style="background: var(--table-bg);">
                    <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);" colspan="4"><strong>Opening Balance</strong></td>
                    <td class="px-5 py-3.5 text-sm text-right"></td>
                    <td class="px-5 py-3.5 text-sm text-right"></td>
                    <td class="px-5 py-3.5 text-sm text-right font-bold {{ $runningBalance >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                        ${{ number_format($runningBalance, 2) }}
                    </td>
                </tr>
                @forelse($transactions as $txn)
                    @php $runningBalance = $runningBalance + $txn['credit'] - $txn['debit']; @endphp
                    <tr class="table-row">
                        <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);">{{ displayDate($txn['date']) }}</td>
                        <td class="px-5 py-3.5 text-sm font-medium text-cyan-400">{{ $txn['ref'] }}</td>
                        <td class="px-5 py-3.5 text-sm">
                            @if($txn['type'] === 'sale')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/20">Sale</span>
                            @elseif($txn['type'] === 'cancelled')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-slate-500/15 border border-slate-500/20 line-through" style="color: var(--text-muted);">Cancelled</span>
                            @elseif($txn['type'] === 'sale_payment')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-blue-500/15 text-blue-400 border border-blue-500/20">Payment</span>
                            @elseif($txn['type'] === 'purchase')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-orange-500/15 text-orange-400 border border-orange-500/20">Purchase</span>
                            @elseif($txn['type'] === 'payslip')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-rose-500/15 text-rose-400 border border-rose-500/20">Salary</span>
                            @elseif($txn['type'] === 'expense')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-red-500/15 text-red-400 border border-red-500/20">Expense</span>
                            @elseif($txn['type'] === 'cash_deposit')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-teal-500/15 text-teal-400 border border-teal-500/20">Deposit</span>
                            @elseif($txn['type'] === 'project_income')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/20">Project Income</span>
                            @elseif($txn['type'] === 'project_expense')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-red-500/15 text-red-400 border border-red-500/20">Project Expense</span>
                            @elseif($txn['type'] === 'transfer_in')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-indigo-500/15 text-indigo-400 border border-indigo-500/20">Transfer In</span>
                            @elseif($txn['type'] === 'transfer_out')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-orange-500/15 text-orange-400 border border-orange-500/20">Transfer Out</span>
                            @elseif($txn['type'] === 'sale_return')
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-rose-500/15 text-rose-400 border border-rose-500/20">Return</span>
                            @else
                                <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-red-500/15 text-red-400 border border-red-500/20">Expense</span>
                            @endif
                            <p class="text-[11px] text-secondary mt-0.5">{{ $txn['method'] }}</p>
                        </td>
                        <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);">{{ $txn['party'] }}</td>
                        <td class="px-5 py-3.5 text-sm text-right font-medium text-red-400">
                            @if($txn['debit'] > 0)${{ number_format($txn['debit'], 2) }}@else - @endif
                        </td>
                        <td class="px-5 py-3.5 text-sm text-right font-medium text-emerald-400">
                            @if($txn['credit'] > 0)${{ number_format($txn['credit'], 2) }}@else - @endif
                        </td>
                        <td class="px-5 py-3.5 text-sm text-right font-bold {{ $runningBalance >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                            ${{ number_format($runningBalance, 2) }}
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-5 py-12 text-center" style="color: var(--text-muted);">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" style="background: var(--table-bg);">
                                <i class="fas fa-receipt" style="color: var(--text-muted); font-size: 1.25rem;"></i>
                            </div>
                            <p class="font-medium" style="color: var(--text-muted);">No transactions for selected period</p>
                            <p class="text-xs mt-1" style="color: var(--text-muted);">Try adjusting the date range or selecting a different account</p>
                        </div>
                    </td></tr>
                @endforelse
            </tbody>
            @if(count($transactions) > 0)
                <tfoot style="background: var(--table-bg);">
                    <tr>
                        <td class="px-5 py-4 text-sm font-bold" style="color: var(--text-primary);" colspan="4">Closing Balance</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-red-400">${{ number_format($totalDebit, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-emerald-400">${{ number_format($totalCredit, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold {{ $closingBalance >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                            ${{ number_format($closingBalance, 2) }}
                        </td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>
@endif

@endcan
@endsection