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

{% block title %}{{ client.nome }} - {{ block.super }}{% endblock %}

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

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-person-circle"></i> {{ client.nome }}
            {% if client.ativo %}
                <span class="badge bg-success ms-2">Ativo</span>
            {% else %}
                <span class="badge bg-secondary ms-2">Inativo</span>
            {% endif %}
        </h1>
        <p class="text-muted mb-0">CNPJ: {{ client.cnpj }}</p>
    </div>
    <div class="btn-group" role="group">
        <button type="button" 
                class="btn btn-outline-primary edit-client-btn"
                data-client-id="{{ client.pk }}"
                data-client-name="{{ client.nome }}">
            <i class="bi bi-pencil"></i> Editar
        </button>
        <form method="post" action="{% url 'client:toggle_status' client.pk %}" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-{% if client.ativo %}warning{% else %}success{% endif %}">
                <i class="bi bi-{% if client.ativo %}pause{% else %}play{% endif %}-circle"></i>
                {% if client.ativo %}Desativar{% else %}Ativar{% endif %}
            </button>
        </form>
        <a href="{% url 'client:delete' client.pk %}" class="btn btn-outline-danger delete-btn" data-item-name="{{ client.nome }}">
            <i class="bi bi-trash"></i> Excluir
        </a>
    </div>
</div>

<!-- Informações do Cliente -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações do Cliente</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Nome:</dt>
                            <dd class="col-sm-8">{{ client.nome }}</dd>
                            
                            <dt class="col-sm-4">CNPJ:</dt>
                            <dd class="col-sm-8"><code>{{ client.cnpj }}</code></dd>
                            
                            <dt class="col-sm-4">Email:</dt>
                            <dd class="col-sm-8">
                                {% if client.email %}
                                    <a href="mailto:{{ client.email }}">{{ client.email }}</a>
                                {% else %}
                                    <span class="text-muted">Não informado</span>
                                {% endif %}
                            </dd>
                            
                            <dt class="col-sm-4">Telefone:</dt>
                            <dd class="col-sm-8">
                                {% if client.telefone %}
                                    <a href="tel:{{ client.telefone }}">{{ client.telefone }}</a>
                                {% else %}
                                    <span class="text-muted">Não informado</span>
                                {% endif %}
                            </dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Endereço:</dt>
                            <dd class="col-sm-8">
                                {% if client.endereco %}
                                    {{ client.endereco|linebreaks }}
                                {% else %}
                                    <span class="text-muted">Não informado</span>
                                {% endif %}
                            </dd>
                            
                            <dt class="col-sm-4">Criado em:</dt>
                            <dd class="col-sm-8">{{ client.created_at|date:"d/m/Y H:i" }}</dd>
                            
                            <dt class="col-sm-4">Atualizado em:</dt>
                            <dd class="col-sm-8">{{ client.updated_at|date:"d/m/Y H:i" }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Estatísticas -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Estatísticas</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ stats.total_workspaces }}</div>
                            <div class="stat-label">Workspaces</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ stats.total_portfolios }}</div>
                            <div class="stat-label">Portfolios</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ stats.total_projects }}</div>
                            <div class="stat-label">Projetos</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ stats.projects_concluidos }}</div>
                            <div class="stat-label">Concluídos</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Workspaces Recentes -->
{% if recent_workspaces %}
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-house"></i> Workspaces Recentes</h5>
        <a href="{% url 'workspace:list' %}?cliente_id={{ client.pk }}" class="btn btn-sm btn-outline-primary">
            Ver todos
        </a>
    </div>
    <div class="card-body">
        <div class="row">
            {% for workspace in recent_workspaces %}
            <div class="col-md-6 mb-3">
                <div class="card border-start border-4" style="border-color: {{ workspace.cor }}!important;">
                    <div class="card-body">
                        <h6 class="card-title">
                            <a href="{% url 'workspace:detail' workspace.pk %}" class="text-decoration-none">
                                {{ workspace.nome }}
                            </a>
                        </h6>
                        <p class="card-text text-muted small">
                            {{ workspace.total_portfolios }} portfolios • 
                            {{ workspace.total_projects }} projetos
                        </p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- Projetos Recentes -->
{% if recent_projects %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-folder"></i> Projetos Recentes</h5>
        <a href="{% url 'project:list' %}?cliente_id={{ client.pk }}" class="btn btn-sm btn-outline-primary">
            Ver todos
        </a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Projeto</th>
                        <th>Portfolio</th>
                        <th>Status</th>
                        <th>Progresso</th>
                        <th>Prazo</th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in recent_projects %}
                    <tr>
                        <td>
                            <a href="{% url 'project:detail' project.pk %}" class="text-decoration-none">
                                {{ project.nome }}
                            </a>
                        </td>
                        <td>{{ project.portfolio.nome }}</td>
                        <td>
                            <span class="badge status-{{ project.status }}">
                                {{ project.get_status_display }}
                            </span>
                        </td>
                        <td>
                            <div class="progress progress-sm">
                                <div class="progress-bar" role="progressbar" 
                                     style="width: {{ project.progresso }}%"
                                     aria-valuenow="{{ project.progresso }}" 
                                     aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <small class="text-muted">{{ project.progresso }}%</small>
                        </td>
                        <td>
                            {{ project.cronograma_fim|date:"d/m/Y" }}
                            {% if project.is_atrasado %}
                                <i class="bi bi-exclamation-triangle text-danger" 
                                   data-bs-toggle="tooltip" title="Projeto atrasado"></i>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

{% if not recent_workspaces and not recent_projects %}
<div class="card">
    <div class="card-body text-center py-5">
        <i class="bi bi-folder-x display-1 text-muted"></i>
        <h4 class="text-muted mt-3">Nenhum projeto encontrado</h4>
        <p class="text-muted">Este cliente ainda não possui workspaces ou projetos.</p>
        <a href="{% url 'workspace:create' %}?cliente_id={{ client.pk }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Criar Primeiro Workspace
        </a>
    </div>
</div>
{% endif %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado - Detalhes do Cliente');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Abrir modal de edição de cliente via AJAX
    const editClientBtn = document.querySelector('.edit-client-btn');
    if (editClientBtn) {
        editClientBtn.addEventListener('click', function() {
            const clientId = this.getAttribute('data-client-id');
            const clientName = this.getAttribute('data-client-name');
            console.log(`Abrindo modal de edição para cliente: ${clientName} (ID: ${clientId})`);
            
            // Carregar o modal via AJAX
            fetch(`/clients/${clientId}/edit-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('editClientModal');
                        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
                        setupClientEditForm();
                    } else {
                        console.error('Modal de edição não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal de edição:', error);
                });
        });
    }
    
    // Setup client edit form function
    function setupClientEditForm() {
        const clientEditForm = document.getElementById('clientEditForm');
        if (clientEditForm) {
            console.log('Formulário de edição de cliente encontrado');
            clientEditForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário de edição submetido');
                
                const formData = new FormData(this);
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta de edição:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('editClientModal');
                        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();
                            }
                        }
                        
                        // Reload page to show updated client
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao atualizar cliente. 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 %}
{% endblock %}