@php
    // Tentukan jenis dan warna berdasarkan kode_biaya
    $jenis = $jenis ?? '';
    $jenisColor = $jenisColor ?? '';

    // Cek history cuti dari mahasiswa
    $isCuti = false;
    $cutiSemesterText = '';

    $cutiSemester = $angsuran->mahasiswa->cuti_semester;

    if (!is_null($cutiSemester)) {
        if (is_string($cutiSemester) && str_starts_with($cutiSemester, '[')) {
            $cutiSemester = json_decode($cutiSemester, true);
        }

        if (is_array($cutiSemester)) {
            if (in_array($d->semester, $cutiSemester)) {
                $isCuti = true;
                $cutiSemesterText = implode(', ', $cutiSemester);
            }
        } else {
            if ($cutiSemester == $d->semester) {
                $isCuti = true;
                $cutiSemesterText = $cutiSemester;
            }
        }
    }

    // ========== FORCE: Biaya RUTIN, BL, SP, BT TIDAK BOLEH CUTI ==========
    if (
        str_starts_with($d->kode_biaya, 'RUTIN-') ||
        str_starts_with($d->kode_biaya, 'BL-') ||
        str_starts_with($d->kode_biaya, 'SP-') ||
        str_starts_with($d->kode_biaya, 'BT-')
    ) {
        $isCuti = false;
        $cutiSemesterText = '';
    }

    // Ambil nomor urutan angsuran dan cek apakah angsuran pertama di semester 1
    $urutan = 0;
    $isFirstAngsuranSemesterSatu = false;

    if (str_starts_with($d->kode_biaya, 'SPB')) {
        preg_match('/SPB_(\d+)/', $d->kode_biaya, $matches);
        $urutan = (int) ($matches[1] ?? 0);
        $isFirstAngsuranSemesterSatu = $d->semester == 1 && $urutan == 1;
    } elseif (str_starts_with($d->kode_biaya, 'SPP') || str_starts_with($d->kode_biaya, 'UKT')) {
        preg_match('/^[A-Z]+(\d+)_/', $d->kode_biaya, $matches);
        $urutan = (int) ($matches[1] ?? 0);
        $isFirstAngsuranSemesterSatu = $d->semester == 1 && $urutan == 1;
    }

    // Status logic dengan pengecekan cuti
    if ($isCuti) {
        $statusText = 'Cuti';
        $statusColor = 'gray';
        $statusIcon = 'calendar-off';
        $statusDesc = 'Dicoret karena cuti semester ' . $cutiSemesterText;
    } elseif ($d->dibayar > 0 && $d->sisa > 0) {
        $statusText = 'Cicilan';
        $statusColor = 'amber';
        $statusIcon = 'layers';
        $statusDesc = 'Pembayaran cicilan, sisa tagihan masih ada';
    } elseif ($d->sisa <= 0 && $d->pembayaran_valid === 'pending') {
        $statusText = 'Menunggu Validasi';
        $statusColor = 'blue';
        $statusIcon = 'hourglass';
        $statusDesc = 'Pembayaran lunas menunggu validasi admin';
    } elseif ($d->sisa <= 0 && $d->pembayaran_valid === 'valid') {
        $statusText = 'Lunas';
        $statusColor = 'emerald';
        $statusIcon = 'check-circle';
        $statusDesc = 'Pembayaran telah lunas dan tervalidasi';
    } else {
        $statusText = 'Tagihan';
        $statusColor = 'slate';
        $statusIcon = 'clock';
        $statusDesc = 'Belum ada pembayaran';
    }

    // Cek apakah item ini bisa dibayar berdasarkan urutan (dari controller)
    $canPayBySequence = isset($bisaBayar[$d->id]) ? $bisaBayar[$d->id] : true;

    // Tentukan apakah checkbox bisa dicentang berdasarkan ROLE
    $checkboxDisabled = true;
    $checkboxTitle = '';

    if ($isCuti) {
        $checkboxTitle = 'Item ini dicoret karena cuti semester ' . $cutiSemesterText;
        $checkboxDisabled = true;
    } elseif ($d->sisa <= 0) {
        $checkboxTitle = 'Item sudah lunas';
        $checkboxDisabled = true;
    } elseif (isset($isSuperadmin) && $isSuperadmin) {
        // SUPERADMIN: BISA SEMUA
        $checkboxDisabled = false;
        $checkboxTitle = '';
    }
    // ========== MARKETING: bisa bayar angsuran pertama di Semester 1 DAN BT ==========
    elseif (isset($isMarketing) && $isMarketing) {
        // Marketing bisa bayar BT (Biaya Tetap)
        if ($jenis === 'BT') {
            $checkboxDisabled = false;
            $checkboxTitle = 'Marketing: Bisa membayar Biaya Tetap (BT)';
        }
        // Marketing bisa bayar angsuran pertama di Semester 1
        elseif ($isFirstAngsuranSemesterSatu) {
            $checkboxDisabled = false;
            $checkboxTitle = 'Marketing: Bisa membayar angsuran pertama di Semester 1';
        }
        // Marketing TIDAK bisa bayar yang lain
        else {
            $checkboxTitle =
                'Marketing hanya bisa membayar angsuran pertama di Semester 1 dan Biaya Tetap (BT)';
            $checkboxDisabled = true;
        }
    }
    // ========== PENAGIHAN: bisa bayar semua kecuali angsuran pertama Semester 1, plus BL, SP, RUTIN, BT ==========
    elseif (isset($isPenagihan) && $isPenagihan) {
        // Penagihan bisa bayar BT, BL, SP, RUTIN (tanpa batasan urutan)
        if (in_array($jenis, ['BT', 'BL', 'SP', 'RUTIN'])) {
            $checkboxDisabled = false;
            $checkboxTitle = 'Penagihan: Bisa membayar ' . $jenis;
        }
        // Penagihan bisa bayar angsuran selain yang pertama di Semester 1
        elseif (!$isFirstAngsuranSemesterSatu && in_array($jenis, ['SPB', 'SPP', 'UKT'])) {
            $checkboxDisabled = false;
            $checkboxTitle = 'Penagihan: Bisa membayar angsuran ini';
        }
        // Penagihan TIDAK bisa bayar angsuran pertama di Semester 1
        elseif ($isFirstAngsuranSemesterSatu && in_array($jenis, ['SPB', 'SPP', 'UKT'])) {
            $checkboxTitle = 'Penagihan tidak bisa membayar angsuran pertama di Semester 1';
            $checkboxDisabled = true;
        }
        // Untuk jenis lain yang tidak dikenali
        else {
            $checkboxDisabled = true;
            $checkboxTitle = 'Penagihan tidak memiliki izin untuk membayar item ini';
        }
    } elseif (!$canPayBySequence) {
        $checkboxDisabled = true;
        $checkboxTitle = 'Selesaikan tagihan periode sebelumnya terlebih dahulu';
    } else {
        $checkboxDisabled = true;
        $checkboxTitle = 'Anda tidak memiliki izin untuk melakukan pembayaran';
    }
@endphp

<div class="flex items-start gap-3 {{ $isCuti ? 'opacity-60 bg-gray-50 dark:bg-gray-800/20' : '' }}">
    <div class="flex-shrink-0">
        @if ($isCuti || $checkboxDisabled)
            <div class="relative group" data-id="{{ $d->id }}" data-sisa="{{ $d->sisa }}"
                data-name="{{ $d->komponen }}">
                <div class="w-5 h-5 flex items-center justify-center">
                    <i data-lucide="slash" class="w-4 h-4 text-gray-400"></i>
                </div>
                <div
                    class="absolute left-8 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                    {{ $checkboxTitle }}
                </div>
            </div>
        @elseif ($d->sisa > 0 && !$checkboxDisabled)
            <input type="checkbox" name="selected_details[]" value="{{ $d->id }}" data-sisa="{{ $d->sisa }}"
                data-name="{{ $d->komponen }}" form="bulkPaymentForm"
                class="payment-check w-5 h-5 text-indigo-600 rounded-lg border-slate-300 cursor-pointer"
                title="{{ $checkboxTitle }}">
        @endif
    </div>

    <div class="flex-1 min-w-0">
        <div class="flex items-center justify-between mb-2">
            <div class="flex items-center gap-2">
                <span
                    class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold rounded-lg bg-{{ $jenisColor }}-100 text-{{ $jenisColor }}-700 dark:bg-{{ $jenisColor }}-900/30 dark:text-{{ $jenisColor }}-400">
                    {{ $jenis }}
                </span>
                @if ($isCuti)
                    <span
                        class="text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 px-2 py-0.5 rounded-full">
                        Cuti SMT {{ $cutiSemesterText }}
                    </span>
                @endif

                <div class="relative group">
                    <i data-lucide="info" class="w-3 h-3 text-slate-400 cursor-help"></i>
                    <div
                        class="absolute left-6 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                        {{ $statusDesc }}
                    </div>
                </div>
            </div>
            <span
                class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $statusColor }}-50 text-{{ $statusColor }}-600 border border-{{ $statusColor }}-200 dark:bg-{{ $statusColor }}-500/10 dark:text-{{ $statusColor }}-400 dark:border-{{ $statusColor }}-500/20 whitespace-nowrap">
                <i data-lucide="{{ $statusIcon }}" class="w-3 h-3"></i>
                {{ $statusText }}
            </span>
        </div>

        <div
            class="font-medium text-slate-800 dark:text-slate-200 text-sm mb-2 break-words {{ $isCuti ? 'line-through text-gray-500' : '' }}">
            {{ $d->komponen }}
        </div>

        <div class="grid grid-cols-2 gap-2 text-xs mb-3">
            <div class="relative group">
                <span class="text-slate-500">Jatuh Tempo:</span>
                <span
                    class="font-medium ml-1 {{ $isCuti ? 'line-through text-gray-500' : '' }}">{{ \Carbon\Carbon::parse($d->tanggal_angsuran)->format('d/m/Y') }}</span>
                <div
                    class="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                    Tanggal jatuh tempo pembayaran
                </div>
            </div>
            <div class="relative group">
                <span class="text-slate-500">Total:</span>
                <span class="font-medium ml-1 {{ $isCuti ? 'line-through text-gray-500' : '' }}">Rp
                    {{ number_format($d->total, 0, ',', '.') }}</span>
                <div
                    class="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                    Total tagihan
                </div>
            </div>
            <div class="relative group">
                <span class="text-slate-500">Dibayar:</span>
                <span class="font-medium text-emerald-600 ml-1 {{ $isCuti ? 'line-through' : '' }}">Rp
                    {{ number_format($d->dibayar, 0, ',', '.') }}</span>
                <div
                    class="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                    Jumlah yang sudah dibayar
                </div>
            </div>
            <div class="relative group">
                <span class="text-slate-500">Sisa:</span>
                <span
                    class="font-medium ml-1 {{ $d->sisa <= 0 ? 'text-emerald-500' : ($isCuti ? 'text-gray-500 line-through' : 'text-rose-500') }}">
                    Rp {{ number_format($isCuti ? $d->total : $d->sisa, 0, ',', '.') }}
                </span>
                <div
                    class="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
                    {{ $isCuti ? 'Dicoret karena cuti' : 'Sisa tagihan yang harus dibayar' }}
                </div>
            </div>
        </div>

        <button type="button"
            onclick="showDetailModal({{ json_encode([
                'kode_biaya' => $d->kode_biaya,
                'komponen' => $d->komponen,
                'tanggal_angsuran' => $d->tanggal_angsuran,
                'total' => $d->total,
                'dibayar' => $d->dibayar,
                'sisa' => $d->sisa,
                'status' => $statusText,
                'statusDesc' => $statusDesc,
                'jenis' => $jenis,
                'jenisColor' => $jenisColor,
                'rencana_valid' => $d->rencana_valid,
                'id' => $d->id,
                'pembayaran_valid' => $d->pembayaran_valid,
                'is_cuti' => $isCuti,
                'cuti_semester' => $cutiSemesterText,
            ]) }})"
            class="w-full mt-2 px-3 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-all dark:bg-blue-900/30 dark:text-blue-400 flex items-center justify-center gap-2 text-sm">
            <i data-lucide="eye" class="w-4 h-4"></i>
            Lihat Detail
        </button>
    </div>
</div>