@extends('applicants.new.layouts.register')
@section('content')
<style>
    input:required:invalid {
    border: 2px solid red;
}

input:required:valid {
    border: 2px solid green;
}
    textarea:required:invalid {
    border: 2px solid red;
}

textarea:required:valid {
    border: 2px solid green;
}
.checkbox-invalid:invalid {
    outline: 2px solid red;
}
.form-check-input:invalid {
    outline: 2px solid red;
}
.select2:invalid {
    outline: 2px solid red;
}

    
</style>

<!-- Top content -->
<div class="top-content" style="margin-top: 0;">
    <div class="container">
        
        <div class="row">
            <div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 col-lg-12 col-lg-offset-0 form-box">
                <form role="form" action="{{url('applicants/registration')}}" method="post" class="f1">
                        {{csrf_field()}}
                    <input type="hidden" name="_method" value="POST">
                    <h3 style="color: maroon;">Registration</h3>

                    <p>Fill in the form to get started with KMTC Portal</p>
                    @if (count($errors) > 0)
                        <div class="alert-warning">
                            <pre>If you get an error, Id number has already been taken, it means you already have account with us. Kindly click on Login and click forgot Email to recover your Account details. <a href="{{url('/logout')}}">Click here</a> to access that option</pre>

                        </div>
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="f1-steps">
                        <div class="f1-progress">
                            <div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
                        </div>
                        <div class="f1-step active">
                            <div class="f1-step-icon"><i class="fa fa-user"></i></div>
                            <p>Personal Information</p>
                        </div>
                        <div class="f1-step">
                            <div class="f1-step-icon"><i class="fa fa-envelope"></i></div>
                            <p>Contact</p>
                        </div>
                        <div class="f1-step">
                            <div class="f1-step-icon"><i class="fa fa-users"></i></div>
                            <p>Next Of Kin</p>
                        </div>
                    </div>
                    <hr>
                    <fieldset>
                        <h4>Tell us who you are:</h4>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        First Name <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="firstname" class="form-control" placeholder="First Name" value="{{old('firstname')}}" required>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Middle Name (optional)
                                    </label>
                                    <input type="text" name="middlename" class="form-control" id="middle_name" placeholder="Middle Name(Optional)" value="{{old('middlename')}}">

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Last Name <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="lastname" class="form-control" placeholder="Last Name" value="{{old('lastname')}}" required>

                                </div>

                            </div>                            

                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Nationality <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="nationality" id="nationality" required>
                                        <option value="">Select...</option>
                                        @foreach($country as $c)
                                            <option value="{{$c->id}}" 

                                            

                                            
                                            {{ old('nationality') == $c->id ? 'selected' : '' }}
                                            
                                            >{{$c->full_name}}</option>

                                        @endforeach

                                    </select>

                                </div>

                            </div>
                        </div>
                        <div class="row">
                                <div class="col-sm-3">
                                        <div class="form-group">
                                            <label>
                                               Country Of Examinination <span
                                               style="color: red">*</span>
                                            </label>
                                            <select class="form-control" name="country_of_exam" id="country_of_exam" required>
                                                <option value="">Select...</option>
                                                @foreach($country as $c)
                                                    <option value="{{$c->id}}"
                                                    {{ old('country_of_exam') == $c->id ? 'selected' : '' }}
                                                    
                                                    >{{$c->full_name}}</option>
        
                                                @endforeach
        
                                            </select>
        
                                        </div>
        
                                    </div>
                            <div class="col-sm-3">
                                <div class="form-group" required>
                                    <label id="id_name">
                                        ID/Birth Cert No. <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="nationalid" class="form-control" maxlength="12" placeholder="ID/Birth Cert No." value="{{old('nationalid')}}" id="national_id" required>

                                </div>

                            </div>
                            <div class="passport">
                                
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Gender  <span style="color:red;"> *</span>
                                    </label>
                                    
                                    @php 
                                    $genders=['M'=>'Male','F'=>'Female'];
                                    @endphp
                                    <select name="gender" class="form-control" required>
                                        <option value="">-- select--</option>
                                        @foreach($genders as $key=>$gender)
                                    <option value="{{$key}}"

                                    {{ old('gender') == $key ? 'selected' : '' }}
                                    
                                    >{{$gender}}</option>
                                    @endforeach
                                    </select>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Date of Birth <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="date" name="dateofbirth" class="form-control datetimepicker12" value="{{old('dateofbirth')}}" placeholder="Date of Birth" required>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        County <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="county" id="county">
                                        <option value="">Select...</option>
                                        @foreach($county as $c)
                                            <option value="{{$c->id}}">{{$c->name}}</option>

                                        @endforeach

                                    </select>

                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Sub County <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="subcounty" id='subcounty'>

                                        <option value="">--please select county--</option>

                                    </select>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Constituency <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="constituency" id="const">
                                        <option value="">Please select subcounty</option>


                                    </select>

                                </div>

                            </div>

                            <div class="col-sm-3">
                                <div class="form-group" required>
                                    <label>
                                        Year of Examination <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="yearofexamination">
                                        <option value="">Select...</option>
                                                                                @for($i=$year; $i>=1980; $i--)

                                            <option value="{{ $i }}"
                                            {{ old('yearofexamination') == $i ? 'selected' : '' }}
                                            
                                            >{{ $i }}</option>
                                        @endfor

                                    </select>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Index Number <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="indexnumber" class="form-control" placeholder="Index Number" value="{{old('indexnumber')}}" required maxlength="12">

                                </div>

                            </div>
                        </div>
                        <div class="row" style="background-color:maroon; color:white">
                            <h5>Disability Assessment</h5>
                            <h6>Please note that disability information is required for planning purposes and not creteria for selection</h6>

                        </div>
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <label>
                                        Do you consider yourself Disabled person?<span style="color:red;"> *</span>
                                    </label>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="disability" id="optionsRadios1" value="Yes">Yes
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="disability" id="optionsRadios2" value="No" checked>No
                                        </label>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="row">
	                         <span class="divdisa">
                                 <div class="col-sm-2">
                                    <div class="form-group">
                                        <label>
                                        Type/Class<span style="color:red;"> *</span>
                                        </label>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="disabilitytype" id="optionsRadios1" value="Physical">Physical
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="disabilitytype" id="optionsRadios2" value="Mental">Mental
                                            </label>
                                        </div>

                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>
                                            Give Details of Nature of Disability<span style="color:red;"> *</span>
                                        </label>
                                        <textarea class="form-control" rows="5" name="disabilitydetails" id="disability_details"></textarea>

                                    </div>

                                </div>
                             </span>
                        </div>
                        <div class="f1-buttons">
                            <button type="button" class="btn btn-next">Next</button>
                        </div>
                    </fieldset>

                    <fieldset>
                        <h4>Set up your contact information:</h4>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>
                                        Postal Address <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="postaladdress" class="form-control" placeholder="Postal Address" value="{{old('postaladdress')}}" required>

                                </div>

                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>
                                        Postal Code <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="postalcode" class="form-control" placeholder="Postal Code" value="{{old('postalcode')}}" required>

                                </div>

                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>
                                        Town <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="town" class="form-control" placeholder="Town" value="{{old('town')}}" required>

                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Applicant's Phone(e.g.712345678) <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="phone1" maxlength="10" class="form-control" placeholder="Phone Number 1" value="{{old('phone1')}}" required>

                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>
                                        Alternative Phone(e.g.712345678) <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="phone2" maxlength="10" class="form-control" placeholder="Phone Number 2" value="{{old('phone2')}}" required>

                                </div>

                            </div>
                        </div>
                        <div class="f1-buttons">
                            <button type="button" class="btn btn-previous">Previous</button>
                            <button type="button" class="btn btn-next">Next</button>
                        </div>
                    </fieldset>

                    <fieldset>
                        <h4>Next of Kin Details:</h4>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>
                                        Name of Next of Kin <span
                                        style="color: red">*</span>
                                    </label>
                                    <input type="text" name="nameofnextofkin" class="form-control" placeholder="Name of Next of Kin" value="{{old('nameofnextofkin')}}" required>

                                </div>

                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>
                                        Relationship <span
                                        style="color: red">*</span>
                                    </label>
                                    <select class="form-control" name="relationship">
                                        <option value="">Select...</option>
                                        <option value="Brother">Brother</option>
                                        <option value="Sister">Sister</option>
                                        <option value="Parent">Parent</option>
                                        <option value="Guardian">Guardian</option>

                                    </select>

                                </div>

                            </div>
                        </div>
                        <div class="f1-buttons">
                            <button type="button" class="btn btn-previous">Previous</button>
                            <button type="submit" class="btn btn-submit">Submit</button>
                        </div>
                    </fieldset>

                </form>
            </div>
        </div>

    </div>
</div>
<script src="{{ asset('assets/sba/bower_components/jquery/dist/jquery.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $(".commit").hide();
        $("#req").change(function(){
            if($(this).val()==="Y"){
                $(".commit").show();
            }else{
                $(".commit").hide();
            }
        });
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $('.datetimepicker').datepicker();
</script>
@endsection