@extends('layouts.app')

@section('content')
<div style="margin-top: 2rem;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 2rem;">
        <div>
            <h1 style="margin:0;">Cheques for: {{ $payee->name }}</h1>
            <p style="color: #6B7280; margin: 0.25rem 0 0 0;">{{ $payee->email }}</p>
        </div>
        <div style="display:flex; gap: 0.5rem;">
            <a href="{{ request()->fullUrlWithQuery(['export' => 'pdf']) }}" class="btn" style="background: #10B981;">Download Statement (PDF)</a>
            <a href="{{ route('payees.index') }}" class="btn" style="background: #6B7280;">Back to Payees</a>
        </div>
    </div>

    <!-- Stats Summary -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
        <div class="card" style="padding:1rem; text-align:center; border-left: 5px solid #4F46E5;">
            <p style="color: #6B7280; font-size: 0.75rem; font-weight:bold; text-transform:uppercase;">Total Volume</p>
            <h2 style="font-size: 1.5rem; margin-top:0.25rem;">AED {{ number_format($cheques->sum('amount'), 2) }}</h2>
        </div>
        <div class="card" style="padding:1rem; text-align:center; border-left: 5px solid #10B981;">
            <p style="color: #6B7280; font-size: 0.75rem; font-weight:bold; text-transform:uppercase;">Filtered Count</p>
            <h2 style="font-size: 1.5rem; margin-top:0.25rem;">{{ $cheques->count() }}</h2>
        </div>
    </div>

    <div class="card" style="margin-bottom: 1rem; padding: 1rem;">
        <form action="{{ route('payees.show', $payee->id) }}" method="GET" style="display: flex; align-items: center; gap: 1rem;">
            <label for="filter_status" style="font-weight: bold; white-space: nowrap;">Filter Transactions by Status:</label>
            <select name="status" id="filter_status" style="padding: 0.4rem; border: 1px solid #ddd; border-radius: 4px;">
                <option value="">All Transactions</option>
                @foreach(['draft', 'issued', 'in_hand', 'released', 'cleared', 'bounced', 'cancelled'] as $st)
                    <option value="{{ $st }}" {{ request('status') == $st ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $st)) }}
                    </option>
                @endforeach
            </select>
            <button type="submit" class="btn" style="padding: 0.4rem 1rem;">Apply Filter</button>
            @if(request('status'))
                <a href="{{ route('payees.show', $payee->id) }}" style="color: gray; text-decoration: none; font-size: 0.9rem;">Clear</a>
            @endif
        </form>
    </div>

    <div class="card">
        <h3>Transaction History</h3>
        <table style="margin-top: 1rem;">
            <thead>
                <tr>
                    <th>Chq #</th>
                    <th>Company</th>
                    <th>Bank</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($cheques as $cheque)
                @php
                    $statusColor = match($cheque->status) {
                        'cleared' => '#10B981', // green
                        'issued', 'released' => '#3B82F6', // blue
                        'in_hand' => '#F59E0B', // amber
                        'cancelled', 'bounced' => '#EF4444', // red
                        default => '#6B7280' // gray
                    };
                @endphp
                <tr>
                    <td><strong>{{ $cheque->cheque_number }}</strong></td>
                    <td>{{ $cheque->company->name ?? 'N/A' }}</td>
                    <td>{{ $cheque->bank->name }}</td>
                    <td>{{ $cheque->cheque_date->format('d M Y') }}</td>
                    <td style="font-weight: bold;">{{ number_format($cheque->amount, 2) }}</td>
                    <td>
                        <span style="background: {{ $statusColor }}; color: white; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: bold;">
                            {{ ucfirst(str_replace('_', ' ', $cheque->status)) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('cheques.show', $cheque->id) }}" style="color: blue; text-decoration: none;">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align: center; padding: 2rem; color: #6B7280;">No transactions found for the selected filter.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection