@extends('layouts.app')

@section('title', 'Đổi thẻ cào | GreenCard.vn')

@section('content')
<main class="container" style="padding-top:24px;">
    @include('partials.exchange-form', ['showNotice' => true])

    {{-- Lịch sử giao dịch --}}
    <section class="home-section">
        <div class="exchange-head">
            <h2 class="section-title amber" style="color:#78350f;">Lịch sử giao dịch</h2>
            <div class="pill-tabs" id="historyTabs">
                <button type="button" class="pill" style="background:var(--bg-soft);color:#334155;">Tất cả</button>
                <button type="button" class="pill" style="background:var(--bg-soft);color:#334155;">Thành công</button>
                <button type="button" class="pill" style="background:var(--bg-soft);color:#334155;">Đang xử lý</button>
            </div>
        </div>
        <div class="card-panel" style="padding:6px 20px;">
            @forelse($history as $row)
                <div style="display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px;">
                    <b style="min-width:90px;">{{ $row->telco }}</b>
                    <span style="color:var(--slate);">Serial: {{ $row->serial }}</span>
                    <span style="color:var(--slate);">{{ number_format($row->amount, 0, ',', '.') }}đ</span>
                    <span style="margin-left:auto;font-weight:700;color:{{ $row->status === 'success' ? 'var(--green-dark)' : ($row->status === 'failed' ? 'var(--red)' : '#b45309') }};">
                        {{ ['pending' => 'Đang xử lý', 'success' => 'Thành công', 'failed' => 'Thất bại'][$row->status] ?? $row->status }}
                    </span>
                    <span style="color:var(--slate-light);font-size:12px;">{{ $row->created_at->format('d/m/Y H:i') }}</span>
                </div>
            @empty
                <div class="empty-state" style="min-height:140px;">Chưa có giao dịch nào.</div>
            @endforelse
        </div>
    </section>
</main>
@endsection