{{-- resources/views/admin/keuangan/siswa/table_histori_item.blade.php --}}
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="mb-0 fw-bold text-secondary" style="font-size: 13px;"><i class="bi bi-clock-history me-2"></i>Histori Transaksi untuk {{ $tarif->kategori->nama ?? 'Item Ini' }}</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" style="font-size: 13px;">
                <thead class="table-light">
                    <tr>
                        <th class="text-center text-secondary ps-3" style="width: 5%">NO</th>
                        <th class="text-secondary" style="width: 25%">TANGGAL (HIJRIYAH)</th>
                        <th class="text-secondary" style="width: 30%">KETERANGAN CATATAN</th>
                        <th class="text-end text-secondary" style="width: 25%">SETORAN (MASUK)</th>
                        <th class="text-center text-secondary pe-3" style="width: 15%">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $historiItem = \App\Models\PembayaranKeuangan::where('siswa_id', $siswa->id)
                                            ->where('tarif_keuangan_id', $tarif->id)
                                            ->orderBy('tanggal_bayar', 'desc')
                                            ->get();
                    @endphp

                    @forelse($historiItem as $idxItem => $bayarItem)
                        <tr>
                            <td class="text-center text-muted ps-3">{{ $idxItem + 1 }}</td>
                            <td>
                                <span class="fw-bold text-dark d-block text-hijri-render" data-date="{{ $bayarItem->tanggal_bayar }}" style="font-size: 13px;">Memuat...</span>
                                <small class="text-muted" style="font-size: 10px;"><i class="bi bi-globe2 me-1"></i>{{ date('d-m-Y', strtotime($bayarItem->tanggal_bayar)) }} M</small>
                            </td>
                            <td class="text-muted">{{ $bayarItem->keterangan ?? '-' }}</td>
                            <td class="text-end fw-bold text-success">+ Rp {{ number_format($bayarItem->nominal_bayar, 0, ',', '.') }}</td>
                            <td class="text-center pe-3">
                                <div class="d-flex justify-content-center gap-1">
                                    <button type="button" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" style="font-size: 10px; padding: 2px 5px;" 
                                        onclick="cetakKuitansi('INV-{{ str_pad($bayarItem->id, 5, '0', STR_PAD_LEFT) }}', '{{ date('d-m-Y', strtotime($bayarItem->tanggal_bayar)) }}', '{{ $bayarItem->tanggal_bayar }}', '{{ addslashes($bayarItem->keterangan ?? ($bayarItem->tarif->kategori->nama ?? '-')) }}', {{ $bayarItem->nominal_bayar }}, '{{ trim(terbilang($bayarItem->nominal_bayar)) }}')" title="Cetak Kuitansi">
                                        <i class="bi bi-printer"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning d-inline-flex align-items-center" style="font-size: 10px; padding: 2px 5px;" data-bs-toggle="modal" data-bs-target="#modalEditBayarItem{{ $bayarItem->id }}" title="Edit Transaksi">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form action="{{ route('admin.keuangan.siswa.bayar.destroy', $bayarItem->id) }}" method="POST" class="d-inline form-delete">
                                        @csrf @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-outline-danger d-inline-flex align-items-center btn-delete" style="font-size: 10px; padding: 2px 5px;" title="Hapus Transaksi">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade text-start" id="modalEditBayarItem{{ $bayarItem->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-warning border-bottom-0">
                                        <h5 class="modal-title fw-bold text-dark" style="font-size: 15px;"><i class="bi bi-pencil-square me-2"></i>Koreksi Transaksi</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.siswa.bayar.update', $bayarItem->id) }}" method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body p-4">
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Koreksi Nominal Setoran <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text bg-light fw-bold">Rp</span>
                                                    <input type="number" name="nominal_bayar" class="form-control fw-bold text-dark" value="{{ $bayarItem->nominal_bayar }}" min="1" required>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-warning-emphasis">Tanggal Pembayaran (Hijriyah) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning fw-bold input-hijri-auto" id="edit_hijri_tgl_bayar_{{ $bayarItem->id }}" placeholder="Memuat kalender..." readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Tanggal Anchor (Masehi)</label>
                                                <input type="date" name="tanggal_bayar" class="form-control bg-light input-masehi-anchor" data-target="edit_hijri_tgl_bayar_{{ $bayarItem->id }}" value="{{ date('Y-m-d', strtotime($bayarItem->tanggal_bayar)) }}" required>
                                            </div>
                                            <div class="mb-1">
                                                <label class="form-label fw-medium">Keterangan / Catatan</label>
                                                <textarea name="keterangan" class="form-control" rows="2">{{ $bayarItem->keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light">
                                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-warning btn-sm fw-bold text-dark">Simpan Koreksi</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted fst-italic">
                                Belum ada transaksi pembayaran untuk item ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>