@extends('template.layoutAdmin', ['activeButton'=>'personal'])
@section('title')
{{  trans('clientes.showTrabajador') }}
@endsection
@section('cabecera')
  <div class="row">
    <div class="col-12">
      <h1 style="margin: 15px 0 10px 0;">
        <a href="{{ url()->previous() }}" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i>
          {{  trans('clientes.regresar') }}
        </a>
      </h1>
    </div>
  </div>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
@endsection

@section('style')

  <style media="screen">    
    .preview { 
      overflow: hidden; 
      width: 160px;  
      height: 160px;     
      margin: 10px;     
      border: 1px solid red;     
    }     
    .modal-lg{    
      max-width: 1000px !important;    
    } 
  </style> 
@endsection

@section('contenido')
  <div class="row">
    <div class="col-12">
      @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('clientes.corrigeLosErrores') }}
                </p>
                  <ul>
                    @foreach ($errors->all() as $message)
                      <li>{{ $message }}</li>
                    @endforeach
                  </ul>
            </div>
          </div>
        </div>
      @endif
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-12">
      <div class="info-box">
        <form action="{{route('clientesP', $dataUser)}}" method="POST" enctype="multipart/form-data">
        <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>

        @csrf
        @method('PUT')
        <input type="hidden" name="urlback" value="{{url()->previous()}}">
        <div class="box-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="nombre"> {{  trans('clientes.nombre') }}    <span class="text-danger">*</span></label>
                <input type="text"
                    name="nombre"
                    class="form-control"
                    value="{{$dataUser->nombre}}"
                    onkeyup="validarNombres(1,this.value);"
                    id="nombreUsuario"
                    required
                    autocomplete="off"
                    placeholder="{{  trans('clientes.nombre') }}">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="apellido"> {{  trans('clientes.apellido') }}<span class="text-danger">*</span></label>
                <input type="text"
                    name="apellido"
                    value="{{$dataUser->apellido}}"
                    class="form-control"
                    onkeyup="validarNombres(2,this.value);"
                    id="apellidoUsuario"
                    required
                    autocomplete="off"
                    placeholder="{{  trans('clientes.apellido') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-8">
              <div class="form-group">
                <label for="userName"> {{  trans('clientes.username') }} <span class="text-danger">*</span></label>
                <input type="text"
                    name="userName"
                    value="{{$dataUser->userName}}"
                    class="form-control"
                    autocomplete="off"
                    placeholder="{{  trans('clientes.username') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-8">
              <div class="form-group">
                <label for="email"> {{  trans('clientes.correo') }}<span class="text-danger">*</span></label>
                <input type="email"
                    name="email"
                    value="{{$dataUser->email}}"
                    class="form-control"
                    disabled="disabled"
                    readonly="readonly"
                    autocomplete="off"
                    placeholder="{{  trans('clientes.correo') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="password"> {{  trans('clientes.contraseña') }}</label>
                <input type="password"
                    name="password"
                    class="form-control"
                    placeholder="{{  trans('clientes.contraseña') }}">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="passwordConfirmation"> {{  trans('clientes.repetirContraseña') }}	 </label>
                <input type="password"
                    name="passwordConfirmation"
                    class="form-control"
                    placeholder="{{  trans('clientes.repetirContraseña') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idTipoDoc"> {{  trans('clientes.tipoDocumento') }}   <span class="text-danger">*</span></label>
                <select name="idTipoDoc" id="idTipoDoc" class="form-control">
                  @if ( App::getLocale() != 'es')
                  @foreach ($listTDocumen as $idTipoDoc)
                    @if(old('idTipoDoc') == $idTipoDoc->idValorParametro)
                      <option selected value="{{$idTipoDoc->idValorParametro}}">{{$idTipoDoc->nombre_ingles}}</option>
                    @else
                      <option value="{{$idTipoDoc->idValorParametro}}">{{$idTipoDoc->nombre_ingles}}</option>
                    @endif
                  @endforeach
                @else
                @foreach ($listTDocumen as $idTipoDoc)
                @if(old('idTipoDoc') == $idTipoDoc->idValorParametro)
                  <option selected value="{{$idTipoDoc->idValorParametro}}">{{$idTipoDoc->nombre}}</option>
                @else
                  <option value="{{$idTipoDoc->idValorParametro}}">{{$idTipoDoc->nombre}}</option>
                @endif
              @endforeach 
                @endif
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="numeroDocumento"> {{  trans('clientes.nDocumento') }}	<span class="text-danger">*</span></label>
                <input type="text"
                    name="numeroDocumento"
                    id="numeroDocumento"
                    maxlength="15"
                    value="{{$dataUser->numeroDocumento}}"
                    class="form-control"
                    required
                    autocomplete="off"
                    placeholder="{{  trans('clientes.nDocumento') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="telefono"> {{  trans('clientes.telofono') }}   <span class="text-danger">*</span></label>
                
                    @if (env('MULTISERVER') == "CO")
                      <input type="text"
                      name="telefono"
                      class="form-control"
                      onkeyup="validarSiNumero(this.value, 2);"
                      autocomplete="off"
                      value="{{$dataUser->telefono}}"
                      placeholder="{{  trans('clientes.telofono') }}"
                      id="telefono"
                      required
                      maxlength="7">
                    @else
                      <input type="text"
                      name="telefono"
                      class="form-control"
                      onkeyup="validarSiNumero(this.value, 2);"
                      autocomplete="off"
                      value="{{$dataUser->telefono}}"
                      placeholder="{{  trans('clientes.telofono') }}"
                      id="telefono"
                      required
                      maxlength="9">
                    @endif
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <div class="row">
                  <div class="col-md-4">
                    <label for="codigo_pais">  {{  trans('clientes.prefijo') }}
                      <span class="text-danger">*</span></label>
                    <select name="codigo_pais" id="codigo_pais" class="form-control">
                      @foreach ($listPais as $item)
                          @if ($item->codigo == $dataUser->codigo_pais)
                          <option value="{{$item->codigo}}" selected>&nbsp; +{{$item->codigo}}</option>
                          @else
                          <option value="{{$item->codigo}}">&nbsp; +{{$item->codigo}}</option>
                          @endif
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md">
                    <label for="celular"> {{  trans('clientes.celular') }} <span class="text-danger">*</span></label>
                    <input type="text"
                        name="celular"
                        class="form-control"
                        value="{{$dataUser->celular}}"
                        id="celular"
                        onkeyup="validarSiNumero(this.value, 3);"
                        maxlength="10"
                        autocomplete="off"
                        placeholder="{{  trans('clientes.celular') }}"
                        required
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idDepart"> {{  trans('clientes.departamento') }}				                  <span class="text-danger">*</span></label>
                <select class="form-control" name="idDepart" id="listDepart" onchange="departData(this.value)">
                    <option value="0"> {{  trans('clientes.seleccioneDepartamento') }}				                    </option>
                    @foreach ($listDepart as $listD)
                        @if ($dataUser->idDepartamento == $listD->idDepartamento)
                          <option selected value="{{$listD->idDepartamento}}">{{$listD->nombre}}</option>
                        @else
                          <option value="{{$listD->idDepartamento}}">{{$listD->nombre}}</option>
                        @endif
                    @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="idCiudad"> {{  trans('clientes.ciudad') }}	                  <span class="text-danger">*</span></label>
                <select class="form-control" id="listCiudad" name="idCiudad">
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idGenero"> {{  trans('clientes.genero') }}
                  <span class="text-danger">*</span></label>
                <select name="idGenero" id="idGenero"  class="form-control">
                  @if ( App::getLocale() != 'es')
                  @foreach ($listGenero as $listGeneros)
                      @if(old('idGenero') == $listGeneros->idValorParametro)
                        <option selected value="{{$listGeneros->idValorParametro}}">{{$listGeneros->nombre_ingles}}</option>
                      @else
                        <option value="{{$listGeneros->idValorParametro}}">{{$listGeneros->nombre_ingles}}</option>
                      @endif
                    @endforeach
                @else
                @foreach ($listGenero as $listGeneros)
                @if(old('idGenero') == $listGeneros->idValorParametro)
                  <option selected value="{{$listGeneros->idValorParametro}}">{{$listGeneros->nombre}}</option>
                @else
                  <option value="{{$listGeneros->idValorParametro}}">{{$listGeneros->nombre}}</option>
                @endif
              @endforeach
                @endif
                </select>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="fechaN"> {{  trans('clientes.fechaNacimiento') }}
                  <span class="text-danger">*</span></label>
                <input type="date" value="{{$dataUser->fechaN}}" name="fechaN" id="fechaN" class="form-control" placeholder="Fecha de nacimiento">
              </div>
            </div>
          </div>
          <div class="info-box" id="contentModoTest">
            <label for="configTestc"> {{trans('clientes.modoPrueba') }} <span class="text-danger">*</span>
              <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="{{ trans('clientes.infoConfigModoPrueba') }}" ></i>
            </label>
            <select class="form-control" name="configTestc" id="configTestc">
              <option value="1" {{$dataUser->testmode == 1 ?'selected':'' }}> {{  trans('clientes.si') }} </option>
              <option value="0" {{$dataUser->testmode == 0 ?'selected':'' }}> {{  trans('clientes.no') }} </option>
            </select>
          </div>
          <div class="row">
            <div class="col-12 text-center">
              <input type="submit" class="btn btn-info margin-top-10" value="Guardar">
            </div>
          </div>
        </div>
        </form>
        <!-- /.box-body -->
      </div>
    </div>
    <div class="col-lg-4 col-12">
    
      <div class="box box-widget widget-user-4">
        <div class="widget-user-header bg-blue" style="background-color: #DB3920;">
         <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>
          <body>
          <form id="formImagenP">
            <div class="form-group" style="margin-bottom: auto;margin-top: 15px;">
              <div class="input-group">
                <div class="form-control">
                  <input type="file" name="img" class="image" style="border: 0;">
                  <input type="hidden" name="image" id="foto" >
                </div>
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary" data-toggle="tooltip" title="Subir Nueva imagen"><i class="fa fa-upload" aria-hidden="true"></i></button>
                </span>
              </div>
            </div>
          </form>
        </body>
         </div>
        </div>
      </div>

      <div class="info-box" id="contentEstado">
        <div class="box-body">
            <select name="idEstado" id="idEstado" class="form-control" onchange="selectEstado(this.value)">
                @if ($dataUser->idEstado == 1)
                    <option value="1" selected> {{  trans('clientes.activo') }}
                    </option>
                    <option value="0"> {{  trans('clientes.inactivo') }}
                    </option>
                @else
                    <option value="1" >{{  trans('clientes.activo') }}</option>
                    <option selected value="0"> {{  trans('clientes.inactivo') }}
                    </option>
                @endif
            </select>
        </div>
      </div>
        @if($dataUser->dataPadre)
        <div class="box box-widget widget-user-4">
            <div class="widget-user-header bg-blue" style="background-color: #DB3920;">
                <div class="overlay overlay-none">
                    <div class="widget-user-image divImagePadre">
                            @if ($dataUser->dataPadre->fotoPerfil <> '0')
                                <img src="{{ env('Image')}}{{$dataUser->dataPadre->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>
                    <h4 class="widget-user-username"><b href="#" class="aNamePadre">{{$dataUser->dataPadre->userName}}</b> </h4>
                </div>
            </div>
        </div>
        @endif
    </div>
  </div>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="modalLabel">{{  trans('galeria.editarImagen') }}</h5> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">×</span>
          </button> 
        </div> 

        <div class="modal-body"> 
          <div class="img-container"> 
            <div class="row"> 
              <div class="col-md-8"> 
                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> 
              </div> 
              <div class="col-md-4"> 
                <div class="preview"></div> 
              </div> 
            </div> 
          </div> 
        </div> 

        <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  trans('galeria.cancelar') }}</button> 
          <button type="button" class="btn btn-primary" id="crop">{{  trans('galeria.editar') }}</button> 
        </div> 
      </div> 
    </div> 
  </div>
@endsection

@section('js')
  <script type="text/javascript">

    function validarNombres(valor,dato)
    {
      if (!/^[A-Za-z\s\xF1\xD1]+$/.test(dato)){
        if (valor == 1) {
          $("#nombreUsuario").val("");
        }else{
          $("#apellidoUsuario").val("");
        }
      }
    }

    $( document ).ready(function() {

      var ciudadSelect = "{{$dataUser->idCiudad}}";
      var idDepart = "{{$dataUser->idDepartamento}}";
      var data = {
        "value": idDepart
      }
      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){
            if (listCiudad.idCiudad == ciudadSelect) {
              $("#listCiudad").append("<option selected value='"+listCiudad.idCiudad+"'>"+listCiudad.nombre+"</option>");
            }else{
              $("#listCiudad").append("<option value='"+listCiudad.idCiudad+"'>"+listCiudad.nombre+"</option>");
            }
          });
          swal.close();
        },
        error: function(xhr){
          swal("Error!", "Ha ocurrido un error intente mas tarde", "error");
        }
      });
    });

    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");
        }
      });
    }

    $("#formImagenP").on("submit", function(e){
      e.preventDefault();
      var idCliente = {{$dataUser->idUsuario}};
      $('#foto').val(nombreImagen);
      var formData = new FormData(document.getElementById("formImagenP"));
      formData.append("idCliente", idCliente);

      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/administrator/clientes/updateImagen",
        data: formData,
      	type: 'post',
      	dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        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){
          if (response.state == 1) {
            swal({
              title: response.title,
              text: response.message,
              type: "success",
              confirmButtonColor: "#1e88e5",
              confirmButtonText: "Ok!",
              closeOnConfirm: false
            },
            function(){
              location.reload();
            });
          }else if (response.state == 2) {
            swal({
              title: response.title,
              text: response.message,
              type: "info",
              animation: false,
              showConfirmButton: true
            });
          }else{
            swal({
              title: 'Ups!',
              text: 'Hemos tenido problemas al enviar, intenta mas tarde',
              type: "warning",
              animation: false,
              showConfirmButton: true
            });
          }
        },
        error: function(xhr){
          swal({
            title: 'Ups!',
            text: 'Hemos tenido problemas al enviar (ERR), intenta mas tarde',
            type: "warning",
            animation: false,
            showConfirmButton: true
          });
      	}
      });
    });

    function selectEstado(value) {
      var idCliente = {{$dataUser->idUsuario}};
      var formData = new FormData();
      formData.append("idCliente", idCliente);
      formData.append("idEstado", value);

      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/administrator/clientes/state",
        data: formData,
        type: 'post',
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        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){
          if (response.state == 1) {
            $('#selectEstado').val(value);
            swal({
              title: response.title,
              text: response.message,
              type: "success",
              confirmButtonColor: "#1e88e5",
              confirmButtonText: "Ok!",
              closeOnConfirm: false
            },
            function(){
              swal.close();
            });
          }else if (response.state == 2) {
            $('#selectEstado').val({{$dataUser->idEstado}});
            swal({
              title: response.title,
              text: response.message,
              type: "info",
              animation: false,
              showConfirmButton: true
            });
          }else{
            $('#selectEstado').val({{$dataUser->idEstado}});
            swal({
              title: 'Ups!',
              text: 'Hemos tenido problemas al cambiar el estado, intenta mas tarde',
              type: "warning",
              animation: false,
              showConfirmButton: true
            });
          }
        },
        error: function(xhr){
          
          $('#selectEstado').val({{$dataUser->idEstado}});
          swal({
            title: 'Ups!',
            text: 'Hemos tenido problemas (ERR), intenta mas tarde',
            type: "warning",
            animation: false,
            showConfirmButton: true
          });
        }
      });
    }


    var $modal = $('#modal'); 
    var image = document.getElementById('image'); 
    var cropper; 
    var nombreImagen;

    $("body").on("change", ".image", function(e){

      var files = e.target.files; 
      var done = function (url) { 
        image.src = url; 
        $modal.modal('show'); 
      }; 

      var reader; 
      var file; 
      var url; 

      if (files && files.length > 0) { 

        file = files[0]; 
        if (URL) { 
          done(URL.createObjectURL(file)); 
        } else if (FileReader) { 
          reader = new FileReader(); 
          reader.onload = function (e) { 
            done(reader.result); 
          }; 
          reader.readAsDataURL(file); 
        } 
      } 
    }); 

    

    $modal.on('shown.bs.modal', function () { 

      cropper = new Cropper(image, { 
        aspectRatio: 1, 
        viewMode: 3, 
        preview: '.preview'
      }); 
    }).on('hidden.bs.modal', function () { 

      cropper.destroy(); 
      cropper = null; 
    }); 

    

    $("#crop").click(function(){ 

      canvas = cropper.getCroppedCanvas({ 
        width: 500, 
        height: 500, 
      }); 

      canvas.toBlob(function(blob) { 

        url = URL.createObjectURL(blob); 
        var reader = new FileReader(); 
        reader.readAsDataURL(blob);   
        reader.onloadend = function() { 
          var base64data = reader.result;	 
          nombreImagen = base64data;
          $modal.modal('hide'); 
        } 
      }); 
    })

    
  </script>
@endsection