@extends('student.layouts.app')

@section('content')
    <div class="w-full p-6">
        <h1 class="font-bold">Tanggungan Siswa</h1>
        <hr>
    </div>
    <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        @foreach ($jenisPembayaranSiswas 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->jenis_pembayaran->nama_jenis_pembayaran }}
                    </h3>
                    <div class="text-2xl font-bold text-orange-500" data-id="25">{{ number_format($item->nominal) }}</div>
                </div>
                <div>
                    @if ($item->jenis_pembayaran->sifat_pembayaran == 'bulanan')
                        <p>
                            Bulan Ini
                        </p>
                        <p>
                            {{ date('F-Y') }}
                        </p>
                    @endif
                    @if ($item->jenis_pembayaran->sifat_pembayaran == 'tahunan')
                        <p>
                            Tahun Ini
                        </p>
                        <p>
                            {{ date('Y') }}
                        </p>
                    @endif
                </div>
            </div>

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

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