@extends('layouts.app')
@section('title', 'Riwayat Pembayaran - FIN-ANALYSIS PRO')
@section('content')
<div style="max-width:900px;margin:0 auto">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem">
        <div>
            <h1 class="page-title">Riwayat Pembayaran</h1>
            <p class="page-subtitle">Semua riwayat transaksi langganan Anda</p>
        </div>
        <a href="{{ route('subscription.index') }}" class="btn btn-primary btn-sm">Lihat Paket</a>
    </div>

    <div class="card" style="padding:0;overflow:hidden">
        <div class="table-wrapper">
            <table class="table">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Order ID</th>
                        <th>Paket</th>
                        <th>Metode</th>
                        <th style="text-align:right">Jumlah</th>
                        <th style="text-align:center">Status</th>
                        <th>Berlaku Hingga</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($subscriptions as $s)
                    @php
                        $badge = match($s->status) {
                            'active'    => ['#D1FAE5','#065F46','Aktif'],
                            'pending'   => ['#FEF3C7','#92400E','Pending'],
                            'cancelled' => ['#FEE2E2','#991B1B','Dibatalkan'],
                            'expired'   => ['#F1F5F9','#64748B','Expired'],
                            default     => ['#F1F5F9','#64748B', ucfirst($s->status)],
                        };
                    @endphp
                    <tr>
                        <td style="font-size:.8125rem;color:#64748B;white-space:nowrap">
                            {{ $s->created_at->format('d/m/Y') }}
                            <span style="display:block;font-size:.7rem;color:#94A3B8">{{ $s->created_at->format('H:i') }}</span>
                        </td>
                        <td style="font-family:monospace;font-size:.78rem;color:#64748B">
                            {{ $s->midtrans_order_id ?? '-' }}
                        </td>
                        <td style="font-weight:600;color:#1E293B">
                            {{ \App\Models\Subscription::planLabel($s->plan) }}
                        </td>
                        <td style="font-size:.8125rem;color:#64748B">
                            {{ $s->payment_method ? strtoupper($s->payment_method) : '-' }}
                            @if($s->payment_channel)
                                <span style="color:#94A3B8">({{ $s->payment_channel }})</span>
                            @endif
                        </td>
                        <td style="text-align:right;font-weight:700;color:#1E293B">
                            Rp {{ number_format($s->amount, 0, ',', '.') }}
                        </td>
                        <td style="text-align:center">
                            <span style="background:{{ $badge[0] }};color:{{ $badge[1] }};padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700">
                                {{ $badge[2] }}
                            </span>
                        </td>
                        <td style="font-size:.8125rem;color:#64748B">
                            {{ $s->expired_at ? $s->expired_at->format('d/m/Y') : '-' }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="text-align:center;padding:3rem;color:#94A3B8">
                            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin:0 auto 10px;opacity:.35;display:block"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                            <div style="font-weight:600;color:#64748B;margin-bottom:4px">Belum ada riwayat pembayaran</div>
                            <a href="{{ route('subscription.index') }}" style="color:#1A56DB;font-size:.8125rem">Lihat paket tersedia →</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($subscriptions->hasPages())
        <div style="padding:1rem 1.5rem;border-top:1px solid #E2E8F0">{{ $subscriptions->links() }}</div>
        @endif
    </div>
</div>
@endsection