@extends('layouts.app')

@section('title', 'Nuevo Usuario — TI Manager')

@section('content')
<div class="animate-fadeIn">

    {{-- Botón Volver --}}
    <a href="{{ route('users.index') }}" class="btn btn-ghost btn-sm mb-md">
        <i class="ph ph-arrow-left"></i> Volver a usuarios
    </a>

    {{-- Encabezado --}}
    <div class="page-header">
        <h1 class="page-title">
            <i class="ph ph-user-plus" style="color: var(--primary);"></i>
            Nuevo Usuario
        </h1>
    </div>

    {{-- Formulario --}}
    <form action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="card" x-data="{ selectedRole: '{{ old('role', '') }}' }">
            <div style="display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px;">
                {{-- Avatar Upload Gráfico --}}
                <div style="flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; gap: 10px;">
                    <label class="form-label" style="margin-bottom: 0;">Foto de Perfil</label>
                    <div style="width: 120px; height: 120px; border-radius: 50%; border: 2px dashed rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); position: relative; cursor: pointer; transition: var(--transition-fast);"
                         onclick="askImageUploadSource('avatar')"
                         onmouseover="this.style.borderColor='var(--primary)'; this.style.background='rgba(var(--primary-rgb), 0.05)';"
                         onmouseout="this.style.borderColor='rgba(0,0,0,0.15)'; this.style.background='rgba(0,0,0,0.02)';">
                        
                        <img id="avatar-preview" style="width: 100%; height: 100%; object-fit: cover; display: none;">
                        
                        <div id="avatar-placeholder" style="display: flex; flex-direction: column; align-items: center; color: var(--text-muted); text-align: center;">
                            <i class="ph ph-camera" style="font-size: 2rem; margin-bottom: 4px; color: var(--primary);"></i>
                            <span style="font-size: 0.75rem; font-weight: 600;">Subir foto</span>
                        </div>
                    </div>
                    <input type="file" id="avatar" name="avatar" style="display: none;" accept="image/*" onchange="previewFile(this, 'avatar-preview', 'avatar-placeholder')">
                    @error('avatar')
                        <span class="form-error" style="font-size: 0.75rem;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Campos Principales --}}
                <div style="flex: 1; display: flex; flex-direction: column; gap: 15px; min-width: 250px;">
                    <div class="form-row">
                        {{-- Nombre --}}
                        <div class="form-group">
                            <label for="name" class="form-label">
                                Nombre <span class="required">*</span>
                            </label>
                            <input type="text"
                                   id="name"
                                   name="name"
                                   class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                   value="{{ old('name') }}"
                                   placeholder="Nombre completo"
                                   required>
                            @error('name')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Correo Electrónico --}}
                        <div class="form-group">
                            <label for="email" class="form-label">
                                Correo electrónico <span class="required">*</span>
                            </label>
                            <input type="email"
                                   id="email"
                                   name="email"
                                   class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                   value="{{ old('email') }}"
                                   placeholder="correo@ejemplo.com"
                                   required>
                            @error('email')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                        {{-- Contraseña --}}
                        <div class="form-group">
                            <label for="password" class="form-label">
                                Contraseña <span class="required">*</span>
                            </label>
                            <input type="password"
                                   id="password"
                                   name="password"
                                   class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                   placeholder="Mínimo 8 caracteres"
                                   minlength="8"
                                   required>
                            @error('password')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Teléfono --}}
                        <div class="form-group">
                            <label for="phone" class="form-label">
                                Teléfono
                            </label>
                            <input type="tel"
                                   id="phone"
                                   name="phone"
                                   class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}"
                                   value="{{ old('phone') }}"
                                   placeholder="+52 123 456 7890">
                            @error('phone')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        
                        {{-- Rol --}}
                        <div class="form-group">
                            <label for="role" class="form-label">
                                Rol <span class="required">*</span>
                            </label>
                            <select id="role"
                                    name="role"
                                    class="form-control {{ $errors->has('role') ? 'is-invalid' : '' }}"
                                    required
                                    x-model="selectedRole">
                                <option value="" disabled>Seleccionar rol...</option>
                                <option value="super_admin">Super Admin</option>
                                <option value="technician">Técnico</option>
                                <option value="client">Cliente</option>
                            </select>
                            @error('role')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- Activo (Toggle) --}}
                    <div class="form-group" style="margin-top: 5px;">
                        <label class="form-toggle">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox"
                                   name="is_active"
                                   value="1"
                                   {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                            <span class="toggle-slider"></span>
                            <span class="form-label" style="margin-bottom: 0;">Usuario activo</span>
                        </label>
                    </div>

                    {{-- Empresas asignadas para Técnicos y Clientes --}}
                    <div class="form-group" x-show="selectedRole === 'technician' || selectedRole === 'client'" x-cloak style="margin-top: 5px;">
                        <label class="form-label">
                            Empresas asignadas <span class="required">*</span>
                        </label>
                        <div class="card" style="padding: var(--space-md); max-height: 250px; overflow-y: auto;">
                            @foreach($companies as $company)
                                <label class="form-check" style="min-height: 40px;">
                                    <input type="checkbox"
                                           name="company_ids[]"
                                           value="{{ $company->id }}"
                                           {{ in_array($company->id, old('company_ids', [])) ? 'checked' : '' }}>
                                    <span style="color: var(--text-secondary); font-size: 0.85rem;">
                                        {{ $company->name }}
                                        @if($company->city)
                                            <span class="text-muted">— {{ $company->city }}</span>
                                        @endif
                                    </span>
                                </label>
                            @endforeach
                            @if($companies->isEmpty())
                                <p class="text-muted text-sm">No hay empresas registradas aún.</p>
                            @endif
                        </div>
                        @error('company_ids')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Botones de Acción --}}
        <div class="d-flex gap-md mt-lg" style="flex-wrap: wrap;">
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-floppy-disk"></i> Guardar
            </button>
            <a href="{{ route('users.index') }}" class="btn btn-outline">
                Cancelar
            </a>
        </div>
    </form>

</div>
@endsection

@push('scripts')

@endpush