<div class="emergency-contact-form border rounded p-3 mb-3 bg-white shadow-sm">
    <h5 class="mb-3 text-primary">Emergency Contact Information</h5>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">First Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="emergency_firstname[]" required data-base-name="emergency_firstname" maxlength="30">
        </div>
        <div class="col-md-6 mb-3">
            <label class="form-label">Last Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="emergency_lastname[]" required data-base-name="emergency_lastname" maxlength="30">
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">Phone Number <span class="text-danger">*</span></label>
            <input type="tel" class="form-control" id="phoneInput" name="emergency_phone[]" required data-base-name="emergency_phone" maxlength="12">
            <div id="validationStatus" class="validation-status">
            </div>

        </div>
        <div class="col-md-6 mb-3">
            <label class="form-label">Relationship to Student(s) <span class="text-danger">*</span></label>
            <select class="form-select" name="emergency_relation[]" required data-base-name="emergency_relation">
                <option value="">Select Relationship</option>
                <option value="Parent">Parent</option>
                <option value="Sibling">Sibling</option>
                <option value="Relative">Relative</option>
                <option value="Friend">Friend</option>
                <option value="Neighbor">Neighbor</option>
                <option value="Guardian">Guardian</option>
                <option value="Other">Other</option>
            </select>
        </div>
    </div>
</div>