@extends('layouts.admin')

@section('title', 'Pinjaman Pegawai & Simpan Pinjam')

@section('content')
<div class="space-y-6">
    <!-- Header Halaman -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight flex items-center gap-2.5">
                <span class="p-2.5 rounded-2xl bg-primary-50 text-primary-600 border border-primary-100">
                    <i data-lucide="hand-coins" class="w-6 h-6"></i>
                </span>
                <span>Pinjaman Pegawai</span>
            </h1>
            <p class="text-sm font-medium text-slate-500 mt-1">
                Kelola pencatatan pinjaman, kalkulasi fee, pemotongan otomatis slip gaji, dan pembayaran cicilan pegawai.
            </p>
        </div>

        @can('pinjaman.manage')
        <div class="flex items-center gap-2">
            <button type="button" onclick="openModalTambahPinjaman()" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white font-bold text-sm shadow-sm shadow-primary-200 transition-all active:scale-[0.98]">
                <i data-lucide="plus-circle" class="w-4 h-4"></i>
                <span>Tambah Pinjaman Baru</span>
            </button>
        </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

    @if($errors->any())
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 space-y-1">
        <div class="flex items-center gap-2 font-bold text-sm">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-500"></i>
            <span>Terdapat beberapa kesalahan input:</span>
        </div>
        <ul class="list-disc list-inside text-xs space-y-0.5 text-rose-700 pl-6">
            @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Kartu Statistik & Metrik Simpan Pinjam -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- 1. Total Tagihan Pinjaman -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0 border border-blue-100">
                <i data-lucide="wallet" class="w-6 h-6"></i>
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Pinjaman</p>
                <h4 class="text-lg font-black text-slate-800 mt-0.5 truncate">
                    Rp {{ number_format($totalPinjamanSemua, 0, ',', '.') }}
                </h4>
                <p class="text-[11px] text-slate-500 font-medium">Pokok: Rp {{ number_format($totalPokokSemua, 0, ',', '.') }}</p>
            </div>
        </div>

        <!-- 2. Total Fee Layanan / Bunga -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 border border-amber-100">
                <i data-lucide="percent" class="w-6 h-6"></i>
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Fee Pinjaman</p>
                <h4 class="text-lg font-black text-amber-700 mt-0.5 truncate">
                    Rp {{ number_format($totalFeeSemua, 0, ',', '.') }}
                </h4>
                <p class="text-[11px] text-slate-500 font-medium">Akumulasi biaya fee/bunga</p>
            </div>
        </div>

        <!-- 3. Total Cicilan Terbayar -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100">
                <i data-lucide="badge-check" class="w-6 h-6"></i>
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Terbayar</p>
                <h4 class="text-lg font-black text-emerald-600 mt-0.5 truncate">
                    Rp {{ number_format($totalTerbayarSemua, 0, ',', '.') }}
                </h4>
                <p class="text-[11px] text-slate-500 font-medium">Lunas: {{ $jumlahLunas }} pinjaman</p>
            </div>
        </div>

        <!-- 4. Total Sisa Tagihan Berjalan -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center shrink-0 border border-rose-100">
                <i data-lucide="clock-alert" class="w-6 h-6"></i>
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Sisa Tagihan</p>
                <h4 class="text-lg font-black text-rose-600 mt-0.5 truncate">
                    Rp {{ number_format($totalSisaSemua, 0, ',', '.') }}
                </h4>
                <p class="text-[11px] text-slate-500 font-medium">Belum lunas berjalan</p>
            </div>
        </div>

        <!-- 5. Karyawan Aktif Meminjam -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center shrink-0 border border-primary-100">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Pinjaman Aktif</p>
                <h4 class="text-lg font-black text-primary-600 mt-0.5 truncate">
                    {{ $jumlahAktif }} Pegawai
                </h4>
                <p class="text-[11px] text-slate-500 font-medium">Sedang dalam cicilan</p>
            </div>
        </div>
    </div>

    <!-- Filter & Pencarian Bar -->
    <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs">
        <form method="GET" action="{{ route('admin.pinjaman.index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
            <!-- Search -->
            <div class="lg:col-span-2">
                <label class="block text-xs font-bold text-slate-600 mb-1">Cari No. Pinjaman / Karyawan</label>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" name="search" value="{{ $search }}" placeholder="No. PINJ, NIP, atau nama pegawai..." class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 font-medium">
                </div>
            </div>

            <!-- Filter Status -->
            <div>
                <label class="block text-xs font-bold text-slate-600 mb-1">Status Pelunasan</label>
                <select name="status" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 font-medium text-slate-700 bg-white">
                    <option value="semua" {{ $status === 'semua' ? 'selected' : '' }}>Semua Status</option>
                    <option value="belum_lunas" {{ $status === 'belum_lunas' ? 'selected' : '' }}>Belum Lunas</option>
                    <option value="sebagian" {{ $status === 'sebagian' ? 'selected' : '' }}>Sebagian (Mencicil)</option>
                    <option value="lunas" {{ $status === 'lunas' ? 'selected' : '' }}>Lunas</option>
                </select>
            </div>

            <!-- Filter Departemen -->
            <div>
                <label class="block text-xs font-bold text-slate-600 mb-1">Departemen</label>
                <select name="departemen_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 font-medium text-slate-700 bg-white">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                    <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>{{ $dep->nama_departemen }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Potong Gaji -->
            <div>
                <label class="block text-xs font-bold text-slate-600 mb-1">Skema Bayar</label>
                <select name="potong_gaji" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 font-medium text-slate-700 bg-white">
                    <option value="">Semua Skema</option>
                    <option value="1" {{ $potongGaji === '1' ? 'selected' : '' }}>Potong Gaji</option>
                    <option value="0" {{ $potongGaji === '0' ? 'selected' : '' }}>Tunai / Non-Potong</option>
                </select>
            </div>

            <!-- Tombol Filter -->
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 py-2 px-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-sm transition-colors flex items-center justify-center gap-1.5 shadow-xs">
                    <i data-lucide="filter" class="w-4 h-4"></i>
                    <span>Terapkan</span>
                </button>
                <a href="{{ route('admin.pinjaman.index') }}" class="p-2 rounded-xl border border-slate-200 hover:bg-slate-50 text-slate-500 transition-colors" title="Reset Filter">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </a>
            </div>
        </form>
    </div>

    <!-- Tabel Data Pinjaman Pegawai -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
        <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.5 px-4">No. Pinjaman & Tanggal</th>
                        <th class="py-3.5 px-4">Pegawai</th>
                        <th class="py-3.5 px-4 text-right">Pokok Pinjaman</th>
                        <th class="py-3.5 px-4 text-center">Fee (%)</th>
                        <th class="py-3.5 px-4 text-right">Total Pinjaman</th>
                        <th class="py-3.5 px-4 text-right">Cicilan/Bulan</th>
                        <th class="py-3.5 px-4 text-center">Skema Bayar</th>
                        <th class="py-3.5 px-4 text-right">Sisa Tagihan</th>
                        <th class="py-3.5 px-4 text-center">Status</th>
                        <th class="py-3.5 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($pinjamanList as $item)
                    @php
                        $persenBayar = $item->total_pinjaman > 0 ? min(100, round(($item->total_dibayar / $item->total_pinjaman) * 100)) : 0;
                    @endphp
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <!-- No. Pinjaman & Tgl -->
                        <td class="py-3 px-4">
                            <a href="{{ route('admin.pinjaman.show', $item->id) }}" class="font-extrabold text-primary-600 hover:underline">
                                {{ $item->nomor_pinjaman }}
                            </a>
                            <p class="text-xs text-slate-500 font-medium mt-0.5">
                                {{ $item->tanggal_pinjaman->translatedFormat('d M Y') }}
                            </p>
                        </td>

                        <!-- Pegawai -->
                        <td class="py-3 px-4">
                            <div class="font-bold text-slate-800">{{ $item->pegawai->nama_lengkap ?? '-' }}</div>
                            <p class="text-xs text-slate-500 font-medium">
                                NIP: {{ $item->pegawai->nip ?? '-' }} • {{ $item->pegawai->departemen->nama_departemen ?? '-' }}
                            </p>
                        </td>

                        <!-- Pokok Pinjaman -->
                        <td class="py-3 px-4 text-right font-bold text-slate-700">
                            Rp {{ number_format($item->jumlah_pinjaman, 0, ',', '.') }}
                        </td>

                        <!-- Fee % -->
                        <td class="py-3 px-4 text-center">
                            @if($item->persentase_fee > 0)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                {{ number_format($item->persentase_fee, 1) }}%
                            </span>
                            <p class="text-[10px] text-slate-400 mt-0.5 font-medium">Rp {{ number_format($item->nominal_fee, 0, ',', '.') }}</p>
                            @else
                            <span class="text-xs text-slate-400 font-bold">0%</span>
                            @endif
                        </td>

                        <!-- Total Pinjaman -->
                        <td class="py-3 px-4 text-right font-black text-slate-900">
                            Rp {{ number_format($item->total_pinjaman, 0, ',', '.') }}
                        </td>

                        <!-- Cicilan/Bulan & Tenor -->
                        <td class="py-3 px-4 text-right">
                            <span class="font-bold text-slate-800">Rp {{ number_format($item->nominal_angsuran_per_bulan, 0, ',', '.') }}</span>
                            <p class="text-[11px] text-slate-500 font-medium">x {{ $item->tenor_bulan }} Bulan</p>
                        </td>

                        <!-- Skema Bayar (Potong Gaji vs Tunai) -->
                        <td class="py-3 px-4 text-center">
                            @if($item->potong_gaji)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 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>
                            <p class="text-[10px] text-slate-400 font-medium mt-0.5">Mulai: {{ $item->periode_mulai_teks }}</p>
                            @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 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>

                        <!-- Sisa Tagihan & Progress -->
                        <td class="py-3 px-4 text-right">
                            <span class="font-black {{ $item->sisa_pinjaman > 0 ? 'text-rose-600' : 'text-emerald-600' }}">
                                Rp {{ number_format($item->sisa_pinjaman, 0, ',', '.') }}
                            </span>
                            <div class="w-24 ml-auto mt-1 bg-slate-100 h-1.5 rounded-full overflow-hidden">
                                <div class="bg-emerald-500 h-full rounded-full transition-all" style="width: {{ $persenBayar }}%"></div>
                            </div>
                            <span class="text-[10px] text-slate-400 font-bold">{{ $persenBayar }}% dibayar</span>
                        </td>

                        <!-- Status Badge -->
                        <td class="py-3 px-4 text-center">
                            @if($item->status === 'lunas')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-extrabold 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($item->status === 'sebagian')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-extrabold 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</span>
                            </span>
                            @elseif($item->status === 'dibatalkan')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-extrabold bg-slate-100 text-slate-600 border border-slate-300">
                                <span>Dibatalkan</span>
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-extrabold 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
                        </td>

                        <!-- Aksi Tombol -->
                        <td class="py-3 px-4 text-center">
                            <div class="flex items-center justify-center gap-1.5">
                                <a href="{{ route('admin.pinjaman.show', $item->id) }}" class="p-1.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-primary-50 hover:text-primary-600 transition-colors" title="Rincian & Riwayat Cicilan">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </a>

                                @can('pinjaman.manage')
                                @if($item->status !== 'lunas')
                                <button type="button" onclick="openModalBayarTunai('{{ $item->id }}', '{{ $item->nomor_pinjaman }}', '{{ $item->pegawai->nama_lengkap }}', '{{ $item->sisa_pinjaman }}', '{{ $item->nominal_angsuran_per_bulan }}')" class="p-1.5 rounded-xl border border-emerald-200 text-emerald-600 bg-emerald-50/50 hover:bg-emerald-600 hover:text-white transition-colors" title="Catat Cicilan Tunai">
                                    <i data-lucide="hand-coins" class="w-4 h-4"></i>
                                </button>
                                @endif

                                @if($item->angsuran->count() === 0)
                                <form action="{{ route('admin.pinjaman.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data pinjaman ini?')" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-xl border border-slate-200 text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Pinjaman">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                                @endif
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="py-12 text-center text-slate-400">
                            <i data-lucide="hand-coins" class="w-12 h-12 mx-auto stroke-[1.2] mb-3 text-slate-300"></i>
                            <p class="font-bold text-slate-700">Belum Ada Data Pinjaman Pegawai</p>
                            <p class="text-xs text-slate-400 mt-1">Gunakan tombol "Tambah Pinjaman Baru" di atas untuk mendaftarkan pinjaman baru.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($pinjamanList->hasPages())
        <div class="p-4 border-t border-slate-200/80 bg-slate-50/50">
            {{ $pinjamanList->links() }}
        </div>
        @endif
    </div>
</div>

<!-- ================= MODAL TAMBAH PINJAMAN BARU ================= -->
<div id="modalTambahPinjaman" 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-xl w-full p-6 shadow-2xl border border-slate-100 max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-5">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="hand-coins" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="text-lg font-black text-slate-900">Input Pinjaman Pegawai</h3>
                    <p class="text-xs text-slate-500 font-medium">Catat pinjaman baru dan tentukan skema pelunasan</p>
                </div>
            </div>
            <button type="button" onclick="closeModalTambahPinjaman()" 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.store') }}" method="POST" class="space-y-4">
            @csrf

            <!-- 1. Nama Karyawan -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">
                    Nama Karyawan <span class="text-rose-500">*</span>
                </label>
                <select name="pegawai_id" required class="w-full px-3 py-2.5 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="">-- Pilih Karyawan --</option>
                    @foreach($pegawaiList as $p)
                    <option value="{{ $p->id }}" {{ old('pegawai_id') == $p->id ? 'selected' : '' }}>
                        {{ $p->nama_lengkap }} ({{ $p->nip }}) - {{ $p->departemen->nama_departemen ?? '-' }}
                    </option>
                    @endforeach
                </select>
            </div>

            <!-- 2. Tanggal Pinjaman & Mulai Cicil Bulan -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Tanggal Pinjaman <span class="text-rose-500">*</span>
                    </label>
                    <input type="date" name="tanggal_pinjaman" value="{{ old('tanggal_pinjaman', 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>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Mulai Cicil dari Bulan <span class="text-rose-500">*</span>
                    </label>
                    <input type="month" name="mulai_cicil_bulan" value="{{ old('mulai_cicil_bulan', date('Y-m')) }}" 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">
                    <span class="text-[11px] text-slate-400 font-medium">Bulan pertama cicilan dipotong / dibayar</span>
                </div>
            </div>

            <!-- 3. Pokok Pinjaman & Fee Persen -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Jumlah Pinjaman (Pokok) <span class="text-rose-500">*</span>
                    </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" id="inputJumlahPinjaman" name="jumlah_pinjaman" value="{{ old('jumlah_pinjaman', 1000000) }}" min="10000" step="1000" required oninput="hitungKalkulasiPinjaman()" 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>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Fee (%) <span class="text-slate-400 font-normal">(Bunga/Biaya Layanan)</span>
                    </label>
                    <div class="relative">
                        <input type="number" id="inputFeePersen" name="persentase_fee" value="{{ old('persentase_fee', 0) }}" min="0" max="100" step="0.1" oninput="hitungKalkulasiPinjaman()" class="w-full pr-8 pl-3 py-2 rounded-xl border border-slate-200 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">%</span>
                    </div>
                </div>
            </div>

            <!-- 4. Tenor Bulan -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">
                    Tenor Jangka Waktu Cicilan (Bulan) <span class="text-rose-500">*</span>
                </label>
                <input type="number" id="inputTenorBulan" name="tenor_bulan" value="{{ old('tenor_bulan', 3) }}" min="1" max="60" required oninput="hitungKalkulasiPinjaman()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                <span class="text-[11px] text-slate-400 font-medium">Contoh: 1 bulan (lunas sekali bayar), 3 bulan, 6 bulan, 12 bulan</span>
            </div>

            <!-- Card Hasil Kalkulasi Realtime -->
            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
                <div class="flex justify-between items-center text-xs font-medium text-slate-600">
                    <span>Nominal Fee / Bunga:</span>
                    <span id="previewNominalFee" class="font-bold text-amber-700">Rp 0</span>
                </div>
                <div class="flex justify-between items-center text-xs font-medium text-slate-600">
                    <span>Total Tagihan Pinjaman:</span>
                    <span id="previewTotalPinjaman" class="font-black text-slate-900 text-sm">Rp 1.000.000</span>
                </div>
                <div class="flex justify-between items-center text-xs font-semibold text-primary-700 pt-2 border-t border-slate-200">
                    <span>Estimasi Angsuran / Bulan:</span>
                    <span id="previewAngsuranPerBulan" class="font-black text-primary-600 text-sm">Rp 333.334 / bln</span>
                </div>
            </div>

            <!-- 5. Flagging Potong Gaji -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">
                    Skema Pemotongan Cicilan <span class="text-rose-500">*</span>
                </label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 cursor-pointer hover:bg-slate-50 transition-colors">
                        <input type="radio" name="potong_gaji" value="1" checked class="text-primary-600 focus:ring-primary-500">
                        <div>
                            <p class="text-xs font-bold text-slate-800">Potong dari Gaji</p>
                            <p class="text-[10px] text-slate-500">Otomatis terpotong di slip gaji bulanan</p>
                        </div>
                    </label>

                    <label class="flex items-center gap-2.5 p-3 rounded-xl border border-slate-200 cursor-pointer hover:bg-slate-50 transition-colors">
                        <input type="radio" name="potong_gaji" value="0" class="text-primary-600 focus:ring-primary-500">
                        <div>
                            <p class="text-xs font-bold text-slate-800">Bayar Tunai / Mandiri</p>
                            <p class="text-[10px] text-slate-500">Karyawan setor tunai langsung ke kasir/admin</p>
                        </div>
                    </label>
                </div>
            </div>

            <!-- 6. Keterangan -->
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5">Keterangan / Keperluan Pinjaman</label>
                <textarea name="keterangan" rows="2" placeholder="Contoh: Pinjaman renovasi rumah darurat, biaya pendidikan anak, dll..." 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">{{ old('keterangan') }}</textarea>
            </div>

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

<!-- ================= MODAL CATAT PEMBAYARAN CICILAN TUNAI ================= -->
<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" id="modalBayarSubtitle">Pembayaran cicilan tunai/transfer</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 id="formBayarCicilan" 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">
                <div class="flex justify-between font-bold text-slate-700">
                    <span>Peminjam:</span>
                    <span id="bayarNamaKaryawan">-</span>
                </div>
                <div class="flex justify-between font-extrabold text-emerald-800 mt-1">
                    <span>Sisa Tagihan Saat Ini:</span>
                    <span id="bayarSisaPinjaman">Rp 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" id="inputJumlahBayar" name="jumlah_bayar" min="1000" 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-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>
    // 1. Modal Tambah Pinjaman
    function openModalTambahPinjaman() {
        document.getElementById('modalTambahPinjaman').classList.remove('hidden');
        hitungKalkulasiPinjaman();
    }

    function closeModalTambahPinjaman() {
        document.getElementById('modalTambahPinjaman').classList.add('hidden');
    }

    // 2. Kalkulasi Realtime Tambah Pinjaman
    function hitungKalkulasiPinjaman() {
        const pokok = parseFloat(document.getElementById('inputJumlahPinjaman').value) || 0;
        const feePersen = parseFloat(document.getElementById('inputFeePersen').value) || 0;
        const tenor = parseInt(document.getElementById('inputTenorBulan').value) || 1;

        const nominalFee = (pokok * feePersen) / 100;
        const total = pokok + nominalFee;
        const angsuran = tenor > 0 ? Math.ceil(total / tenor) : total;

        document.getElementById('previewNominalFee').innerText = 'Rp ' + nominalFee.toLocaleString('id-ID');
        document.getElementById('previewTotalPinjaman').innerText = 'Rp ' + total.toLocaleString('id-ID');
        document.getElementById('previewAngsuranPerBulan').innerText = 'Rp ' + angsuran.toLocaleString('id-ID') + ' / bln';
    }

    // 3. Modal Bayar Cicilan Tunai
    function openModalBayarTunai(id, noPinj, nama, sisa, estimasiCicilan) {
        document.getElementById('modalBayarSubtitle').innerText = 'No. ' + noPinj;
        document.getElementById('bayarNamaKaryawan').innerText = nama;
        document.getElementById('bayarSisaPinjaman').innerText = 'Rp ' + Number(sisa).toLocaleString('id-ID');

        // Form action
        document.getElementById('formBayarCicilan').action = '/admin/pinjaman/' + id + '/bayar-cicilan';

        // Nilai default pembayaran: nominal angsuran atau sisa (jika sisa lebih kecil)
        const defBayar = Math.min(parseFloat(sisa), parseFloat(estimasiCicilan) || parseFloat(sisa));
        document.getElementById('inputJumlahBayar').value = defBayar;
        document.getElementById('inputJumlahBayar').max = sisa;

        document.getElementById('modalBayarTunai').classList.remove('hidden');
    }

    function closeModalBayarTunai() {
        document.getElementById('modalBayarTunai').classList.add('hidden');
    }

    // Jalankan inisialisasi saat load
    document.addEventListener('DOMContentLoaded', function() {
        hitungKalkulasiPinjaman();
    });
</script>
@endsection