@csrf
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <!-- Basic Information -->
    <div>
        <label class="block text-sm font-medium">Employee No</label>
        @if(isset($employee) && $employee->employee_no)
            <!-- Edit mode: Show existing employee number as read-only but include hidden input for form submission -->
            <input type="text" value="{{ $employee->employee_no }}"
                   class="mt-1 w-full border-gray-300 rounded-md shadow-sm bg-gray-100 cursor-not-allowed" readonly>
            <input type="hidden" name="employee_no" value="{{ $employee->employee_no }}">
        @else
            <!-- Create mode: Show next auto-generated employee number -->
            <input type="text" value="{{ $nextEmployeeNo ?? 'EMP0001' }}"
                   class="mt-1 w-full border-gray-300 rounded-md shadow-sm bg-blue-50 cursor-not-allowed" readonly>
            <input type="hidden" name="employee_no" value="{{ $nextEmployeeNo ?? 'EMP0001' }}">
        @endif
    </div>

    <div>
        <label class="block text-sm font-medium">Full Name</label>
        <input type="text" name="full_name" value="{{ old('full_name', $employee->full_name ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required>
    </div>

    <div>
        <label class="block text-sm font-medium">Email</label>
        <input type="email" name="email" value="{{ old('email', $employee->email ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required>
    </div>

    <div>
        <label class="block text-sm font-medium">Phone</label>
        <input type="text" name="phone" value="{{ old('phone', $employee->phone ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <div>
        <label class="block text-sm font-medium">Position</label>
        <input type="text" name="position" value="{{ old('position', $employee->position ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <div>
        <label class="block text-sm font-medium">Department</label>
        <input type="text" name="department" value="{{ old('department', $employee->department ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <div>
        <label class="block text-sm font-medium">Hired At</label>
        <input type="date" name="hired_at" value="{{ old('hired_at', $employee->hired_at ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <div>
        <label class="block text-sm font-medium">Salary (RM)</label>
        <input type="number" step="0.01" name="salary" value="{{ old('salary', $employee->salary ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <!-- Emergency Contact Information -->
    <div class="md:col-span-2 border-t pt-4 mt-4">
        <h3 class="text-lg font-semibold mb-4">Emergency Contact Information</h3>
    </div>

    <div>
        <label class="block text-sm font-medium">Emergency Contact Name</label>
        <input type="text" name="emergency_contact" value="{{ old('emergency_contact', $employee->emergency_contact ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
    </div>

    <div>
        <label class="block text-sm font-medium">Relation to Employee</label>
        <select name="emergency_contact_relation" class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
            <option value="">Select Relation</option>
            <option value="Spouse" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Spouse' ? 'selected' : '' }}>Spouse</option>
            <option value="Parent" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Parent' ? 'selected' : '' }}>Parent</option>
            <option value="Child" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Child' ? 'selected' : '' }}>Child</option>
            <option value="Sibling" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Sibling' ? 'selected' : '' }}>Sibling</option>
            <option value="Friend" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Friend' ? 'selected' : '' }}>Friend</option>
            <option value="Other" {{ old('emergency_contact_relation', $employee->emergency_contact_relation ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
        </select>
    </div>

    <!-- Bank Account Information -->
    <div class="md:col-span-2 border-t pt-4 mt-4">
        <h3 class="text-lg font-semibold mb-4">Bank Account Details</h3>
    </div>

    <div>
        <label class="block text-sm font-medium">Bank Name</label>
        <select name="bank_name" class="mt-1 w-full border-gray-300 rounded-md shadow-sm">
            <option value="">Select Bank</option>
            <option value="Maybank" {{ old('bank_name', $employee->bank_name ?? '') === 'Maybank' ? 'selected' : '' }}>Maybank</option>
            <option value="CIMB" {{ old('bank_name', $employee->bank_name ?? '') === 'CIMB' ? 'selected' : '' }}>CIMB</option>
            <option value="Public Bank" {{ old('bank_name', $employee->bank_name ?? '') === 'Public Bank' ? 'selected' : '' }}>Public Bank</option>
            <option value="RHB" {{ old('bank_name', $employee->bank_name ?? '') === 'RHB' ? 'selected' : '' }}>RHB</option>
            <option value="OCBC" {{ old('bank_name', $employee->bank_name ?? '') === 'OCBC' ? 'selected' : '' }}>OCBC</option>
            <option value="Hong Leong" {{ old('bank_name', $employee->bank_name ?? '') === 'Hong Leong' ? 'selected' : '' }}>Hong Leong</option>
            <option value="AmBank" {{ old('bank_name', $employee->bank_name ?? '') === 'AmBank' ? 'selected' : '' }}>AmBank</option>
            <option value="UOB" {{ old('bank_name', $employee->bank_name ?? '') === 'UOB' ? 'selected' : '' }}>UOB</option>
            <option value="Other" {{ old('bank_name', $employee->bank_name ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
        </select>
    </div>

    <div>
        <label class="block text-sm font-medium">Bank Account Number</label>
        <input type="text" name="bank_account_number" value="{{ old('bank_account_number', $employee->bank_account_number ?? '') }}"
               class="mt-1 w-full border-gray-300 rounded-md shadow-sm" placeholder="e.g., 1234567890">
    </div>

    <!-- Medical Records / Health Status -->
    <div class="md:col-span-2 border-t pt-4 mt-4">
        <h3 class="text-lg font-semibold mb-4">Medical Records / Health Status</h3>
    </div>

    <div class="md:col-span-2">
        <label class="block text-sm font-medium">Medical Records / Health Status</label>
        <textarea name="medical_records" rows="4" class="mt-1 w-full border-gray-300 rounded-md shadow-sm"
                  placeholder="Enter any medical conditions, allergies, medications, or health information...">{{ old('medical_records', $employee->medical_records ?? '') }}</textarea>
    </div>
</div>

<div class="mt-6">
    <button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
        {{ $buttonText }}
    </button>
</div>