@extends('admin.layouts.app')

@section('title', 'Novo Usuário')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Novo Usuário</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.usuarios.index') }}">Usuários</a></li>
                    <li class="breadcrumb-item active">Novo</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Informações do Usuário</h3>
                    </div>
                    <form action="{{ route('admin.usuarios.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <!-- Dados Pessoais -->
                                <div class="col-md-6">
                                    <h5><i class="fas fa-user"></i> Dados Pessoais</h5>
                                    <hr>
                                    
                                    <div class="form-group">
                                        <label for="nome">Nome Completo <span class="text-danger">*</span></label>
                                        <input type="text" name="nome" id="nome" class="form-control @error('nome') is-invalid @enderror" 
                                               value="{{ old('nome') }}" required>
                                        @error('nome')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="email">E-mail <span class="text-danger">*</span></label>
                                        <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                                               value="{{ old('email') }}" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="telefone">Telefone <span class="text-danger">*</span></label>
                                        <input type="text" name="telefone" id="telefone" class="form-control @error('telefone') is-invalid @enderror" 
                                               value="{{ old('telefone') }}" required placeholder="(11) 99999-9999">
                                        @error('telefone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="data_nascimento">Data de Nascimento</label>
                                        <input type="date" name="data_nascimento" id="data_nascimento" 
                                               class="form-control @error('data_nascimento') is-invalid @enderror" 
                                               value="{{ old('data_nascimento') }}">
                                        @error('data_nascimento')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="genero">Gênero</label>
                                        <select name="genero" id="genero" class="form-control @error('genero') is-invalid @enderror">
                                            <option value="">Selecione...</option>
                                            <option value="masculino" {{ old('genero') == 'masculino' ? 'selected' : '' }}>Masculino</option>
                                            <option value="feminino" {{ old('genero') == 'feminino' ? 'selected' : '' }}>Feminino</option>
                                            <option value="outro" {{ old('genero') == 'outro' ? 'selected' : '' }}>Outro</option>
                                        </select>
                                        @error('genero')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="avatar">Avatar</label>
                                        <div class="custom-file">
                                            <input type="file" name="avatar" id="avatar" 
                                                   class="custom-file-input @error('avatar') is-invalid @enderror" 
                                                   accept="image/*">
                                            <label class="custom-file-label" for="avatar">Escolher arquivo</label>
                                            @error('avatar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="form-text text-muted">Formatos aceitos: JPG, PNG, GIF (máx. 2MB)</small>
                                        <div class="mt-2">
                                            <img id="avatar-preview" style="max-width: 100px; display: none;" class="img-thumbnail">
                                        </div>
                                    </div>
                                </div>

                                <!-- Dados Profissionais -->
                                <div class="col-md-6">
                                    <h5><i class="fas fa-briefcase"></i> Dados Profissionais</h5>
                                    <hr>

                                    <div class="form-group">
                                        <label for="tipo_usuario">Tipo de Usuário <span class="text-danger">*</span></label>
                                        <select name="tipo_usuario" id="tipo_usuario" class="form-control @error('tipo_usuario') is-invalid @enderror" required>
                                            <option value="">Selecione...</option>
                                            <option value="super_admin" {{ old('tipo_usuario') == 'super_admin' ? 'selected' : '' }}>Super Administrador</option>
                                            <option value="admin_geral" {{ old('tipo_usuario') == 'admin_geral' ? 'selected' : '' }}>Administrador Geral</option>
                                            <option value="proprietario" {{ old('tipo_usuario') == 'proprietario' ? 'selected' : '' }}>Proprietário</option>
                                            <option value="gerente" {{ old('tipo_usuario') == 'gerente' ? 'selected' : '' }}>Gerente</option>
                                            <option value="vendedor" {{ old('tipo_usuario') == 'vendedor' ? 'selected' : '' }}>Vendedor</option>
                                            <option value="cozinheiro" {{ old('tipo_usuario') == 'cozinheiro' ? 'selected' : '' }}>Cozinheiro</option>
                                            <option value="entregador" {{ old('tipo_usuario') == 'entregador' ? 'selected' : '' }}>Entregador</option>
                                            <option value="cliente" {{ old('tipo_usuario') == 'cliente' ? 'selected' : '' }}>Cliente</option>
                                        </select>
                                        @error('tipo_usuario')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="loja_id">Loja</label>
                                        <select name="loja_id" id="loja_id" class="form-control @error('loja_id') is-invalid @enderror">
                                            <option value="">Selecione uma loja...</option>
                                            @foreach($lojas as $loja)
                                                <option value="{{ $loja->id }}" {{ old('loja_id') == $loja->id ? 'selected' : '' }}>
                                                    {{ $loja->nome }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('loja_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="password">Senha <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="password" name="password" id="password" 
                                                   class="form-control @error('password') is-invalid @enderror" required>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password')">
                                                    <i class="fas fa-eye" id="password-icon"></i>
                                                </button>
                                            </div>
                                        </div>
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Mínimo 6 caracteres</small>
                                    </div>

                                    <div class="form-group">
                                        <label for="password_confirmation">Confirmar Senha <span class="text-danger">*</span></label>
                                        <input type="password" name="password_confirmation" id="password_confirmation" 
                                               class="form-control @error('password_confirmation') is-invalid @enderror" required>
                                        @error('password_confirmation')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="status">Status <span class="text-danger">*</span></label>
                                        <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required>
                                            <option value="ativo" {{ old('status') == 'ativo' ? 'selected' : '' }}>Ativo</option>
                                            <option value="inativo" {{ old('status') == 'inativo' ? 'selected' : '' }}>Inativo</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="salario">Salário</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">R$</span>
                                            </div>
                                            <input type="number" name="salario" id="salario" step="0.01" min="0" 
                                                   class="form-control @error('salario') is-invalid @enderror" 
                                                   value="{{ old('salario') }}">
                                        </div>
                                        @error('salario')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="data_admissao">Data de Admissão</label>
                                        <input type="date" name="data_admissao" id="data_admissao" 
                                               class="form-control @error('data_admissao') is-invalid @enderror" 
                                               value="{{ old('data_admissao') }}">
                                        @error('data_admissao')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <!-- Endereço -->
                                <div class="col-md-6">
                                    <h5><i class="fas fa-map-marker-alt"></i> Endereço</h5>
                                    <hr>

                                    <div class="form-group">
                                        <label for="cep">CEP</label>
                                        <input type="text" name="cep" id="cep" class="form-control @error('cep') is-invalid @enderror" 
                                               value="{{ old('cep') }}" placeholder="00000-000" maxlength="10">
                                        @error('cep')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="endereco">Endereço</label>
                                        <input type="text" name="endereco" id="endereco" class="form-control @error('endereco') is-invalid @enderror" 
                                               value="{{ old('endereco') }}" placeholder="Rua/Avenida...">
                                        @error('endereco')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="numero">Número</label>
                                        <input type="text" name="numero" id="numero" class="form-control @error('numero') is-invalid @enderror" 
                                               value="{{ old('numero') }}">
                                        @error('numero')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="complemento">Complemento</label>
                                        <input type="text" name="complemento" id="complemento" class="form-control @error('complemento') is-invalid @enderror" 
                                               value="{{ old('complemento') }}" placeholder="Apto, casa...">
                                        @error('complemento')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="bairro">Bairro</label>
                                        <input type="text" name="bairro" id="bairro" class="form-control @error('bairro') is-invalid @enderror" 
                                               value="{{ old('bairro') }}">
                                        @error('bairro')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label for="cidade">Cidade</label>
                                                <input type="text" name="cidade" id="cidade" class="form-control @error('cidade') is-invalid @enderror" 
                                                       value="{{ old('cidade') }}">
                                                @error('cidade')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="estado">Estado</label>
                                                <select name="estado" id="estado" class="form-control @error('estado') is-invalid @enderror">
                                                    <option value="">UF</option>
                                                    <option value="AC" {{ old('estado') == 'AC' ? 'selected' : '' }}>AC</option>
                                                    <option value="AL" {{ old('estado') == 'AL' ? 'selected' : '' }}>AL</option>
                                                    <option value="AP" {{ old('estado') == 'AP' ? 'selected' : '' }}>AP</option>
                                                    <option value="AM" {{ old('estado') == 'AM' ? 'selected' : '' }}>AM</option>
                                                    <option value="BA" {{ old('estado') == 'BA' ? 'selected' : '' }}>BA</option>
                                                    <option value="CE" {{ old('estado') == 'CE' ? 'selected' : '' }}>CE</option>
                                                    <option value="DF" {{ old('estado') == 'DF' ? 'selected' : '' }}>DF</option>
                                                    <option value="ES" {{ old('estado') == 'ES' ? 'selected' : '' }}>ES</option>
                                                    <option value="GO" {{ old('estado') == 'GO' ? 'selected' : '' }}>GO</option>
                                                    <option value="MA" {{ old('estado') == 'MA' ? 'selected' : '' }}>MA</option>
                                                    <option value="MT" {{ old('estado') == 'MT' ? 'selected' : '' }}>MT</option>
                                                    <option value="MS" {{ old('estado') == 'MS' ? 'selected' : '' }}>MS</option>
                                                    <option value="MG" {{ old('estado') == 'MG' ? 'selected' : '' }}>MG</option>
                                                    <option value="PA" {{ old('estado') == 'PA' ? 'selected' : '' }}>PA</option>
                                                    <option value="PB" {{ old('estado') == 'PB' ? 'selected' : '' }}>PB</option>
                                                    <option value="PR" {{ old('estado') == 'PR' ? 'selected' : '' }}>PR</option>
                                                    <option value="PE" {{ old('estado') == 'PE' ? 'selected' : '' }}>PE</option>
                                                    <option value="PI" {{ old('estado') == 'PI' ? 'selected' : '' }}>PI</option>
                                                    <option value="RJ" {{ old('estado') == 'RJ' ? 'selected' : '' }}>RJ</option>
                                                    <option value="RN" {{ old('estado') == 'RN' ? 'selected' : '' }}>RN</option>
                                                    <option value="RS" {{ old('estado') == 'RS' ? 'selected' : '' }}>RS</option>
                                                    <option value="RO" {{ old('estado') == 'RO' ? 'selected' : '' }}>RO</option>
                                                    <option value="RR" {{ old('estado') == 'RR' ? 'selected' : '' }}>RR</option>
                                                    <option value="SC" {{ old('estado') == 'SC' ? 'selected' : '' }}>SC</option>
                                                    <option value="SP" {{ old('estado') == 'SP' ? 'selected' : '' }}>SP</option>
                                                    <option value="SE" {{ old('estado') == 'SE' ? 'selected' : '' }}>SE</option>
                                                    <option value="TO" {{ old('estado') == 'TO' ? 'selected' : '' }}>TO</option>
                                                </select>
                                                @error('estado')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Documentos e Observações -->
                                <div class="col-md-6">
                                    <h5><i class="fas fa-file-alt"></i> Documentos e Observações</h5>
                                    <hr>

                                    <div class="form-group">
                                        <label for="tipo_documento">Tipo de Documento</label>
                                        <select name="tipo_documento" id="tipo_documento" class="form-control @error('tipo_documento') is-invalid @enderror">
                                            <option value="">Selecione...</option>
                                            <option value="cpf" {{ old('tipo_documento') == 'cpf' ? 'selected' : '' }}>CPF</option>
                                            <option value="cnpj" {{ old('tipo_documento') == 'cnpj' ? 'selected' : '' }}>CNPJ</option>
                                            <option value="rg" {{ old('tipo_documento') == 'rg' ? 'selected' : '' }}>RG</option>
                                        </select>
                                        @error('tipo_documento')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="numero_documento">Número do Documento</label>
                                        <input type="text" name="numero_documento" id="numero_documento" 
                                               class="form-control @error('numero_documento') is-invalid @enderror" 
                                               value="{{ old('numero_documento') }}">
                                        @error('numero_documento')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="observacoes">Observações</label>
                                        <textarea name="observacoes" id="observacoes" class="form-control @error('observacoes') is-invalid @enderror" 
                                                  rows="4" placeholder="Observações adicionais...">{{ old('observacoes') }}</textarea>
                                        @error('observacoes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <h5><i class="fas fa-key"></i> Permissões</h5>
                                    <hr>

                                    <div class="form-check">
                                        <input type="checkbox" name="permissao_entregas" id="permissao_entregas" 
                                               class="form-check-input" value="1" {{ old('permissao_entregas') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="permissao_entregas">
                                            Permissão para Gerenciar Entregas
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" name="permissao_caixa" id="permissao_caixa" 
                                               class="form-check-input" value="1" {{ old('permissao_caixa') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="permissao_caixa">
                                            Permissão para Gerenciar Caixa
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" name="permissao_estoque" id="permissao_estoque" 
                                               class="form-check-input" value="1" {{ old('permissao_estoque') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="permissao_estoque">
                                            Permissão para Gerenciar Estoque
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-6">
                                    <a href="{{ route('admin.usuarios.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left"></i> Voltar
                                    </a>
                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="reset" class="btn btn-warning">
                                        <i class="fas fa-undo"></i> Limpar
                                    </button>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-save"></i> Salvar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Preview do avatar
    $('#avatar').change(function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#avatar-preview').attr('src', e.target.result).show();
            }
            reader.readAsDataURL(file);
        }
    });

    // Máscara para telefone
    $('#telefone').inputmask('(99) 99999-9999');
    
    // Máscara para CEP
    $('#cep').inputmask('99999-999');
    
    // Busca CEP automaticamente
    $('#cep').blur(function() {
        const cep = $(this).val().replace(/\D/g, '');
        if (cep.length === 8) {
            $.get(`https://viacep.com.br/ws/${cep}/json/`)
                .done(function(data) {
                    if (!data.erro) {
                        $('#endereco').val(data.logradouro);
                        $('#bairro').val(data.bairro);
                        $('#cidade').val(data.localidade);
                        $('#estado').val(data.uf);
                    }
                });
        }
    });

    // Atualizar nome do arquivo selecionado
    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').addClass('selected').html(fileName);
    });

    // Validação de confirmação de senha
    $('#password_confirmation').on('keyup', function() {
        if ($('#password').val() !== $(this).val()) {
            $(this).addClass('is-invalid');
            $('<div class="invalid-feedback">As senhas não coincidem.</div>').insertAfter(this);
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });
});

function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(inputId + '-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>
@endpush