import { useState,useEffect } from "react";
import axios from "axios";

function Payment(){
    const [record, setRecord] = useState('')
    const [amountPaid, setAmountPaid] = useState('')
    const [paymentDate, setPaymentDate] = useState('')
    const [payments, setPayments] = useState([])

    const getAllPayments = async () => {
        try{
            const res = await axios.get('http://localhost:5000/api/payments')
            setPayments(res.data)
        }catch(error){
            console.log('error')
        }
    }

    useEffect(() => {
        getAllPayments()
    }, [])

    const handleSubmit = async (e) => {
e.preventDefault()
try{
    await axios.post('http://localhost:5000/api/payments', {
        record,
        amountPaid,
        paymentDate,
    })
    alert ('Payment added successfully')
    setRecord('')
    setPaymentDate('')
    setAmountPaid('')
    getAllPayments()
}catch(error){
    alert ('failed to add payment')
}
    }
     
    return(
        <div className="min-h-screen bg-gray-400">
            <h2 className="text-2xl font-bold text-gray-800 mb-6"> Paymnet</h2>
            <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-6 
            mb-6 flex flex-col gap-4 max-w-md">
                <div className="flex flex-col gap-1"> 
                <label className="text-sm font-medium text-gray-600">Record</label>
                <input type="text" value={record} 
                onChange={(e) => setRecord(e.target.value)}
                required 
                className="border border-gray-400 rounded-lg px-4 py-2 text-sm focus:outline-none
                focus:border-orange-500"
                />

                <label className="text-sm font-medium text-gray-600">Amount paid </label>
                   <input type="number" value={amountPaid} 
                onChange={(e) => setAmountPaid(e.target.value)}
                required 
                className="border border-gray-400 rounded-lg px-4 py-2 text-sm
                focus:outline-none focus:border-orange-400"
                />

                <label className="text-sm font-medium text-gray-600">Payment Date</label>
              <input type="date" value={paymentDate} 
                onChange={(e) => setPaymentDate(e.target.value)}
                className="border border-gray-600 rounded-lg px-4 py-2 text-sm
                focus:outline-none focus:border-orange-500"
                 />
                 </div>
                 <button type="submit" className="bg-orange-500 text-white font-medium
                 py-2 rounded-lg hover:bg-orange-400 transition-colors">Add Payment</button>
            </form>
            <h2 className="text-lg font-semibold text-gray-700 mb-3">Payment List</h2>
            <div className=" bg-white rounded-xl border border-gray-400 overflow-hidden"> 
            <table className="w-full text-sm">
 <thead className="bg-gray-50 text-gray-400 text-left ">
    <tr>
           <th className="px-4 py-3 font-medium">Record</th>
              <th className="px-4 py-3 font-medium">Amount Paid</th>
              <th className="px-4 py-3 font-medium">Payment Date</th>
    </tr>
 </thead>


                <tbody className="divide-y divide-gray-100">
                    {payments.map((payment) =>(
                        <tr key={payment._id} className="hover:bg-gray-50">
                            <td className="px-4 py-2 text-gray-800">{payment.record}</td>
                            <td className="px-4 py-2 text-gray-800">{payment.amountPaid}</td>
                            <td className="px-4 py-2 text-gray-800">{payment.paymentDate}</td>
                        </tr>
                    ))}
                   
                </tbody>
            </table>
            </div>
        </div>
    )
}

export default Payment