<div class="animated fadeIn">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                  <i class="fa fa-align-justify"></i>  Personal Details
                </div>
                <form>
                    <div class="container">
                        <!--<h4>Personal Details</h4>-->
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="fname">First Name <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="fname" placeholder="Enter First name">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="lname">Last Name <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="lname" placeholder="Enter Last name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="pmobile">Primary Mobile Number <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="pmobile" placeholder="Enter Primary Mobile Number">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="smobile">Scondary Mobile Number</label>
                                <input type="text" class="form-control" id="smobile" placeholder="Enter Secondary Mobile Number">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="email">Email <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="email" placeholder="Enter Email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="fatherName">Father Name <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="fatherName" placeholder="Enter Father Name">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="motherName">Mother Name <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="motherName" placeholder="Enter Mother Name">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="dob">Date Of Birth <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="dob" placeholder="Enter DOB">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="gender">Gender <span class="danger">*</span></label>
                                <!--<input type="text" class="form-control" id="gender" placeholder="Enter Gender">-->
                                <label class="radio" for="gender">
                                                        <input type="radio" id="gender-male" name="inline-radios" value="Male"> Male
                                                    </label>
                                <label class="radio" for="inline-radio2">
                                                        <input type="radio" id="gender-female" name="inline-radios" value="Female"> Female
                                                    </label>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="adhar">Adhar Number <span class="danger">*</span></label>
                                <input type="text" class="form-control" id="adhar" placeholder="Enter Adhar Number">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="qualification">Qualification</label>
                                <input type="text" class="form-control" id="qualification" placeholder="Enter Qualification">
                            </div>
                        </div>
                        <!--/.row-->
                     
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="premanentAddress">Premanent Address <span class="danger">*</span></label>
                                <textarea class="form-control" id="premanentAddress" placeholder="Enter Permanent Address"></textarea>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="currentAddress">Current Address <span class="danger">*</span></label>
                                <textarea class="form-control" id="currentAddress" placeholder="Enter Current Address"></textarea>
                            </div>
                        </div>
                    </div>
                       <div class="card-header">
                  <i class="fa fa-align-justify"></i> Role Details
                </div>
                    <div class="container">
                        <!--<h4>Role Details</h4>-->
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="doj">Date Of Joining<span class="danger">*</span></label>
                                <input type="text" class="form-control" id="doj" placeholder="Enter DOJ">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="role">Role <span class="danger">*</span></label>
                                <!--<input type="text" class="form-control" id="role" placeholder="Enter Role">-->
                                <select class="form-control" id="role" placeholder="Select Role">
                                                    <option disabled>Select Role</option>
                                                    <option>Admin</option>
                                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="jobResponsibilities">Job Responsibilities</label>
                                <textarea class="form-control" id="jobResponsibilities" placeholder="Enter Job Responsibilities">
                                    Finance details check
                                </textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                Active/De-Active : <label class="switch switch-default switch-pill switch-primary">
                                        <input type="checkbox" class="switch-input" checked>
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>