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

{% block title %}Dashboard - {{ block.super }}{% endblock %}

{% block content %}
<!-- Container para o modal -->
<div id="modalContainer"></div>

<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">
                <i class="bi bi-speedometer2"></i> Dashboard
            </h1>
            <p class="text-muted">Bem-vindo ao sistema de gestão da agência</p>
            {% if not user_authenticated %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> 
                <strong>Faça login</strong> para acessar todas as funcionalidades do sistema.
                <a href="/admin/" class="btn btn-sm btn-primary ms-2">Login</a>
            </div>
            {% endif %}
        </div>
        {% if user_authenticated %}
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary" id="openClientModal">
                                        <i class="bi bi-plus-circle"></i> Novo Cliente
            </button>
            <button type="button" class="btn btn-outline-secondary" id="openProjectModal">
                <i class="bi bi-plus-circle"></i> Novo Projeto
            </button>
        </div>
        {% endif %}
    </div>

    <!-- Estatísticas Gerais -->
    <div class="row mb-4">
        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Clientes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_clients }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-people fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Colaboradores
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_collaborators }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-person-badge fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Workspaces
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_workspaces }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-house fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Projetos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_projects }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-kanban fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Boards
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_boards }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-kanban fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-secondary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                Tarefas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_tasks }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-list-task fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Conteúdo Principal -->
    <div class="row">
        <!-- Projetos Recentes -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="bi bi-kanban"></i> Projetos Recentes
                    </h6>
                    <a href="{% url 'project:list' %}" class="btn btn-sm btn-outline-primary">
                        Ver Todos
                    </a>
                </div>
                <div class="card-body">
                    {% if recent_projects %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Projeto</th>
                                        <th>Cliente</th>
                                        <th>Status</th>
                                        <th>Progresso</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for project in recent_projects %}
                                    <tr>
                                        <td>
                                            <div>
                                                <strong>{{ project.nome }}</strong>
                                                {% if project.descricao %}
                                                    <br><small class="text-muted">{{ project.descricao|truncatewords:8 }}</small>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            {% if project.cliente %}
                                                <span class="badge bg-info">{{ project.cliente.nome }}</span>
                                            {% else %}
                                                <span class="text-muted">Sem cliente</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ project.status|yesno:'success,warning,danger,info,secondary' }}">
                                                {{ project.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar bg-success" role="progressbar" 
                                                     style="width: {{ project.progresso_percentual }}%">
                                                    {{ project.progresso_percentual }}%
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'project:detail' project.pk %}" 
                                                   class="btn btn-outline-primary" title="Ver detalhes">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                <a href="{% url 'project:edit' project.pk %}" 
                                                   class="btn btn-outline-secondary" title="Editar">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-kanban display-4 text-muted"></i>
                            <h6 class="text-muted mt-2">Nenhum projeto encontrado</h6>
                            <p class="text-muted">Comece criando seu primeiro projeto.</p>
                            <button type="button" class="btn btn-primary" id="openProjectModalEmpty">
                                <i class="bi bi-plus-circle"></i> Criar Primeiro Projeto
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Tarefas Pendentes -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="bi bi-list-task"></i> Tarefas Pendentes
                    </h6>
                    <a href="{% url 'task:list' %}" class="btn btn-sm btn-outline-primary">
                        Ver Todas
                    </a>
                </div>
                <div class="card-body">
                    {% if pending_tasks %}
                        <div class="list-group list-group-flush">
                            {% for task in pending_tasks %}
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ task.nome }}</h6>
                                    <small class="text-muted">
                                        {% if task.group %}
                                            <i class="bi bi-collection"></i> {{ task.group.nome }}
                                        {% else %}
                                            <i class="bi bi-collection"></i> <span class="text-muted">Sem grupo</span>
                                        {% endif %}
                                        {% if task.responsavel %}
                                            • <i class="bi bi-person"></i> {{ task.responsavel.nome }}
                                        {% endif %}
                                    </small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-{{ task.prioridade }}">{{ task.get_prioridade_display }}</span>
                                    {% if task.is_atrasada %}
                                        <br><small class="text-danger">Atrasada</small>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-list-task display-4 text-muted"></i>
                            <h6 class="text-muted mt-2">Nenhuma tarefa pendente</h6>
                            <p class="text-muted">Todas as tarefas estão em dia!</p>
                        </div>
                    {% endif %}
                </div>
            </div>

                            <!-- Clientes Recentes -->
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="bi bi-people"></i> Clientes Recentes
                    </h6>
                    <a href="{% url 'client:list' %}" class="btn btn-sm btn-outline-primary">
                        Ver Todos
                    </a>
                </div>
                <div class="card-body">
                    {% if recent_clients %}
                        <div class="list-group list-group-flush">
                            {% for client in recent_clients %}
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ client.nome }}</h6>
                                    <small class="text-muted">
                                        <i class="bi bi-envelope"></i> {{ client.email }}
                                        {% if client.telefone %}
                                            • <i class="bi bi-telephone"></i> {{ client.telefone }}
                                        {% endif %}
                                    </small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-{{ client.ativo|yesno:'success,secondary' }}">
                                        {{ client.ativo|yesno:'Ativo,Inativo' }}
                                    </span>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-people display-4 text-muted"></i>
                            <h6 class="text-muted mt-2">Nenhum cliente encontrado</h6>
                            <p class="text-muted">Comece criando seu primeiro cliente.</p>
                            <button type="button" class="btn btn-primary" id="openClientModalEmpty">
                                <i class="bi bi-plus-circle"></i> Criar Primeiro Cliente
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado - Dashboard');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Abrir modal de cliente via AJAX
    const openClientModalBtns = document.querySelectorAll('#openClientModal, #openClientModalEmpty');
    openClientModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('Abrindo modal de cliente...');
            
            // Carregar o modal via AJAX
            fetch('{% url "client:create_modal" %}')
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('createClientModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupClientForm();
                    } else {
                        console.error('Modal não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal:', error);
                });
        });
    });
    
    // Setup client form function
    function setupClientForm() {
        const clientForm = document.getElementById('clientForm');
        if (clientForm) {
            console.log('Formulário de cliente encontrado');
            clientForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário submetido');
                
                const formData = new FormData(this);
                
                fetch('{% url "client:create_modal" %}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('createClientModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reset form
                        clientForm.reset();
                        
                        // Reload page to show new client
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao criar cliente. Tente novamente.');
                });
            });
        }
    }
    
    // Abrir modal de projeto via AJAX
    const openProjectModalBtns = document.querySelectorAll('#openProjectModal, #openProjectModalEmpty');
    openProjectModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('Abrindo modal de projeto...');
            
            // Carregar o modal via AJAX
            fetch('{% url "project:create_modal" %}')
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('createProjectModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupProjectForm();
                    } else {
                        console.error('Modal não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal:', error);
                });
        });
    });
    
    // Setup project form function
    function setupProjectForm() {
        const projectForm = document.getElementById('projectForm');
        if (projectForm) {
            console.log('Formulário de projeto encontrado');
            projectForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário submetido');
                
                const formData = new FormData(this);
                
                fetch('{% url "project:create_modal" %}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('createProjectModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reset form
                        projectForm.reset();
                        
                        // Reload page to show new project
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao criar projeto. Tente novamente.');
                });
            });
        }
    }
    
    // Show alert function
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const container = document.querySelector('.container-fluid');
        container.insertBefore(alertDiv, container.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }
    
    // Show form errors function
    function showFormErrors(errors) {
        // Clear previous errors
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        
        // Show new errors
        Object.keys(errors).forEach(field => {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add('is-invalid');
                
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = errors[field][0];
                input.parentNode.appendChild(errorDiv);
            }
        });
    }
});
</script>
{% endblock %}