@extends('student.layouts.app')

@section('content')
    <div class="w-full p-6">
        <h1 class="font-bold">Riwayat Transaksi</h1>
        <hr>
    </div>
    <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        @foreach ($pembayarans as $item)
            <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6" data-id="21" data-v0-t="card">
                <div class="flex gap-1 w-full justify-between">
                    <div class="flex flex-col mb-2" data-id="22">
                        <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight" data-id="23">
                            #{{ $item->no_pembayaran }}
                        </h3>

                    </div>
                    <div>
                        @switch($item->status_pembayaran)
                            @case('pending')
                                <span
                                    class="bg-yellow-500 py-1 px-2 text-white rounded-lg flex items-center">{{ strtoupper($item->status_pembayaran) }}</span>
                            @break

                            @case('reject')
                                <span
                                    class="bg-red-500 py-1 px-2 rounded-lg flex items-center">{{ strtoupper($item->status_pembayaran) }}</span>
                            @break

                            @default
                                <span
                                    class="bg-green-500 py-1 px-2  text-white rounded-lg flex items-center">{{ strtoupper($item->status_pembayaran) }}</span>
                        @endswitch

                    </div>
                </div>

                <div class="" data-id="24">

                    <div class="text-4xl font-bold" data-id="25">{{ number_format($item->total_pembayaran) }}</div>
                    <p class="text-sm text-gray-500 dark:text-gray-400" data-id="26">
                        {{ $item->tanggal_pembayaran }}
                    </p>
                </div>
            </div>
        @endforeach
    </div>
@endsection