<div class="tab-pane fade show active" id="tab-personal" role="tabpanel">
    <div class="row g-3">
        <div class="col-12">
            <label class="form-label fw-semibold">Display Name <span class="text-danger">*</span></label>
            <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror"
                   value="{{ $val('display_name', $employee?->name ?? '') }}" required>
            @error('display_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Salutation</label>
            <select name="salutation" class="form-select">
                <option value="">— Select —</option>
                @foreach($opts::salutations() as $option)
                <option value="{{ $option }}" {{ $val('salutation') === $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">First Name</label>
            <input type="text" name="first_name" class="form-control" value="{{ $val('first_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Middle Name</label>
            <input type="text" name="middle_name" class="form-control" value="{{ $val('middle_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Last Name</label>
            <input type="text" name="last_name" class="form-control" value="{{ $val('last_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Father's Name</label>
            <input type="text" name="father_name" class="form-control" value="{{ $val('father_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Mother's Name</label>
            <input type="text" name="mother_name" class="form-control" value="{{ $val('mother_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Gender</label>
            <select name="gender" class="form-select">
                <option value="">— Select —</option>
                @foreach($opts::genders() as $option)
                <option value="{{ $option }}" {{ $val('gender') === $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Religion</label>
            <select name="religion" class="form-select">
                <option value="">— Select —</option>
                @foreach($opts::religions() as $option)
                <option value="{{ $option }}" {{ $val('religion') === $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Nationality</label>
            <input type="text" name="nationality" class="form-control" value="{{ $val('nationality') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Spouse Name</label>
            <input type="text" name="spouse_name" class="form-control" value="{{ $val('spouse_name') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Date of Birth</label>
            <input type="text" name="date_of_birth" class="form-control axis-report-datepicker" value="{{ $dateVal('date_of_birth') }}" autocomplete="off">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Marital Status</label>
            <select name="marital_status" class="form-select">
                <option value="">— Select —</option>
                @foreach($opts::maritalStatuses() as $option)
                <option value="{{ $option }}" {{ $val('marital_status') === $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Blood Group</label>
            <select name="blood_group" class="form-select">
                <option value="">— Select —</option>
                @foreach($opts::bloodGroups() as $option)
                <option value="{{ $option }}" {{ $val('blood_group') === $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Email</label>
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ $val('email') }}">
            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Phone</label>
            <input type="text" name="phone" class="form-control" value="{{ $val('phone') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Mobile</label>
            <input type="text" name="mobile" class="form-control" value="{{ $val('mobile') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">NID No</label>
            <input type="text" name="nid_no" class="form-control" value="{{ $val('nid_no') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Passport No</label>
            <input type="text" name="passport_no" class="form-control" value="{{ $val('passport_no') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Emergency Contact</label>
            <input type="text" name="emergency_contact" class="form-control" value="{{ $val('emergency_contact') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Emergency Phone</label>
            <input type="text" name="emergency_phone" class="form-control" value="{{ $val('emergency_phone') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Investment Amount</label>
            <input type="number" step="0.01" min="0" name="investment_amount" class="form-control" value="{{ $val('investment_amount') }}">
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">Present Address</label>
            <textarea name="present_address" class="form-control" rows="2">{{ $val('present_address') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">Permanent Address</label>
            <textarea name="permanent_address" class="form-control" rows="2">{{ $val('permanent_address') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">Reference 1</label>
            <textarea name="reference_1" class="form-control" rows="2">{{ $val('reference_1') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">Reference 2</label>
            <textarea name="reference_2" class="form-control" rows="2">{{ $val('reference_2') }}</textarea>
        </div>
    </div>
</div>
