@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">Novo Usuário</h1>
                <p class="page-subtitle">Adicione um novo usuário ao sistema</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.store') }}" method="POST" enctype="multipart/form-data" class="modern-form">
            @csrf

            <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') }}" 
                                   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') }}" 
                                   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') }}" 
                                   placeholder="usuario@exemplo.com"
                                   autocomplete="new-email"
                                   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') }}" 
                                   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') }}" 
                                   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') }}" 
                                   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') }}" 
                                   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') }}" 
                                   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>
                                <option value="AC" {{ old('uf') == 'AC' ? 'selected' : '' }}>AC</option>
                                <option value="AL" {{ old('uf') == 'AL' ? 'selected' : '' }}>AL</option>
                                <option value="AP" {{ old('uf') == 'AP' ? 'selected' : '' }}>AP</option>
                                <option value="AM" {{ old('uf') == 'AM' ? 'selected' : '' }}>AM</option>
                                <option value="BA" {{ old('uf') == 'BA' ? 'selected' : '' }}>BA</option>
                                <option value="CE" {{ old('uf') == 'CE' ? 'selected' : '' }}>CE</option>
                                <option value="DF" {{ old('uf') == 'DF' ? 'selected' : '' }}>DF</option>
                                <option value="ES" {{ old('uf') == 'ES' ? 'selected' : '' }}>ES</option>
                                <option value="GO" {{ old('uf') == 'GO' ? 'selected' : '' }}>GO</option>
                                <option value="MA" {{ old('uf') == 'MA' ? 'selected' : '' }}>MA</option>
                                <option value="MT" {{ old('uf') == 'MT' ? 'selected' : '' }}>MT</option>
                                <option value="MS" {{ old('uf') == 'MS' ? 'selected' : '' }}>MS</option>
                                <option value="MG" {{ old('uf') == 'MG' ? 'selected' : '' }}>MG</option>
                                <option value="PA" {{ old('uf') == 'PA' ? 'selected' : '' }}>PA</option>
                                <option value="PB" {{ old('uf') == 'PB' ? 'selected' : '' }}>PB</option>
                                <option value="PR" {{ old('uf') == 'PR' ? 'selected' : '' }}>PR</option>
                                <option value="PE" {{ old('uf') == 'PE' ? 'selected' : '' }}>PE</option>
                                <option value="PI" {{ old('uf') == 'PI' ? 'selected' : '' }}>PI</option>
                                <option value="RJ" {{ old('uf') == 'RJ' ? 'selected' : '' }}>RJ</option>
                                <option value="RN" {{ old('uf') == 'RN' ? 'selected' : '' }}>RN</option>
                                <option value="RS" {{ old('uf') == 'RS' ? 'selected' : '' }}>RS</option>
                                <option value="RO" {{ old('uf') == 'RO' ? 'selected' : '' }}>RO</option>
                                <option value="RR" {{ old('uf') == 'RR' ? 'selected' : '' }}>RR</option>
                                <option value="SC" {{ old('uf') == 'SC' ? 'selected' : '' }}>SC</option>
                                <option value="SP" {{ old('uf') == 'SP' ? 'selected' : '' }}>SP</option>
                                <option value="SE" {{ old('uf') == 'SE' ? 'selected' : '' }}>SE</option>
                                <option value="TO" {{ old('uf') == 'TO' ? 'selected' : '' }}>TO</option>
                            </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') }}" 
                                   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">Definir credenciais de acesso</p>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="password" class="field-label">Senha <span class="required">*</span></label>
                            <input type="password" 
                                   class="form-input @error('password') error @enderror" 
                                   id="password" 
                                   name="password" 
                                   placeholder="Digite uma senha segura"
                                   autocomplete="new-password"
                                   required>
                            @error('password')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <label for="password_confirmation" class="field-label">Confirmar senha <span class="required">*</span></label>
                            <input type="password" 
                                   class="form-input" 
                                   id="password_confirmation" 
                                   name="password_confirmation" 
                                   placeholder="Confirme a senha"
                                   autocomplete="new-password"
                                   required>
                        </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">Webmaster</option>
                                <option value="Administrador">Administrador</option>
                                <option value="Advogado">Advogado</option>
                                <option value="Estagiário">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') == $plan->id ? 'selected' : '' }}>
                                        {{ $plan->name }}
                                        @if($plan->price_monthly > 0)
                                            — R$ {{ number_format($plan->price_monthly, 2, ',', '.') }}/mês
                                        @else
                                            — Gratuito
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('plan_id')
                                <div class="field-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-field">
                            <div class="status-toggle">
                                <x-form.checkbox
                                    name="active"
                                    label="Usuário ativo"
                                    :checked="old('active', true)"
                                    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') }}</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">
                        <label for="avatar" class="field-label">Imagem de perfil</label>
                        <div class="file-upload-area" id="avatar-upload-area">
                            <input type="file" 
                                   class="file-input @error('avatar') error @enderror" 
                                   id="avatar" 
                                   name="avatar" 
                                   accept="image/*"
                                   onchange="previewAvatar(this)">
                            <div class="file-upload-content" id="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 class="avatar-preview" id="avatar-preview" style="display: none;">
                                <img id="preview-image" src="" alt="Preview do avatar">
                                <div class="preview-overlay">
                                    <button type="button" class="btn-change-avatar" onclick="document.getElementById('avatar').click()">
                                        <i class="bi bi-pencil"></i>
                                        Alterar
                                    </button>
                                    <button type="button" class="btn-remove-avatar" onclick="removeAvatar()">
                                        <i class="bi bi-trash"></i>
                                        Remover
                                    </button>
                                </div>
                            </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>Criar 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
            $('#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);
    }
});

// Função para preview do avatar
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            document.getElementById('preview-image').src = e.target.result;
            document.getElementById('upload-content').style.display = 'none';
            document.getElementById('avatar-preview').style.display = 'flex';
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}

// Função para remover avatar
function removeAvatar() {
    document.getElementById('avatar').value = '';
    document.getElementById('preview-image').src = '';
    document.getElementById('upload-content').style.display = 'flex';
    document.getElementById('avatar-preview').style.display = 'none';
}
</script>
@endpush