// src/components/AccountSetting.tsx
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '../../store/themeConfigSlice';
import { showMessage } from '../../general';
import { ICountry, IState, ICity } from 'country-state-city';
import { Country, State, City } from 'country-state-city';
import { useProfile } from '../../contexts/ProfileContext';

const AccountSetting = () => {
    const dispatch = useDispatch();
    const { profile: contextProfile, setProfile: setContextProfile, fetchProfileData } = useProfile();
    
    useEffect(() => {
        dispatch(setPageTitle('Account Setting'));
    }, [dispatch]);

    const [tabs, setTabs] = useState<string>('home');
    const toggleTabs = (name: string) => {
        setTabs(name);
    };
    
    const [localProfile, setLocalProfile] = useState({
        ...contextProfile,
        profileImage: contextProfile.profileImage || '/assets/images/profile.png'
    });

    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [confirmNewPassword, setConfirmNewPassword] = useState('');
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const [isUpdating, setIsUpdating] = useState(false);


    // Country-State-City data
    const [countries, setCountries] = useState<ICountry[]>([]);
    const [states, setStates] = useState<IState[]>([]);
    const [cities, setCities] = useState<ICity[]>([]);

    const userType = localStorage.getItem("userType");

    // Sync local profile with context profile
    useEffect(() => {
        setLocalProfile({
            ...contextProfile,
            profileImage: contextProfile.profileImage || '/assets/images/profile.png'
        });
    }, [contextProfile]);

    useEffect(() => {
        setCountries(Country.getAllCountries());
        fetchProfileData();
    }, []);

    useEffect(() => {
        if (localProfile.country) {
            const countryCode = countries.find(c => c.name === localProfile.country)?.isoCode;
            if (countryCode) {
                setStates(State.getStatesOfCountry(countryCode));
            }
        }
    }, [localProfile.country, countries]);

    useEffect(() => {
        if (localProfile.country && localProfile.state) {
            const countryCode = countries.find(c => c.name === localProfile.country)?.isoCode;
            const stateCode = states.find(s => s.name === localProfile.state)?.isoCode;
            if (countryCode && stateCode) {
                setCities(City.getCitiesOfState(countryCode, stateCode));
            }
        }
    }, [localProfile.state, localProfile.country, countries, states]);

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            const file = e.target.files[0];
            setSelectedFile(file);
        }
    };

    const handleAddressUpdate = async () => {
    setIsUpdating(true);
    try {
        let profileImageBase64 = '';
        
        if (selectedFile) {
            profileImageBase64 = await new Promise<string>((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result as string);
                reader.onerror = error => reject(error);
                reader.readAsDataURL(selectedFile);
            });
        }

        const payload = {
            user_id: localStorage.getItem('userId'),
            email: localProfile.email,
            name: localProfile.name,
            start_time: localProfile.start_date,
            end_time: localProfile.end_date,
            state: localProfile.state,
            city: localProfile.city,
            profile_image: selectedFile ? profileImageBase64 : localProfile.profileImage,
            address: localProfile.address,
            country: localProfile.country,
        };

        const response = await fetch('/api/update_profiledata_company_admin', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        });

        const data = await response.json();
        
        if (data.status === true) {
            showMessage('Profile updated successfully', 'success');
            
            const updatedProfile = {
                ...localProfile,
                profileImage: data.profile_image || localProfile.profileImage
            };
            
            setLocalProfile(updatedProfile);
            setContextProfile(updatedProfile);
            setSelectedFile(null);
            
            await fetchProfileData();
        } else {
            throw new Error(data.message || 'Failed to update profile');
        }
    } catch (error) {
        console.error('Error updating profile:', error);
        showMessage('Error updating profile. Please try again.', 'error');
    } finally {
        setIsUpdating(false);
    }
};

    const handleChangePassword = () => {
        if (newPassword !== confirmNewPassword) {
            showMessage('New and confirm password does not match!','error');
            return;
        }

        const email = localStorage.getItem('email');
        
        fetch('/api/change_password', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                new_password: newPassword,
                type:'web'
            }),
        })
            .then(response => response.json())
            .then(data => {
                showMessage(data.message, data.status);
            })
            .catch(error => {
                console.error('Error changing password:', error);
                showMessage('Error changing password. Please try again.','error');
            });
    };

    const handleCountryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedCountry = e.target.value;
        setLocalProfile({
            ...localProfile,
            country: selectedCountry,
            state: '',
            city: ''
        });
    };

    const handleStateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedState = e.target.value;
        setLocalProfile({
            ...localProfile,
            state: selectedState,
            city: ''
        });
    };

    const handleCityChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedCity = e.target.value;
        setLocalProfile({
            ...localProfile,
            city: selectedCity
        });
    };

    return (
        <div>
            <div className="pt-5">
                <div className="flex items-center justify-between mb-5">
                    <h5 className="font-semibold text-lg dark:text-white-light">Profile</h5>
                </div>
                <div>
                    <ul className="sm:flex font-semibold border-b border-[#ebedf2] dark:border-[#191e3a] mb-5 whitespace-nowrap overflow-y-auto">
                        <li className="inline-block">
                            <button
                                onClick={() => toggleTabs('home')}
                                className={`flex gap-2 p-4 border-b border-transparent hover:border-primary hover:text-primary ${tabs === 'home' ? '!border-primary text-primary' : ''}`}
                            >
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5">
                                    <path
                                        opacity="0.5"
                                        d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z"
                                        stroke="currentColor"
                                        strokeWidth="1.5"
                                    />
                                    <path d="M12 15L12 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                </svg>
                                Home
                            </button>
                        </li>
                        <li className="inline-block">
                            <button
                                onClick={() => toggleTabs('change-password')}
                                className={`flex gap-2 p-4 border-b border-transparent hover:border-primary hover:text-primary ${tabs === 'change-password' ? '!border-primary text-primary' : ''}`}
                            >
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5">
                                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20Z" fill="currentColor" />
                                    <path d="M16 12.9V14H8V11H16V12.9Z" fill="currentColor" />
                                </svg>
                                Change Password
                            </button>
                        </li>
                    </ul>
                </div>
                {tabs === 'home' ? (
                    <div>
                        <form className="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-black">
                            <h6 className="text-lg font-bold mb-5">General Information</h6>
                            <div className="flex flex-col sm:flex-row">
                                <div className="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
                                    <img 
                                        src={selectedFile ? URL.createObjectURL(selectedFile) : localProfile.profileImage} 
                                        alt="profile" 
                                        className="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto" 
                                    />
                                    <div className="mt-3 flex flex-col items-center">
                                        <label className="btn btn-primary cursor-pointer">
                                            Upload Photo
                                            <input 
                                                type="file" 
                                                className="hidden" 
                                                accept="image/*"
                                                onChange={handleFileChange}
                                            />
                                        </label>
                                    </div>
                                </div>
                                <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                                    <div>
                                        <label htmlFor="name">Company Name</label>
                                        <input 
                                            id="name" 
                                            type="text" 
                                            className="form-input" 
                                            value={localProfile.name} 
                                              onChange={(e) => setLocalProfile({...localProfile, name: e.target.value})}
                                        />
                                    </div>
                                    <div>
                                        <label htmlFor="email">Email</label>
                                        <input 
                                            id="email" 
                                            type="text" 
                                            className="form-input" 
                                            value={localProfile.email} 
                                            onChange={(e) => setLocalProfile({...localProfile, email: e.target.value})}
                                        />
                                    </div>
                                    {userType === "admin" && (
                                        <>
                                            <div>
                                                <label htmlFor="company_id">Company ID</label>
                                                <input 
                                                    id="company_id" 
                                                    type="text" 
                                                    className="form-input" 
                                                    value={localProfile.company_id} 
                                                    readOnly
                                                />
                                            </div>
                                            <div>
                                                <label htmlFor="plan_id">Plan ID</label>
                                                <input 
                                                    id="plan_id" 
                                                    type="text" 
                                                    className="form-input" 
                                                    value={localProfile.plan_id} 
                                                    readOnly
                                                />
                                            </div>
                                            <div>
                                                <h6 className="text-lg font-bold mb-5">Plan Details</h6>
                                            </div>
                                            <div></div>
                                            <div>
                                                <label htmlFor="start_date">Start Date</label>
                                                <input 
                                                    id="start_date" 
                                                    type="text" 
                                                    className="form-input" 
                                                    value={localProfile.start_date} 
                                                    readOnly
                                                />
                                            </div>
                                            <div>
                                                <label htmlFor="end_date">End Date</label>
                                                <input 
                                                    id="end_date" 
                                                    type="text" 
                                                    className="form-input" 
                                                    value={localProfile.end_date} 
                                                    readOnly
                                                />
                                            </div>
                                        </>
                                    )}
                                    
                                    <div className="sm:col-span-2">
                                        <h6 className="text-lg font-bold mb-5">Address Information</h6>
                                    </div>
                                    <div className="sm:col-span-2">
                                        <label htmlFor="address">Street Address</label>
                                        <input 
                                            id="address" 
                                            type="text" 
                                            className="form-input" 
                                            value={localProfile.address}
                                            onChange={(e) => setLocalProfile({...localProfile, address: e.target.value})}
                                        />
                                    </div>
                                    <div>
                                        <label htmlFor="country">Country</label>
                                        <select
                                            id="country"
                                            className="form-select"
                                            value={localProfile.country}
                                            onChange={handleCountryChange}
                                        >
                                            <option value="">Select Country</option>
                                            {countries.map((country) => (
                                                <option key={country.isoCode} value={country.name}>
                                                    {country.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                    <div>
                                        <label htmlFor="state">State/Province</label>
                                        <select
                                            id="state"
                                            className="form-select"
                                            value={localProfile.state}
                                            onChange={handleStateChange}
                                            disabled={!localProfile.country}
                                        >
                                            <option value="">Select State</option>
                                            {states.map((state) => (
                                                <option key={state.isoCode} value={state.name}>
                                                    {state.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                    <div>
                                        <label htmlFor="city">City</label>
                                        <select
                                            id="city"
                                            className="form-select"
                                            value={localProfile.city}
                                            onChange={handleCityChange}
                                            disabled={!localProfile.state}
                                        >
                                            <option value="">Select City</option>
                                            {cities.map((city) => (
                                                <option key={city.name} value={city.name}>
                                                    {city.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                    <div className="sm:col-span-2 mt-3">
                                        <button 
                                            type="button" 
                                            className="btn btn-primary"
                                            onClick={handleAddressUpdate}
                                        >
                                           {
                                            isUpdating ? "Updating..." : "Save Details"
                                           }  
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                ) : null}
                {tabs === 'change-password' ? (
                    <div>
                        <form className="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-black">
                            <div className="flex flex-col sm:flex-row">
                                <div className="flex-1 flex-col gap-5">
                                    <div className="sm:col-span-2 mt-5">
                                        <label htmlFor="current_password">Current Password</label>
                                        <input
                                            id="current_password"
                                            type="password"
                                            className="form-input"
                                            value={currentPassword}
                                            onChange={(e) => setCurrentPassword(e.target.value)}
                                            placeholder="Enter current password"
                                        />
                                    </div>

                                    <div className="sm:col-span-2 mt-5">
                                        <label htmlFor="new_password">New Password</label>
                                        <input
                                            id="new_password"
                                            type="password"
                                            className="form-input"
                                            value={newPassword}
                                            onChange={(e) => setNewPassword(e.target.value)}
                                            placeholder="Enter new password"
                                        />
                                    </div>

                                    <div className="sm:col-span-2 mt-5">
                                        <label htmlFor="confirm_new_password">Confirm New Password</label>
                                        <input
                                            id="confirm_new_password"
                                            type="password"
                                            className="form-input"
                                            value={confirmNewPassword}
                                            onChange={(e) => setConfirmNewPassword(e.target.value)}
                                            placeholder="Confirm new password"
                                        />
                                    </div>

                                    <div className="sm:col-span-2 mt-3">
                                        <button
                                            type="button"
                                            className="btn btn-primary"
                                            onClick={handleChangePassword}
                                        >
                                            Change Password
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                ) : null}
            </div>
        </div>
    );
};

export default AccountSetting;




























// import { useEffect, useState } from 'react';
// import { useDispatch } from 'react-redux';
// import { setPageTitle } from '../../store/themeConfigSlice';
// import { showMessage } from '../../general';
// import { ICountry, IState, ICity } from 'country-state-city';
// import { Country, State, City } from 'country-state-city';

// const getProfileData = async () => {
//     try {
//         const response = await fetch('/api/get_profiledata_company_admin', {
//             method: 'POST',
//             headers: {
//                 'Accept': 'application/json',
//                 'Content-Type': 'application/json',
//             },
//             body: JSON.stringify({ user_id: localStorage.getItem('userId') }),
//         });

//         const data = await response.json();

//         if (data.status === 'success') {
//             return data.data;
//         } else {
//             throw new Error(data.message || 'Failed to fetch profile');
//         }
//     } catch (error) {
//         console.error('Error fetching profile data:', error);
//         throw error;
//     }
// };

// const AccountSetting = () => {
//     const dispatch = useDispatch();
//     useEffect(() => {
//         dispatch(setPageTitle('Account Setting'));
//     }, [dispatch]);

//     const [tabs, setTabs] = useState<string>('home');
//     const toggleTabs = (name: string) => {
//         setTabs(name);
//     };
    
//     const [profile, setProfile] = useState({
//         name: '',
//         email: '',
//         start_date: '',
//         end_date: '',
//         plan_id: '',
//         company_id: '',
//         address: '',
//         country: '',
//         state: '',
//         city: '',
//         zip: '',
//         profileImage: '/assets/images/profile.png'
//     });

//     const [currentPassword, setCurrentPassword] = useState('');
//     const [newPassword, setNewPassword] = useState('');
//     const [confirmNewPassword, setConfirmNewPassword] = useState('');
//     const [selectedFile, setSelectedFile] = useState<File | null>(null);

//     // Country-State-City data
//     const [countries, setCountries] = useState<ICountry[]>([]);
//     const [states, setStates] = useState<IState[]>([]);
//     const [cities, setCities] = useState<ICity[]>([]);

//     const userType = localStorage.getItem("userType")
//     useEffect(() => {
//         setCountries(Country.getAllCountries());
//     }, []);

//     useEffect(() => {
//         if (profile.country) {
//             const countryCode = countries.find(c => c.name === profile.country)?.isoCode;
//             if (countryCode) {
//                 setStates(State.getStatesOfCountry(countryCode));
//             }
//         }
//     }, [profile.country, countries]);

//     useEffect(() => {
//         if (profile.country && profile.state) {
//             const countryCode = countries.find(c => c.name === profile.country)?.isoCode;
//             const stateCode = states.find(s => s.name === profile.state)?.isoCode;
//             if (countryCode && stateCode) {
//                 setCities(City.getCitiesOfState(countryCode, stateCode));
//             }
//         }
//     }, [profile.state, profile.country, countries, states]);
//         const fetchProfile = async () => {
//             try {
//                 const data = await getProfileData();
//                 setProfile({
//                     name: data.name || '',
//                     email: data.email || '',
//                     start_date: data.start_date || '',
//                     end_date: data.end_date || '',
//                     plan_id: data.plan_id || '',
//                     company_id: data.company_id || '',
//                     address: data.address || '',
//                     country: data.country || '',
//                     state: data.state || '',
//                     city: data.city || '',
//                     zip: data.zip || '',
//                     profileImage: data.profile_image || '/assets/images/profile.png'
//                 });
//             } catch (err) {
//                 showMessage(err.message, 'error');
//             }
//         };

//     useEffect(() => {
    

//         fetchProfile();
//     }, []);

//     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//         if (e.target.files && e.target.files.length > 0) {
//             const file = e.target.files[0];
//             setSelectedFile(file);
//         }
//     };

//     const handleAddressUpdate = async () => {
//         try {
//             let profileImageBase64 = '';
            
//             // Convert selected file to base64 if exists
//             if (selectedFile) {
//                 profileImageBase64 = await new Promise<string>((resolve, reject) => {
//                     const reader = new FileReader();
//                     reader.onload = () => resolve(reader.result as string);
//                     reader.onerror = error => reject(error);
//                     reader.readAsDataURL(selectedFile);
//                 });
//             }

//             const payload = {
//                 user_id: localStorage.getItem('userId'),
//                 email: profile.email,
//                 name: profile.name,
//                 start_time: profile.start_date,
//                 end_time: profile.end_date,
//                 state: profile.state,
//                 city: profile.city,
//                 profile_image: selectedFile ? profileImageBase64 : profile.profileImage,
//                 address: profile.address,
//                 country: profile.country,
                 
//             };

//             const response = await fetch('/api/update_profiledata_company_admin', {
//                 method: 'POST',
//                 headers: {
//                     'Accept': 'application/json',
//                     'Content-Type': 'application/json',
//                 },
//                 body: JSON.stringify(payload),
//             });

//             const data = await response.json();
            
//             if (data.status === true) {
//                 showMessage('Profile updated successfully', 'success');
//                 // Update profile image in state if new image was uploaded
//                 if (selectedFile) {
//                     setProfile(prev => ({
//                         ...prev,
//                         profileImage: data.profile_image || prev.profileImage
//                     }));
//                     setSelectedFile(null);
//                 }
//                 fetchProfile();
//             } else {
//                 throw new Error(data.message || 'Failed to update profile');
//             }
//         } catch (error) {
//             console.error('Error updating profile:', error);
//             showMessage('Error updating profile. Please try again.', 'error');
//         }
//     };

//     const handleChangePassword = () => {
//         if (newPassword !== confirmNewPassword) {
//             showMessage('New and confirm password does not match!','error');
//             return;
//         }

//         const email = localStorage.getItem('email');
        

//         fetch('/api/change_password', {
//             method: 'POST',
//             headers: {
//                 'Accept': 'application/json',
//                 'Content-Type': 'application/json',
//             },
//             body: JSON.stringify({
//                 email: email,
//                 new_password: newPassword,
//                 type:'web'
//             }),
//         })
//             .then(response => response.json())
//             .then(data => {
//                 showMessage(data.message, data.status);
//                 // window.location.reload();
//             })
//             .catch(error => {
//                 console.error('Error changing password:', error);
//                 showMessage('Error changing password. Please try again.','error');
//             });
//     };

//     const handleCountryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
//         const selectedCountry = e.target.value;
//         setProfile({
//             ...profile,
//             country: selectedCountry,
//             state: '',
//             city: ''
//         });
//     };

//     const handleStateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
//         const selectedState = e.target.value;
//         setProfile({
//             ...profile,
//             state: selectedState,
//             city: ''
//         });
//     };

//     const handleCityChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
//         const selectedCity = e.target.value;
//         setProfile({
//             ...profile,
//             city: selectedCity
//         });
//     };

//     return (
//         <div>
//             <div className="pt-5">
//                 <div className="flex items-center justify-between mb-5">
//                     <h5 className="font-semibold text-lg dark:text-white-light">Settings</h5>
//                 </div>
//                 <div>
//                     <ul className="sm:flex font-semibold border-b border-[#ebedf2] dark:border-[#191e3a] mb-5 whitespace-nowrap overflow-y-auto">
//                         <li className="inline-block">
//                             <button
//                                 onClick={() => toggleTabs('home')}
//                                 className={`flex gap-2 p-4 border-b border-transparent hover:border-primary hover:text-primary ${tabs === 'home' ? '!border-primary text-primary' : ''}`}
//                             >
//                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5">
//                                     <path
//                                         opacity="0.5"
//                                         d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z"
//                                         stroke="currentColor"
//                                         strokeWidth="1.5"
//                                     />
//                                     <path d="M12 15L12 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
//                                 </svg>
//                                 Home
//                             </button>
//                         </li>
//                         <li className="inline-block">
//                             <button
//                                 onClick={() => toggleTabs('change-password')}
//                                 className={`flex gap-2 p-4 border-b border-transparent hover:border-primary hover:text-primary ${tabs === 'change-password' ? '!border-primary text-primary' : ''}`}
//                             >
//                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5">
//                                     <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20Z" fill="currentColor" />
//                                     <path d="M16 12.9V14H8V11H16V12.9Z" fill="currentColor" />
//                                 </svg>
//                                 Change Password
//                             </button>
//                         </li>
//                     </ul>
//                 </div>
//                 {tabs === 'home' ? (
//                     <div>
//                         <form className="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-black">
//                             <h6 className="text-lg font-bold mb-5">General Information</h6>
//                             <div className="flex flex-col sm:flex-row">
//                                 <div className="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
//                                     <img 
//                                         src={selectedFile ? URL.createObjectURL(selectedFile) : profile.profileImage} 
//                                         alt="profile" 
//                                         className="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto" 
//                                     />
//                                     <div className="mt-3 flex flex-col items-center">
//                                         <label className="btn btn-primary cursor-pointer">
//                                             Upload Photo
//                                             <input 
//                                                 type="file" 
//                                                 className="hidden" 
//                                                 accept="image/*"
//                                                 onChange={handleFileChange}
//                                             />
//                                         </label>
//                                     </div>
//                                 </div>
//                                 <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
//                                     <div>
//                                         <label htmlFor="name">Company Name</label>
//                                         <input 
//                                             id="name" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.name} 
//                                             readOnly
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="email">Email</label>
//                                         <input 
//                                             id="email" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.email} 
//                                             readOnly
//                                         />
//                                     </div>
//                                     {
//                                         userType =="admin" && (
// <>
//   <div>
//                                         <label htmlFor="company_id">Company ID</label>
//                                         <input 
//                                             id="company_id" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.company_id} 
//                                             readOnly
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="plan_id">Plan ID</label>
//                                         <input 
//                                             id="plan_id" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.plan_id} 
//                                             readOnly
//                                         />
//                                     </div>
//                                         <div>
//                                         <h6 className="text-lg font-bold mb-5">Plan Details</h6>
//                                     </div>
//                                     <div></div>
//                                     <div>
//                                         <label htmlFor="start_date">Start Date</label>
//                                         <input 
//                                             id="start_date" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.start_date} 
//                                             readOnly
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="end_date">End Date</label>
//                                         <input 
//                                             id="end_date" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.end_date} 
//                                             readOnly
//                                         />
//                                     </div>
// </>
//                                         )
//                                     }
                                  
                                
                                    
//                                     {/* Address Fields */}
//                                     <div className="sm:col-span-2">
//                                         <h6 className="text-lg font-bold mb-5">Address Information</h6>
//                                     </div>
//                                     <div className="sm:col-span-2">
//                                         <label htmlFor="address">Street Address</label>
//                                         <input 
//                                             id="address" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.address}
//                                             onChange={(e) => setProfile({...profile, address: e.target.value})}
//                                         />
//                                     </div>
//                                     <div>
//                                         <label htmlFor="country">Country</label>
//                                         <select
//                                             id="country"
//                                             className="form-select"
//                                             value={profile.country}
//                                             onChange={handleCountryChange}
//                                         >
//                                             <option value="">Select Country</option>
//                                             {countries.map((country) => (
//                                                 <option key={country.isoCode} value={country.name}>
//                                                     {country.name}
//                                                 </option>
//                                             ))}
//                                         </select>
//                                     </div>
//                                     <div>
//                                         <label htmlFor="state">State/Province</label>
//                                         <select
//                                             id="state"
//                                             className="form-select"
//                                             value={profile.state}
//                                             onChange={handleStateChange}
//                                             disabled={!profile.country}
//                                         >
//                                             <option value="">Select State</option>
//                                             {states.map((state) => (
//                                                 <option key={state.isoCode} value={state.name}>
//                                                     {state.name}
//                                                 </option>
//                                             ))}
//                                         </select>
//                                     </div>
//                                     <div>
//                                         <label htmlFor="city">City</label>
//                                         <select
//                                             id="city"
//                                             className="form-select"
//                                             value={profile.city}
//                                             onChange={handleCityChange}
//                                             disabled={!profile.state}
//                                         >
//                                             <option value="">Select City</option>
//                                             {cities.map((city) => (
//                                                 <option key={city.name} value={city.name}>
//                                                     {city.name}
//                                                 </option>
//                                             ))}
//                                         </select>
//                                     </div>
//                                     {/* <div>
//                                         <label htmlFor="zip">Zip/Postal Code</label>
//                                         <input 
//                                             id="zip" 
//                                             type="text" 
//                                             className="form-input" 
//                                             value={profile.zip}
//                                             onChange={(e) => setProfile({...profile, zip: e.target.value})}
//                                         />
//                                     </div> */}
//                                     <div className="sm:col-span-2 mt-3">
//                                         <button 
//                                             type="button" 
//                                             className="btn btn-primary"
//                                             onClick={handleAddressUpdate}
//                                         >
//                                             Save Address
//                                         </button>
//                                     </div>
//                                 </div>
//                             </div>
//                         </form>
//                     </div>
//                 ) : (
//                     ''
//                 )}
//                 {tabs === 'change-password' ? (
//                     <div>
//                         <form className="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-black">
//                             <div className="flex flex-col sm:flex-row">
//                                 <div className="flex-1 flex-col gap-5">
//                                     <div className="sm:col-span-2 mt-5">
//                                         <label htmlFor="current_password">Current Password</label>
//                                         <input
//                                             id="current_password"
//                                             type="password"
//                                             className="form-input"
//                                             value={currentPassword}
//                                             onChange={(e) => setCurrentPassword(e.target.value)}
//                                             placeholder="Enter current password"
//                                         />
//                                     </div>

//                                     <div className="sm:col-span-2 mt-5">
//                                         <label htmlFor="new_password">New Password</label>
//                                         <input
//                                             id="new_password"
//                                             type="password"
//                                             className="form-input"
//                                             value={newPassword}
//                                             onChange={(e) => setNewPassword(e.target.value)}
//                                             placeholder="Enter new password"
//                                         />
//                                     </div>

//                                     <div className="sm:col-span-2 mt-5">
//                                         <label htmlFor="confirm_new_password">Confirm New Password</label>
//                                         <input
//                                             id="confirm_new_password"
//                                             type="password"
//                                             className="form-input"
//                                             value={confirmNewPassword}
//                                             onChange={(e) => setConfirmNewPassword(e.target.value)}
//                                             placeholder="Confirm new password"
//                                         />
//                                     </div>

//                                     <div className="sm:col-span-2 mt-3">
//                                         <button
//                                             type="button"
//                                             className="btn btn-primary"
//                                             onClick={handleChangePassword}
//                                         >
//                                             Change Password
//                                         </button>
//                                     </div>
//                                 </div>
//                             </div>
//                         </form>
//                     </div>
//                 ) : (
//                     ''
//                 )}
//             </div>
//         </div>
//     );
// };

// export default AccountSetting;