@extends('ATCore::atcore_layout')


@section('atplus_main_content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            
            <!-- Profile Image -->
            <div class="card card-secondary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        
                        <img class="profile-user-img img-fluid img-circle"
                        src="{{$user->adminlte_image()}}"
                        alt="User profile picture">
                    </div>
                    
                    <h3 class="profile-username text-center">{{$user->name}}</h3>
                    
                    <p class="text-muted text-center">{{$user->title}}</p>
                    

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <form id="edit_form" role="form" action="{{route('profile.update')}}" method="POST" autocomplete="false" enctype="multipart/form-data">
            <div class="card card-secondary">
                <div class="card-header p-2">
                    <h3 class="card-title">Editar mi información</h3>
                </div><!-- /.card-header -->
                
                <div class="card-body">
                    
                        {{method_field('PUT')}}
                        @csrf
                        <div class="form-group">
                            <label for="_name"><strong><i class="fas fa-signature mr-1"></i> Nombre <span class="required" style="color:red">*</span></strong></label>
                            <input type="text" class="form-control" id="_name" name="name"  placeholder="Ingresar nombre" value="{{ $user->name }}" required>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label for="_name"><strong><i class="fas fa-user-plus mr-1"></i> Posición <span class="required" style="color:red">*</span></strong></label>
                            <input type="text" class="form-control" id="_position" name="position"  placeholder="Ingresar posición" value="{{ $user->position }}" required>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label for="_email"><strong><i class="fas fa-at mr-1"></i> Correo Electrónico</strong></label>
                            <input type="text" class="form-control" id="_email" name="email" disabled  placeholder="Ingresar Correo Electrónico" value="{{ $user->email }}" required autocomplete="false">
                        </div>
                        
                        <hr>
                        
                        <div class="form-group" id="_form_group_birthdate">
                            <label for="_birthdate"><i class="far fa-calendar-alt mr-1"></i> Fecha de Nacimiento <span class="required" style="color:red">*</span></label>
                            
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                    </span>
                                </div>
                                
                                <input type="text" class="form-control date_class float-right" id="_birthdate" name="birthdate" value="{{($user->birthdate)}}">
                                
                            </div>
                            <!-- /.input group -->
                        </div>                    
                        
                        
                        
                        <hr>
                        <div class="form-group">
                            <label for="_name"><strong><i class="fas fa-phone-square mr-1"></i>  Número Telefónico <span class="required" style="color:red">*</span></label>
                            <input type="text" class="form-control" id="_phone_number" name="phone_number"  placeholder="Ingresar Nº Telefónico" value="{{ $user->phone_number }}" required autocomplete="off" data-inputmask="'mask': ['+99999999999', '+99999999999']" data-mask>
                        </div>
                            

                        <hr>
                        <div class="form-group">
                            <label for="exampleInputFile">Avatar</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="exampleInputFile" name="avatar">
                                    <label class="custom-file-label" for="exampleInputFile">Seleccionar Imagen</label>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div class="form-group">
                            <label for="_name"><strong><i class="fas fa-key mr-1"></i> Contraseña</strong> </label>
                            <input type="password" class="form-control" id="_password" name="password"  placeholder="Dejar en blanco para mantener la actual" autocomplete="new-password" value="">
                        </div>
                            
                        <hr>
                        <div class="form-group">
                            <label for="_name"><strong><i class="fas fa-key mr-1"></i>  Repetir Contraseña </strong></label>
                            <input type="password" class="form-control" id="_repeat_password" name="repeat_password"  placeholder="Repetir la anterior en caso de cambiar" autocomplete="off">
                        </div>
                    
                    
                </div>
                <!-- /.tab-pane -->
                <div class="card-footer">
                    <div>
                        <button type="submit" class="btn btn-info">Actualizar Datos</button>
                        <a href="{{ route('profile') }}" class="btn btn-secondary">Cancelar</a>
                    </div>
                </div>
            </div>
            </form>
            <!-- /.tab-content -->
        </div><!-- /.card-body -->
    </div>
    <!-- /.nav-tabs-custom -->
</div>
    
@stop

@section('plugins.InputMask',true)
@section('plugins.Datepicker',true)
@section('plugins.ValidationJS',true)
@section('atplus_main_js')
<script>

  $(function() {
    $('.date_class').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        locale: {
            applyLabel: 'Aceptar',
            cancelLabel: 'Cancelar',
        
            format: 'YYYY-MM-DD',
        
            firstDay: 1,
            "daysOfWeek": [
            "Do",
            "Lu",
            "Ma",
            "Mi",
            "Ju",
            "Vi",
            "Sa"
            ],
            "monthNames": [
            "Enero",
            "Febrero",
            "Marzo",
            "Abril",
            "Mayo",
            "Junio",
            "Julio",
            "Agosto",
            "Septiembre",
            "Octubre",
            "Novirm",
            "December"
            ]
        },
    });
  });

  $(document).ready(function () {
    bsCustomFileInput.init();
    
    
    $('#edit_form').validate({
      submitHandler: function(form) {
        forcePace();
        form.submit();
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }
    });
    
    jQuery.extend(jQuery.validator.messages, {
      required: "Este campo es obligatorio.",
      remote: "Por favor, rellena este campo.",
      email: "Por favor, escribe una dirección de correo válida",
      url: "Por favor, escribe una URL válida.",
      date: "Por favor, escribe una fecha válida.",
      dateISO: "Por favor, escribe una fecha (ISO) válida.",
      number: "Por favor, escribe un número entero válido.",
      digits: "Por favor, escribe sólo dígitos.",
      creditcard: "Por favor, escribe un número de tarjeta válido.",
      equalTo: "Por favor, escribe el mismo valor de nuevo.",
      accept: "Por favor, escribe un valor con una extensión aceptada.",
      maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
      minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
      rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
      range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
      max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
      min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
    });
  });
</script>
@stop

@section('atplus_main_css')
<style>

</style>
@stop