@extends('adminlte::page')

@section('title', 'Directorio')

@section('content_header')
    <h1>Nuevo Registro personal de contacto</h1>
@stop

@section('content')
    <p>Ingreso personal de contacto Autoridades de Tránsito</p>
    
    <div class="card">
        <div class="card-body">
            {!! Form::open(['route'=>'admin.directorios.store']) !!}
            
            <div class="form-group">
                {!! Form::label('divipo_id', 'Divipo') !!}
                <select class="form-select form-select-sm" name="divipo_id" id="divipo_id">
                    @foreach ($areaLits as $item)
                        <option value="{{$item->id}}"> {{$item->municipio}}</option>
                    @endforeach
                </select>

                @error('divipo_id')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
      
            <div class="form-group">
                {!! Form::label('nombreFuncionario', 'Nombre funcionario') !!}
                {!! Form::text('nombreFuncionario', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Nombre funcionario']) !!}
                
                @error('nombreFuncionario')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            
            <div class="form-group">
                {!! Form::label('cargoFuncionario', 'Cargo') !!}
                <select class="form-select form-select-sm" name="cargoFuncionario" id="cargoFuncionario">
                    @foreach ($areaLits2 as $item)
                        <option value="{{$item->nombreCargo}}"> {{$item->nombreCargo}}</option>
                    @endforeach
                </select>

                @error('cargoFuncionario')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>


            <div class="form-group">
                {!! Form::label('cedulaFuncionario', 'Numero de cedula funcionario') !!}
                {!! Form::text('cedulaFuncionario', null, ['class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;",'placeholder'=>'Numero de cedula funcionario (Opcional)']) !!}
                
                <p id="demo"></p>

                @error('cedulaFuncionario')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('telefonoFuncionario', 'Telefono funcionario') !!}
                {!! Form::text('telefonoFuncionario', null, ['class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;",'placeholder'=>'Telefono funcionario (Opcional)']) !!}
                
                @error('telefonoFuncionario')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('emailOficial', 'Correo electronico Institucional') !!}
                {!! Form::email('emailOficial', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Correo electronico Institucional']) !!}
                
                @error('emailOficial')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

                        
            <div class="form-group">
                {!! Form::label('emailPersonal', 'Correo electronico Personal') !!}
                {!! Form::email('emailPersonal', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Correo electronico personal (Opcional)']) !!}
                
                @error('emailPersonal')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('direccionCorrespondencia', 'Dirección correspondencia') !!}
                {!! Form::text('direccionCorrespondencia', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Dirección correspondencia']) !!}
                
                @error('direccionCorrespondencia')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('telefonoCorrespondencia', 'Telefono correspondencia') !!}
                {!! Form::text('telefonoCorrespondencia', null, ['class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;",'placeholder'=>'Telefono correspondencia (Opcional)']) !!}
                
                @error('telefonoCorrespondencia')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('fechaNacimiento', 'Fecha de Nacimiento') !!}
                {!! Form::text('fechaNacimiento', null, ['id'=>'fromDate','class'=>'form-control form-control-sm', 'placeholder'=>'Fecha de Nacimiento (Opcional)']) !!}
                
                @error('fechaNacimiento')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="control">
                {!! Form::submit('Guardar registro',['class'=>'btn btn-primary']) !!}
                <a href="{{ route('admin.directorios.index') }}" class="btn btn-danger">Regresar</a>
            </div>   
            {!! Form::close() !!}
        </div>    
        
        
    </div>

@stop

@section('css')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">

    
@endsection

@section('js')

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>

<script>

function myFunction() {
  document.getElementById("demo").innerHTML = "You pressed a key inside the input field";
}

</script>


<script>
    $( function() 
    {
        var from = $( "#fromDate" )
            .datepicker
            ({
            dateFormat: "yy-mm-dd",
            changeMonth: true
            })
            .on( "change", function() {
                to.datepicker( "option", "minDate", getDate( this ) );
            }),
            to = $( "#toDate" ).datepicker
            ({
                dateFormat: "yy-mm-dd",
                changeMonth: true
            })
            .on( "change", function() 
            {
            from.datepicker( "option", "maxDate", getDate( this ) );
            });

            function getDate( element ) 
            {
                var date;
                var dateFormat = "yy-mm-dd";
                try {
                    date = $.datepicker.parseDate( dateFormat, element.value );
                    } catch( error ) 
                    {
                        date = null;
                    }

                return date;
            }
    });
</script>

    
@endsection