@php
$title = 'Novo Colaborador';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`#`)" class="text-decoration-none text-secondary">Cadastro</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('colaboradores.list') }}`)" class="text-decoration-none text-secondary">Colaboradores</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Novo Colaborador</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Novo Colaborador
            </h1>
            <span class="text-muted small">Cadastre um novo colaborador no sistema</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('colaboradores.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Dados do Colaborador</span>
        </div>
        <div class="card-body">
            <form id="formNovoColaborador" class="needs-validation" novalidate>
                @csrf
                
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="codigo" class="form-label">Código</label>
                        <input type="text" class="form-control" id="codigo" name="codigo" value="{{ $codigo }}" readonly style="background-color: #e9ecef;">
                    </div>
                    <div class="col-md-6">
                        <label for="nome" class="form-label required-field">Nome Completo</label>
                        <input type="text" class="form-control" id="nome" name="nome" required>
                        <div class="invalid-feedback">Por favor, informe o nome completo.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="cpf" class="form-label required-field">CPF</label>
                        <input type="text" class="form-control" id="cpf" name="cpf" required data-mask="cpf">
                        <div class="invalid-feedback">Por favor, informe o CPF.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="cnpj" class="form-label">CNPJ</label>
                        <input type="text" class="form-control" id="cnpj" name="cnpj" data-mask="cnpj">
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="data_nascimento" class="form-label required-field">Data de Nascimento</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_nascimento" name="data_nascimento" required style="z-index: 1 !important;" autocomplete="off" data-mask="date" readonly>
                            <span class="input-group-text" data-datepicker-toggle><i class="bi bi-calendar"></i></span>
                        </div>
                        <div class="invalid-feedback">Por favor, informe a data de nascimento.</div>
                    </div>
                    <div class="col-md-5">
                        <label for="email" class="form-label required-field">E-mail</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                        <div class="invalid-feedback">Por favor, informe um e-mail válido.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="telefone" class="form-label">Telefone</label>
                        <input type="text" class="form-control" id="telefone" name="telefone" data-mask="phone">
                    </div>
                    <div class="col-md-2">
                        <label for="celular" class="form-label required-field">Celular</label>
                        <input type="text" class="form-control" id="celular" name="celular" required data-mask="phone">
                        <div class="invalid-feedback">Por favor, informe o celular.</div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="chave_pix" class="form-label">Chave PIX</label>
                        <input type="text" class="form-control" id="chave_pix" name="chave_pix">
                        <small class="text-muted">CPF, CNPJ, E-mail, Celular ou Chave Aleatória</small>
                    </div>
                    <div class="col-md-4">
                        <label for="modalidade_contrato" class="form-label required-field">Modalidade do Contrato</label>
                        <select class="form-select" id="modalidade_contrato" name="modalidade_contrato" required>
                            <option value="">Selecione...</option>
                            <option value="CLT">CLT</option>
                            <option value="PJ">PJ</option>
                            <option value="Freelancer">Freelancer</option>
                            <option value="Estagiário">Estagiário</option>
                            <option value="Temporário">Temporário</option>
                        </select>
                        <div class="invalid-feedback">Por favor, selecione a modalidade do contrato.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="area_id" class="form-label required-field">Área</label>
                        <select class="form-select" id="area_id" name="area_id" required>
                            <option value="">Selecione...</option>
                            @foreach($areas as $area)
                                <option value="{{ $area->id }}">{{ $area->nome }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione a área.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="cargo_id" class="form-label required-field">Cargo</label>
                        <select class="form-select" id="cargo_id" name="cargo_id" required>
                            <option value="">Selecione...</option>
                            @foreach($cargos as $cargo)
                                <option value="{{ $cargo->id }}">{{ $cargo->nome }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o cargo.</div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="status" class="form-label required-field">Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="">Selecione...</option>
                            <option value="ATIVO" selected>Ativo</option>
                            <option value="INATIVO">Inativo</option>
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o status.</div>
                    </div>
                </div>

                {{-- Seção: Criar Acesso ao Sistema (Somente Administradores) --}}
                @if($isAdmin)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card border" style="background-color: #ffffff; border-left: 4px solid #0d6efd !important;">
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="criar_usuario" name="criar_usuario" value="1">
                                    <label class="form-check-label fw-bold" for="criar_usuario" style="font-size: 1.05rem;">
                                        <i class="bi bi-person-lock me-2 text-primary"></i>Criar acesso ao sistema para este colaborador
                                    </label>
                                </div>
                                <div id="secao-usuario" style="display: none;">
                                <p class="text-muted small mb-4">
                                    <i class="bi bi-info-circle me-2"></i>
                                    Ao marcar esta opção, um usuário será criado e vinculado a este colaborador. Um e-mail será enviado com um link para que o colaborador defina sua própria senha.
                                </p>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="group_id" class="form-label required-field">Grupo de Acesso</label>
                                        <select class="form-select" id="group_id" name="group_id">
                                            <option value="">Selecione...</option>
                                            @foreach($grupos as $grupo)
                                                <option value="{{ $grupo->id }}">{{ $grupo->name }}</option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">O grupo define quais menus e permissões o usuário terá acesso</small>
                                        <div class="invalid-feedback">Por favor, selecione o grupo de acesso.</div>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="is_vendedor" class="form-label">Perfil Adicional</label>
                                        <div class="form-check form-switch mt-2">
                                            <input class="form-check-input" type="checkbox" id="is_vendedor" name="is_vendedor" value="1">
                                            <label class="form-check-label" for="is_vendedor">
                                                É vendedor(a)
                                            </label>
                                        </div>
                                        <small class="text-muted">Marque se este usuário realiza vendas</small>
                                    </div>
                                </div>

                                <div class="border-top pt-3 mt-3">

                                    <div class="d-flex align-items-center mb-3">
                                        <i class="bi bi-shield-lock me-2 text-primary" style="font-size: 1.2rem;"></i>
                                        <h6 class="mb-0 fw-bold">Permissões Específicas do Usuário</h6>
                                    </div>
                                    <p class="text-muted small mb-3">Selecione as ações que este usuário poderá realizar em cada módulo do sistema. Estas permissões são específicas do usuário e complementam as permissões do grupo.</p>
                                    
                                    {{-- Loading indicator --}}
                                    <div id="permissions-loading" style="display: none;">
                                        <div class="text-center py-4">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Carregando...</span>
                                            </div>
                                            <p class="text-muted mt-2 mb-0">Carregando permissões disponíveis...</p>
                                        </div>
                                    </div>
                                    
                                    {{-- Container de permissões (preenchido via AJAX) --}}
                                    <div id="permissions-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="d-flex justify-content-end gap-2 mt-4">
                    <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('colaboradores.list') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('colaboradores.save') }}`, 'formNovoColaborador')">
                        <i class="bi bi-check-circle me-2"></i>Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="{{ asset('js/colaboradores.js') }}"></script>