@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">Crear 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
				<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">		
									<small class="form-text text-muted">Ingrese el nombre 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">		
									<small class="form-text text-muted">Ingrese una direccion de correo valida.</small>
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="phone">Telefono</label>
									<input type="text" name="phone" id="phone" class="form-control" placeholder="Número de telefono">		
									<small class="form-text text-muted">Ingrese un número de telefono valido.</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">Ingrese una contraseña segura.</small>
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="image">Imagen</label>
									<input type="file" name="image" id="image" class="form-control">
   									<!-- Mostrar imagen por defecto con tamaño ajustado -->
                                    <img src="{{ asset('assets/images/default-profile.png') }}" class="img-fluid mt-4" alt="Imagen por defecto" id="preview-image" style="width: 150px; height: 150px;">
                                    <small class="form-text text-muted">Sube una imagen para el usuario o se usará la imagen por defecto.</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 value="1">Activo</option>
										<option value="0">Inactivo</option>												
									</select>
									<small class="form-text text-muted">Seleccione el estado del usuario.</small>
									<p></p>
								</div>
							</div>

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

				<div class="pb-5 pt-3">
					<button type="submit" class="btn btn-primary">Crear</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 element = $(this);
			$("button[type=submit]").prop('disabled', true);

			// Manejar la subida de archivos
			var formData = new FormData(this);

			$.ajax({
				url: '{{ route("users.store") }}',
				type: 'post',
				data: formData,
				dataType: 'json',
				contentType: false, // Necesario para enviar archivos
				processData: false, // Necesario para enviar archivos
				success: function(response){
                    
                    $("button[type=submit]").prop('disabled', false);					
					if (response["status"] == true) {			

						$("#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("");

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

					} else {
						
						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']);
						} else {
							$("#image").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);
			$.ajax({
				url: '{{ route("users.store") }}',
				type: 'post',
				data: element.serializeArray(),
				dataType: 'json',
				success: function(response){
                    
                    $("button[type=submit]").prop('disabled', false);					
					if (response["status"] == true) {			

						$("#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("");						

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

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

	</script>

@endsection