@extends('layouts.admin')

@section('title', 'Payment Receipts')

@section('page-title', 'Payment Receipts')

@section('content')
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
    <!-- Header -->
    <div class="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm md:flex-row md:items-center md:justify-between">
        <div>
            <h3 class="text-lg font-bold text-gray-900">All Receipts</h3>
            <p class="text-sm text-gray-500">View and manage payment receipts</p>
        </div>
    </div>

    <!-- Search & Filter -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        <form method="GET" action="{{ route('admin.receipts.index') }}" class="grid gap-4 md:grid-cols-4">
            <div class="md:col-span-2 relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-gray-400">search</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by receipt number, invoice, or customer..." class="h-11 w-full rounded-lg border border-gray-200 bg-white pl-10 text-sm text-gray-900 placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary">
            </div>
            <div>
                <input type="date" name="date_from" value="{{ request('date_from') }}" placeholder="From Date" class="h-11 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary">
            </div>
            <div>
                <input type="date" name="date_to" value="{{ request('date_to') }}" placeholder="To Date" class="h-11 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="h-11 px-4 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">Search</button>
                @if(request()->hasAny(['search', 'date_from', 'date_to']))
                    <a href="{{ route('admin.receipts.index') }}" class="h-11 px-4 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium flex items-center">Clear</a>
                @endif
            </div>
        </form>
    </div>

    <!-- Receipts Table -->
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold" scope="col">Receipt Number</th>
                        <th class="px-6 py-4 font-semibold" scope="col">Customer</th>
                        <th class="px-6 py-4 font-semibold" scope="col">Invoice Number</th>
                        <th class="px-6 py-4 font-semibold text-right" scope="col">Amount</th>
                        <th class="px-6 py-4 font-semibold" scope="col">Payment Method</th>
                        <th class="px-6 py-4 font-semibold" scope="col">Date</th>
                        <th class="px-6 py-4 font-semibold text-right" scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($receipts as $receipt)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4">
                                <span class="font-medium text-gray-900">{{ $receipt->receipt_number }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-medium text-gray-900">{{ $receipt->customer->name }}</div>
                                <div class="text-xs text-gray-500">{{ $receipt->customer->email ?? '' }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.invoices.show', $receipt->invoice) }}" class="text-primary hover:underline">
                                    {{ $receipt->invoice->invoice_number }}
                                </a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="font-medium text-gray-900">${{ number_format($receipt->amount, 2) }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-gray-600">{{ ucfirst(str_replace('_', ' ', $receipt->payment_method)) }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-gray-600">{{ $receipt->created_at->format('M d, Y') }}</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.receipts.show', $receipt) }}" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-primary transition-colors" title="View Receipt">
                                        <span class="material-symbols-outlined text-[20px]">visibility</span>
                                    </a>
                                    <a href="{{ route('admin.receipts.download', $receipt) }}?{{ http_build_query(['template' => \App\Support\ReceiptTemplateResolver::resolveKeyForReceipt($receipt)]) }}" target="_blank" rel="noopener noreferrer" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-primary transition-colors" title="Download PDF (same template as receipt)">
                                        <span class="material-symbols-outlined text-[20px]">download</span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-gray-500">No receipts found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $receipts->links() }}
        </div>
    </div>
</div>
@endsection