@extends('template.layoutAdmin', ['activeButton'=>''])
@section('title')
{{  trans('perfil.perfil') }}
@endsection
@section('style')
  <style media="screen">
    .viewAll{
      background-color: #7460ee;
      position: relative;
      text-align: right;
      padding: 3px 10px;
      color: rgba(255, 255, 255, .8);
      text-decoration: none;
    }
    .viewAll:hover{
      color: #fff;
      background: #6a53f5;
    }
    .ultimoMov{
      padding: 10px !important;
    }
    .divImagePadre{
      margin-bottom: 10px !important;
    }
    .avatarPadre{
      width: 70px !important;
    }
    .aNamePadre{
      text-decoration: none;
      color: #fff;
    }
    .aNamePadre:hover{
      color: #ccc;
    }
    .aNamePadre:focus{
      color: #fff;
    }
    .DivimagenUser{
      margin-bottom: 0 !important;
    }
    .imageUser{
      border: 1px solid #1b7ace;
    }
    .modal{
      background: none;
    }
    .modal-content{
      background-color: white;
      border-radius: 2px;
      padding: 17px;
    }
    .btnModal{
      border: none;
      font-size: 17px;
      padding: 10px 32px;
      margin: 26px 5px 0 5px;
    }

    .loaderProduct {
      border: 7px solid #f3f3f3;
      border-radius: 50%;
      border-top: 7px solid #1e88e5;
      width: 50px;
      height: 50px;
      margin: auto;
      -webkit-animation: spin 1s linear infinite; /* Safari */
      animation: spin 1s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
@endsection

@section('cabecera')
  <div class="row">
    <div class="col-6">
      <h1 style="margin: 15px 0 10px 0;">
        <a href="http://{{$_SERVER["HTTP_HOST"]}}/administrator" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i> Regresar</a>
      </h1>
    </div>
    <div class="col-6 text-right">
      <h1>
        <small>Admin - Enjoit</small>
      </h1>
    </div>
  </div>
@endsection

@section('contenido')
  <section>
    @if(Session::has('message'))
      <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {{Session::get('message')}}
      </div>
    @elseif(Session::has('message_error'))
      <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {{Session::get('message_error')}}
      </div>
    @endif
    @if(count($errors) > 0))
      <div class="row">
        <div class="col-12">
          <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <p>{{  trans('perfil.corrigeErrores') }}</p>
            <ul>
              @foreach ($errors->all() as $message)
                <li>{{ $message }}</li>
              @endforeach
            </ul>
          </div>
        </div>
      </div>
    @endif
  </section>

  <!-- Main content -->
  <section class="content">
    <form action="{{route('perfilUpdate', $dataUser)}}" method="POST" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      <div class="row">
        <div class="col-lg-4 col-12">
          <div class="box box-widget widget-user-4">
            <div class="widget-user-header bg-blue" style="line-height: 19;">
              <div class="overlay overlay-none">
                <div class="widget-user-image DivimagenUser">
                  @if ($dataUser->fotoPerfil <> "0")
                    <img src="{{ env('Image')}}{{$dataUser->fotoPerfil}}" class="imageUser rounded-circle" alt="Usuario">
                  @else
                    @if ($dataUser->idGenero == 9)
                      <img src="{{ env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenMan/man.png'}}" class="imageUser rounded-circle" alt="Masculino">
                    @else
                      <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenWomen/women.png'}}" class="imageUser rounded-circle" alt="Femenino">
                    @endif
                  @endif
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-8 col-12">
          <div class="info-box">
            <div class="box-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('nombreUsuario') ? 'has-error' : '' }}">
                    <label for="nombreUsuario">{{  trans('perfil.nombre') }} <span class="text-danger">*</span></label>
                    <input type="text"
                    name="nombreUsuario"
                    onkeyup="validarNombres(1,this.value);"
                    id="nombreUsuario"
                    value="{{$dataUser->nombre}}"
                    class="form-control"
                    required
                    placeholder="Nombre">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('apellidoUsuario') ? 'has-error' : '' }}">
                    <label for="apellidoUsuario">{{  trans('perfil.apellido') }} <span class="text-danger">*</span></label>
                    <input type="text"
                    name="apellidoUsuario"
                    onkeyup="validarNombres(2,this.value);"
                    id="apellidoUsuario"
                    value="{{$dataUser->apellido}}"
                    class="form-control"
                    required
                    placeholder="Apellido">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
                    <label for="email">{{  trans('perfil.correo') }} <span class="text-danger">*</span></label>
                    <input type="email"
                    name="email"
                    value="{{$dataUser->email}}"
                    class="form-control"
                    disabled
                    placeholder="Correo">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="info-box">
            <div class="box-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
                    <label for="password">{{  trans('perfil.contraseña') }} </label>
                    <input type="password"
                    name="password"
                    class="form-control"
                    placeholder="{{  trans('perfil.contraseña') }}">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('passwordConfirmation') ? 'has-error' : '' }}">
                    <label for="passwordConfirmation">{{  trans('perfil.repetirContraseña') }} </label>
                    <input type="password"
                    name="passwordConfirmation"
                    class="form-control"
                    placeholder="{{  trans('perfil.contraseña') }}">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('idTipoDoc') ? 'has-error' : '' }}">
                    <label for="idTipoDoc">{{  trans('perfil.tipoDoc') }} <span class="text-danger">*</span></label>
                    <select name="idTipoDoc" id="idTipoDoc" class="form-control">
                      @if ( App::getLocale() != 'es')
                        @foreach ($tpDoc as $item)
                            @if ($dataUser->idTipoDocumento == $item->idValorParametro)
                                <option selected value="{{$dataUser->idTipoDocumento}}">{{$item->nombre_ingles}}</option>
                            @else
                                <option value="{{$item->idValorParametro}}">{{$item->nombre_ingles}}</option>
                            @endif
                        @endforeach
                      @else
                        @foreach ($tpDoc as $item)
                            @if ($dataUser->idTipoDocumento == $item->idValorParametro)
                                <option selected value="{{$dataUser->idTipoDocumento}}">{{$item->nombre}}</option>
                            @else
                                <option value="{{$item->idValorParametro}}">{{$item->nombre}}</option>
                            @endif
                        @endforeach
                      @endif
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('numeroDocumento') ? 'has-error' : '' }}">
                    <label for="numeroDocumento">{{  trans('perfil.documento') }}  <span class="text-danger">*</span></label>
                    <input
                      type="text"
                      name="numeroDocumento"
                      value="{{$dataUser->numeroDocumento}}"
                      onkeyup="validarSiNumero(this.value, 1);"
                      class="form-control"
                      required
                      autocomplete="off"
                      maxlength="15"
                      placeholder="Numero de Documento"
                      id="numeroDocumento"
                    >
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('telefono') ? 'has-error' : '' }}">
                    <label for="telefono">{{  trans('perfil.telefono') }}  <span class="text-danger">*</span></label>
                    @if (env('MULTISERVER') == "CO")
                      <input
                        type="text"
                        name="telefono"
                        class="form-control"
                        value=""
                        onkeyup="validarSiNumero(this.value, 10);"
                        required
                        maxlength="7"
                        autocomplete="off"
                        placeholder="Telefono"
                        id="telefono"
                      >
                    @else
                      <input
                        type="text"
                        name="telefono"
                        class="form-control"
                        value=""
                        onkeyup="validarSiNumero(this.value, 10);"
                        required
                        maxlength="9"
                        autocomplete="off"
                        placeholder="Telefono"
                        id="telefono"
                      >
                    @endif
                    <small id="result_tel"></small>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('celular') ? 'has-error' : '' }}">
                    <label for="celular">{{  trans('perfil.celular') }}  <span class="text-danger">*</span></label>
                    <input
                      type="text"
                      name="celular"
                      maxlength="10"
                      class="form-control"
                      onkeyup="validarSiNumero(this.value, 7);"
                      value=""
                      required
                      autocomplete="off"
                      placeholder="Celular"
                      id="celular"
                    >
                    <small id="result_cel"></small>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('idPais') ? 'has-error' : '' }}">
                    <label for="idDepart">{{  trans('perfil.departamento') }} <span class="text-danger">*</span></label>
                    <select class="form-control" id="listDepart" name="idDepart" onchange="departData(this.value)">
                      <option value='0'>{{  trans('perfil.selDepartamento') }}</option>
                      @foreach ($departamentos as $itemDepart)
                        <option value="{{$itemDepart->idDepartamento}}">{{$itemDepart->nombre}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group {{ $errors->has('idCiudad') ? 'has-error' : '' }}">
                    <label for="idCiudad">{{  trans('perfil.ciudad') }} <span class="text-danger">*</span></label>
                    <select class="form-control" id="listCiudad" name="idCiudad">
                      <option value='0'>{{  trans('perfil.selCiudad') }}</option>
                      @foreach ($ciudad as $itemCiudad)
                        <option value="{{$itemCiudad->idCiudad}}">{{$itemCiudad->nombre}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group {{ $errors->has('idGenero') ? 'has-error' : '' }}">
                    <label for="idGenero">{{  trans('perfil.genero') }} <span class="text-danger">*</span></label>
                    <select name="idGenero" id="idGenero" class="form-control">
                      @if ( App::getLocale() != 'es')
                        @foreach ($generos as $item)
                          @if ($dataUser->idGenero == $item->idValorParametro)
                              <option selected value="{{$dataUser->idGenero}}">{{$item->nombre_ingles}}</option>
                          @else
                              <option value="{{$item->idValorParametro}}">{{$item->nombre_ingles}}</option>
                          @endif
                        @endforeach
                      @else
                        @foreach ($generos as $item)
                          @if ($dataUser->idGenero == $item->idValorParametro)
                              <option selected value="{{$dataUser->idGenero}}">{{$item->nombre}}</option>
                          @else
                              <option value="{{$item->idValorParametro}}">{{$item->nombre}}</option>
                          @endif
                        @endforeach
                      @endif
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="info-box">
            <div class="box-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group" style="margin-bottom:0;">
                    <label for="filePerfil">{{  trans('perfil.imagenPerfil') }}</label>
                    <div class="controls">
                      <input type="file" name="filePerfil" id="filePerfil" class="form-control">
                      @if($dataUser->fotoPerfil)
                        <small><a href="{{ env('Image')}}{{$dataUser->fotoPerfil}}" target="_black">Ver foto actual <i class="fa fa-arrow-right"></i> </a></small>
                      @endif
                      <small>{{  trans('perfil.fotoPerfilDimensiones') }}</small>
                    </div>
                  </div>
                </div>
              </div>
              <br/>
              <br/>
              <div class="row">
                <div class="col-12 text-center">
                  <input type="submit" class="btn btn-info margin-top-10" value="Guardar Cambios">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </section>
  <!-- /.content -->
@endsection

@section('js')

  <script>
    function validarTelefono(numero){
      if (!/^([0-9])*$/.test(numero)){
        document.getElementById("celular").value="";
        document.getElementById("result_cel").innerHTML="Debe Ingresar un Numero celular";
        return false;
      }else{
        document.getElementById("result_cel").innerHTML="";
      }
    }
    function validarNombres(valor,dato)
    {
      if (!/^[A-Za-z\s\xF1\xD1]+$/.test(dato)){
        if (valor == 1) {
          $("#nombreUsuario").val("");
        }else{
          $("#apellidoUsuario").val("");
        }
      }
    }
  </script>

  <script>
    function validarEstado(idComercio){
      var valor = $("#stateComercio").val();
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      var data = {
        "idComercio": idComercio,
        "valorEstado": valor
      }
      swal({
        title: "Actualizar Estado",
        text: valor == 1 ? "¿Desea activar este comercio?, todos sus productos y servicios volveran a estar activos." : "¿Desea inactivar este comercio?, todos sus productos y servicios tambien se inactivaran.",
        html: false,
        animation: true,
        showCancelButton: true,
        cancelButtonText: "Cancelar",
        confirmButtonColor: valor == 1 ? "#00C31B" :  "#E30000",
        confirmButtonText: "Actualizar Estado",
        closeOnConfirm: false
      },
        function(){
          $.ajax({
            url:UrlHost_+"/administrator/empresas/update/estado",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
              swal({
                title: "Cargando...",
                text: '<div class="container"><div class="row"><div class="col-12"><div class="loaderProduct"></div></div></div></div>',
                html: true,
                animation: false,
                showConfirmButton: false
              });
            },
            success: function(response){
              swal({
                title: response.estado == 1 ? "Bien Hecho" : "Ups..",
                text: response.message,
                type: response.estado == 1 ? "success" : "info",
                confirmButtonColor: "#0b4889",
                confirmButtonText: "Ok!",
                closeOnConfirm: false
              },
              function(){
                location.reload();
              });
            },
            error: function(xhr){
              swal("¡Error!", "Ha ocurrido un error intente mas tarde", "error");
            }
          });
        }
      );

    }
  </script>

  <script type="text/javascript">
    $("#valorDomicilio").on({
        "focus": function (event) {
            $(event.target).select();
        },
        "keyup": function (event) {
            $(event.target).val(function (index, value ) {
                return value.replace(/\D/g, "")
                            .replace(/([0-9])([0-9]{0})$/, '$1$2')
                            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
            });
        }
    });

    $(document).ready(function() {
      $("#listDepart").val({{$dataUser->idDepartamento}});
      $("#listCiudad").val({{$dataUser->idCiudad}});
    });

    function departData(value) {
      var data = {
        "value": value
      }
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url:UrlHost_+"/departCiudad/departData",
        data: data,
        type: 'post',
        dataType: 'json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        beforeSend: function () {
          swal({
            title: "Cargando...",
            text: "Espere un momento",
            showConfirmButton: false
          });
        },
        success: function(response){
            $('#listCiudad').empty();
            $.each(response, function(j, listCiudad){
              $("#listCiudad").append("<option value='"+listCiudad.idCiudad+"'>"+listCiudad.nombre+"</option>");
            });
            swal.close();
        },
        error: function(xhr){
          swal("Error!", "Ha ocurrido un error intente mas tarde", "error");
        }
      });
    }
  </script>
@endsection