@extends('layouts.admin')

@section('title')
    @lang('translation.Crear Usuario')
@endsection

@section('css')
    <!-- Select2 -->
    <link href="{{ URL::asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Dropzone -->
    <link href="{{ URL::asset('build/libs/dropzone/min/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.usuarios.index') }}">Usuarios</a>
        @endslot
        @slot('title')
            Crear Usuario
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Nuevo Usuario</h4>
                    <p class="text-muted mb-0">Complete la información para crear un nuevo usuario</p>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.usuarios.store') }}" method="POST" enctype="multipart/form-data" id="formUsuario">
                        @csrf
                        
                        <div class="row">
                            <!-- Información Personal -->
                            <div class="col-lg-8">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">
                                            <i class="bx bx-user me-2"></i>Información Personal
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Nombre Completo <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                           id="name" name="name" value="{{ old('name') }}" required 
                                                           placeholder="Ingrese el nombre completo">
                                                    @error('name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                                           id="email" name="email" value="{{ old('email') }}" required 
                                                           placeholder="usuario@ejemplo.com">
                                                    @error('email')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="telefono" class="form-label">Teléfono</label>
                                                    <input type="tel" class="form-control @error('telefono') is-invalid @enderror" 
                                                           id="telefono" name="telefono" value="{{ old('telefono') }}" 
                                                           placeholder="+57 300 123 4567">
                                                    @error('telefono')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="tipo_documento" class="form-label">Tipo Documento</label>
                                                    <select class="form-select @error('tipo_documento') is-invalid @enderror" 
                                                            id="tipo_documento" name="tipo_documento">
                                                        <option value="">Seleccionar</option>
                                                        <option value="DNI" {{ old('tipo_documento') == 'DNI' ? 'selected' : '' }}>DNI</option>
                                                        <option value="Pasaporte" {{ old('tipo_documento') == 'Pasaporte' ? 'selected' : '' }}>Pasaporte</option>
                                                        <option value="Cedula de Extranjeria" {{ old('tipo_documento') == 'Cedula de Extranjeria' ? 'selected' : '' }}>Cédula de Extranjería</option>
                                                    </select>
                                                    @error('tipo_documento')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="documento_identidad" class="form-label">Documento Identidad</label>
                                                    <input type="text" class="form-control @error('documento_identidad') is-invalid @enderror" 
                                                           id="documento_identidad" name="documento_identidad" value="{{ old('documento_identidad') }}" 
                                                           placeholder="123456789">
                                                    @error('documento_identidad')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="fecha_nacimiento" class="form-label">Fecha Nacimiento</label>
                                                    <input type="date" class="form-control @error('fecha_nacimiento') is-invalid @enderror" 
                                                           id="fecha_nacimiento" name="fecha_nacimiento" value="{{ old('fecha_nacimiento') }}">
                                                    @error('fecha_nacimiento')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="direccion" class="form-label">Dirección</label>
                                            <textarea class="form-control @error('direccion') is-invalid @enderror" 
                                                      id="direccion" name="direccion" rows="2" 
                                                      placeholder="Dirección completa...">{{ old('direccion') }}</textarea>
                                            @error('direccion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="mb-3">
                                                    <label for="ciudad" class="form-label">Ciudad</label>
                                                    <input type="text" class="form-control @error('ciudad') is-invalid @enderror" 
                                                           id="ciudad" name="ciudad" value="{{ old('ciudad') }}" 
                                                           placeholder="Ej: Bogotá, Medellín, Cali">
                                                    @error('ciudad')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Información de Acceso -->
                                <div class="card border mt-3">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">
                                            <i class="bx bx-lock me-2"></i>Información de Acceso
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="password" class="form-label">Contraseña <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                               id="password" name="password" required 
                                               placeholder="Mínimo 8 caracteres"
                                               autocomplete="new-password">
                                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password')">
                                                            <i class="bx bx-show" id="password-icon"></i>
                                                        </button>
                                                    </div>
                                                    @error('password')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="form-text">
                                                        La contraseña debe tener al menos 8 caracteres
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="password_confirmation" class="form-label">Confirmar Contraseña <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="password" class="form-control" 
                                               id="password_confirmation" name="password_confirmation" required 
                                               placeholder="Confirme la contraseña"
                                               autocomplete="new-password">
                                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password_confirmation')">
                                                            <i class="bx bx-show" id="password_confirmation-icon"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="rol" class="form-label">Rol <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('rol') is-invalid @enderror" 
                                                            id="rol" name="rol" required>
                                                        <option value="">Seleccionar rol</option>
                                                        <option value="admin" {{ old('rol') == 'admin' ? 'selected' : '' }}>Administrador</option>
                                                        <option value="propietario" {{ old('rol') == 'propietario' ? 'selected' : '' }}>Propietario</option>
                                                        <option value="usuario" {{ old('rol') == 'usuario' ? 'selected' : '' }}>Usuario</option>
                                                    </select>
                                                    @error('rol')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="estado" class="form-label">Estado <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('estado') is-invalid @enderror" 
                                                            id="estado" name="estado" required>
                                                        <option value="activo" {{ old('estado', 'activo') == 'activo' ? 'selected' : '' }}>Activo</option>
                                                        <option value="inactivo" {{ old('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                                                        <option value="suspendido" {{ old('estado') == 'suspendido' ? 'selected' : '' }}>Suspendido</option>
                                                    </select>
                                                    @error('estado')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="email_verificado" 
                                                           name="email_verificado" value="1" {{ old('email_verificado') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="email_verificado">
                                                        Marcar email como verificado
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Avatar y Configuraciones -->
                            <div class="col-lg-4">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">
                                            <i class="bx bx-image me-2"></i>Avatar
                                        </h5>
                                    </div>
                                    <div class="card-body text-center">
                                        <div class="mb-3">
                                            <div class="avatar-preview mb-3">
                                                <img id="avatar-preview" src="{{ asset('images/users/avatar-default.svg') }}" 
                                                     alt="Avatar" class="rounded-circle" width="120" height="120" 
                                                     style="object-fit: cover; border: 3px solid #e9ecef;">
                                            </div>
                                            <input type="file" class="form-control @error('avatar') is-invalid @enderror" 
                                                   id="avatar" name="avatar" accept="image/*" onchange="previewAvatar(this)">
                                            @error('avatar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">
                                                Formatos: JPG, PNG, GIF. Máximo 2MB
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Información Adicional -->
                                <div class="card border mt-3">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">
                                            <i class="bx bx-cog me-2"></i>Configuraciones
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="genero" class="form-label">Género</label>
                                            <select class="form-select @error('genero') is-invalid @enderror" 
                                                    id="genero" name="genero">
                                                <option value="">No especificar</option>
                                                <option value="masculino" {{ old('genero') == 'masculino' ? 'selected' : '' }}>Masculino</option>
                                                <option value="femenino" {{ old('genero') == 'femenino' ? 'selected' : '' }}>Femenino</option>
                                                <option value="otro" {{ old('genero') == 'otro' ? 'selected' : '' }}>Otro</option>
                                            </select>
                                            @error('genero')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        

                                        
                                        <div class="mb-3">
                                            <label class="form-label">Preferencias Deportivas</label>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="futbol" id="pref_futbol" {{ in_array('futbol', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_futbol">Fútbol</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="basquet" id="pref_basquet" {{ in_array('basquet', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_basquet">Básquet</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="tenis" id="pref_tenis" {{ in_array('tenis', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_tenis">Tenis</label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="voleibol" id="pref_voleibol" {{ in_array('voleibol', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_voleibol">Voleibol</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="padel" id="pref_padel" {{ in_array('padel', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_padel">Pádel</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="preferencias_deportivas[]" 
                                                               value="otros" id="pref_otros" {{ in_array('otros', old('preferencias_deportivas', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="pref_otros">Otros</label>
                                                    </div>
                                                </div>
                                            </div>
                                            @error('preferencias_deportivas')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="observaciones" class="form-label">Observaciones</label>
                                            <textarea class="form-control @error('observaciones') is-invalid @enderror" 
                                                      id="observaciones" name="observaciones" rows="3" 
                                                      placeholder="Notas adicionales sobre el usuario...">{{ old('observaciones') }}</textarea>
                                            @error('observaciones')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="notificar_creacion" 
                                                   name="notificar_creacion" value="1" {{ old('notificar_creacion', '1') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notificar_creacion">
                                                Enviar email de bienvenida
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Botones de acción -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.usuarios.index') }}" class="btn btn-secondary">
                                        <i class="bx bx-x me-1"></i> Cancelar
                                    </a>
                                    <button type="button" class="btn btn-outline-primary" onclick="limpiarFormulario()">
                                        <i class="bx bx-refresh me-1"></i> Limpiar
                                    </button>
                                    <button type="submit" class="btn btn-primary" id="btnGuardar">
                                        <i class="bx bx-save me-1"></i> Crear Usuario
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Select2 -->
    <script src="{{ URL::asset('build/libs/select2/js/select2.min.js') }}"></script>
    <!-- Validation -->
    <script src="{{ URL::asset('build/libs/parsleyjs/parsley.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            // Inicializar Select2
            $('.select2').select2({
                placeholder: 'Seleccionar...',
                allowClear: true
            });
            
            // Inicializar validación
            $('#formUsuario').parsley();
            
            // Validación personalizada para confirmar contraseña
            $('#password_confirmation').on('input', function() {
                const password = $('#password').val();
                const confirmation = $(this).val();
                
                if (password !== confirmation) {
                    $(this).addClass('is-invalid');
                    $(this).next('.invalid-feedback').remove();
                    $(this).after('<div class="invalid-feedback">Las contraseñas no coinciden</div>');
                } else {
                    $(this).removeClass('is-invalid');
                    $(this).next('.invalid-feedback').remove();
                }
            });
            
            // Validación de email único
            $('#email').on('blur', function() {
                const email = $(this).val();
                if (email) {
                    // Aquí podrías hacer una validación AJAX para verificar si el email ya existe
                }
            });
            
            // Formatear teléfono
            $('#telefono').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 0) {
                    if (value.length <= 3) {
                        value = value;
                    } else if (value.length <= 6) {
                        value = value.substring(0, 3) + ' ' + value.substring(3);
                    } else {
                        value = value.substring(0, 3) + ' ' + value.substring(3, 6) + ' ' + value.substring(6, 10);
                    }
                }
                $(this).val(value);
            });
        });
        
        function togglePassword(fieldId) {
            const field = document.getElementById(fieldId);
            const icon = document.getElementById(fieldId + '-icon');
            
            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.remove('bx-show');
                icon.classList.add('bx-hide');
            } else {
                field.type = 'password';
                icon.classList.remove('bx-hide');
                icon.classList.add('bx-show');
            }
        }
        
        function previewAvatar(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    $('#avatar-preview').attr('src', e.target.result);
                };
                
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        function limpiarFormulario() {
            if (confirm('¿Está seguro que desea limpiar todos los campos?')) {
                $('#formUsuario')[0].reset();
                $('#avatar-preview').attr('src', '{{ asset('images/users/avatar-default.svg') }}');
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();
            }
        }
        
        // Mostrar información del rol seleccionado
        $('#rol').change(function() {
            const rol = $(this).val();
            let descripcion = '';
            
            switch(rol) {
                case 'admin':
                    descripcion = 'Acceso completo al sistema';
                    break;
                case 'propietario':
                    descripcion = 'Puede gestionar sus canchas y reservas';
                    break;
                case 'usuario':
                    descripcion = 'Puede realizar reservas';
                    break;
            }
            
            // Remover descripción anterior
            $(this).next('.form-text').remove();
            
            if (descripcion) {
                $(this).after(`<div class="form-text">${descripcion}</div>`);
            }
        });
        
        // Validación antes de enviar
        $('#formUsuario').submit(function(e) {
            const password = $('#password').val();
            const confirmation = $('#password_confirmation').val();
            
            if (password !== confirmation) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Error de validación',
                    text: 'Las contraseñas no coinciden'
                });
                return false;
            }
            
            // Mostrar loading
            $('#btnGuardar').prop('disabled', true).html('<i class="bx bx-loader bx-spin me-1"></i> Creando...');
        });
        
        // Mostrar mensajes de error
        @if($errors->any())
            Swal.fire({
                icon: 'error',
                title: 'Errores de validación',
                html: '@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach'
            });
        @endif
    </script>
@endsection