@extends('template.layoutAdmin')
@section('title', 'Mi Perfil')

@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>Corrige los siguientes errores:</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">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">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">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">Contraseña</label>
                  <input type="password"
                  name="password"
                  class="form-control"
                  placeholder="Contraseña">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group {{ $errors->has('passwordConfirmation') ? 'has-error' : '' }}">
                  <label for="passwordConfirmation">Repetir Contraseña</label>
                  <input type="password"
                  name="passwordConfirmation"
                  class="form-control"
                  placeholder="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">Tipo Documento <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">N. 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">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">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">Departamento <span class="text-danger">*</span></label>
                  <select class="form-control" id="listDepart" name="idDepart" onchange="departData(this.value)">
                    <option value='0'>Seleccione el Departamento</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">Ciudad <span class="text-danger">*</span></label>
                  <select class="form-control" id="listCiudad" name="idCiudad">
                    <option value='0'>Seleccione la ciudad</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">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">Imagen Perfil</label>
                  <div class="controls">
                    <input type="file" name="filePerfil" id="filePerfil" class="form-control">
                    @if($dataUser->fotoPerfil)
                      <small><a href="{{asset('files/fotoPerfil')}}/{{$dataUser->fotoPerfil}}" target="_black">Ver foto actual <i class="fa fa-arrow-right"></i> </a></small>
                    @endif
                    <small>La foto del perfil debe tener el mismo alto y ancho</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>


    </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