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

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-people"></i> Clientes</h1>
    <div class="btn-group">
        <button type="button" class="btn btn-primary" id="openClientModal">
            <i class="bi bi-plus-circle"></i> Novo Cliente
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#testModal">
            <i class="bi bi-gear"></i> Teste Modal
        </button>
    </div>
</div>

<!-- Modal de Teste -->
<div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="testModalLabel">Modal de Teste</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Este é um modal de teste para verificar se o Bootstrap está funcionando.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>

<!-- Filtros e Busca -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-6">
                <label for="search" class="form-label">Buscar</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ search }}" placeholder="Nome, CNPJ ou email">
            </div>
            <div class="col-md-3">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">Todos</option>
                    <option value="ativo" {% if status == 'ativo' %}selected{% endif %}>Ativo</option>
                    <option value="inativo" {% if status == 'inativo' %}selected{% endif %}>Inativo</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-outline-primary me-2">
                    <i class="bi bi-search"></i> Buscar
                </button>
                <a href="{% url 'client:list' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-circle"></i> Limpar
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Lista de Clientes -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-list"></i> Lista de Clientes
            <span class="badge bg-secondary ms-2">{{ page_obj.paginator.count }}</span>
        </h5>
    </div>
    <div class="card-body p-0">
        {% if clients %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>CNPJ</th>
                        <th>Email</th>
                        <th>Workspaces</th>
                        <th>Projetos</th>
                        <th>Status</th>
                        <th width="150">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for client in clients %}
                    <tr>
                        <td>
                            <strong>{{ client.nome }}</strong>
                        </td>
                        <td>
                            <code>{{ client.cnpj }}</code>
                        </td>
                        <td>
                            {% if client.email %}
                                <a href="mailto:{{ client.email }}">{{ client.email }}</a>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge bg-info">{{ client.workspaces.count }}</span>
                        </td>
                        <td>
                            <span class="badge bg-primary">{{ client.projects.count }}</span>
                        </td>
                        <td>
                            {% if client.ativo %}
                                <span class="badge bg-success">Ativo</span>
                            {% else %}
                                <span class="badge bg-secondary">Inativo</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{% url 'client:detail' client.pk %}" 
                                   class="btn btn-outline-primary" 
                                   data-bs-toggle="tooltip" title="Ver detalhes">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <button type="button" 
                                        class="btn btn-outline-secondary edit-client-btn"
                                        data-client-id="{{ client.pk }}"
                                        data-client-name="{{ client.nome }}"
                                        data-bs-toggle="tooltip" title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <a href="{% url 'client:delete' client.pk %}" 
                                   class="btn btn-outline-danger delete-btn"
                                   data-item-name="{{ client.nome }}"
                                   data-bs-toggle="tooltip" title="Excluir">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-people display-1 text-muted"></i>
            <h4 class="text-muted mt-3">Nenhum cliente encontrado</h4>
            <p class="text-muted">
                {% if search or status %}
                    Tente ajustar os filtros de busca.
                {% else %}
                    Comece criando seu primeiro cliente.
                {% endif %}
            </p>
            {% if not search and not status %}
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createClientModal">
                <i class="bi bi-plus-circle"></i> Criar Primeiro Cliente
            </button>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Paginação -->
{% if is_paginated %}
<nav aria-label="Paginação" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}">
                    <i class="bi bi-chevron-double-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        {% endif %}
        
        <li class="page-item active">
            <span class="page-link">
                {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
            </span>
        </li>
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}">
                    <i class="bi bi-chevron-double-right"></i>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}



{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Teste do modal
    const testModal = document.getElementById('testModal');
    if (testModal) {
        console.log('Modal de teste encontrado');
        testModal.addEventListener('show.bs.modal', function () {
            console.log('Modal de teste abrindo');
        });
    }
    
    // Abrir modal de cliente via AJAX
    const openClientModalBtn = document.getElementById('openClientModal');
    if (openClientModalBtn) {
        openClientModalBtn.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 edição de cliente via AJAX
    const editClientBtns = document.querySelectorAll('.edit-client-btn');
    editClientBtns.forEach(btn => {
        btn.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);
                const clientId = formData.get('client_id') || this.action.split('/').slice(-2)[0];
                
                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 %}