363 lines
18 KiB
PHP
363 lines
18 KiB
PHP
<x-layouts.app title="{{ isset($user) ? __('Edit User') : __('Create User') }}">
|
|
<div class="max-w-4xl mx-auto px-0 py-4">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
<h1 class="text-3xl font-bold text-gray-800">
|
|
{{ isset($user) ? 'Editar Usuario' : 'Nuevo Usuario' }}
|
|
</h1>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">
|
|
@isset($user)
|
|
Modifique los campos necesarios para actualizar la información del usuario.
|
|
@else
|
|
Complete todos los campos obligatorios para registrar un nuevo usuario en el sistema.
|
|
@endisset
|
|
</p>
|
|
</div>
|
|
|
|
|
|
@if(session('error'))
|
|
<div id="error-message" class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
|
<ul>
|
|
@foreach($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}">
|
|
@csrf
|
|
@isset($user)
|
|
@method('PUT')
|
|
@endisset
|
|
|
|
<!-- Separador -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center">
|
|
<span class="px-4 bg-white text-sm text-gray-500">Datos Personales</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datos Personales -->
|
|
<div class="bg-white py-6">
|
|
<table class="w-full">
|
|
<tbody class="space-y-4">
|
|
<!-- Título de cortesía -->
|
|
<tr>
|
|
<td class="py-2 pr-4 w-1/3">
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
Título de cortesía
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<select name="title" class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
<option value="">Seleccionar...</option>
|
|
<option value="Sr.">Sr.</option>
|
|
<option value="Sra.">Sra.</option>
|
|
<option value="Dr.">Dr.</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Nombre -->
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Nombre
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<input type="text" name="first_name" required
|
|
value="{{ old('first_name', $user->first_name ?? '') }}"
|
|
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
|
autofocus>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Apellidos -->
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Apellidos
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<input type="text" name="last_name" required
|
|
value="{{ old('last_name', $user->last_name ?? '') }}"
|
|
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Nombre de Login -->
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Nombre de Login
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<input type="text" name="username" required
|
|
value="{{ old('username', $user->username ?? '') }}"
|
|
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center">
|
|
<span class="px-4 bg-white text-sm text-gray-500">Configuración de acceso</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuración de Acceso -->
|
|
<div class="bg-white py-6">
|
|
<table class="w-full">
|
|
<tbody>
|
|
<!-- Intervalo de fechas -->
|
|
<tr>
|
|
<td class="py-2 pr-4 w-1/3">
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
Validez de acceso
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex gap-4">
|
|
de
|
|
<input type="date" name="start_date"
|
|
value="{{ old('start_date', isset($user->access_start) ? $user->access_start->format('Y-m-d') : '') }}"
|
|
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
a
|
|
<input type="date" name="end_date"
|
|
value="{{ old('end_date', isset($user->access_end) ? $user->access_end->format('Y-m-d') : '') }}"
|
|
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Contraseña -->
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Contraseña
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex gap-2">
|
|
<input type="text" name="password" id="password"
|
|
{{ !isset($user) ? 'required' : '' }}
|
|
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
<button type="button" onclick="generatePassword()"
|
|
class="px-2 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center">
|
|
<span class="px-4 bg-white text-sm text-gray-500">Datos de contacto</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datos de Contacto -->
|
|
<div class="bg-white py-6">
|
|
<table class="w-full">
|
|
<tbody>
|
|
<tr>
|
|
<td class="py-2 pr-4 w-1/3">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Email
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
<input type="email" name="email" required
|
|
value="{{ old('email', $user->email ?? '') }}"
|
|
class="w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
Teléfono
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
|
</svg>
|
|
<input type="tel" name="phone"
|
|
value="{{ old('phone', $user->phone ?? '') }}"
|
|
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="py-2 pr-4 align-top">
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
Dirección
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex items-start gap-2">
|
|
<svg class="w-5 h-5 text-gray-400 mt-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
<textarea name="address" rows="3"
|
|
class="w-full border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">{{ old('address', $user->address ?? '') }}</textarea>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center">
|
|
<span class="px-4 bg-white text-sm text-gray-500">Otros datos</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datos de Contacto -->
|
|
<div class="bg-white py-6">
|
|
<table class="w-full">
|
|
<tbody>
|
|
<!-- Estado -->
|
|
<tr>
|
|
<td class="py-2 pr-4 w-1/3">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Estado
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="flex items-center gap-2">
|
|
<select name="is_active" class="w-[200px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
|
<option value="Activo">Activo</option>
|
|
<option value="Inactivo">Inactivo</option>
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Foto -->
|
|
<tr>
|
|
<td class="py-2 pr-4">
|
|
<label class="block text-sm font-bold text-gray-700">
|
|
Foto
|
|
</label>
|
|
</td>
|
|
<td class="py-2">
|
|
<div class="mb-6">
|
|
<<<<<<< HEAD
|
|
@livewire('image-uploader', [
|
|
'fieldName' => 'image_path', // Nombre del campo en la BD
|
|
'label' => 'Imagen principal' // Etiqueta personalizada
|
|
])
|
|
<!-- Campo oculto para la ruta de la imagen -->
|
|
<input type="hidden" name="profile_photo_path" id="profilePhotoPathInput" value="{{ old('profile_photo_path', $user->profile_photo_path) }}">
|
|
=======
|
|
|
|
@livewire('image-uploader', [
|
|
'fieldName' => 'profile_photo_path',
|
|
'currentImage' => $user->profile_photo_path ?? null,
|
|
'placeholder' => asset('images/default-user.png')
|
|
])
|
|
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
|
</div>
|
|
</td>
|
|
</tr>php
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Botón de envío -->
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
|
{{ isset($user) ? 'Actualizar Usuario' : 'Crear Usuario' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
<<<<<<< HEAD
|
|
// Escuchar el evento de Livewire y actualizar el campo oculto
|
|
document.addEventListener('imageUploaded', (event) => {
|
|
document.getElementById('profilePhotoPathInput').value = event.detail.path;
|
|
});
|
|
|
|
document.addEventListener('imageRemoved', (event) => {
|
|
document.getElementById('profilePhotoPathInput').value = '';
|
|
});
|
|
|
|
=======
|
|
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
|
function generatePassword() {
|
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
|
|
let password = '';
|
|
for (let i = 0; i < 12; i++) {
|
|
password += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
document.getElementById('password').value = password;
|
|
}
|
|
|
|
/*
|
|
<div class="mt-2 flex items-center gap-2">
|
|
<input type="checkbox" onclick="togglePasswordVisibility()">
|
|
<span class="text-sm text-gray-500">Mostrar contraseña</span>
|
|
</div>
|
|
|
|
function togglePasswordVisibility() {
|
|
const passwordField = document.getElementById('password');
|
|
passwordField.type = passwordField.type === 'password' ? 'text' : 'password';
|
|
}
|
|
*/
|
|
</script>
|
|
|
|
</x-layouts.app> |