@extends('admin.layouts.app')

@section('content')

	<div class="row">
	    <div class="col-12">
	        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
	            <h4 class="mb-sm-0">Editar User</h4>
	            <div class="page-title-right">
	                <a href="{{ route('users.index') }}" class="btn btn-primary">Volver</a>
	            </div>
	        </div>
	    </div>
	</div>
			
			<form action="" method="post" id="userForm" name="userForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')
				
				<div class="card">							
					<div class="card-body">								
						<div class="row">

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Nombre</label>
									<input type="text" name="name" id="name" class="form-control" placeholder="Nombre" value="{{ $user->name }}">									
									<small class="form-text text-muted">Ingrese el nombre completo del usuario.</small>
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="email">Correo</label>
									<input type="text" name="email" id="email" class="form-control" placeholder="Correo electrónico" value="{{ $user->email }}">									
									<small class="form-text text-muted">Ingrese una direccion de correo electronico valida.</small>
									<p></p>
								</div>								
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="phone">Movil</label>
									<input type="text" name="phone" id="phone" class="form-control" placeholder="Número de teléfono" value="{{ $user->phone }}">									
									<small class="form-text text-muted">Ingrese el numero de telefono del usuario.</small>
									<p></p>
								</div>								
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="password">Contraseña</label>
									<input type="password" name="password" id="password" class="form-control" placeholder="Contraseña">									
									<small class="form-text text-muted">Para cambiar el password, debe ingresar una nueva; de lo contrario, dejarla en blanco.</small>
									<p></p>
								</div>								
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="field_status">Estado</label>
									<select name="status" id="field_status" class="form-select">
										<option {{ ($user->status == 1) ? 'selected':'' }} value="1">Activo</option>
										<option {{ ($user->status == 0) ? 'selected':'' }} value="0">Inactivo</option>				
									</select>	
									<small class="form-text text-muted">Seleccione el estado del usuario.</small>										
								</div>
							</div>

							<!-- Campo para cargar imagen de perfil -->
							<div class="col-md-6">
								<div class="mb-3">
									<label for="image">Imagen de Perfil</label>
									<input type="file" name="image" id="image" class="form-control">
									<small class="form-text text-muted">Cargue una nueva imagen de perfil. Tama&ntilde;o recomendado: 150x150 px.</small>
									<p></p>
									@if ($user->image)
										<img src="{{ asset('profile_pic/thumb/' . $user->image) }}" class="img-fluid mt-3" width="100" alt="Imagen de Perfil">
									@else
										<img src="{{ asset('assets/images/default-profile.png') }}" class="img-fluid mt-3" width="100" alt="Imagen por Defecto">
									@endif
								</div>
							</div>


						</div>
					</div>							
				</div>

				<div class="pb-5 pt-3">
					<button type = "submit" class="btn btn-primary">Actualizar</button>
					<a href="{{ route('users.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
				</div>
				
			</form>

		
		<!-- /.card -->
	
@endsection


@section('customJs')

	<script>

 		// Depuración para verificar si la imagen se está seleccionando
        $("#image").change(function(){
            console.log(this.files); // Verifica si el archivo de imagen está siendo seleccionado
        });


		$("#userForm").submit(function(event){
		    event.preventDefault();
		    
		    var formData = new FormData(this); // Utiliza FormData para incluir el archivo de imagen
		    $("button[type=submit]").prop('disabled', true);
		    
		    $.ajax({
		        url: '{{ route("users.update", $user->id) }}',
		        type: 'POST',  // Asegúrate de que esté configurado en POST
		        data: formData,
		        contentType: false, // Necesario para enviar FormData
		        processData: false, // Necesario para enviar FormData
		        dataType: 'json',
		        success: function(response){
		            $("button[type=submit]").prop('disabled', false);
		            if (response["status"] == true) {  
		                window.location.href = "{{ route('users.index')}}";
		                $("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
		                $("#email").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");                        
		                $("#phone").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");                        
		                $("#password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");                        
		            } else {
		                if (response["notFound"] == true) {
		                    window.location.href = "{{ route('users.index')}}";
		                }
		                var errors = response['errors'];
		                if(errors["name"]) {
		                    $("#name").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['name']);
		                } else {
		                    $("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
		                }
		                if(errors["email"]){
		                    $("#email").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['email']);
		                } else {
		                    $("#email").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
		                }                        
		                if(errors["phone"]){
		                    $("#phone").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['phone']);
		                } else {
		                    $("#phone").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
		                }                                                
		                if(errors["password"]){
		                    $("#password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['password']);
		                } else {
		                    $("#password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
		                }
		            }
		        },
		        error: function(jqXHR, exception){
		            console.log("Something Went Wrong");
		        }
		    });
		});


		$("#WRZ_userForm").submit(function(event){
			event.preventDefault();
			var element = $(this);
			
			$("button[type=submit]").prop('disabled', true)

			var formData = new FormData(this); // Utiliza FormData para manejar archivos
			
			$.ajax({
				url: '{{ route("users.update", $user->id) }}',
				type: 'put',
				//data: element.serializeArray(),
				data: formData,
				dataType: 'json',
				success: function(response){
                    
                    $("button[type=submit]").prop('disabled', false)					
					if (response["status"] == true) {			

						window.location.href = "{{ route('users.index')}}";

						$("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");						
						$("#email").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");												
						$("#phone").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");						
						$("#password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");					
						$("#image").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html(""); // Añadir esta línea


					} else {
						
						if (response["notFound"] == true) {
							
							window.location.href = "{{ route('users.index')}}";
						}

						var errors = response['errors'];

						if(errors["name"]) {
							$("#name").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['name']);
						} else {
							$("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}

						if(errors["email"]){
							$("#email").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['email']);
						} else {
							$("#email").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}						

						if(errors["phone"]){
							$("#phone").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['phone']);
						} else {
							$("#phone").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}												

						if(errors["password"]){
							$("#password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['password']);
						} else {
							$("#password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}

 						if(errors["image"]){
                    		$("#image").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['image']); // Añadir esta línea
                		} else {
                    		$("#image").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html(""); // Añadir esta línea
                		}
					}

				}, error: function(jqXHR, exception){
					console.log("Something Went Wrong");
				}
			});
		});

	</script>

@endsection