@php
$title = 'Editar 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">Editar</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-pencil-square me-2 text-primary"></i>Editar Colaborador
            </h1>
            <span class="text-muted small">Atualize os dados do colaborador</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="formEditarColaborador" class="needs-validation" novalidate>
                @csrf
                @method('PUT')
                
                <div class="row mb-3">
                    <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" value="{{ isset($colaborador) ? $colaborador->nome : '' }}" required>
                        <div class="invalid-feedback">Por favor, informe o nome completo.</div>
                    </div>
                    <div class="col-md-3">
                        <label for="cpf" class="form-label required-field">CPF</label>
                        <input type="text" class="form-control" id="cpf" name="cpf" value="{{ isset($colaborador) ? $colaborador->cpf : '' }}" required data-mask="cpf">
                        <div class="invalid-feedback">Por favor, informe o CPF.</div>
                    </div>
                    <div class="col-md-3">
                        <label for="cnpj" class="form-label">CNPJ</label>
                        <input type="text" class="form-control" id="cnpj" name="cnpj" value="{{ isset($colaborador) ? $colaborador->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" value="{{ isset($colaborador) && $colaborador->data_nascimento ? $colaborador->data_nascimento->format('d/m/Y') : '' }}" 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" value="{{ isset($colaborador) ? $colaborador->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" value="{{ isset($colaborador) ? $colaborador->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" value="{{ isset($colaborador) ? $colaborador->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" value="{{ isset($colaborador) ? $colaborador->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" {{ isset($colaborador) && $colaborador->modalidade_contrato == 'CLT' ? 'selected' : '' }}>CLT</option>
                            <option value="PJ" {{ isset($colaborador) && $colaborador->modalidade_contrato == 'PJ' ? 'selected' : '' }}>PJ</option>
                            <option value="Freelancer" {{ isset($colaborador) && $colaborador->modalidade_contrato == 'Freelancer' ? 'selected' : '' }}>Freelancer</option>
                            <option value="Estagiário" {{ isset($colaborador) && $colaborador->modalidade_contrato == 'Estagiário' ? 'selected' : '' }}>Estagiário</option>
                            <option value="Temporário" {{ isset($colaborador) && $colaborador->modalidade_contrato == 'Temporário' ? 'selected' : '' }}>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 }}" {{ isset($colaborador) && $colaborador->area_id == $area->id ? 'selected' : '' }}>{{ $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 }}" {{ isset($colaborador) && $colaborador->cargo_id == $cargo->id ? 'selected' : '' }}>{{ $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" {{ isset($colaborador) && $colaborador->status == 'ATIVO' ? 'selected' : '' }}>Ativo</option>
                            <option value="INATIVO" {{ isset($colaborador) && $colaborador->status == 'INATIVO' ? 'selected' : '' }}>Inativo</option>
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o status.</div>
                    </div>
                </div>

                <hr class="my-4">

                {{-- Seção: Gerenciar 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">
                                @if(isset($colaborador) && $colaborador->user_id)
                                    {{-- Já tem acesso - permitir editar ou desabilitar --}}
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="tem_acesso_sistema" name="tem_acesso_sistema" 
                                            {{ $colaborador->user && $colaborador->user->is_active ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold" for="tem_acesso_sistema" style="font-size: 1.05rem;">
                                            <i class="bi bi-person-lock me-2 text-success"></i>Este colaborador tem acesso ao sistema
                                        </label>
                                    </div>
                                    
                                    <input type="hidden" name="user_id_atual" value="{{ $colaborador->user_id }}">
                                    <input type="hidden" id="user_id" value="{{ $colaborador->user_id }}">
                                    <input type="hidden" id="user_group_id" value="{{ $colaborador->user->group_id ?? '' }}">
                                    
                                    {{-- Passar permissões do usuário para o JavaScript --}}
                                    @if($colaborador->user && $colaborador->user->permissions)
                                        <input type="hidden" id="user_permissions_data" value="{{ json_encode($colaborador->user->permissions) }}">
                                    @endif

                                    <div id="secao-usuario" style=`{{ $colaborador->user && $colaborador->user->is_active ? '' : 'display: none;' }}`>
                                        <div class="row mb-3">
                                            <div class="col-md-8">
                                                <div class="alert alert-info mb-0">
                                                    <i class="bi bi-info-circle me-2"></i>
                                                    <strong>E-mail de login:</strong> {{ $colaborador->user->email ?? 'N/A' }}
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">Status do Acesso</label>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" id="user_is_active" name="user_is_active" value="1" 
                                                        {{ $colaborador->user && $colaborador->user->is_active ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="user_is_active">
                                                        <span id="status-label">
                                                            @if($colaborador->user && $colaborador->user->is_active)
                                                                <span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>Ativo</span>
                                                            @else
                                                                <span class="text-danger"><i class="bi bi-x-circle-fill me-1"></i>Inativo</span>
                                                            @endif
                                                        </span>
                                                    </label>
                                                </div>
                                                <small class="text-muted">Usuários inativos não podem fazer login</small>
                                            </div>
                                        </div>

                                        <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 }}" {{ $colaborador->user && $colaborador->user->group_id == $grupo->id ? 'selected' : '' }}>
                                                            {{ $grupo->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-muted">O grupo define quais menus e permissões o usuário terá acesso</small>
                                            </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" {{ $colaborador->user && $colaborador->user->is_vendedor ? 'checked' : '' }}>
                                                    <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>
                                            
                                            <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>
                                            
                                            <div id="permissions-container"></div>
                                        </div>

                                        <div class="alert alert-warning mt-3">
                                            <i class="bi bi-exclamation-triangle me-2"></i>
                                            <strong>Desabilitar acesso:</strong> Desmarque o checkbox acima para remover o acesso ao sistema deste colaborador.
                                        </div>
                                    </div>
                                @else
                                    {{-- Não tem acesso - permitir criar --}}
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="tem_acesso_sistema" name="tem_acesso_sistema">
                                        <label class="form-check-label fw-bold" for="tem_acesso_sistema" 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>
                                            <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>
                                            
                                            <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>
                                            
                                            <div id="permissions-container"></div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @else
                {{-- Mensagem para não administradores --}}
                @if(isset($colaborador) && $colaborador->user_id)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Acesso ao Sistema:</strong> Este colaborador possui acesso ao sistema. 
                            Apenas administradores podem gerenciar permissões de acesso.
                        </div>
                    </div>
                </div>
                @endif
                @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="atualizar(`{{ route('colaboradores.update', $colaborador->id) }}`, 'formEditarColaborador')">
                        <i class="bi bi-check-circle me-2"></i>Atualizar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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