{{-- Daftar Pembayaran Customer --}}
<x-layouts.app :title="'Pembayaran'">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-credit-card me-2" style="color:var(--sw-primary);"></i>Pembayaran</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0" style="font-size:0.8rem;">
            <li class="breadcrumb-item"><a href="{{ route('customer.dashboard') }}" style="color:var(--sw-primary);text-decoration:none;">Dashboard</a></li>
            <li class="breadcrumb-item active">Pembayaran</li>
        </ol></nav>
    </div>
</div>

@if ($payments->count() === 0)
<div class="card"><div class="card-body text-center py-5" style="color:var(--sw-gray);">
    <i class="fas fa-receipt d-block mb-2" style="font-size:2.5rem;color:#ECEFF1;"></i>
    <div>Belum ada data pembayaran.</div>
    <a href="{{ route('customer.booking.create') }}" class="btn btn-primary btn-sm mt-3 px-4">
        <i class="fas fa-plus me-1"></i>Booking Sekarang
    </a>
</div></div>
@else
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sparkwash mb-0">
                <thead>
                    <tr>
                        <th>Kode Pembayaran</th>
                        <th>Paket</th>
                        <th>Tanggal</th>
                        <th>Total</th>
                        <th>Metode</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($payments as $payment)
                    <tr>
                        <td style="font-size:0.85rem;font-weight:600;letter-spacing:0.5px;">
                            {{ $payment->payment_code }}
                        </td>
                        <td style="font-size:0.85rem;">{{ $payment->booking->service->name }}</td>
                        <td style="font-size:0.85rem;">
                            {{ $payment->booking->schedule->date->locale('id')->isoFormat('D MMM Y') }}
                        </td>
                        <td class="fw-700" style="font-size:0.85rem;color:var(--sw-primary-dark);">
                            {{ $payment->formatted_amount }}
                        </td>
                        <td style="font-size:0.85rem;">{{ $payment->method_label }}</td>
                        <td>
                            @php $b = $payment->status_badge; @endphp
                            <span class="badge-status {{ $b['class'] }}">{{ $b['label'] }}</span>
                        </td>
                        <td>
                            <a href="{{ route('customer.payment.show', $payment->booking) }}"
                               class="btn btn-sm btn-outline-primary" style="font-size:0.775rem;">
                                Detail
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if ($payments->hasPages())
        <div class="px-4 py-3">{{ $payments->links() }}</div>
        @endif
    </div>
</div>
@endif

</x-layouts.app>