@extends('layouts.app')

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

    <a href="{{ route('hutang.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md mb-4 inline-block">
        + Tambah Hutang
    </a>

    <table class="w-full border border-gray-300 bg-white rounded-lg shadow-md">
        <thead>
            <tr class="bg-gray-100">
                <th class="px-4 py-2 border">Nama Pemberi Hutang</th>
                <th class="px-4 py-2 border">Jumlah</th>
                <th class="px-4 py-2 border">Tanggal Pinjam</th>
                <th class="px-4 py-2 border">Jatuh Tempo</th>
                <th class="px-4 py-2 border">Status</th>
                <th class="px-4 py-2 border">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach($hutangs as $hutang)
            <tr>
                <td class="px-4 py-2 border">{{ $hutang->nama_pemberi_hutang }}</td>
                <td class="px-4 py-2 border text-right">Rp {{ number_format($hutang->jumlah,0,',','.') }}</td>
                <td class="px-4 py-2 border">{{ $hutang->tanggal_pinjam }}</td>
                <td class="px-4 py-2 border">{{ $hutang->tanggal_jatuh_tempo ?? '-' }}</td>
                <td class="px-4 py-2 border">{{ ucfirst($hutang->status) }}</td>
                <td class="px-4 py-2 border">
                    <a href="{{ route('hutang.edit', $hutang) }}" class="bg-yellow-400 px-2 py-1 rounded">Edit</a>
                    <form action="{{ route('hutang.destroy', $hutang) }}" method="POST" class="inline-block"
                        onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="bg-red-500 text-white px-2 py-1 rounded">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection