@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/components/user-form.css') }}">
@endpush

@section('content')
<div class="modern-page-container">
    <!-- Header da página -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">Editar Usuário</h1>
                <p class="page-subtitle">Atualizar informações do usuário</p>
            </div>
            <a href="{{ route('users.index') }}" class="btn-modern btn-outline">
                <i class="bi bi-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    <!-- Formulário -->
    <div class="form-card">
        <form action="{{ route('users.update', $user) }}" method="POST" enctype="multipart/form-data" class="modern-form">
            @csrf
            @method('PUT')

            <div class="form-sections">
                <!-- Seção: Informações Básicas -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Informações Básicas</h3>
                        <p class="section-description">Dados principais do usuário</p>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="name" class="field-label">Nome completo <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('name') error @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name', $user->name) }}" 
                                   placeholder="Digite o nome completo"
                                   required>
                            @error('name')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="cpf_cnpj" class="field-label">CPF/CNPJ <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('cpf_cnpj') error @enderror" 
                                   id="cpf_cnpj" 
                                   name="cpf_cnpj" 
                                   value="{{ old('cpf_cnpj', $user->cpf_cnpj) }}" 
                                   placeholder="Digite o CPF ou CNPJ"
                                   required>
                            @error('cpf_cnpj')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="email" class="field-label">Email <span class="required">*</span></label>
                            <input type="email" 
                                   class="form-input @error('email') error @enderror" 
                                   id="email" 
                                   name="email" 
                                   value="{{ old('email', $user->email) }}" 
                                   placeholder="usuario@exemplo.com"
                                   required>
                            @error('email')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="celular" class="field-label">Celular <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('celular') error @enderror" 
                                   id="celular" 
                                   name="celular" 
                                   value="{{ old('celular', $user->celular) }}" 
                                   placeholder="(99) 99999-9999"
                                   required>
                            @error('celular')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Seção: Endereço -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Endereço</h3>
                        <p class="section-description">Informações de localização</p>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-field full-width">
                            <label for="endereco" class="field-label">Endereço <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('endereco') error @enderror" 
                                   id="endereco" 
                                   name="endereco" 
                                   value="{{ old('endereco', $user->endereco) }}" 
                                   placeholder="Digite o endereço completo"
                                   required>
                            @error('endereco')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="complemento" class="field-label">Complemento</label>
                            <input type="text" 
                                   class="form-input @error('complemento') error @enderror" 
                                   id="complemento" 
                                   name="complemento" 
                                   value="{{ old('complemento', $user->complemento) }}" 
                                   placeholder="Apto, sala, bloco...">
                            @error('complemento')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="bairro" class="field-label">Bairro <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('bairro') error @enderror" 
                                   id="bairro" 
                                   name="bairro" 
                                   value="{{ old('bairro', $user->bairro) }}" 
                                   placeholder="Digite o bairro"
                                   required>
                            @error('bairro')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="cidade" class="field-label">Cidade <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('cidade') error @enderror" 
                                   id="cidade" 
                                   name="cidade" 
                                   value="{{ old('cidade', $user->cidade) }}" 
                                   placeholder="Digite a cidade"
                                   required>
                            @error('cidade')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="uf" class="field-label">UF <span class="required">*</span></label>
                            <select class="form-input @error('uf') error @enderror" 
                                    id="uf" 
                                    name="uf" 
                                    required>
                                <option value="">Selecione o estado</option>
                                @php
                                    $estados = ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'];
                                @endphp
                                @foreach($estados as $estado)
                                    <option value="{{ $estado }}" {{ old('uf', $user->uf) == $estado ? 'selected' : '' }}>{{ $estado }}</option>
                                @endforeach
                            </select>
                            @error('uf')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="cep" class="field-label">CEP <span class="required">*</span></label>
                            <input type="text" 
                                   class="form-input @error('cep') error @enderror" 
                                   id="cep" 
                                   name="cep" 
                                   value="{{ old('cep', $user->cep) }}" 
                                   placeholder="00000-000"
                                   required>
                            @error('cep')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Seção: Segurança -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Segurança</h3>
                        <p class="section-description">Alterar credenciais de acesso (deixe em branco para manter a senha atual)</p>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="password" class="field-label">Nova senha</label>
                            <input type="password" 
                                   class="form-input @error('password') error @enderror" 
                                   id="password" 
                                   name="password" 
                                   placeholder="Digite uma nova senha (opcional)"
                                   autocomplete="off">
                            @error('password')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="password_confirmation" class="field-label">Confirmar nova senha</label>
                            <input type="password" 
                                   class="form-input" 
                                   id="password_confirmation" 
                                   name="password_confirmation" 
                                   placeholder="Confirme a nova senha"
                                   autocomplete="off">
                        </div>
                    </div>
                </div>

                <!-- Seção: Perfil e Permissões -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Perfil e Permissões</h3>
                        <p class="section-description">Definir papel, plano e status do usuário</p>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="perfil" class="field-label">Perfil <span class="required">*</span></label>
                            <select class="form-input @error('perfil') error @enderror" 
                                    id="perfil" 
                                    name="perfil" 
                                    required>
                                <option value="">Selecione o perfil</option>
                                <option value="Webmaster" {{ old('perfil', $user->perfil) == 'Webmaster' ? 'selected' : '' }}>Webmaster</option>
                                <option value="Administrador" {{ old('perfil', $user->perfil) == 'Administrador' ? 'selected' : '' }}>Administrador</option>
                                <option value="Advogado" {{ old('perfil', $user->perfil) == 'Advogado' ? 'selected' : '' }}>Advogado</option>
                                <option value="Estagiário" {{ old('perfil', $user->perfil) == 'Estagiário' ? 'selected' : '' }}>Estagiário</option>
                            </select>
                            @error('perfil')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="plan_id" class="field-label">Plano de assinatura</label>
                            <select class="form-input @error('plan_id') error @enderror"
                                    id="plan_id"
                                    name="plan_id">
                                <option value="">— Sem plano —</option>
                                @foreach($plans as $plan)
                                    <option value="{{ $plan->id }}"
                                        {{ old('plan_id', $user->plan_id) == $plan->id ? 'selected' : '' }}>
                                        {{ $plan->name }}
                                        @if($plan->price_monthly > 0)
                                            — R$ {{ number_format($plan->price_monthly, 2, ',', '.') }}/mês
                                        @else
                                            — Gratuito
                                        @endif
                                        @unless($plan->is_active)
                                            (inativo)
                                        @endunless
                                    </option>
                                @endforeach
                            </select>
                            @error('plan_id')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                            @if($user->plan)
                                <small class="text-muted">
                                    Plano atual: <strong>{{ $user->plan->name }}</strong>
                                    &mdash; lê a cada {{ $user->plan->min_read_interval_minutes }} min,
                                    até {{ $user->plan->max_sources }} fontes,
                                    {{ $user->plan->max_destinations }} destinos
                                </small>
                            @endif
                        </div>

                        <div class="form-field">
                            <div class="status-toggle">
                                <x-form.checkbox
                                    name="active"
                                    label="Usuário ativo"
                                    :checked="old('active', $user->active)"
                                    switch
                                />
                                <p class="status-description">Usuários ativos podem fazer login no sistema</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Seção: Observações -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Observações</h3>
                        <p class="section-description">Informações adicionais</p>
                    </div>
                    
                    <div class="form-field">
                        <label for="obs" class="field-label">Observações</label>
                        <textarea class="form-input @error('obs') error @enderror" 
                                  id="obs" 
                                  name="obs" 
                                  rows="4" 
                                  placeholder="Digite observações adicionais">{{ old('obs', $user->obs) }}</textarea>
                        @error('obs')
                            <div class="field-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Seção: Avatar -->
                <div class="form-section">
                    <div class="section-header">
                        <h3 class="section-title">Avatar</h3>
                        <p class="section-description">Imagem de perfil do usuário</p>
                    </div>
                    
                    <div class="form-field">
                        @if($user->avatar)
                            <div class="current-avatar">
                                <img src="{{ asset('storage/' . $user->avatar) }}" alt="Avatar atual" class="avatar-preview">
                                <p class="avatar-label">Avatar atual</p>
                            </div>
                        @endif
                        
                        <label for="avatar" class="field-label">{{ $user->avatar ? 'Alterar' : 'Adicionar' }} imagem de perfil</label>
                        <div class="file-upload-area">
                            <input type="file" 
                                   class="file-input @error('avatar') error @enderror" 
                                   id="avatar" 
                                   name="avatar" 
                                   accept="image/*">
                            <div class="file-upload-content">
                                <i class="bi bi-cloud-upload file-upload-icon"></i>
                                <p class="file-upload-text">Clique para selecionar ou arraste uma imagem aqui</p>
                                <p class="file-upload-hint">PNG, JPG ou JPEG até 2MB</p>
                            </div>
                        </div>
                        @error('avatar')
                            <div class="field-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Ações do formulário -->
            <div class="form-actions">
                <a href="{{ route('users.index') }}" class="btn-modern btn-outline">
                    <span>Cancelar</span>
                </a>
                <button type="submit" class="btn-modern btn-primary">
                    <i class="bi bi-check-lg"></i>
                    <span>Atualizar Usuário</span>
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function() {
    // Máscara para CPF/CNPJ que detecta e transiciona automaticamente
    var cpfCnpjMaskBehavior = function (val) {
        return val.replace(/\D/g, '').length > 11 ? '00.000.000/0000-00' : '000.000.000-00999';
    };
    
    var cpfCnpjOptions = {
        onKeyPress: function(val, e, field, options) {
            field.mask(cpfCnpjMaskBehavior.apply({}, arguments), options);
        }
    };
    
    $('#cpf_cnpj').mask(cpfCnpjMaskBehavior, cpfCnpjOptions);

    // Máscara para celular com preenchimento automático de senha
    $('#celular').mask('(00) 00000-0000', {
        onComplete: function(val) {
            // Remove caracteres não numéricos
            var numeros = val.replace(/\D/g, '');
            // Define a senha como o número do celular (apenas se estiver vazia)
            if ($('#password').val() === '') {
                $('#password').val(numeros);
                $('#password_confirmation').val(numeros);
            }
        }
    });

    // Máscara para CEP
    $('#cep').mask('00000-000');

    // Rolar até o primeiro campo com erro ao carregar a página
    if ($('.error').length > 0) {
        $('html, body').animate({
            scrollTop: $('.error').first().offset().top - 100
        }, 500);
    }

    // Verificar perfil inicial para mostrar/ocultar pró-labore
    $('#perfil').trigger('change');
});
</script>
@endpush