@extends('layouts.admin')

@section('title', 'Detail Pinjaman ' . $pinjaman->nomor_pinjaman)

@section('content')
<div class="space-y-6">
    <!-- Header & Navigasi -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.pinjaman.index') }}" class="p-2.5 rounded-xl border border-slate-200 text-slate-500 hover:bg-slate-50 transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <div class="flex items-center gap-2.5">
                    <h1 class="text-xl font-black text-slate-900 tracking-tight">
                        {{ $pinjaman->nomor_pinjaman }}
                    </h1>
                    @if($pinjaman->status === 'lunas')
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-black bg-emerald-100 text-emerald-800 border border-emerald-300">
                        <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-600"></i>
                        <span>LUNAS</span>
                    </span>
                    @elseif($pinjaman->status === 'sebagian')
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-black bg-amber-100 text-amber-800 border border-amber-300">
                        <i data-lucide="clock" class="w-3.5 h-3.5 text-amber-600"></i>
                        <span>SEBAGIAN (MENCICIL)</span>
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-black bg-rose-100 text-rose-800 border border-rose-300">
                        <i data-lucide="alert-circle" class="w-3.5 h-3.5 text-rose-600"></i>
                        <span>BELUM LUNAS</span>
                    </span>
                    @endif
                </div>
                <p class="text-xs font-medium text-slate-500 mt-0.5">
                    Tanggal Pendaftaran: {{ $pinjaman->tanggal_pinjaman->translatedFormat('d F Y') }} • Didaftarkan oleh: {{ $pinjaman->createdBy->name ?? 'Admin' }}
                </p>
            </div>
        </div>

        @can('pinjaman.manage')
        <div class="flex items-center gap-2">
            @if($pinjaman->status !== 'lunas')
            <button type="button" onclick="openModalBayarTunai()" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm shadow-sm transition-all active:scale-[0.98]">
                <i data-lucide="hand-coins" class="w-4 h-4"></i>
                <span>Catat Pembayaran Cicilan</span>
            </button>
            @endif
        </div>
        @endcan
    </div>

    <!-- Alert Notifikasi Flash Message -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 flex items-center justify-between gap-3 animate-fade-in">
        <div class="flex items-center gap-3">
            <div class="p-1.5 rounded-xl bg-emerald-500 text-white">
                <i data-lucide="check" class="w-4 h-4"></i>
            </div>
            <p class="text-sm font-bold">{{ session('success') }}</p>
        </div>
        <button type="button" onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700 p-1">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 flex items-center justify-between gap-3 animate-fade-in">
        <div class="flex items-center gap-3">
            <div class="p-1.5 rounded-xl bg-rose-500 text-white">
                <i data-lucide="alert-triangle" class="w-4 h-4"></i>
            </div>
            <p class="text-sm font-bold">{{ session('error') }}</p>
        </div>
        <button type="button" onclick="this.parentElement.remove()" class="text-rose-500 hover:text-rose-700 p-1">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    <!-- Kartu Informasi Utama & Ringkasan -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 1. Profil Karyawan Peminjam -->
        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex flex-col justify-between">
            <div>
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-wider mb-4">Profil Peminjam</h3>
                <div class="flex items-center gap-4">
                    @if($pinjaman->pegawai->foto_profil)
                    <img src="{{ asset('storage/' . $pinjaman->pegawai->foto_profil) }}" alt="{{ $pinjaman->pegawai->nama_lengkap }}" class="w-16 h-16 rounded-2xl object-cover border-2 border-slate-200">
                    @else
                    <div class="w-16 h-16 rounded-2xl bg-primary-100 text-primary-700 flex items-center justify-center font-black text-xl border-2 border-primary-200">
                        {{ $pinjaman->pegawai->inisial ?? 'P' }}
                    </div>
                    @endif

                    <div class="min-w-0">
                        <h4 class="font-extrabold text-slate-900 text-base leading-snug truncate">
                            {{ $pinjaman->pegawai->nama_lengkap }}
                        </h4>
                        <p class="text-xs text-slate-500 font-semibold mt-0.5">
                            NIP: {{ $pinjaman->pegawai->nip }}
                        </p>
                        <span class="inline-block mt-2 px-2 py-0.5 rounded-md text-[11px] font-bold bg-slate-100 text-slate-700">
                            {{ $pinjaman->pegawai->jabatan->nama_jabatan ?? 'Pegawai' }}
                        </span>
                    </div>
                </div>

                <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs">
                    <div class="flex justify-between">
                        <span class="text-slate-400 font-medium">Departemen:</span>
                        <span class="font-bold text-slate-700">{{ $pinjaman->pegawai->departemen->nama_departemen ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-400 font-medium">Nomor Telepon:</span>
                        <span class="font-bold text-slate-700">{{ $pinjaman->pegawai->nomor_telepon ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-400 font-medium">Rekening Gaji:</span>
                        <span class="font-bold text-slate-700">{{ $pinjaman->pegawai->nama_bank ?? '-' }} ({{ $pinjaman->pegawai->nomor_rekening ?? '-' }})</span>
                    </div>
                </div>
            </div>

            <!-- Flagging Potong Gaji -->
            <div class="mt-5 p-3 rounded-2xl {{ $pinjaman->potong_gaji ? 'bg-emerald-50 border border-emerald-200 text-emerald-800' : 'bg-slate-100 border border-slate-200 text-slate-700' }} text-xs flex items-center gap-2.5">
                <i data-lucide="{{ $pinjaman->potong_gaji ? 'receipt' : 'banknote' }}" class="w-5 h-5 shrink-0 {{ $pinjaman->potong_gaji ? 'text-emerald-600' : 'text-slate-500' }}"></i>
                <div>
                    <p class="font-bold">
                        {{ $pinjaman->potong_gaji ? 'Skema: Otomatis Potong Gaji' : 'Skema: Bayar Tunai Mandiri' }}
                    </p>
                    <p class="text-[11px] {{ $pinjaman->potong_gaji ? 'text-emerald-600' : 'text-slate-500' }}">
                        {{ $pinjaman->potong_gaji ? 'Cicilan otomatis dipotong saat admin generate slip gaji' : 'Pegawai membayar langsung via kasir / setor tunai' }}
                    </p>
                </div>
            </div>
        </div>

        <!-- 2. Ringkasan Finansial & Progres Pelunasan -->
        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex flex-col justify-between">
            <div>
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-wider mb-4">Rincian Finansial</h3>

                <div class="space-y-3">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-500 font-medium">Pokok Pinjaman:</span>
                        <span class="font-extrabold text-slate-800">Rp {{ number_format($pinjaman->jumlah_pinjaman, 0, ',', '.') }}</span>
                    </div>

                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-500 font-medium">Fee ({{ number_format($pinjaman->persentase_fee, 1) }}%):</span>
                        <span class="font-extrabold text-amber-700">+ Rp {{ number_format($pinjaman->nominal_fee, 0, ',', '.') }}</span>
                    </div>

                    <div class="flex justify-between items-center text-base pt-2 border-t border-slate-100">
                        <span class="font-black text-slate-900">Total Tagihan:</span>
                        <span class="font-black text-slate-900 text-lg">Rp {{ number_format($pinjaman->total_pinjaman, 0, ',', '.') }}</span>
                    </div>

                    <div class="grid grid-cols-2 gap-3 pt-2">
                        <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-100">
                            <span class="text-[10px] font-bold text-slate-400 uppercase">Tenor Cicilan</span>
                            <p class="text-sm font-black text-slate-800 mt-0.5">{{ $pinjaman->tenor_bulan }} Bulan</p>
                        </div>
                        <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-100">
                            <span class="text-[10px] font-bold text-slate-400 uppercase">Cicilan / Bulan</span>
                            <p class="text-sm font-black text-slate-800 mt-0.5">Rp {{ number_format($pinjaman->nominal_angsuran_per_bulan, 0, ',', '.') }}</p>
                        </div>
                    </div>

                    <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-100 text-xs">
                        <span class="text-[10px] font-bold text-slate-400 uppercase block">Mulai Cicil dari Bulan</span>
                        <span class="font-extrabold text-slate-800 mt-0.5 block">{{ $pinjaman->periode_mulai_teks }}</span>
                    </div>
                </div>
            </div>

            <!-- Progres Bar Pembayaran -->
            <div class="mt-5 pt-4 border-t border-slate-100 space-y-2">
                <div class="flex justify-between text-xs font-bold">
                    <span class="text-slate-600">Progres Pelunasan:</span>
                    <span class="text-emerald-600">{{ $persentaseLunas }}%</span>
                </div>
                <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                    <div class="bg-emerald-500 h-full rounded-full transition-all" style="width: {{ $persentaseLunas }}%"></div>
                </div>
                <div class="flex justify-between text-[11px] font-medium pt-1">
                    <span class="text-emerald-700 font-bold">Terbayar: Rp {{ number_format($pinjaman->total_dibayar, 0, ',', '.') }}</span>
                    <span class="text-rose-600 font-bold">Sisa: Rp {{ number_format($pinjaman->sisa_pinjaman, 0, ',', '.') }}</span>
                </div>
            </div>
        </div>

        <!-- 3. Keterangan & Catatan Keperluan -->
        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex flex-col justify-between">
            <div>
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-wider mb-4">Catatan & Riwayat Ringkas</h3>

                <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 text-xs text-slate-700 leading-relaxed font-medium">
                    <p class="font-bold text-slate-800 mb-1">Keperluan / Keterangan:</p>
                    <p class="text-slate-600 whitespace-pre-line">{{ $pinjaman->keterangan ?: 'Tidak ada keterangan khusus.' }}</p>
                </div>

                <div class="mt-4 space-y-2.5 text-xs">
                    <div class="flex justify-between text-slate-600">
                        <span>Total Angsuran Masuk:</span>
                        <span class="font-bold text-slate-900">{{ $pinjaman->angsuran->count() }} Kali Pembayaran</span>
                    </div>
                    <div class="flex justify-between text-slate-600">
                        <span>Status Terkini:</span>
                        <span class="font-extrabold uppercase {{ $pinjaman->status === 'lunas' ? 'text-emerald-600' : ($pinjaman->status === 'sebagian' ? 'text-amber-600' : 'text-rose-600') }}">
                            {{ str_replace('_', ' ', $pinjaman->status) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Tombol Aksi Tambahan -->
            <div class="mt-5 pt-4 border-t border-slate-100 flex items-center justify-between gap-2">
                <a href="{{ route('admin.pinjaman.index') }}" class="text-xs font-bold text-slate-500 hover:text-slate-800">
                    &larr; Kembali ke Daftar
                </a>
            </div>
        </div>
    </div>

    <!-- Tabel Riwayat Cicilan / Angsuran -->
    <div class="bg-white rounded-3xl border border-slate-200/80 shadow-xs overflow-hidden">
        <div class="p-5 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h3 class="text-base font-black text-slate-900">Riwayat Pembayaran Cicilan & Angsuran</h3>
                <p class="text-xs text-slate-500 font-medium">Catatan lengkap seluruh pembayaran tunai maupun potongan otomatis dari slip gaji</p>
            </div>

            @can('pinjaman.manage')
            @if($pinjaman->status !== 'lunas')
            <button type="button" onclick="openModalBayarTunai()" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white font-bold text-xs transition-colors border border-emerald-200">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Catat Pembayaran Baru</span>
            </button>
            @endif
            @endcan
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-sm">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200 text-[11px] font-black text-slate-500 uppercase tracking-wider">
                        <th class="py-3 px-4 text-center">Angsuran Ke</th>
                        <th class="py-3 px-4">No. Transaksi</th>
                        <th class="py-3 px-4">Tanggal Bayar</th>
                        <th class="py-3 px-4 text-right">Nominal Bayar</th>
                        <th class="py-3 px-4 text-center">Metode</th>
                        <th class="py-3 px-4">Keterangan / Rujukan Slip</th>
                        <th class="py-3 px-4 text-center">Bukti Nota</th>
                        <th class="py-3 px-4">Diterima Oleh</th>
                        @can('pinjaman.manage')
                        <th class="py-3 px-4 text-center">Aksi</th>
                        @endcan
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($pinjaman->angsuran as $ang)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <!-- Angsuran Ke -->
                        <td class="py-3 px-4 text-center font-black text-slate-700">
                            #{{ $ang->angsuran_ke }}
                        </td>

                        <!-- No. Transaksi -->
                        <td class="py-3 px-4 font-bold text-slate-800">
                            {{ $ang->nomor_transaksi }}
                        </td>

                        <!-- Tanggal Bayar -->
                        <td class="py-3 px-4 text-slate-600 font-medium">
                            {{ $ang->tanggal_bayar->translatedFormat('d M Y') }}
                        </td>

                        <!-- Nominal Bayar -->
                        <td class="py-3 px-4 text-right font-black text-emerald-600">
                            Rp {{ number_format($ang->jumlah_bayar, 0, ',', '.') }}
                        </td>

                        <!-- Metode -->
                        <td class="py-3 px-4 text-center">
                            @if($ang->metode_pembayaran === 'potong_gaji')
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <i data-lucide="receipt" class="w-3 h-3 text-emerald-600"></i>
                                <span>Potong Gaji</span>
                            </span>
                            @elseif($ang->metode_pembayaran === 'transfer')
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                <i data-lucide="arrow-right-left" class="w-3 h-3 text-blue-600"></i>
                                <span>Transfer</span>
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-700 border border-slate-200">
                                <i data-lucide="banknote" class="w-3 h-3 text-slate-500"></i>
                                <span>Tunai</span>
                            </span>
                            @endif
                        </td>

                        <!-- Keterangan / Slip Gaji -->
                        <td class="py-3 px-4 text-xs text-slate-600">
                            {{ $ang->keterangan }}
                            @if($ang->penggajian)
                            <a href="{{ route('admin.penggajian.gaji-bersih.show', $ang->penggajian->id) }}" class="inline-block mt-0.5 font-bold text-primary-600 hover:underline">
                                [Lihat Slip: {{ $ang->penggajian->nomor_slip }}]
                            </a>
                            @endif
                        </td>

                        <!-- Bukti Nota -->
                        <td class="py-3 px-4 text-center">
                            @if($ang->bukti_bayar)
                            <a href="{{ asset('storage/' . $ang->bukti_bayar) }}" target="_blank" class="inline-flex items-center gap-1 text-xs font-bold text-primary-600 hover:underline">
                                <i data-lucide="paperclip" class="w-3.5 h-3.5"></i>
                                <span>Lihat Nota</span>
                            </a>
                            @else
                            <span class="text-xs text-slate-300">-</span>
                            @endif
                        </td>

                        <!-- Diterima Oleh -->
                        <td class="py-3 px-4 text-xs font-medium text-slate-600">
                            {{ $ang->diterimaOleh->name ?? 'Sistem' }}
                        </td>

                        <!-- Aksi Hapus (Jika salah input tunai) -->
                        @can('pinjaman.manage')
                        <td class="py-3 px-4 text-center">
                            @if($ang->metode_pembayaran !== 'potong_gaji')
                            <form action="{{ route('admin.pinjaman.hapus-cicilan', [$pinjaman->id, $ang->id]) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus catatan pembayaran cicilan ini? Sisa pinjaman akan bertambah kembali.')" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-1 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Angsuran">
                                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                </button>
                            </form>
                            @else
                            <span class="text-[10px] text-slate-400 italic">Auto Slip</span>
                            @endif
                        </td>
                        @endcan
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="py-10 text-center text-slate-400">
                            <i data-lucide="clock" class="w-10 h-10 mx-auto stroke-[1.2] mb-2 text-slate-300"></i>
                            <p class="font-bold text-slate-700">Belum Ada Pembayaran Cicilan</p>
                            <p class="text-xs text-slate-400 mt-0.5">
                                @if($pinjaman->potong_gaji)
                                Cicilan akan otomatis tercatat saat admin memproses generate slip gaji periode {{ $pinjaman->periode_mulai_teks }}.
                                @else
                                Klik tombol "Catat Pembayaran Cicilan" di atas untuk memasukkan pembayaran tunai dari pegawai.
                                @endif
                            </p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ================= MODAL CATAT PEMBAYARAN CICILAN ================= -->
<div id="modalBayarTunai" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-3xl max-w-md w-full p-6 shadow-2xl border border-slate-100">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold">
                    <i data-lucide="hand-coins" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="text-base font-black text-slate-900">Catat Pembayaran Cicilan</h3>
                    <p class="text-xs text-slate-500 font-medium">No. {{ $pinjaman->nomor_pinjaman }}</p>
                </div>
            </div>
            <button type="button" onclick="closeModalBayarTunai()" class="p-2 rounded-xl text-slate-400 hover:bg-slate-100 transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('admin.pinjaman.bayar-cicilan', $pinjaman->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf

            <!-- Info Pinjaman & Sisa -->
            <div class="p-3.5 rounded-2xl bg-emerald-50/60 border border-emerald-200/60 text-xs space-y-1">
                <div class="flex justify-between font-bold text-slate-700">
                    <span>Peminjam:</span>
                    <span>{{ $pinjaman->pegawai->nama_lengkap }}</span>
                </div>
                <div class="flex justify-between font-extrabold text-emerald-800">
                    <span>Sisa Tagihan:</span>
                    <span>Rp {{ number_format($pinjaman->sisa_pinjaman, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between text-slate-500 font-medium pt-1 border-t border-emerald-100">
                    <span>Cicilan per Bulan:</span>
                    <span>Rp {{ number_format($pinjaman->nominal_angsuran_per_bulan, 0, ',', '.') }}</span>
                </div>
            </div>

            <!-- Tanggal Bayar -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Tanggal Bayar</label>
                <input type="date" name="tanggal_bayar" value="{{ date('Y-m-d') }}" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
            </div>

            <!-- Jumlah Bayar -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Jumlah Pembayaran (Rp)</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">Rp</span>
                    <input type="number" name="jumlah_bayar" value="{{ min($pinjaman->sisa_pinjaman, $pinjaman->nominal_angsuran_per_bulan) }}" min="1000" max="{{ $pinjaman->sisa_pinjaman }}" step="1000" required class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-sm font-black focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                </div>
            </div>

            <!-- Metode Pembayaran -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Metode Bayar</label>
                <select name="metode_pembayaran" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 bg-white">
                    <option value="tunai">Tunai (Kasir / Admin)</option>
                    <option value="transfer">Transfer Bank</option>
                </select>
            </div>

            <!-- Upload Bukti Bayar -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Bukti Kuitansi / Struk (Opsional)</label>
                <input type="file" name="bukti_bayar" accept="image/*,.pdf" class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200">
            </div>

            <!-- Keterangan -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Keterangan Tambahan</label>
                <input type="text" name="keterangan" placeholder="Contoh: Pembayaran cicilan ke-{{ $pinjaman->angsuran->count() + 1 }} tunai di kantor" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
            </div>

            <!-- Tombol Submit -->
            <div class="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
                <button type="button" onclick="closeModalBayarTunai()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-bold text-xs hover:bg-slate-50 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs shadow-sm transition-colors">
                    Konfirmasi Pembayaran
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openModalBayarTunai() {
        document.getElementById('modalBayarTunai').classList.remove('hidden');
    }

    function closeModalBayarTunai() {
        document.getElementById('modalBayarTunai').classList.add('hidden');
    }
</script>
@endsection