@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('elite/bower_components/custom-select/custom-select.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('js/password-strength-check/password-check.css') }}" rel="stylesheet" type="text/css" />
<!--<link href=" asset('elite/bower_components/multiselect/css/multi-select.css') " rel="stylesheet" type="text/css" />-->
<style type="text/css">
    .pin{
        -webkit-text-security: square;
        -moz-text-security:square;
        text-security:square;
    }
</style>
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('users.new_user') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('users.dashboard') }}</a></li>
            <li><a href="{{ route('users.index') }}">{{ __('users.users') }}</a></li>
            <li class="active">{{ __('users.register') }}</li>
        </ol>
    </div>
    <!-- /.col-lg-12 -->
</div>

@include('users.menu')

<!-- .row -->
<div class="row">
    <div class="col-sm-12">
        <!--Flash messages at the top -->
        <div>@include('flash::message')</div>
        @if (count($errors) > 0)
        <div class="alert alert-danger">
            {{ __('users.add_user_error') }}<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <div class="white-box">
            {{ Form::open(['route' => 'users.store','id'=>'register','method'=>'POST','enctype'=>'multipart/form-data','data-toggle'=>'validator','autocomplete'=>'off']) }}
            {{ csrf_field() }}
            <div class="row">
                <div class="col-md-4">

                    <div class="form-group">
                        {{ Form::label('first_name',__('users.first_name')) }}
                        {{ Form::text('first_name','',['class' => 'form-control compulsory']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('last_name',__('users.last_name')) }}
                        {{ Form::text('last_name','',['class' => 'form-control compulsory']) }}
                    </div>


                    <div class="form-group">
                        {{ Form::label('phone',__('users.phone_number')) }}
                        {{ Form::text('phone','',['class' => 'form-control','data-mask'=>"0799 999 999"]) }}
                        <span class="font-13 text-muted">(07xx) 123-456</span>
                    </div>

                    <div class="form-group">
                        {{ Form::label('email',__('users.email_address')) }}
                        {{ Form::email('email','',['class' => 'form-control']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('position_id',__('users.position')) }}
                        {{ Form::select('position_id',$positions,'',['class' => 'form-control compulsory']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('photo',__('users.photo')) }}
                        {{ Form::file('photo',['class' => 'form-control']) }}
                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-group">
                        {{ Form::label("council_registration",__('users.any_council_registration')) }}<br>
                        {{ Form::radio('council_registration',1,'',['class'=>'council_radio', 'required']) }} &nbsp;{{ __('users.yes') }} &nbsp;&nbsp;
                        {{ Form::radio('council_registration',0,'',['class'=>'council_radio', 'required']) }} &nbsp;{{ __('users.no') }}
                    </div>

                    <div class="form-group council_hide" style="display: none;">
                        {{ Form::label('council_id',__('users.council_name')) }}
                        {{ Form::select('council_id',$councils,'',['class' => 'form-control']) }}
                    </div>

                    <div class="form-group council_hide" style="display: none;">
                        {{ Form::label('registration_number',__('users.registration_number')) }}
                        {{ Form::text('registration_number','',['class' => 'form-control']) }}
                    </div>

                    <div class="form-group council_hide" style="display: none;">
                        {{ Form::label('expiry_date',__('users.expiry_date')) }}
                        <div class="input-group">
                            {{ Form::text('expiry_date',null,['class' => 'form-control datepicker','readonly','id'=>'datepicker-autoclose']) }}
                            <span class="input-group-addon"><i class="icon-calender"></i></span>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        {{ Form::label('blood_group_id',__('users.blood_group')) }}
                        {{ Form::select('blood_group_id',$blood_groups,'',['class' => 'form-control compulsory']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label("willing_to_donate",__('users.are_willing_to_donate')) }}<br>
                        {{ Form::radio('willing_to_donate',1, ['required']) }} &nbsp;{{ __('users.yes') }} &nbsp;&nbsp;
                        {{ Form::radio('willing_to_donate',0, ['required']) }} &nbsp;{{ __('users.no') }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('last_donation_date',__('users.when_last_donation')) }}
                        <div class="input-group">
                            {{ Form::text('last_donation_date','',['class' => 'form-control datepicker','readonly','id'=>'datepicker-autoclose']) }}
                            <span class="input-group-addon"><i class="icon-calender"></i></span>
                        </div>
                    </div>

                    <div class="form-group">
                        {{ Form::label('roles[]',__('users.roles_on_streamline')) }}
                        {{ Form::select('roles[]',$roles,[],['class' => 'roles compulsory select2 m-b-10 select2-multiple', 'multiple','data-placeholder'=>'- select role -']) }}
                    </div>

                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        {{ Form::label('username',__('users.username')) }}
                        {{ Form::text('username','',['class' => 'form-control compulsory']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('password',__('users.password')) }}
                        {{ Form::password('password',['class' => 'form-control compulsory']) }}
                        <span id="result"></span>
                    </div>

                    <div class="form-group">
                        {{ Form::label('password_confirm',__('users.confirm_password')) }}
                        {{ Form::password('password_confirmation',['class' => 'form-control compulsory']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('pin',__('users.secret_pin')) }}
                        {{ Form::number('pin',null,['class' => 'form-control pin','placeholder'=>'eg 12345','maxlength'=>'5','minlength'=>'5']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('security_question_id',__('users.security_question')) }}
                        {{ Form::select('security_question_id',$security_questions,'',['class' => 'form-control']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('security_answer',__('users.security_answer')) }}
                        {{ Form::text('security_answer','',['class' => 'form-control']) }}
                    </div>

                </div>

                <div class="col-md-8"><hr></div>
                <div class="col-md-4">
                    {{ Form::button(__('users.submit'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
                    {{ Form::button(__('users.cancel'),['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- /.row -->
@endsection

@push('scripts')
<script src="{{ asset('elite/js/mask.js') }}"></script>

<!-- Date Picker Plugin JavaScript -->
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('elite/bower_components/custom-select/custom-select.min.js') }}"></script>
<!--<script type="text/javascript" src=" asset('elite/bower_components/multiselect/js/jquery.multi-select.js')"></script>-->

<script type="text/javascript">
     $('document').ready(function () {

     $('.datepicker').datepicker({
     autoclose: true,
             todayHighlight: true,
             format: 'dd/mm/yyyy',
     });
     $('.council_radio').click(function (){

     if ($(this).val() === '1'){
     $('.council_hide').show()
     }
     else{
     $('.council_hide').hide();
     }

     });
     // For multiselect
     $('.roles').select2();
//    $('.roles').multiSelect();
//    $('.roles').multiSelect({
//        selectableOptgroup: true
//    });
     });</script>

<script type="text/javascript" src="{{ asset('js/password-strength-check/password-check.js') }}"></script>
@endpush