@extends('adminlte::page')

@section('title', 'Nuevo Usuario')

@section('content_header')
    <div class="container-fluid">
        {{-- Fila 1: Navegación superior aislada --}}
        <div class="row">
            <div class="col-12">
                @include('components.breadcrumbs', ['items' => [
                    'Usuarios' => 'users',
                    'Nuevo' => '#'
                ]])
            </div>
        </div>

        {{-- Fila 2: Título y Botón de Regreso --}}
        <div class="row align-items-center justify-content-between mt-2">
            <div class="col-auto">
                <h1 class="m-0 text-dark">
                    <i class="fas fa-user-plus mr-2"></i>Crear Nuevo Usuario
                </h1>
            </div>
            <div class="col-auto">
                <a href="{{ route('users.index') }}" class="btn btn-default btn-sm shadow-sm">
                    <i class="fas fa-arrow-left mr-1"></i> Volver al listado
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        {{-- Columna centrada y responsiva --}}
        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
            <div class="card card-outline card-primary shadow">
                <div class="card-header">
                    <h3 class="card-title">Formulario de Registro</h3>
                </div>
                
                <form action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        
                        {{-- Avatar con previsualización simple --}}
                        <div class="form-group text-center">
                            <label class="d-block">Foto de Perfil</label>
                            <div class="mb-3">
                                <img id="preview" src="{{ asset('storage/avatars/default.png') }}" 
                                     class="img-circle elevation-2" 
                                     style="width: 100px; height: 100px; object-fit: cover; cursor: pointer;"
                                     onclick="document.getElementById('avatarInput').click()">
                            </div>
                            <input type="file" name="avatar" id="avatarInput" class="d-none" onchange="previewImage(event)">
                            <small class="text-muted">Click en la imagen para subir (300x300 PNG recomendado)</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="small font-weight-bold">Nombre Completo</label>
                                    <input type="text" name="name" class="form-control form-control-sm @error('name') is-invalid @enderror" placeholder="Ej: Juan Pérez" required>
                                    @error('name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="small font-weight-bold">Correo Electrónico</label>
                                    <input type="email" name="email" class="form-control form-control-sm @error('email') is-invalid @enderror" placeholder="juan@ejemplo.com" required>
                                    @error('email') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="role" class="small font-weight-bold">Rol de Usuario</label>
                            <select name="role" class="form-control form-control-sm select2" data-placeholder="Selecciona Rol..." style="width: 100%;">
                                <option value="editor">Editor (Solo contenido)</option>
                                <option value="admin">Administrador (Gestión)</option>
                                <option value="super-admin">Super-Admin (Control total)</option>
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="password" class="small font-weight-bold">Contraseña</label>
                                    <input type="password" name="password" class="form-control form-control-sm @error('password') is-invalid @enderror" required>
                                    @error('password') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="password_confirmation" class="small font-weight-bold">Confirmar Contraseña</label>
                                    <input type="password" name="password_confirmation" class="form-control form-control-sm" required>
                                </div>
                            </div>
                        </div>

                        <div class="custom-control custom-switch mt-3">
                            <input type="checkbox" name="active" class="custom-control-input" id="activeSwitch" checked>
                            <label class="custom-control-label" for="activeSwitch">Activar cuenta inmediatamente</label>
                        </div>

                        @if(auth()->user() && auth()->user()->isAdmin())
                        <div class="custom-control custom-switch mt-2">
                            <input type="checkbox" name="experiencias_planes" class="custom-control-input" id="experienciasPlanesCreate">
                            <label class="custom-control-label" for="experienciasPlanesCreate">Permitir crear Experiencias y Planes</label>
                        </div>
                        @endif

                    </div>

                    <div class="card-footer bg-transparent border-top-0">
                        <button type="submit" class="btn btn-primary btn-block shadow">
                            <i class="fas fa-save mr-1"></i> Registrar Usuario
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    // Función para previsualizar la imagen antes de subirla
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('preview');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@stop