import React, {useState, useEffect} from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { customerSlice } from "../../store";
import { AuthService, ResourceService } from "../../services";
import Select from 'react-select';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import { 
  CUSTOMER_TYPE, CUSTOMER_TYPE_TEXT, 
  PROGRAM_TYPE, PROGRAM_TYPE_TEXT,
  PAY_SOURCE, PAY_SOURCE_TEXT,
  LEGAL_SEX, LEGAL_SEX_TEXT,
  MARITAL_STATUS, MARITAL_STATUS_TEXT,
  IMMIGRATION_STATUS, IMMIGRATION_STATUS_TEXT,
  LANGUAGE_OPTIONS,
  STATE_OPTIONS, STATE_OPTIONS_TEXT,
  EMERGENCY_CONTACT_RELATIONSHIP, EMERGENCY_CONTACT_RELATIONSHIP_TEXT,
  EMERGENCY_CONTACT_ROLE_OPTIONS,
  DAYS_OF_WEEK_OPTIONS,
  REFERRAL_SOURCE_TEXT,
  REFERRAL_SOURCE_GROUPED,
  CUSTOMER_DISCHARGE_REASON, CUSTOMER_DISCHARGE_REASON_TEXT,
  DIETARY_RESTRICTIONS_OPTIONS,
  DIETARY_RESTRICTIONS_GROUPED,
  DIET_TEXTURE, DIET_TEXTURE_TEXT,
  TRANSPORTATION_TYPE, TRANSPORTATION_TYPE_TEXT,
  YES_NO, YES_NO_TEXT,
  PREFERRED_TEXT_LANGUAGE, PREFERRED_TEXT_LANGUAGE_TEXT,
  MultiSelectDropdown
} from "../../shared";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Upload } from "react-bootstrap-icons";

const CreateCustomer = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { createCustomer } = customerSlice.actions;
  
  // Basic Info
  const [firstname, setFirstname] = useState('');
  const [middleName, setMiddleName] = useState('');
  const [lastname, setLastname] = useState('');
  const [nameCN, setNameCN] = useState('');
  const [nameOnId, setNameOnId] = useState('');
  const [customerType, setCustomerType] = useState('');
  const [programType, setProgramType] = useState('');
  const [paySource, setPaySource] = useState('');
  const [paySourceOther, setPaySourceOther] = useState('');
  const [birthDate, setBirthDate] = useState(null);
  const [legalSex, setLegalSex] = useState('');
  const [maritalStatus, setMaritalStatus] = useState('');
  const [marriageDate, setMarriageDate] = useState(null);
  const [immigrationStatus, setImmigrationStatus] = useState('');
  const [immigrationStatusOther, setImmigrationStatusOther] = useState('');
  const [languageSpoken, setLanguageSpoken] = useState([]);
  const [languageSpokenOther, setLanguageSpokenOther] = useState('');
  
  // Contact Info
  const [phone, setPhone] = useState('');
  const [phone2, setPhone2] = useState('');
  const [phone3, setPhone3] = useState('');
  const [email, setEmail] = useState('');
  
  // Addresses (up to 5)
  const [addresses, setAddresses] = useState([
    { line1: '', line2: '', city: '', state: '', zipCode: '', note: '' }
  ]);
  
  // Emergency Contacts (up to 2)
  const [emergencyContacts, setEmergencyContacts] = useState([
    { name: '', phone: '', relationship: '', relationshipOther: '', role: [] }
  ]);
  
  // Schedule
  const [daysOfWeek, setDaysOfWeek] = useState([]);
  
  // Admission & Discharge Record
  const [admissionDate, setAdmissionDate] = useState(null);
  const [enrolledDate, setEnrolledDate] = useState(null);
  const [referralSource, setReferralSource] = useState('');
  const [referralSourceOther, setReferralSourceOther] = useState('');
  const [dischargeDate, setDischargeDate] = useState(null);
  const [dischargeReason, setDischargeReason] = useState('');
  const [dischargeReasonOther, setDischargeReasonOther] = useState('');
  
  // Care & Services
  const [dietaryRestrictions, setDietaryRestrictions] = useState([]);
  const [dietaryRestrictionsOther, setDietaryRestrictionsOther] = useState('');
  const [dietTexture, setDietTexture] = useState('');
  const [tableId, setTableId] = useState('');
  const [seatNumber, setSeatNumber] = useState('');
  const [transportationType, setTransportationType] = useState('');
  const [consentToTextMessages, setConsentToTextMessages] = useState('');
  const [preferredTextLanguage, setPreferredTextLanguage] = useState('');
  const [consentToMediaUse, setConsentToMediaUse] = useState('');
  const selectableCustomerTypes = [CUSTOMER_TYPE.MEMBER, CUSTOMER_TYPE.VISITOR];
  
  // Medical & Insurance - Providers
  const [primaryCarePhysician, setPrimaryCarePhysician] = useState('');
  const [pharmacy, setPharmacy] = useState('');
  const [pharmacyId, setPharmacyId] = useState('');
  const [providers, setProviders] = useState([]);
  const [pharmacies, setPharmacies] = useState([]);
  
  // General Conditions
  const [diabetesMellitus, setDiabetesMellitus] = useState('');
  const [eyesOn, setEyesOn] = useState('');
  const [wheelchair, setWheelchair] = useState('');
  
  // Legal
  const [molst, setMolst] = useState('');
  const [provisionsForAdvanceMedical, setProvisionsForAdvanceMedical] = useState('');
  const [hospice, setHospice] = useState('');
  const [burialArrangements, setBurialArrangements] = useState('');
  const [powerOfAttorney, setPowerOfAttorney] = useState('');
  
  // Rounding
  const [requiresRounding, setRequiresRounding] = useState('');
  const [roundingNotes, setRoundingNotes] = useState('');
  
  // Confidential Details
  const [medicareNumber, setMedicareNumber] = useState('');
  const [medicaidNumber, setMedicaidNumber] = useState('');
  const [socialSecurityNumber, setSocialSecurityNumber] = useState('');
  const [adcapsId, setAdcapsId] = useState('');
  
  // Compliance & Deadlines
  const [adcapsCompletedDate, setAdcapsCompletedDate] = useState(null);
  const [centerQualificationRenewDate, setCenterQualificationRenewDate] = useState(null);
  const [medicaidRenewDate, setMedicaidRenewDate] = useState(null);
  const [idExpirationDate, setIdExpirationDate] = useState(null);
  
  // Form Submission
  const [hipaaAuthorizationForm, setHipaaAuthorizationForm] = useState(null);
  const [medicationManagementConsentForm, setMedicationManagementConsentForm] = useState(null);
  const [freedomOfChoiceForm, setFreedomOfChoiceForm] = useState(null);
  const [mealBenefitApplicationForm, setMealBenefitApplicationForm] = useState(null);
  const [photoVideoReleaseForm, setPhotoVideoReleaseForm] = useState(null);
  const [securityDepositAgreementForm, setSecurityDepositAgreementForm] = useState(null);
  const [recreationalProgramContractForm, setRecreationalProgramContractForm] = useState(null);
  const [tbForm, setTbForm] = useState(null);
  const [preScreeningForm, setPreScreeningForm] = useState(null);
  
  // Additional Information
  const [note, setNote] = useState('');
  const [selectedFile, setSelectedFile] = useState();

  const redirectTo = () => {
    navigate('/customers/list');
  }

  // Phone number formatting function
  const formatPhoneNumber = (value) => {
    if (!value) return '';
    // Remove all non-numeric characters
    const phoneNumber = value.replace(/[^\d]/g, '');
    const phoneNumberLength = phoneNumber.length;
    
    if (phoneNumberLength < 4) {
      return phoneNumber;
    }
    if (phoneNumberLength < 7) {
      return `(${phoneNumber.slice(0, 3)})${phoneNumber.slice(3)}`;
    }
    return `(${phoneNumber.slice(0, 3)})${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`;
  };

  useEffect(() => {
    if (!AuthService.canAddOrEditCustomers()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    ResourceService.getAll('pharmacy').then(data => {
      setPharmacies(data.data);
    });
    ResourceService.getAll('provider').then(data => {
      setProviders(data.data);
    });
  }, [])

  const formatDateForBackend = (date) => {
    if (!date) return '';
    const d = new Date(date);
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const year = d.getFullYear();
    return `${month}/${day}/${year}`;
  }

  const onPharmacyChange = (selectedPharmacy) => {
    setPharmacy(selectedPharmacy);
    setPharmacyId(selectedPharmacy?.value);
  }

  const onPrimaryCarePhysicianChange = (selectedProvider) => {
    setPrimaryCarePhysician(selectedProvider);
  }

  // Address management functions
  const addAddress = () => {
    if (addresses.length < 5) {
      setAddresses([...addresses, { line1: '', line2: '', city: '', state: '', zipCode: '', note: '' }]);
    }
  };

  const removeAddress = (index) => {
    if (addresses.length > 1) {
      setAddresses(addresses.filter((_, i) => i !== index));
    }
  };

  const updateAddress = (index, field, value) => {
    const newAddresses = [...addresses];
    newAddresses[index][field] = value;
    setAddresses(newAddresses);
  };

  // Emergency contact management functions
  const addEmergencyContact = () => {
    if (emergencyContacts.length < 5) {
      setEmergencyContacts([...emergencyContacts, { name: '', phone: '', relationship: '', relationshipOther: '', role: [] }]);
    }
  };

  const removeEmergencyContact = (index) => {
    if (emergencyContacts.length > 1) {
      setEmergencyContacts(emergencyContacts.filter((_, i) => i !== index));
    }
  };

  const updateEmergencyContact = (index, field, value) => {
    const newContacts = [...emergencyContacts];
    newContacts[index][field] = value;
    setEmergencyContacts(newContacts);
  };

  const validateCustomer = () => {
    const errors = [];
    
    // Required fields validation
    if (!firstname || firstname.trim() === '') {
      errors.push('First Name');
    }
    if (!lastname || lastname.trim() === '') {
      errors.push('Last Name');
    }
    if (!phone || phone.trim() === '') {
      errors.push('Primary Phone Number');
    }
    if (!addresses[0]?.line1 || addresses[0].line1.trim() === '') {
      errors.push('Address Line 1');
    }
    if (!emergencyContacts[0]?.name || emergencyContacts[0].name.trim() === '') {
      errors.push('Emergency Contact Name');
    }
    
    if (errors.length > 0) {
      window.alert(`Please fill in the following required fields:\n${errors.join('\n')}`);
      return false;
    }
    return true;
  };

  const saveCustomer = () => {
    if (!validateCustomer()) {
      return;
    }
    
    const data = {
      // Basic Info
      name: `${lastname},${firstname}`,
      firstname,
      middle_name: middleName,
      lastname,
      name_cn: nameCN,
      name_on_id: nameOnId,
      type: customerType,
      program_type: programType,
      pay_source: paySource,
      pay_source_other: paySourceOther,
      birth_date: formatDateForBackend(birthDate),
      legal_sex: legalSex,
      gender: legalSex,
      marital_status: maritalStatus,
      marriage_date: formatDateForBackend(marriageDate),
      immigration_status: immigrationStatus,
      immigration_status_other: immigrationStatusOther,
      language_spoken: languageSpoken.map(l => l.value),
      language_spoken_other: languageSpokenOther,
      language: languageSpoken.map(l => l.label).join(', '),
      
      // Contact Info
      phone,
      mobile_phone: phone2,
      home_phone: phone3,
      email,
      
      // Address 1
      address_line_1: addresses[0]?.line1 || '',
      address_line_2: addresses[0]?.line2 || '',
      city: addresses[0]?.city || '',
      state: addresses[0]?.state || '',
      zip_code: addresses[0]?.zipCode || '',
      address_note: addresses[0]?.note || '',
      address1: `${addresses[0]?.line1 || ''}, ${addresses[0]?.line2 || ''}, ${addresses[0]?.city || ''}, ${addresses[0]?.state || ''} ${addresses[0]?.zipCode || ''}`.replace(/, ,/g, ',').trim(),
      
      // Address 2
      address2_line_1: addresses[1]?.line1 || '',
      address2_line_2: addresses[1]?.line2 || '',
      city2: addresses[1]?.city || '',
      state2: addresses[1]?.state || '',
      zip_code2: addresses[1]?.zipCode || '',
      address2_note: addresses[1]?.note || '',
      
      // Address 3
      address3_line_1: addresses[2]?.line1 || '',
      address3_line_2: addresses[2]?.line2 || '',
      city3: addresses[2]?.city || '',
      state3: addresses[2]?.state || '',
      zip_code3: addresses[2]?.zipCode || '',
      address3_note: addresses[2]?.note || '',
      
      // Address 4
      address4_line_1: addresses[3]?.line1 || '',
      address4_line_2: addresses[3]?.line2 || '',
      city4: addresses[3]?.city || '',
      state4: addresses[3]?.state || '',
      zip_code4: addresses[3]?.zipCode || '',
      address4_note: addresses[3]?.note || '',
      
      // Address 5
      address5_line_1: addresses[4]?.line1 || '',
      address5_line_2: addresses[4]?.line2 || '',
      city5: addresses[4]?.city || '',
      state5: addresses[4]?.state || '',
      zip_code5: addresses[4]?.zipCode || '',
      address5_note: addresses[4]?.note || '',
      
      // Emergency Contact 1
      emergency_contact_name: emergencyContacts[0]?.name || '',
      emergency_contact_phone: emergencyContacts[0]?.phone || '',
      emergency_contact_relationship: emergencyContacts[0]?.relationship || '',
      emergency_contact_relationship_other: emergencyContacts[0]?.relationshipOther || '',
      emergency_contact_role: (emergencyContacts[0]?.role || []).map(r => r.value),
      emergency_contact: `${emergencyContacts[0]?.name || ''} ${emergencyContacts[0]?.phone || ''} ${emergencyContacts[0]?.relationship || ''}`,
      
      // Emergency Contact 2
      emergency_contact2_name: emergencyContacts[1]?.name || '',
      emergency_contact2_phone: emergencyContacts[1]?.phone || '',
      emergency_contact2_relationship: emergencyContacts[1]?.relationship || '',
      emergency_contact2_relationship_other: emergencyContacts[1]?.relationshipOther || '',
      emergency_contact2_role: (emergencyContacts[1]?.role || []).map(r => r.value),
      emergency_contact2: `${emergencyContacts[1]?.name || ''} ${emergencyContacts[1]?.phone || ''} ${emergencyContacts[1]?.relationship || ''}`,
      
      // Emergency Contact 3
      emergency_contact3_name: emergencyContacts[2]?.name || '',
      emergency_contact3_phone: emergencyContacts[2]?.phone || '',
      emergency_contact3_relationship: emergencyContacts[2]?.relationship || '',
      emergency_contact3_relationship_other: emergencyContacts[2]?.relationshipOther || '',
      emergency_contact3_role: (emergencyContacts[2]?.role || []).map(r => r.value),
      
      // Emergency Contact 4
      emergency_contact4_name: emergencyContacts[3]?.name || '',
      emergency_contact4_phone: emergencyContacts[3]?.phone || '',
      emergency_contact4_relationship: emergencyContacts[3]?.relationship || '',
      emergency_contact4_relationship_other: emergencyContacts[3]?.relationshipOther || '',
      emergency_contact4_role: (emergencyContacts[3]?.role || []).map(r => r.value),
      
      // Emergency Contact 5
      emergency_contact5_name: emergencyContacts[4]?.name || '',
      emergency_contact5_phone: emergencyContacts[4]?.phone || '',
      emergency_contact5_relationship: emergencyContacts[4]?.relationship || '',
      emergency_contact5_relationship_other: emergencyContacts[4]?.relationshipOther || '',
      emergency_contact5_role: (emergencyContacts[4]?.role || []).map(r => r.value),
      
      // Schedule
      days_of_week: daysOfWeek.map(d => d.value),
      
      // Admission & Discharge Record
      admission_date: formatDateForBackend(admissionDate),
      enrolled_date: formatDateForBackend(enrolledDate),
      create_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
      referral_source: referralSource,
      referral_source_other: referralSourceOther,
      discharge_date: formatDateForBackend(dischargeDate),
      discharge_reason: dischargeReason,
      discharge_reason_other: dischargeReasonOther,
      
      // Care & Services
      dietary_restrictions: dietaryRestrictions.map(d => d.value),
      dietary_restrictions_other: dietaryRestrictionsOther,
      diet_texture: dietTexture,
      table_id: tableId,
      seat_number: seatNumber,
      transportation_type: transportationType,
      consent_to_text_messages: consentToTextMessages,
      text_msg_enabled: consentToTextMessages === 'yes',
      preferred_text_language: preferredTextLanguage,
      consent_to_media_use: consentToMediaUse,
      
      // Medical & Insurance - Providers
      primary_care_physician: primaryCarePhysician?.label || '',
      care_provider: primaryCarePhysician?.label || '',
      pharmacy: pharmacy?.label || '',
      pharmacy_id: pharmacyId,
      
      // General Conditions
      diabetes_mellitus: diabetesMellitus,
      eyes_on: eyesOn,
      disability: eyesOn === 'yes',
      wheelchair,
      
      // Legal
      molst,
      provisions_for_advance_medical: provisionsForAdvanceMedical,
      hospice,
      burial_arrangements: burialArrangements,
      power_of_attorney: powerOfAttorney,
      
      // Rounding
      requires_rounding: requiresRounding,
      rounding_notes: roundingNotes,
      
      // Confidential Details
      medicare_number: medicareNumber,
      medicaid_number: medicaidNumber,
      social_security_number: socialSecurityNumber,
      adcaps_id: adcapsId,
      
      // Compliance & Deadlines
      adcaps_completed_date: formatDateForBackend(adcapsCompletedDate),
      center_qualification_renew_date: formatDateForBackend(centerQualificationRenewDate),
      medicaid_renew_date: formatDateForBackend(medicaidRenewDate),
      id_expiration_date: formatDateForBackend(idExpirationDate),
      
      // Additional Information
      note,
      edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
      status: 'active',

      // Form Submission flags — only include when a file was selected
      ...(hipaaAuthorizationForm ? { hipaa_authorization_form: 'true' } : {}),
      ...(medicationManagementConsentForm ? { medication_management_consent_form: 'true' } : {}),
      ...(freedomOfChoiceForm ? { freedom_of_choice_form: 'true' } : {}),
      ...(mealBenefitApplicationForm ? { meal_benefit_application_form: 'true' } : {}),
      ...(photoVideoReleaseForm ? { photo_video_release_form: 'true' } : {}),
      ...(securityDepositAgreementForm ? { security_deposit_agreement_form: 'true' } : {}),
      ...(recreationalProgramContractForm ? { recreational_program_contract_form: 'true' } : {}),
      ...(tbForm ? { tb_form: 'true' } : {}),
      ...(preScreeningForm ? { pre_screening_form: 'true' } : {}),
    };
    
    const formData = new FormData();
    formData.append("file", selectedFile);
    let payload = { data };
    if (selectedFile) {
      payload = Object.assign({}, payload, {avatar: formData})
    }

    // Collect form files for upload after customer creation
    const formFiles = [
      { file: hipaaAuthorizationForm, fileType: 'hipaa_authorization_form' },
      { file: medicationManagementConsentForm, fileType: 'medication_management_consent_form' },
      { file: freedomOfChoiceForm, fileType: 'freedom_of_choice_form' },
      { file: mealBenefitApplicationForm, fileType: 'meal_benefit_application_form' },
      { file: photoVideoReleaseForm, fileType: 'photo_video_release_form' },
      { file: securityDepositAgreementForm, fileType: 'security_deposit_agreement_form' },
      { file: recreationalProgramContractForm, fileType: 'recreational_program_contract_form' },
      { file: tbForm, fileType: 'tb_form' },
      { file: preScreeningForm, fileType: 'pre_screening_form' },
    ].filter(f => f.file);

    if (formFiles.length > 0) {
      payload = Object.assign({}, payload, { formFiles });
    }

    dispatch(createCustomer(payload));
    redirectTo();
  };

  // Custom styles for react-select
  const selectStyles = {
    control: (baseStyles) => ({
      ...baseStyles,
      minWidth: '200px',
    
      borderRadius: '8px'
    }),
    indicatorSeparator: () => ({
      display: 'none'
    }),
    dropdownIndicator: (baseStyles) => ({
      ...baseStyles,
      paddingRight: '8px',
      color: '#333',
      '&:hover': {
        color: '#000',
      },
    }),
    valueContainer: (baseStyles) => ({
      ...baseStyles,
      height: '43px',
      padding: '0 8px',
    }),
    input: (baseStyles) => ({
      ...baseStyles,
      margin: '0px',
      padding: '0px',
      height: '30px',
      width: '290px'
    }),
    singleValue: (baseStyles) => ({
      ...baseStyles,
      margin: '0px',
    }),
  };

  const multiSelectStyles = {
    control: (baseStyles) => ({
      ...baseStyles,
      minWidth: '300px',
      minHeight: '45px',
      borderRadius: '8px'
    }),
    indicatorSeparator: () => ({
      display: 'none'
    }),
    dropdownIndicator: (baseStyles) => ({
      ...baseStyles,
      paddingRight: '8px',
      color: '#333',
      '&:hover': {
        color: '#000',
      },
    }),
    valueContainer: (baseStyles) => ({
      ...baseStyles,
      padding: '4px 8px',
    }),
    input: (baseStyles) => ({
      ...baseStyles,
      margin: '0px',
      padding: '0px',
      height: '30px',
      width: '290px'
    }),
  };

  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">General</Breadcrumb.Item>
          <Breadcrumb.Item href="/customers/list">
            Customer Information
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            Create New Customer
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>Create New Customer <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4> 
        </div>
      </div>

      <div className="app-main-content-list-container form-page">
        <div className="app-main-content-list-func-container">
          <Tabs defaultActiveKey="personalInfo" id="customers-tab">
            <Tab eventKey="personalInfo" title="Personal Information">
              {/* Basic Info Section */}
              <h6 className="text-primary">Basic Info</h6>
              <div className="app-main-content-fields-section" style={{ flexWrap: 'wrap' }}>
                <div className="me-4 mb-3">
                  <div className="field-label">First Name <span className="required">*</span></div>
                  <input type="text" placeholder="e.g., Alice" value={firstname} onChange={e => setFirstname(e.target.value)}/>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Middle Name</div>
                  <input type="text" placeholder="e.g., M." value={middleName} onChange={e => setMiddleName(e.target.value)}/>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Last Name <span className="required">*</span></div>
                  <input type="text" placeholder="e.g., Morgan" value={lastname} onChange={e => setLastname(e.target.value)}/>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Chinese / Preferred Name</div>
                  <input type="text" placeholder="e.g., 李华" value={nameCN} onChange={e => setNameCN(e.target.value)}/>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Name On ID</div>
                  <input type="text" placeholder="e.g., A. Morgan" value={nameOnId} onChange={e => setNameOnId(e.target.value)}/>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Customer Type</div>
                  <select value={customerType} onChange={e => setCustomerType(e.target.value)}>
                    <option value="">Select...</option>
                    {selectableCustomerTypes.map((typeOption) => (
                      <option key={typeOption} value={typeOption}>{CUSTOMER_TYPE_TEXT[typeOption] || typeOption}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Program Type</div>
                  <select value={programType} onChange={e => setProgramType(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(PROGRAM_TYPE).map(key => (
                      <option key={key} value={PROGRAM_TYPE[key]}>{PROGRAM_TYPE_TEXT[PROGRAM_TYPE[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Pay Source</div>
                  <select value={paySource} onChange={e => setPaySource(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(PAY_SOURCE).map(key => (
                      <option key={key} value={PAY_SOURCE[key]}>{PAY_SOURCE_TEXT[PAY_SOURCE[key]]}</option>
                    ))}
                  </select>
                </div>
                {paySource === 'other' && (
                  <div className="me-4 mb-3">
                    <div className="field-label">Pay Source (Other)</div>
                    <input type="text" placeholder="Please specify..." value={paySourceOther} onChange={e => setPaySourceOther(e.target.value)}/>
                  </div>
                )}
                <div className="me-4 mb-3">
                  <div className="field-label">Date Of Birth</div>
                  <DatePicker
                    selected={birthDate}
                    onChange={(date) => setBirthDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 01/15/1950"
                    className="form-control"
                    showYearDropdown
                    scrollableYearDropdown
                    yearDropdownItemNumber={100}
                  />
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Legal Sex</div>
                  <select value={legalSex} onChange={e => setLegalSex(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(LEGAL_SEX).map(key => (
                      <option key={key} value={LEGAL_SEX[key]}>{LEGAL_SEX_TEXT[LEGAL_SEX[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Marital Status</div>
                  <select value={maritalStatus} onChange={e => setMaritalStatus(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(MARITAL_STATUS).map(key => (
                      <option key={key} value={MARITAL_STATUS[key]}>{MARITAL_STATUS_TEXT[MARITAL_STATUS[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Marriage Date</div>
                  <DatePicker
                    selected={marriageDate}
                    onChange={(date) => setMarriageDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 06/12/1975"
                    className="form-control"
                    showYearDropdown
                    scrollableYearDropdown
                    yearDropdownItemNumber={100}
                  />
                </div>
                <div className="me-4 mb-3">
                  <div className="field-label">Immigration Status</div>
                  <select value={immigrationStatus} onChange={e => setImmigrationStatus(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(IMMIGRATION_STATUS).map(key => (
                      <option key={key} value={IMMIGRATION_STATUS[key]}>{IMMIGRATION_STATUS_TEXT[IMMIGRATION_STATUS[key]]}</option>
                    ))}
                  </select>
                </div>
                {immigrationStatus === 'other' && (
                  <div className="me-4 mb-3">
                    <div className="field-label">Immigration Status (Other)</div>
                    <input type="text" placeholder="Please specify..." value={immigrationStatusOther} onChange={e => setImmigrationStatusOther(e.target.value)}/>
                  </div>
                )}
                <div className="me-4 mb-3">
                  <div className="field-label">Language Spoken</div>
                  <MultiSelectDropdown
                    value={languageSpoken}
                    onChange={setLanguageSpoken}
                    options={LANGUAGE_OPTIONS}
                    placeholder="e.g., English, Mandarin"
                  />
                </div>
                {languageSpoken.some(l => l.value === 'other') && (
                  <div className="me-4 mb-3">
                    <div className="field-label">Language Spoken (Other)</div>
                    <input type="text" placeholder="Please specify..." value={languageSpokenOther} onChange={e => setLanguageSpokenOther(e.target.value)}/>
                  </div>
                )}
              </div>

              {/* Contact Info Section */}
              <h6 className="text-primary">Contact Info</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Primary Phone Number <span className="required">*</span></div>
                  <input type="text" placeholder="e.g., (240)463-1111" value={phone} onChange={e => setPhone(formatPhoneNumber(e.target.value))} maxLength={14}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Phone Number 2</div>
                  <input type="text" placeholder="e.g., (240)463-2222" value={phone2} onChange={e => setPhone2(formatPhoneNumber(e.target.value))} maxLength={14}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Phone Number 3</div>
                  <input type="text" placeholder="e.g., (240)463-3333" value={phone3} onChange={e => setPhone3(formatPhoneNumber(e.target.value))} maxLength={14}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Email</div>
                  <input type="email" placeholder="e.g., example@gmail.com" value={email} onChange={e => setEmail(e.target.value)}/>
                </div>
              </div>

              {/* Address Section */}
              <h6 className="text-primary">Address</h6>
              {addresses.map((address, index) => (
                <div key={index} className="address-block mb-3" style={{ borderBottom: index < addresses.length - 1 ? '1px solid #eee' : 'none', paddingBottom: '10px' }}>
                  <div className="d-flex justify-content-between align-items-center mb-2">
                    <strong className="text-secondary">Address {index + 1}</strong>
                    {addresses.length > 1 && (
                      <button type="button" className="btn btn-sm btn-outline-danger" onClick={() => removeAddress(index)}>Remove</button>
                    )}
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="me-4">
                      <div className="field-label">Address Line 1 {index === 0 && <span className="required">*</span>}</div>
                      <input type="text" placeholder="e.g., 100 Sunshine Lane" className="long" value={address.line1} onChange={e => updateAddress(index, 'line1', e.target.value)}/>
                    </div>
                    <div className="me-4">
                      <div className="field-label">Address Line 2</div>
                      <input type="text" placeholder="e.g., Apt B2" value={address.line2} onChange={e => updateAddress(index, 'line2', e.target.value)}/>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="me-4">
                      <div className="field-label">City</div>
                      <input type="text" placeholder="e.g., Springfield" value={address.city} onChange={e => updateAddress(index, 'city', e.target.value)}/>
                    </div>
                    <div className="me-4">
                      <div className="field-label">State</div>
                      <select value={address.state} onChange={e => updateAddress(index, 'state', e.target.value)}>
                        <option value="">Select...</option>
                        {Object.keys(STATE_OPTIONS).map(key => (
                          <option key={key} value={STATE_OPTIONS[key]}>{STATE_OPTIONS_TEXT[STATE_OPTIONS[key]]}</option>
                        ))}
                      </select>
                    </div>
                    <div className="me-4">
                      <div className="field-label">Zip Code</div>
                      <input 
                        type="text" 
                        placeholder="e.g., 22000" 
                        value={address.zipCode} 
                        maxLength={5}
                        onChange={e => {
                          const value = e.target.value.replace(/[^0-9]/g, '');
                          updateAddress(index, 'zipCode', value);
                        }}
                      />
                    </div>
                    <div className="me-4">
                      <div className="field-label">Address Note</div>
                      <input type="text" placeholder="e.g., Senior Home" value={address.note} onChange={e => updateAddress(index, 'note', e.target.value)}/>
                    </div>
                  </div>
                </div>
              ))}
              {addresses.length < 5 && (
                <div className="mb-3">
                  <button type="button" className="btn btn-sm btn-outline-primary" onClick={addAddress}>+ Add Another Address</button>
                </div>
              )}

              {/* Emergency Contact Section */}
              <h6 className="text-primary">Emergency Contact</h6>
              {emergencyContacts.map((contact, index) => (
                <div key={index} className="emergency-contact-block mb-3" style={{ borderBottom: index < emergencyContacts.length - 1 ? '1px solid #eee' : 'none', paddingBottom: '10px' }}>
                  <div className="d-flex justify-content-between align-items-center mb-2">
                    <strong className="text-secondary">Emergency Contact {index + 1}</strong>
                    {emergencyContacts.length > 1 && (
                      <button type="button" className="btn btn-sm btn-outline-danger" onClick={() => removeEmergencyContact(index)}>Remove</button>
                    )}
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="me-4">
                      <div className="field-label">Emergency Contact Name {index === 0 && <span className="required">*</span>}</div>
                      <input type="text" placeholder="e.g., Jordan Lee" value={contact.name} onChange={e => updateEmergencyContact(index, 'name', e.target.value)}/>
                    </div>
                    <div className="me-4">
                      <div className="field-label">Emergency Contact Phone Number</div>
                      <input type="text" placeholder="e.g., (555)987-6543" value={contact.phone} onChange={e => updateEmergencyContact(index, 'phone', formatPhoneNumber(e.target.value))} maxLength={14}/>
                    </div>
                    <div className="me-4">
                      <div className="field-label">Emergency Contact Relationship</div>
                      <select value={contact.relationship} onChange={e => updateEmergencyContact(index, 'relationship', e.target.value)}>
                        <option value="">Select...</option>
                        {Object.keys(EMERGENCY_CONTACT_RELATIONSHIP).map(key => (
                          <option key={key} value={EMERGENCY_CONTACT_RELATIONSHIP[key]}>{EMERGENCY_CONTACT_RELATIONSHIP_TEXT[EMERGENCY_CONTACT_RELATIONSHIP[key]]}</option>
                        ))}
                      </select>
                    </div>
                    {contact.relationship === 'other' && (
                      <div className="me-4">
                        <div className="field-label">Relationship (Other)</div>
                        <input type="text" placeholder="Please specify..." value={contact.relationshipOther} onChange={e => updateEmergencyContact(index, 'relationshipOther', e.target.value)}/>
                      </div>
                    )}
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="me-4">
                      <div className="field-label">Emergency Contact Role</div>
                      <MultiSelectDropdown
                        value={contact.role}
                        onChange={(value) => updateEmergencyContact(index, 'role', value)}
                        options={EMERGENCY_CONTACT_ROLE_OPTIONS}
                        placeholder="e.g., Power of Attorney"
                      />
                    </div>
                  </div>
                </div>
              ))}
              {emergencyContacts.length < 5 && (
                <div className="mb-3">
                  <button type="button" className="btn btn-sm btn-outline-primary" onClick={addEmergencyContact}>+ Add Another Emergency Contact</button>
                </div>
              )}

              {/* Schedule Section */}
              <h6 className="text-primary">Schedule</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Days of Week</div>
                  <MultiSelectDropdown
                    value={daysOfWeek}
                    onChange={setDaysOfWeek}
                    options={DAYS_OF_WEEK_OPTIONS}
                    placeholder="e.g., Mon, Wed, Fri"
                  />
                </div>
              </div>

              {/* Admission & Discharge Record Section */}
              <h6 className="text-primary">Admission & Discharge Record</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Admission Date</div>
                  <DatePicker
                    selected={admissionDate}
                    onChange={(date) => setAdmissionDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 03/01/2024"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Enrolled Date</div>
                  <DatePicker
                    selected={enrolledDate}
                    onChange={(date) => setEnrolledDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 03/02/2024"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Referral Source</div>
                  <Select
                    value={referralSource ? { value: referralSource, label: REFERRAL_SOURCE_TEXT[referralSource] || referralSource } : null}
                    onChange={(selected) => setReferralSource(selected?.value || '')}
                    options={REFERRAL_SOURCE_GROUPED}
                    styles={selectStyles}
                    placeholder="e.g., Community Center"
                    isClearable
                  />
                </div>
                {referralSource === 'other' && (
                  <div className="me-4">
                    <div className="field-label">Referral Source (Other)</div>
                    <input type="text" placeholder="Please specify..." value={referralSourceOther} onChange={e => setReferralSourceOther(e.target.value)}/>
                  </div>
                )}
              </div>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Discharge Date</div>
                  <DatePicker
                    selected={dischargeDate}
                    onChange={(date) => setDischargeDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="MM/DD/YYYY"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Discharge Reason</div>
                  <select value={dischargeReason} onChange={e => setDischargeReason(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(CUSTOMER_DISCHARGE_REASON).map(key => (
                      <option key={key} value={CUSTOMER_DISCHARGE_REASON[key]}>{CUSTOMER_DISCHARGE_REASON_TEXT[CUSTOMER_DISCHARGE_REASON[key]]}</option>
                    ))}
                  </select>
                </div>
                {dischargeReason === 'other' && (
                  <div className="me-4">
                    <div className="field-label">Discharge Reason (Other)</div>
                    <input type="text" placeholder="e.g., Transferred to Assisted Living" value={dischargeReasonOther} onChange={e => setDischargeReasonOther(e.target.value)}/>
                  </div>
                )}
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="careServices" title="Care & Services">
              {/* Care & Services Section */}
              <h6 className="text-primary">Care & Services</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Dietary Restrictions</div>
                  <MultiSelectDropdown
                    value={dietaryRestrictions}
                    onChange={setDietaryRestrictions}
                    options={DIETARY_RESTRICTIONS_GROUPED}
                    placeholder="e.g., No Pork"
                    exclusiveOptionValue="regular"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Diet Texture</div>
                  <select value={dietTexture} onChange={e => setDietTexture(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(DIET_TEXTURE).map(key => (
                      <option key={key} value={DIET_TEXTURE[key]}>{DIET_TEXTURE_TEXT[DIET_TEXTURE[key]]}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Table Number</div>
                  <input type="text" placeholder="e.g., T2" value={tableId} onChange={e => setTableId(e.target.value)} disabled/>
                  <small className="text-muted d-block">Auto-filled after choosing seat</small>
                </div>
                <div className="me-4">
                  <div className="field-label">Seat Number</div>
                  <input type="text" placeholder="e.g., B" value={seatNumber} onChange={e => setSeatNumber(e.target.value)} disabled/>
                  <small className="text-muted d-block">Auto-filled after choosing seat</small>
                </div>
                <div className="me-4">
                  <div className="field-label">Transportation Type</div>
                  <select value={transportationType} onChange={e => setTransportationType(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(TRANSPORTATION_TYPE).map(key => (
                      <option key={key} value={TRANSPORTATION_TYPE[key]}>{TRANSPORTATION_TYPE_TEXT[TRANSPORTATION_TYPE[key]]}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Consent To Text Messages</div>
                  <select value={consentToTextMessages} onChange={e => setConsentToTextMessages(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Preferred Text Language</div>
                  <select value={preferredTextLanguage} onChange={e => setPreferredTextLanguage(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(PREFERRED_TEXT_LANGUAGE).map(key => (
                      <option key={key} value={PREFERRED_TEXT_LANGUAGE[key]}>{PREFERRED_TEXT_LANGUAGE_TEXT[PREFERRED_TEXT_LANGUAGE[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Consent to Media Use</div>
                  <select value={consentToMediaUse} onChange={e => setConsentToMediaUse(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="medicalInsurance" title="Medical & Insurance">
              {/* Providers Section */}
              <h6 className="text-primary">Providers</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Primary Care Physician</div>
                  <Select
                    value={primaryCarePhysician}
                    onChange={onPrimaryCarePhysicianChange}
                    options={[{value: '', label: ''}, ...providers.map(provider => ({
                      value: provider?.id || '',
                      label: provider?.name || '',
                    }))]}
                    styles={selectStyles}
                    placeholder="e.g., Dr. Smith"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Pharmacy Name</div>
                  <Select
                    value={pharmacy}
                    onChange={onPharmacyChange}
                    options={[{value: '', label: ''}, ...pharmacies.map(pharm => ({
                      value: pharm?.id || '',
                      label: pharm?.name || '',
                    }))]}
                    styles={selectStyles}
                    placeholder="e.g., BrightCare Pharmacy"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Pharmacy ID</div>
                  <input type="text" placeholder="e.g., RX778899" value={pharmacyId} onChange={e => setPharmacyId(e.target.value)}/>
                </div>
              </div>

              {/* General Conditions Section */}
              <h6 className="text-primary">General Conditions</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Diabetes Mellitus</div>
                  <select value={diabetesMellitus} onChange={e => setDiabetesMellitus(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Eyes-On</div>
                  <select value={eyesOn} onChange={e => setEyesOn(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Wheelchair</div>
                  <select value={wheelchair} onChange={e => setWheelchair(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Legal Section */}
              <h6 className="text-primary">Legal</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">MOLST</div>
                  <input type="text" placeholder="e.g., Attempt CPR" value={molst} onChange={e => setMolst(e.target.value)}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Provisions for Advance Medical</div>
                  <select value={provisionsForAdvanceMedical} onChange={e => setProvisionsForAdvanceMedical(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Hospice</div>
                  <select value={hospice} onChange={e => setHospice(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Burial Arrangements</div>
                  <select value={burialArrangements} onChange={e => setBurialArrangements(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Power of Attorney</div>
                  <input type="text" placeholder="e.g., Jone" value={powerOfAttorney} onChange={e => setPowerOfAttorney(e.target.value)}/>
                </div>
              </div>

              {/* Rounding Section */}
              <h6 className="text-primary">Rounding</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Requires Rounding</div>
                  <select value={requiresRounding} onChange={e => setRequiresRounding(e.target.value)}>
                    <option value="">Select...</option>
                    {Object.keys(YES_NO).map(key => (
                      <option key={key} value={YES_NO[key]}>{YES_NO_TEXT[YES_NO[key]]}</option>
                    ))}
                  </select>
                </div>
                <div className="me-4">
                  <div className="field-label">Rounding Notes</div>
                  <input type="text" placeholder="e.g., Escorting" value={roundingNotes} onChange={e => setRoundingNotes(e.target.value)}/>
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="confidentialDetails" title="Confidential Details">
              <h6 className="text-primary">Confidential Details</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Medicare Number</div>
                  <input type="text" placeholder="e.g., MC11223344" value={medicareNumber} onChange={e => setMedicareNumber(e.target.value)}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Medicaid Number</div>
                  <input type="text" placeholder="e.g., MD99887766" value={medicaidNumber} onChange={e => setMedicaidNumber(e.target.value)}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Social Security Number</div>
                  <input type="text" placeholder="e.g., 123-45-6789" value={socialSecurityNumber} onChange={e => setSocialSecurityNumber(e.target.value)}/>
                </div>
                <div className="me-4">
                  <div className="field-label">Adcaps ID</div>
                  <input type="text" placeholder="e.g., AC00011122" value={adcapsId} onChange={e => setAdcapsId(e.target.value)}/>
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="complianceDeadlines" title="Compliance & Deadlines">
              <h6 className="text-primary">Compliance & Deadlines</h6>
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Adcaps Completed Date</div>
                  <DatePicker
                    selected={adcapsCompletedDate}
                    onChange={(date) => setAdcapsCompletedDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 06/15/2026"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Center Qualification Renew Date</div>
                  <DatePicker
                    selected={centerQualificationRenewDate}
                    onChange={(date) => setCenterQualificationRenewDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 05/20/2026"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">Medicaid Renew Date</div>
                  <DatePicker
                    selected={medicaidRenewDate}
                    onChange={(date) => setMedicaidRenewDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 06/15/2026"
                    className="form-control"
                  />
                </div>
                <div className="me-4">
                  <div className="field-label">ID Expiration Date</div>
                  <DatePicker
                    selected={idExpirationDate}
                    onChange={(date) => setIdExpirationDate(date)}
                    dateFormat="MM/dd/yyyy"
                    placeholderText="e.g., 12/31/2026"
                    className="form-control"
                  />
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="formSubmission" title="Form Submission">
              {/* Admission Forms Section */}
              <h6 className="text-primary">Admission Forms</h6>
              <div className="app-main-content-fields-section base-line">
                <div className="me-4">
                  <div className="field-label">Maryland HIPAA Authorization</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setHipaaAuthorizationForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{hipaaAuthorizationForm?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Medication Management Consent Form</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setMedicationManagementConsentForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{medicationManagementConsentForm?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Freedom Of Choice (Medicaid only)</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setFreedomOfChoiceForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{freedomOfChoiceForm?.name}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section base-line">
                <div className="me-4">
                  <div className="field-label">Meal Benefit Application</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setMealBenefitApplicationForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{mealBenefitApplicationForm?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Photo-Video Release Waiver Form</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setPhotoVideoReleaseForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{photoVideoReleaseForm?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Security Deposit Payment Agreement (Self Pay only)</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setSecurityDepositAgreementForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{securityDepositAgreementForm?.name}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section base-line">
                <div className="me-4">
                  <div className="field-label">Recreational Program Contract (Senior Plus only)</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setRecreationalProgramContractForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{recreationalProgramContractForm?.name}</div>
                </div>
              </div>

              {/* Medical Forms Section */}
              <h6 className="text-primary">Medical Forms</h6>
              <div className="app-main-content-fields-section base-line">
                <div className="me-4">
                  <div className="field-label">TB Form</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setTbForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{tbForm?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Pre-Screening Form</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload
                    <input type="file" onChange={(e) => setPreScreeningForm(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{preScreeningForm?.name}</div>
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>

            <Tab eventKey="additionalInfo" title="Additional Information">
              <h6 className="text-primary">Additional Information</h6>
              <div className="app-main-content-fields-section base-line">
                <div className="me-4">
                  <div className="field-label">Profile Picture</div>
                  <label className="custom-file-upload">
                    <Upload width={20} color={"#fff"} className="me-2"></Upload> Upload Files
                    <input type="file" onChange={(e) => setSelectedFile(e.target.files[0])}/>
                  </label>
                  <div className="file-name">{selectedFile?.name}</div>
                </div>
                <div className="me-4">
                  <div className="field-label">Notes And Attachments</div>
                  <textarea 
                    placeholder="e.g., Customer enjoys art activities" 
                    value={note} 
                    onChange={e => setNote(e.target.value)}
                    rows={4}
                    style={{width: '400px'}}
                  />
                </div>
              </div>

              <div className="list row mb-5">
                <div className="col-md-12 col-sm-12 col-xs-12">
                  <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
                  <button className="btn btn-primary btn-sm float-right" onClick={() => saveCustomer()}> Save </button>
                </div>
              </div>
            </Tab>
          </Tabs>
        </div>
      </div>
    </>
  );
};

export default CreateCustomer;
