@extends('layouts.admin')
@section('content')
    <div class="row">
        <div class="col-xs-12 col-sm-12 column col-sm-offset-0 ">
            <div class="panel panel-default panel-frm">
                <div class="panel-heading">
                            <div class="row" style="padding-left: 25px;padding-right: 15px">
                                <h3 class="pull-left">Employee Registration</h3>
                                @if(isShowContent('employee.list'))
                                    <a  href="{{route('employee.list')}}" class="btn btn-success btn-flat pull-right">
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                         Employee List
                                    </a>
                                @endif
                            </div>
                        </div>

                <div class="panel-body">
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <form method="post" action="{{route('insert.employee')}}" id="client_form" autocomplete="on" enctype=multipart/form-data class="input-form-section">
                                    @csrf
                                <div class="x_content">
                                    <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="first_name">First Name</label>
                                                        <input class="form-control" name="first_name" type="text"
                                                              id="firstname">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="last_name">Last Name</label>
                                                        <input class="form-control" name="last_name" type="text">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="email">Email</label>
                                                        <input class="form-control" name="email" value=""
                                                               type="text" autocomplete="on">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="password">Password</label>
                                                        <div class="input-group" id="employee_registration_show_hide_password">
                                                            <input class="form-control"  name="password"
                                                                   type="password"
                                                                   id="password">
                                                            <div class="input-group-addon">
                                                                <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 col-xs-12" style="margin-left: 10px">
                                                    @include('partials.permission',['moduleSubmoduleAssoc'=>$moduleSubmoduleAssoc])
                                                </div>
                                            </div>
                                    </div>

                                    <div class="col-sm-12 center" style="margin-top: 10px; text-align: center; ">
                                        @if(isShowContent('insert.employee'))
                                        <input class="btn btn-success btn2" type="submit" value="Save Changes">
                                        @endif
                                    </div>

                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{asset('js/jsvalidate/validate-latest.js')}}"></script>
    <script>
        $('#client_form').validate({
            rules: {
                'first_name': 'required',
                'last_name': 'required',
                'email': { 'required':true,'email':true},
                'password': 'required',
                'userRole': 'required',
            },
            messages: {

                'first_name': {
                    required: "Please enter your first name"
                },
                'last_name': {
                    required: "Please enter your last name"
                },
                'email': {
                    required: "Please enter an email address",
                    email: "Please enter a valid email address"
                },
                'password': {
                    required: "Please enter password again",
                },

            },
            highlight: function (element) {
                $(element).parent().addClass("has-error");
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
        $('#employee_registration_show_hide_password a').on('click', function(event){
            common_helper.globalPasswordView('#employee_registration_show_hide_password',event);
        })
        const birthDateCompleted=()=>{
            let birth_date=$("[name='birth_date']").val();
            if(birth_date.length===2){
                birth_date+='/';
            }
            else if(birth_date.length===5){
               birth_date+='/';
            }
            $("[name='birth_date']").val(birth_date);
        }
    </script>
@endpush