@extends('layouts.app')

@section('title', 'Payments')

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Payments'],
    ]" />

    <x-page-header title="Payments" subtitle="Manage payments">
        @can('create', \App\Models\Payment::class)
            <a href="{{ route('payments.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i> Record Payment
            </a>
        @endcan
    </x-page-header>

    <div class="vem-filter-bar">
        <form method="GET" action="{{ route('payments.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label" for="search">Search</label>
                <input type="search" name="search" id="search" class="form-control form-control-sm" value="{{ request('search') }}" placeholder="Payment number or reference...">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="status">Status</label>
                <select name="status" id="status" class="form-select form-select-sm">
                    <option value="">All statuses</option>
                    @foreach (\App\Enums\PaymentStatus::cases() as $status)
                        <option value="{{ $status->value }}" @selected(request('status') === $status->value)>{{ $status->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-5 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="{{ route('payments.index') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </form>
    </div>

    <x-card flush>
        @if ($payments->isEmpty())
            <x-empty-state icon="credit-card" title="No payments yet" description="Payments will appear here once recorded.">
                @can('create', \App\Models\Payment::class)
                    <a href="{{ route('payments.create') }}" class="btn btn-primary btn-sm">Record Payment</a>
                @endcan
            </x-empty-state>
        @else
            <x-table :headers="['Payment #', 'Invoice', 'Customer', 'Date', 'Amount', 'Method', 'Status', 'Actions']">
                @foreach ($payments as $payment)
                    <tr>
                        <td><a href="{{ route('payments.show', $payment) }}" class="fw-medium">{{ $payment->payment_number }}</a></td>
                        <td>{{ $payment->invoice->invoice_number ?? '—' }}</td>
                        <td>{{ $payment->customer->name ?? '—' }}</td>
                        <td><x-datetime :value="$payment->payment_date" /></td>
                        <td><x-money :amount="$payment->amount" /></td>
                        <td>{{ $payment->payment_method->label() }}</td>
                        <td><x-badge :status="$payment->status->value" :label="$payment->status->label()" /></td>
                        <td>
                            <a href="{{ route('payments.show', $payment) }}" class="btn btn-sm btn-outline-primary">View</a>
                        </td>
                    </tr>
                @endforeach
            </x-table>
            @if ($payments->hasPages())
                <div class="p-3 border-top">{{ $payments->links() }}</div>
            @endif
        @endif
    </x-card>
@endsection
