import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import ModalInput from '@/Components/ModalInput';

export default function ManualPayment({ santri, penalty, bill, fields }) {
    const [selectedSantri, setSelectedSantri] = useState(null);

    return (


        <div className='text-red-500'>
            <Head title="Manual Payment" />
            <ModalInput fields={fields} tableName={['payments', 'detail_payments']} initialData={selectedSantri} onClose={() => setSelectedSantri(null)} />
            {santri && santri.length > 0 ? santri.map((item, i) => (
                <div key={i} className="p-4 border-b">
                    <p>Nis: {item.user.nis}</p>
                    <p><strong>Santri:</strong> {item.nama}</p>

                    {item.payments && item.payments.length > 0 ? (
                        <div className="ml-4">
                            <p className="font-semibold">Payments:</p>
                            {item.payments.map((payment) => (
                                <div key={payment.id} className="ml-4">
                                    {payment.detail_payments && payment.detail_payments.length > 0 ? (
                                        <ul className="ml-6 list-disc">
                                            {payment.detail_payments.map((detail) => (
                                                <li key={detail.id}>
                                                    {detail.penalty ? `Denda: Rp ${detail.penalty}` : 'Tidak ada denda'}
                                                    <p>{detail.status}</p>
                                                </li>
                                            ))}
                                        </ul>
                                    ) : <p className="ml-4 text-gray-500">Tidak ada detail pembayaran.</p>}
                                </div>
                            ))}
                        </div>
                    ) : <p className="ml-4 text-gray-500">Tidak ada pembayaran.</p>}

                    <div>
                        <button className='btn btn-accent text-white mt-2' onClick={() => {
                            // console.log(item)
                            setSelectedSantri({
                                nama: item.nama,
                                alamat: item.alamat,
                                status_santri: item.status_santri,
                                role_santri: item.role_santri,
                                nis: item.user?.nis
                            })
                            document.getElementById('modal_input').checked = true
                        }}>Bayar</button>
                    </div>
                </div>
            )) : <p>Tidak ada data santri.</p>}
        </div>
    );
}
