@extends('layouts.app')
@section('title', 'Pembayaran')
@section('breadcrumb')
    <li class="breadcrumb-item active">Pembayaran</li>
@endsection
@section('content')
<div class="page-header">
    <h4><i class="bi bi-cash-coin me-2 text-primary"></i>Riwayat Pembayaran</h4>
</div>

<div class="card">
    <div class="card-body border-bottom">
        <form method="GET" class="row g-2">
            <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" class="form-control" placeholder="No. pembayaran atau nama pelanggan..." value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-3">
                <select name="method" class="form-select">
                    <option value="">Semua Metode</option>
                    <option value="tunai" {{ request('method') === 'tunai' ? 'selected' : '' }}>Tunai</option>
                    <option value="transfer" {{ request('method') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                    <option value="kartu_kredit" {{ request('method') === 'kartu_kredit' ? 'selected' : '' }}>Kartu Kredit</option>
                    <option value="kartu_debit" {{ request('method') === 'kartu_debit' ? 'selected' : '' }}>Kartu Debit</option>
                    <option value="qris" {{ request('method') === 'qris' ? 'selected' : '' }}>QRIS</option>
                </select>
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">Filter</button>
                <a href="{{ route('payments.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>No. Pembayaran</th>
                    <th>Invoice</th>
                    <th>Pelanggan</th>
                    <th>Tanggal</th>
                    <th>Metode</th>
                    <th>Referensi</th>
                    <th class="text-end">Jumlah</th>
                    <th>Dicatat Oleh</th>
                </tr>
            </thead>
            <tbody>
                @forelse($payments as $pay)
                <tr>
                    <td class="fw-medium small">{{ $pay->payment_number }}</td>
                    <td>
                        <a href="{{ route('invoices.show', $pay->invoice) }}" class="text-decoration-none small">
                            {{ $pay->invoice->invoice_number }}
                        </a>
                    </td>
                    <td>{{ $pay->invoice->serviceOrder->customer->name }}</td>
                    <td class="small">{{ $pay->payment_date->format('d/m/Y') }}</td>
                    <td>
                        @php $icons = ['tunai'=>'bi-cash','transfer'=>'bi-bank','kartu_kredit'=>'bi-credit-card','kartu_debit'=>'bi-credit-card-2-front','qris'=>'bi-qr-code']; @endphp
                        <span class="small"><i class="bi {{ $icons[$pay->payment_method] ?? 'bi-cash' }} me-1"></i>{{ $pay->method_label }}</span>
                    </td>
                    <td class="small text-muted">{{ $pay->reference_number ?? '-' }}</td>
                    <td class="text-end fw-bold text-success">Rp {{ number_format($pay->amount, 0, ',', '.') }}</td>
                    <td class="small text-muted">{{ $pay->createdBy->name }}</td>
                </tr>
                @empty
                <tr><td colspan="8" class="text-center text-muted py-4">Tidak ada data pembayaran</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer d-flex align-items-center justify-content-between flex-wrap gap-2">
        <small class="text-muted">
            Menampilkan {{ $payments->firstItem() ?? 0 }}–{{ $payments->lastItem() ?? 0 }}
            dari {{ $payments->total() }} data
        </small>
        {{ $payments->withQueryString()->links() }}
    </div>
</div>
@endsection