<div class="bg-white">
    <div class='container' fxFlex="100%">
        <div class="text-left">
            <i class="fa fa-arrow-left" (click)='goBackToLogin()'></i>
            <h2 class="inline">Sign Up as Student</h2>
        </div>
        <div>
            <img class="user-icon" src="{{imgUrl}}/assets/img/user_icon.jpg">
            <!-- <button class="btn btn_add_img mat-button">
                    <i class="fa fa-arrow-left"></i>
            </button> -->
        </div>
        <form [formGroup]="firstFormGroup" style="width: 100%;" (submit)="studentSignup()">
            <div class="text-left font-size-normal">
               <b>PERSONAL DETAILS</b> 
            </div>
            <br>
            <div class="row">
                <div class="col-sm-6">
                    <mat-form-field appearance="standard">
                        <input matInput type="text" name="firstname" formControlName="firstName" required autofocus>
                        <mat-placeholder>First Name
                            <!-- <mat-error *ngIf="firstNameError" class="error-msg"> {{firstNameErrMsg}} </mat-error> -->
                        </mat-placeholder>
                    </mat-form-field>
                </div>
                <div class="col-sm-6">
                    <mat-form-field appearance="standard">
                        <input matInput type="text" name="lastname" formControlName="lastName" required>
                        <mat-placeholder>Last Name
                            <!-- <mat-error *ngIf="lastNameError" class="error-msg"> {{lastNameErrMsg}} </mat-error> -->
                        </mat-placeholder>
                    </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <mat-form-field class="example-full-width">
                        <input matInput name="email" formControlName="email" readonly required>
                        <mat-icon matSuffix *ngIf="!(emailFormControl.hasError('email') && !emailFormControl.hasError('required')) && (email != '')">
                            <img class='email-check' src='{{imgUrl}}/assets/img/check-material.png'>
                        </mat-icon>
                        <mat-placeholder>
                            <img src="{{imgUrl}}/assets/img/mail.png"> &nbsp; Email</mat-placeholder>
                        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                            {{loginemailErrMsg}}
                        </mat-error>
                        <!-- <mat-error *ngIf="emailFormControl.hasError('required')">
                        Email is
                        <strong>required</strong>
                    </mat-error> -->
                    </mat-form-field>
                </div>
                <div class="col-sm-6">
                    <mat-form-field class="example-full-width ">
                        <input matInput name="phonenumber" formControlName="phonenumber" minlength="10" maxlength="12" required>
                        <mat-placeholder>Contact Number</mat-placeholder>
                        <!-- <mat-error *ngIf="!phoneFormControl.hasError('pattern')">
                        {{phoneErrMsg}}
                    </mat-error>
                    <mat-error *ngIf="phoneFormControl.hasError('required')">
                        Phone Number is
                        <strong>required</strong>
                    </mat-error> -->
                    </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <mat-form-field class="example-full-width">
                        <input matInput type="password" [type]="hide ? 'password' : 'text'" name="password" formControlName="password" minlength="6" required>
                        <mat-hint align="end">(Minimum 6 characters)</mat-hint>
                        <mat-placeholder>
                            <img src="{{imgUrl}}/assets/img/password.png"> &nbsp; Password</mat-placeholder>
                        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                        <!-- <mat-error *ngIf="isPwdError" class="error-msg"> {{PwdErrMsg}} </mat-error>
                    <span *ngIf="isPwdError" class="error-msg"> {{PwdErrMsg}} </span> -->
                    </mat-form-field>
                </div>
                <div class="col-sm-6">
                    <mat-form-field class="example-full-width">
                        <input matInput type="password" name="confirm_password" formControlName="confirm_password" minlength="6" validateEqual="password" (focusout)="validateConfirmPassword()" required>
                        <mat-placeholder>
                            <img src="{{imgUrl}}/assets/img/password.png"> &nbsp;Confirm Password</mat-placeholder>
                        <!-- <mat-error *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </mat-error> -->
                        <span *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </span>
                    </mat-form-field>
                </div>
            </div>
            <br>
            <br>
            <div class="container">
                <div class="text-left font-size-normal">
                   <b>ADDITIONAL DETAILS</b> 
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-6">
                        <my-date-picker placeholder="DOB" formControlName="birthday" name="mydaterange" [options]="myDateRangePickerOptions" (dateChanged)="onDateChanged($event)"
                            showTodayBtn="false" editableDateField="false" inline="false"></my-date-picker>
                    </div>
                    <div class="col-sm-6">
                        <mat-select class="gender" placeholder="Gender" [(value)]="gender" name="gender" formControlName="gender" ngDefaultControl required>
                            <mat-option *ngFor="let se of genders" [value]="se">
                                {{se}}
                            </mat-option>
                        </mat-select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width ">
                            <input matInput name="nationality" formControlName="nationality" required>
                            <mat-placeholder>Nationality</mat-placeholder>
                            <!-- <mat-error *ngIf="!phoneFormControl.hasError('pattern')">
                            {{phoneErrMsg}}
                        </mat-error>
                        <mat-error *ngIf="phoneFormControl.hasError('required')">
                            Phone Number is
                            <strong>required</strong>
                        </mat-error> -->
                        </mat-form-field>
                    </div>
                    <div class="col-sm-6">
                        <mat-select class="govtId" placeholder="Govt Id" [(value)]="govType" name="govType" formControlName="govType" ngDefaultControl required>
                            <mat-option *ngFor="let id of idtypes" [value]="id">
                                {{id}}
                            </mat-option>
                        </mat-select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <input matInput type="text" name="govtId" formControlName="govtId" required>
                            <mat-placeholder>ID Number
                                <!-- <mat-error *ngIf="aadhaarError" class="error-msg"> {{aadhaarErrMsg}} </mat-error> -->
                            </mat-placeholder>
                        </mat-form-field>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="container">
                <div class="text-left font-size-normal">
                    <b>ACADEMIC DETAILS</b>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-6">

                    </div>
                    <div class="col-sm-6">

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-select class="govtId" placeholder="College" [(value)]="instSelected" name="institute" formControlName="college" ngDefaultControl
                            (change)="onCollegeSelect($event)" required>
                            <mat-option *ngFor="let inst of institutes" [value]="inst.collegeName">
                                {{inst.collegeName}}
                            </mat-option>
                        </mat-select>
                        <div *ngIf="firstFormGroup.controls.college.value == 'Other'">
                            <mat-form-field class="example-full-width">
                                <input matInput type="text" name="institution" formControlName="othercollege" required>
                                <mat-placeholder>Other College Name
                                    <!-- <mat-error *ngIf="institutionError" class="error-msg"> {{institutionErrMsg}} </mat-error> -->
                                </mat-placeholder>
                            </mat-form-field>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width ">
                            <input matInput name="location" formControlName="location" required>
                            <mat-placeholder>Location</mat-placeholder>
                            <!-- <mat-error *ngIf="!phoneFormControl.hasError('pattern')">
                                {{phoneErrMsg}}
                            </mat-error>
                            <mat-error *ngIf="phoneFormControl.hasError('required')">
                                Phone Number is
                                <strong>required</strong>
                            </mat-error> -->
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <input matInput type="text" name="course" formControlName="course" required>
                            <mat-placeholder>College Course Name
                                <!-- <mat-error *ngIf="aadhaarError" class="error-msg"> {{aadhaarErrMsg}} </mat-error> -->
                            </mat-placeholder>
                        </mat-form-field>
                    </div>
                    <div class="col-sm-6">
                        <mat-select class="govtId" placeholder="Current Semester" [(value)]="currentSem" name="currentSem" formControlName="currentSem"
                            ngDefaultControl required>
                            <mat-option *ngFor="let cl of sems" [value]="cl">
                                {{cl}}
                            </mat-option>
                        </mat-select>
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <input matInput type="number" min="0" max="100" step="any" name="overallPercentage" formControlName="overallPercentage" required>
                            <mat-placeholder>Overall Percentage
                                <!-- <mat-error *ngIf="OverallError" class="error-msg"> {{OverallErrMsg}} </mat-error> -->
                            </mat-placeholder>
                        </mat-form-field>
                    </div>
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <input matInput type="number" min="0" max="100" step="any" name="twelPercentage" formControlName="twelPercentage" required>
                            <mat-placeholder>12th Percentage
                                <!-- <mat-error *ngIf="twelError" class="error-msg"> {{twelErrMsg}} </mat-error> -->
                            </mat-placeholder>
                        </mat-form-field>
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <input matInput type="number" min="0" max="100" step="any" name="tenthPercentage" formControlName="tenthPercentage" required>
                            <mat-placeholder>10th Percentage
                                <mat-error *ngIf="tenthError" class="error-msg"> {{tenthErrMsg}} </mat-error>
                            </mat-placeholder>
                        </mat-form-field>
                        <mat-form-field class="example-full-width" appearance="standard">
                                <input matInput type="text" name="secondarySkill" formControlName="secondarySkill" required>
                                <mat-placeholder>Secondary Skills
                                    <span class="substitute">(Seperated by comma's)</span>
                                    <!-- <mat-error *ngIf="aadhaarError" class="error-msg"> {{aadhaarErrMsg}} </mat-error> (click)="stepper.reset()" -->
                                </mat-placeholder>
                            </mat-form-field>
                    </div>
                    <div class="col-sm-6">
                        <mat-form-field class="example-full-width" appearance="standard">
                            <mat-chip-list #chipList>
                                <mat-chip *ngFor="let skill of primarySkills" [selectable]='true' [removable]='true' (removed)="remove(skill)">
                                    {{skill.name}}
                                    <mat-icon matChipRemove>cancel</mat-icon>
                                </mat-chip>
                                <input matInput placeholder="Primary Skills*" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                    [matChipInputAddOnBlur]='true'  formControlName="primarySkill" (matChipInputTokenEnd)="add($event)" required>
                            </mat-chip-list>
                        </mat-form-field>
                    </div>

                </div>
                <!-- <div class="row">
                    <div class="col-sm-6">
                       
                    </div>
                </div> -->
            </div>
            <br>
            <br>
            <div>
                <!-- <button mat-button matStepperPrevious>Back</button> -->
                <div *ngIf="isError" class="error-msg" style="font-size: 16px;"> {{error}} </div>
                <div *ngIf="isSuccess" class="error-msg" style="font-size: 16px; color:darkgreen;"> {{successMessage}} </div>
                <div class='loading' *ngIf="isLoading">
                    <img width="20%" src='{{imgUrl}}/assets/img/loading-gif-15.gif' />
                </div>
                <button type="submit" *ngIf="!isLoading" mat-button class="btn btn_py_login mat-raised-button" [disabled]="!firstFormGroup.valid">SignUp</button>
            </div>
        </form>
    </div>
</div>
