@extends('template.layout')

@section('content')

    <div class="portlet light portlet-fit portlet-datatable bordered" style="padding-top: 2 5px;">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject font-green sbold uppercase"> Agregar Personal </span>
            </div>
        </div>
        <div class="portlet-body">

            {!! Form::open(array('id' => 'form-validation', 'enctype'=>'multipart/form-data','autocomplete'=>'off','route' => array('personal.crear'))) !!}
            <div class="form-horizontal">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('nombre', 'Nombre:', ['class' => 'control-label']) !!}
                            {!! Form::text('nombre', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>

                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('apellido_paterno', 'Apellido paterno:', ['class' => 'control-label']) !!}
                            {!! Form::text('apellido_paterno', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-4 col-xs-4" style="margin-right: 10px;">
                            {!! Form::label('apellido_materno', 'Apellido materno:', ['class' => 'control-label']) !!}
                            {!! Form::text('apellido_materno', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>

                        <div class="form-group col-lg-4 col-xs-4 " style="margin-right: 10px;">
                            {!! Form::label('dni', 'DNI:', ['class' => 'control-label']) !!}
                            {!! Form::text('dni', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>

                        <div class="form-group col-lg-4 col-xs-4 " style="margin-right: 10px;">
                            {!! Form::label('username', 'Nombre usuario:', ['class' => 'control-label']) !!}
                            {!! Form::text('username', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('rol', 'Roles:', ['class' => 'control-label']) !!}
                            {!! Form::select('rol[]', $roles, null, ['id'=>'selectRoles','multiple' => 'multiple', 'class' => 'select2','style'=>'width:100%','required'=>'required']) !!}
                        </div>

                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('genero', 'Género:', ['class' => 'control-label']) !!}
                            <select class="select2" style="width:100%" required="required" id="genero" name="genero">
                                <option value="Másculino"> Másculino</option>
                                <option value="Femenino"> Femenino</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('fecha_nacimiento', 'Fecha nacimiento:', ['class' => 'control-label']) !!}
                            {!! Form::text('fecha_nacimiento', null, array('class' => 'form-control' , 'required' => 'required')) !!}

                        </div>

                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('estado_civil', 'Estado civil:', ['class' => 'control-label']) !!}
                            <select class="select2" style="width:100%" required="required" id="estado_civil"
                                    name="estado_civil">
                                <option value="Soltero"> Soltero</option>
                                <option value="Casado"> Casado</option>
                                <option value="Viudo"> Viudo</option>
                                <option value="Divorciado"> Divorciado</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('email', 'Correo:', ['class' => 'control-label']) !!}
                            {!! Form::email('email', null, ['class' => 'form-control','required'=>'required','type'=>'email','autocomplete'=>'off', 'value'=>'']) !!}
                        </div>

                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('password', 'Contraseña:', ['class' => 'control-label']) !!}
                            {!! Form::password('password', ['class' => 'form-control','required'=>'required', 'autocomplete' => 'off', 'value'=>'']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('telefono', 'Telefono:', ['class' => 'control-label']) !!}
                            {!! Form::text('telefono', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>

                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('direccion', 'Dirección:', ['class' => 'control-label']) !!}
                            {!! Form::text('direccion', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-5 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('fecha_inicio', 'Fecha ingreso:', ['class' => 'control-label']) !!}
                            {!! Form::text('fecha_inicio', null, array('class' => 'form-control' , 'required' => 'required')) !!}
                        </div>

                        <div class="form-group col-lg-2 col-xs-12" style="padding-top: 20px;">
                            {!! Form::label('trabaja_actual', 'Actualmente laborando:', ['class' => 'control-label']) !!}
                            <input id="trabaja_actual" name="trabaja_actual" type="checkbox" class="icheck-colors"
                                   value="0">
                        </div>

                        <div class="form-group col-lg-5 col-xs-12 divFechaSalida">
                            {!! Form::label('fecha_salida', 'Fecha salida:', ['class' => 'control-label']) !!}
                            {!! Form::text('fecha_salida', null, array('class' => 'form-control' , 'required' => 'required')) !!}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">

                        <div class="form-group col-lg-12 col-xs-12" style="margin-right: 10px;">
                            <label class="control-label"> Imagen: </label>
                            {!! Form::file('img', array('class' => 'form-control filestyle','id' => 'file_img_b', 'data-buttonBefore' => 'true', 'data-buttonText' => 'Seleccionar archivo', 'data-placeholder' => 'No se ha seleccionado ningun archivo', 'data-buttonName' => 'btn-primary', 'required' => 'required','accept' => 'image/jpeg')) !!}
                            <label>Sólo se permite archivos en formato en jpeg.</label>
                            <h6 id="mensajeh6" style="color: red;"></h6>
                        </div>

                    </div>
                </div>

                <div class="form-actions" style="text-align: center; padding-top: 50px;">
                    <a class="btn dark btn-outline" href="{{ url('/personal/')}}">Cancelar</a>
                    {!! Form::submit('Guardar', ['class' => 'btn green']) !!}
                </div>

            </div>

            {!! Form::close() !!}

            @include('alerts.index')

        </div>
    </div>
@endsection

@section('scripts')
    <script>

        $("#form-validation").validate({

            rules: {
                dni: {
                    required:true,
                    pattern: '^[0-9]{8}$'
                },
                telefono: {
                    required:true,
                    pattern: '[0-9]{7,9}$'
                },
                email: {
                    required:true,
                    pattern:'^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'
                }

            }

        });
        $('#genero').select2();
        $('#estado_civil').select2();
        $('#selectRoles').select2();

        $('#fecha_nacimiento').datepicker({
            language: 'es',
            autoclose: true,
            endDate: new Date()
        });


        $('#fecha_inicio').datepicker({
            language: 'es',
            autoclose: true,
            endDate: new Date(),

        }).on('changeDate', function(e) {
            $('#fecha_salida').datepicker('setStartDate', e.date);
        });


        $('#fecha_salida').datepicker({
            language: 'es',
            autoclose: true,
        }).on('changeDate', function(e) {
            $('#fecha_inicio').datepicker('setEndDate', e.date);
        });

        $('#trabaja_actual').click(function () {
            var cb = $(this);
            if ($("#trabaja_actual:checked").length == 1) {
                $('.divFechaSalida').addClass('hidden');
                cb.val(cb.prop('checked'));
            } else {
                $('.divFechaSalida').removeClass('hidden');
                cb.val(cb.removeAttr('checked'));
            }
        });

    </script>
@endsection