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

export default function ManualPayment({ santri, penalty, bill, fields, options }) {
    const [selectedSantri, setSelectedSantri] = useState(null);
    return (
        <div className='text-red-500'>
            <Head title="Manual Payment" />
            <ModalInput fields={fields} options={options} 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 ? ( */}

                                    {payment.detail_payments.map((detail) => (
                                        <div key={detail.id}>
                                            <p>{detail.penalty ? `Denda: Rp ${detail.penalty}` : 'Tidak ada denda'}</p>
                                            <p>{detail.status}</p>

                                            <label htmlFor="my_modal_7" className="btn">show pembayaran</label>

                                            <input type="checkbox" id="my_modal_7" className="modal-toggle" />
                                            <div className="modal" role="dialog">
                                                <div className="modal-box">
                                                    <h3 className="text-lg font-bold">data pembayaran</h3>
                                                    <p className="py-4">{detail.payment_type?.payment_type}</p>
                                                    <div className="overflow-x-auto">
                                                        <table className="table">
                                                            <thead>
                                                                <tr>
                                                                    <th>tipe pembayaran</th>
                                                                    <th>tahun</th>
                                                                    <th>bulan</th>
                                                                    <th>denda</th>
                                                                    <th>status pemabayaran</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <th>{detail.payment_type?.payment_type}</th>
                                                                    <td className='text-center'>{detail.payment_year}</td>
                                                                    <td className='text-center'>{detail.payment_month}</td>
                                                                    <td className='text-center'>{detail.penalty}</td>
                                                                    <td className='text-center'>
                                                                        <div className='p-2 bg-red-600 text-white rounded-md'>
                                                                            {detail.status}
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
                                            </div>
                                        </div>
                                    ))}

                                    {/* ) : <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={() => {
                            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>
    );
}
