{% extends 'base.html' %}
{% load static %}

{% block title %}
    {% if collaborator %}Editar Colaborador{% else %}Novo Colaborador{% endif %} - {{ block.super }}
{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb mb-0 py-2">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">Início</a></li>
            <li class="breadcrumb-item"><a href="{% url 'collaborator:list' %}">Colaboradores</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if collaborator %}Editar{% else %}Novo{% endif %}
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-gradient-primary text-white">
                <h3 class="mb-0">
                    <i class="bi bi-person-badge"></i>
                    {% if collaborator %}Editar Colaborador{% else %}Novo Colaborador{% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="nome" class="form-label">Nome Completo *</label>
                                <input type="text" class="form-control" id="nome" name="nome" 
                                       value="{{ collaborator.nome|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="foto" class="form-label">Foto</label>
                                <input type="file" class="form-control" id="foto" name="foto" accept="image/*">
                                {% if collaborator.foto %}
                                    <small class="form-text text-muted">Foto atual: {{ collaborator.foto.name }}</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">E-mail *</label>
                                <input type="email" class="form-control" id="email" name="email" 
                                       value="{{ collaborator.email|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="telefone" class="form-label">Telefone</label>
                                <input type="tel" class="form-control" id="telefone" name="telefone" 
                                       value="{{ collaborator.telefone|default:'' }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="area" class="form-label">Área *</label>
                                <select class="form-select" id="area" name="area" required>
                                    <option value="">Selecione uma área</option>
                                    {% for area in areas %}
                                        <option value="{{ area.id }}" 
                                                {% if collaborator.area.id == area.id %}selected{% endif %}>
                                            {{ area.nome }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="cargo" class="form-label">Cargo</label>
                                <input type="text" class="form-control" id="cargo" name="cargo" 
                                       value="{{ collaborator.cargo|default:'' }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_admissao" class="form-label">Data de Admissão</label>
                                <input type="date" class="form-control" id="data_admissao" name="data_admissao" 
                                       value="{{ collaborator.data_admissao|date:'Y-m-d'|default:'' }}">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="senha" class="form-label">Senha {% if not collaborator %}*{% endif %}</label>
                                <input type="password" class="form-control" id="senha" name="senha" 
                                       {% if not collaborator %}required{% endif %}>
                                {% if collaborator %}
                                    <small class="form-text text-muted">Deixe em branco para manter a senha atual</small>
                                {% else %}
                                    <small class="form-text text-muted">Senha padrão: 123456</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    {% if collaborator %}
                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="ativo" name="ativo" 
                                   {% if collaborator.ativo %}checked{% endif %}>
                            <label class="form-check-label" for="ativo">
                                Colaborador Ativo
                            </label>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'collaborator:list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Voltar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i>
                            {% if collaborator %}Salvar Alterações{% else %}Criar Colaborador{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Preview da foto
    const fotoInput = document.getElementById('foto');
    if (fotoInput) {
        fotoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Criar preview se não existir
                    let preview = document.getElementById('foto-preview');
                    if (!preview) {
                        preview = document.createElement('img');
                        preview.id = 'foto-preview';
                        preview.className = 'mt-2 rounded';
                        preview.style.maxWidth = '150px';
                        preview.style.maxHeight = '150px';
                        fotoInput.parentNode.appendChild(preview);
                    }
                    preview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    }
    
    // Validação do formulário
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const nome = document.getElementById('nome').value.trim();
        const email = document.getElementById('email').value.trim();
        const area = document.getElementById('area').value;
        
        if (!nome) {
            alert('Nome é obrigatório');
            e.preventDefault();
            return;
        }
        
        if (!email) {
            alert('E-mail é obrigatório');
            e.preventDefault();
            return;
        }
        
        if (!area) {
            alert('Área é obrigatória');
            e.preventDefault();
            return;
        }
    });
});
</script>
{% endblock %}