@extends('layouts.admin')

@section('title', 'Transaksi & Pembayaran QRIS')
@section('page_title', 'Transaksi & Pembayaran QRIS')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Transaksi &amp; Pembayaran QRIS</h1>
                <p class="ax-page-head__subtitle">Daftar riwayat pesanan pelanggan dan status pembayaran otomatis.</p>
            </div>
        </div>
    </div>

    <!-- Orders Table Card -->
    <section class="ax-card">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Data Real-Time</span>
                <h3 class="ax-card__title">Semua Pesanan Undangan</h3>
            </div>
            <div class="ax-card__actions">
                <span class="ax-badge ax-badge--neutral ax-badge--count">{{ $orders->count() }}</span>
            </div>
        </div>

        <div class="ax-card__body" style="padding:0; overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; text-align:left; font-size:var(--ax-text-xs);">
                <thead>
                    <tr style="background:var(--ax-surface-subtle); border-bottom:1px solid var(--ax-border); text-transform:uppercase; font-size:10px; letter-spacing:0.05em; color:var(--ax-text-muted);">
                        <th style="padding:14px 20px;">Kode Order</th>
                        <th style="padding:14px 20px;">Klien / Kontak</th>
                        <th style="padding:14px 20px;">Paket &amp; Desain</th>
                        <th style="padding:14px 20px;">Total Tagihan</th>
                        <th style="padding:14px 20px;">Status Pembayaran</th>
                        <th style="padding:14px 20px;">Tanggal</th>
                        <th style="padding:14px 20px; text-align:right;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $ord)
                        <tr style="border-bottom:1px solid var(--ax-border); transition:background var(--ax-motion-instant);">
                            <td style="padding:16px 20px; font-family:var(--ax-font-mono); font-weight:600; color:var(--ax-text-strong);">
                                {{ $ord->order_code }}
                            </td>
                            <td style="padding:16px 20px;">
                                <strong style="color:var(--ax-text-strong); display:block;">{{ $ord->user->name }}</strong>
                                <span style="font-size:11px; color:var(--ax-text-muted);">{{ $ord->user->email }}</span>
                                <span style="font-size:11px; color:var(--ax-text-muted); display:block;">{{ $ord->user->phone }}</span>
                            </td>
                            <td style="padding:16px 20px;">
                                <span style="font-weight:600; color:var(--ax-text-strong);">{{ $ord->package->name }}</span>
                                <span style="font-size:11px; color:var(--ax-text-muted); display:block;">Template: {{ $ord->template->name }}</span>
                            </td>
                            <td style="padding:16px 20px; font-weight:700; color:var(--ax-accent); font-size:var(--ax-text-sm);">
                                Rp {{ number_format($ord->total_amount, 0, ',', '.') }}
                            </td>
                            <td style="padding:16px 20px;">
                                <span class="ax-badge {{ $ord->payment_status == 'paid' ? 'ax-badge--success' : 'ax-badge--warning' }} ax-badge--pill">
                                    {{ strtoupper($ord->payment_status) }}
                                </span>
                            </td>
                            <td style="padding:16px 20px; color:var(--ax-text-muted); font-size:11px;">
                                {{ $ord->created_at->format('d M Y, H:i') }}
                            </td>
                            <td style="padding:16px 20px; text-align:right;">
                                @if($ord->payment_status !== 'paid')
                                    <form action="{{ route('admin.orders.confirm', $ord->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        <button type="submit" class="ax-btn ax-btn--sm ax-btn--primary">
                                            Konfirmasi Lunas
                                        </button>
                                    </form>
                                @else
                                    <span class="ax-badge ax-badge--soft ax-badge--success">
                                        <i data-lucide="check" style="width:12px;height:12px;"></i> Terverifikasi
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" style="padding:40px; text-align:center; color:var(--ax-text-subtle);">
                                Belum ada transaksi yang tercatat.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection