@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h2 class="text-2xl font-bold mb-4">Detail Hutang</h2>

    <table class="table-auto border-collapse border border-gray-300 w-full">
        <tr>
            <th class="border px-4 py-2">Nama Pemberi Hutang</th>
            <td class="border px-4 py-2">{{ $hutang->nama_pemberi_hutang }}</td>
        </tr>
        <tr>
            <th class="border px-4 py-2">Jumlah</th>
            <td class="border px-4 py-2">Rp {{ number_format($hutang->jumlah,0,',','.') }}</td>
        </tr>
        <tr>
            <th class="border px-4 py-2">Tanggal Pinjam</th>
            <td class="border px-4 py-2">{{ $hutang->tanggal_pinjam }}</td>
        </tr>
        <tr>
            <th class="border px-4 py-2">Jatuh Tempo</th>
            <td class="border px-4 py-2">{{ $hutang->tanggal_jatuh_tempo ?? '-' }}</td>
        </tr>
        <tr>
            <th class="border px-4 py-2">Status</th>
            <td class="border px-4 py-2">{{ ucfirst($hutang->status) }}</td>
        </tr>
        <tr>
            <th class="border px-4 py-2">Keterangan</th>
            <td class="border px-4 py-2">{{ $hutang->keterangan ?? '-' }}</td>
        </tr>
    </table>

    <a href="{{ route('hutang.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded mt-4 inline-block">Kembali</a>
</div>
@endsection