@extends('layouts.admin')
@section('content')

    <div class="row mb-3">
        <div class="col-md-12">
            <h3 class="font-weight-bold" style="color: var(--dm-text-main);">
                <i class="bi bi-person-plus-fill text-primary mr-2"></i>
                Registro de Nuevo Usuario
            </h3>
            <p class="text-muted mb-0" style="font-size: 0.9rem;">
                Complete los datos para dar de alta una nueva cuenta de acceso y asignarle su rol correspondiente.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-8">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="bi bi-card-text mr-1"></i> Formulario de Registro
                    </h3>
                </div>

                <div class="card-body">
                    <form action="{{ url('/admin/usuarios/create') }}" method="POST">
                        @csrf

                        <!-- Nombre -->
                        <div class="form-group mb-3">
                            <label for="name" class="font-weight-bold">Nombre del Usuario <b>*</b></label>
                            <input type="text" 
                                   value="{{ old('name') }}" 
                                   name="name" 
                                   id="name" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   placeholder="Ej: Juan Pérez" 
                                   required 
                                   autofocus>
                            @error('name')
                                <small class="text-danger font-weight-bold">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="form-group mb-3">
                            <label for="email" class="font-weight-bold">Correo Electrónico <b>*</b></label>
                            <input type="email" 
                                   value="{{ old('email') }}" 
                                   name="email" 
                                   id="email" 
                                   class="form-control @error('email') is-invalid @enderror" 
                                   placeholder="usuario@clinica.com" 
                                   required>
                            @error('email')
                                <small class="text-danger font-weight-bold">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Rol -->
                        <div class="form-group mb-3">
                            <label for="role" class="font-weight-bold">Rol del Usuario <b>*</b></label>
                            <select name="role" id="role" class="form-control @error('role') is-invalid @enderror" required>
                                <option value="">-- Seleccionar Rol --</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}" {{ old('role') == $role->name ? 'selected' : '' }}>
                                        {{ strtoupper($role->name) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role')
                                <small class="text-danger font-weight-bold">{{ $message }}</small>
                            @enderror
                            <small class="form-text text-muted">
                                Determina los permisos y accesos a los módulos de la aplicación.
                            </small>
                        </div>

                        <div class="row">
                            <!-- Password -->
                            <div class="col-md-6 form-group mb-3">
                                <label for="password" class="font-weight-bold">Contraseña <b>*</b></label>
                                <input type="password" 
                                       name="password" 
                                       id="password" 
                                       class="form-control @error('password') is-invalid @enderror" 
                                       placeholder="••••••••" 
                                       required>
                                @error('password')
                                    <small class="text-danger font-weight-bold">{{ $message }}</small>
                                @enderror
                            </div>

                            <!-- Repetir Password -->
                            <div class="col-md-6 form-group mb-3">
                                <label for="password_confirmation" class="font-weight-bold">Repetir Contraseña <b>*</b></label>
                                <input type="password" 
                                       name="password_confirmation" 
                                       id="password_confirmation" 
                                       class="form-control @error('password_confirmation') is-invalid @enderror" 
                                       placeholder="••••••••" 
                                       required>
                                @error('password_confirmation')
                                    <small class="text-danger font-weight-bold">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        <hr>

                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ url('admin/usuarios') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left mr-1"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary font-weight-bold">
                                <i class="bi bi-check-circle mr-1"></i> Guardar Registro
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection