export default function ChangeInfo({ customer }: any) {    
    return (
        <div className="change-info">
            <h3 className="title">Thông tin tài khoản</h3>
            <form method="post" encType="multipart/form-data" name="account_form" className="col-right-tbl" id="js-customer-info">
                <table cellPadding={5} border={0} style={{
                    borderCollapse: 'collapse',
                    width: '100%',
                    borderColor: '#CCCCCC'
                }}>
                    <tbody>
                        <tr>
                            <td>Họ tên</td>
                            <td>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    name="fullname" 
                                    size={40} 
                                    defaultValue={customer?.name}
                                />
                            </td>
                        </tr>

                        <tr>
                            <td>Giới tính</td>
                            <td>
                                <label className="inline-flex items-center gap-1 mr-3 cursor-pointer">
                                    <input type="radio" name="sex" defaultValue="male" defaultChecked />
                                    <span> Nam </span>
                                </label>
                                <label className="inline-flex items-center gap-1 cursor-pointer">
                                    <input type="radio" name="sex" defaultValue="female" />
                                    <span> Nữ </span>
                                </label>
                            </td>
                        </tr>

                        <tr>
                            <td>Địa chỉ email</td>
                            <td>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    name="email" 
                                    size={40} 
                                    value={customer?.email}
                                    readOnly
                                />

                                <input 
                                    type="hidden" 
                                    name="old_email" 
                                    id="old_email" 
                                    defaultValue="ducdt@hurasoft.com" 
                                />
                            </td>
                        </tr>

                        <tr>
                            <td>Địa chỉ nhà</td>
                            <td>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    name="address" 
                                    id="address" 
                                    defaultValue={customer?.address || ""} 
                                    size={50} 
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>Tỉnh / TP</td>
                            <td>
                                <select 
                                    className="form-control" 
                                    name="province"
                                    defaultValue="Hà Nội"
                                >
                                    <option value="Hà Nội">Hà Nội</option><option value="TP HCM">TP HCM</option><option value="Hải Phòng">Hải Phòng</option><option value="Đà Nẵng">Đà Nẵng</option><option value="An Giang">An Giang</option><option value="Bà Rịa-Vũng Tàu">Bà Rịa-Vũng Tàu</option><option value="Bình Dương">Bình Dương</option><option value="Bình Phước">Bình Phước</option><option value="Bình Thuận">Bình Thuận</option><option value="Bình Định">Bình Định</option><option value="Bạc Liêu">Bạc Liêu</option><option value="Bắc Giang">Bắc Giang</option><option value="Bắc Kạn">Bắc Kạn</option><option value="Bắc Ninh">Bắc Ninh</option><option value="Bến Tre">Bến Tre</option><option value="Cao Bằng">Cao Bằng</option><option value="Cà Mau">Cà Mau</option><option value="Cần Thơ">Cần Thơ</option><option value="Gia Lai">Gia Lai</option><option value="Hà Giang">Hà Giang</option><option value="Hà Nam">Hà Nam</option><option value="Hà Tĩnh">Hà Tĩnh</option><option value="Hòa Bình">Hòa Bình</option><option value="Hải Dương">Hải Dương</option><option value="Hậu Giang">Hậu Giang</option><option value="Hưng Yên">Hưng Yên</option><option value="Khánh Hòa">Khánh Hòa</option><option value="Kiên Giang">Kiên Giang</option><option value="Kon Tum">Kon Tum</option><option value="Lai Châu">Lai Châu</option><option value="Lào Cai">Lào Cai</option><option value="Lâm Đồng">Lâm Đồng</option><option value="Lạng Sơn">Lạng Sơn</option><option value="Long An">Long An</option><option value="Nam Định">Nam Định</option><option value="Nghệ An">Nghệ An</option><option value="Ninh Bình">Ninh Bình</option><option value="Ninh Thuận">Ninh Thuận</option><option value="Phú Thọ">Phú Thọ</option><option value="Phú Yên">Phú Yên</option><option value="Quảng Bình">Quảng Bình</option><option value="Quảng Nam">Quảng Nam</option><option value="Quảng Ngãi">Quảng Ngãi</option><option value="Quảng Ninh">Quảng Ninh</option><option value="Quảng Trị">Quảng Trị</option><option value="Sóc Trăng">Sóc Trăng</option><option value="Sơn La">Sơn La</option><option value="Tây Ninh">Tây Ninh</option><option value="Thanh Hóa">Thanh Hóa</option><option value="Thái Bình">Thái Bình</option><option value="Thái Nguyên">Thái Nguyên</option><option value="Thừa Thiên-Huế">Thừa Thiên-Huế</option><option value="Tiền Giang">Tiền Giang</option><option value="Trà Vinh">Trà Vinh</option><option value="Tuyên Quang">Tuyên Quang</option><option value="Vĩnh Long">Vĩnh Long</option><option value="Vĩnh Phúc">Vĩnh Phúc</option><option value="Yên Bái">Yên Bái</option><option value="Đắk Lắk">Đắk Lắk</option><option value="Đồng Nai">Đồng Nai</option><option value="Đồng Tháp">Đồng Tháp</option><option value="Điện Biên">Điện Biên</option><option value="Đăk Nông">Đăk Nông</option>
                                </select>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>Điện thoại di động</td>
                            <td>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    name="mobile" 
                                    defaultValue={customer?.mobile || ""}
                                />
                            </td>
                        </tr>

                        <tr>
                            <td />
                            <td>
                                <button 
                                    type="button" 
                                    className="btn btn-danger uppercase"> 
                                    Thay đổi 
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="hidden" name="update" defaultValue="yes" />
            </form>

        </div>
    );
}   