@extends('layouts.app', ['title' => 'Dashboard'])

@section('body')
    <main class="shell">
        <header class="topbar">
            <div>
                <div class="brand">ShopCart</div>
                <div class="lead" style="margin: 4px 0 0;">Welcome, {{ auth()->user()->name }}.</div>
            </div>

            <nav class="nav">
                <a class="button secondary" href="{{ route('checkout') }}">Checkout</a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="button link" type="submit">Logout</button>
                </form>
            </nav>
        </header>

        @if (session('status'))
            <div class="alert">{{ session('status') }}</div>
        @endif

        <section class="grid">
            <div class="panel">
                <h1>Dashboard</h1>
                <p class="lead">Review recent submitted fee payments and continue to checkout when you need to make a new payment.</p>
                <a class="button" href="{{ route('checkout') }}">Pay Fee</a>
            </div>

            <div class="panel">
                <h2 style="margin: 0 0 12px; font-size: 20px;">Recent Payments</h2>

                @if ($payments->isEmpty())
                    <p class="empty">No payments submitted yet.</p>
                @else
                    <div class="table-wrap">
                        <table>
                            <thead>
                                <tr>
                                    <th>Account No</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($payments as $payment)
                                    <tr>
                                        <td>{{ $payment->account_no }}</td>
                                        <td>RM {{ number_format((float) $payment->amount, 2) }}</td>
                                        <td>{{ ucfirst($payment->status) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </section>
    </main>
@endsection