@extends('layouts.app')

@section('title', 'Gestão de Clientes')

@push('styles')
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis border-bottom border-300 pt-7 border-bottom-sm-0 pb-7">
    <div class="page-header">
        <div class="row align-items-center justify-content-between">
            <div class="col-auto">
                <h1 class="page-header-title">
                    <span class="page-header-icon">
                        <span class="fa-solid fa-users"></span>
                    </span>
                    Gestão de Clientes
                </h1>
                <p class="page-header-subtitle mt-2">
                    Gerencie todos os seus clientes de forma centralizada
                </p>
            </div>
            <div class="col-auto">
                <div class="d-flex">
                    <button class="btn btn-phoenix-secondary me-2" type="button" onclick="window.location.reload()">
                        <span class="fa-solid fa-arrow-rotate-right me-2"></span>Atualizar
                    </button>
                    <a href="{{ route('clientes.create') }}" class="btn btn-primary">
                        <span class="fa-solid fa-plus me-2"></span>Novo Cliente
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row">
        <div class="col-12">
            <!-- Filtros -->
            <div class="card mb-3">
                <div class="card-header border-bottom border-300 bg-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="mb-0">Filtros</h6>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="true">
                                <span class="fa-solid fa-angle-down transition-base" data-bs-toggle="tooltip" data-bs-placement="top" title="Expandir filtros"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="collapse show" id="collapseFilters">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label" for="filtro-nome">Nome do Cliente</label>
                                <input class="form-control" id="filtro-nome" type="text" placeholder="Digite o nome...">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="filtro-status">Status</label>
                                <select class="form-select" id="filtro-status">
                                    <option value="">Todos</option>
                                    <option value="1">Ativo</option>
                                    <option value="0">Inativo</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="filtro-per-page">Itens por página</label>
                                <select class="form-select" id="filtro-per-page">
                                    <option value="15">15</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button class="btn btn-primary me-2" type="button" onclick="aplicarFiltros()">
                                    <span class="fa-solid fa-filter me-1"></span>Filtrar
                                </button>
                                <button class="btn btn-phoenix-secondary" type="button" onclick="limparFiltros()">
                                    <span class="fa-solid fa-times me-1"></span>Limpar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabela de Clientes -->
            <div class="card">
                <div class="card-header border-bottom border-300 bg-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="mb-0">Lista de Clientes</h6>
                        </div>
                        <div class="col-auto">
                            <div id="table-info" class="text-700 fw-semibold fs-9"></div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-hover mb-0" id="clientesTable">
                            <thead class="bg-body-tertiary">
                                <tr>
                                    <th class="text-800 fw-semibold" scope="col">Logo</th>
                                    <th class="text-800 fw-semibold" scope="col" data-sort="nome">
                                        Nome
                                        <span class="fa-solid fa-sort ms-1"></span>
                                    </th>
                                    <th class="text-800 fw-semibold" scope="col">Cores da Marca</th>
                                    <th class="text-800 fw-semibold" scope="col">Redes Sociais</th>
                                    <th class="text-800 fw-semibold" scope="col" data-sort="ativo">
                                        Status
                                        <span class="fa-solid fa-sort ms-1"></span>
                                    </th>
                                    <th class="text-800 fw-semibold" scope="col" data-sort="created_at">
                                        Criado em
                                        <span class="fa-solid fa-sort ms-1"></span>
                                    </th>
                                    <th class="text-800 fw-semibold" scope="col">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="clientesTableBody">
                                <!-- Conteúdo será carregado via AJAX -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Loading State -->
                    <div id="loading-state" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                        <p class="mt-2 text-700">Carregando clientes...</p>
                    </div>

                    <!-- Empty State -->
                    <div id="empty-state" class="text-center py-5" style="display: none;">
                        <div class="mb-3">
                            <span class="fa-regular fa-folder-open fs-1 text-300"></span>
                        </div>
                        <h5 class="text-800">Nenhum cliente encontrado</h5>
                        <p class="text-600">Não há clientes que correspondam aos filtros aplicados.</p>
                        <a href="{{ route('clientes.create') }}" class="btn btn-primary">
                            <span class="fa-solid fa-plus me-1"></span>Adicionar Primeiro Cliente
                        </a>
                    </div>
                </div>

                <!-- Paginação -->
                <div class="card-footer border-top border-300 bg-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <div id="pagination-info" class="text-700 fw-semibold fs-9"></div>
                        </div>
                        <div class="col-auto">
                            <nav aria-label="Paginação de clientes">
                                <ul class="pagination pagination-sm mb-0" id="pagination-controls">
                                    <!-- Controles de paginação serão inseridos aqui -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação de Exclusão -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmar Exclusão</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <p>Tem certeza que deseja excluir o cliente <strong id="deleteClientName"></strong>?</p>
                <p class="text-warning-emphasis">
                    <span class="fa-solid fa-triangle-exclamation me-1"></span>
                    Esta ação pode ser desfeita posteriormente.
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-danger" type="button" id="confirmDelete">Excluir Cliente</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variáveis globais
    let currentPage = 1;
    let currentFilters = {};
    let currentSort = { field: 'nome', direction: 'asc' };
    
    // Elementos DOM
    const tableBody = document.getElementById('clientesTableBody');
    const loadingState = document.getElementById('loading-state');
    const emptyState = document.getElementById('empty-state');
    const tableInfo = document.getElementById('table-info');
    const paginationInfo = document.getElementById('pagination-info');
    const paginationControls = document.getElementById('pagination-controls');
    
    // Event Listeners
    setupEventListeners();
    
    // Carregar dados iniciais
    carregarClientes();
    
    function setupEventListeners() {
        // Busca em tempo real
        const filtroNome = document.getElementById('filtro-nome');
        let timeoutId = null;
        filtroNome.addEventListener('input', function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                currentPage = 1;
                aplicarFiltros();
            }, 500);
        });
        
        // Filtro de status
        document.getElementById('filtro-status').addEventListener('change', function() {
            currentPage = 1;
            aplicarFiltros();
        });
        
        // Items per page
        document.getElementById('filtro-per-page').addEventListener('change', function() {
            currentPage = 1;
            aplicarFiltros();
        });
        
        // Ordenação
        document.querySelectorAll('[data-sort]').forEach(element => {
            element.addEventListener('click', function() {
                const field = this.dataset.sort;
                if (currentSort.field === field) {
                    currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
                } else {
                    currentSort.field = field;
                    currentSort.direction = 'asc';
                }
                currentPage = 1;
                carregarClientes();
            });
        });
    }
    
    function aplicarFiltros() {
        currentFilters = {
            nome: document.getElementById('filtro-nome').value,
            ativo: document.getElementById('filtro-status').value,
            per_page: document.getElementById('filtro-per-page').value || 15
        };
        carregarClientes();
    }
    
    function limparFiltros() {
        document.getElementById('filtro-nome').value = '';
        document.getElementById('filtro-status').value = '';
        document.getElementById('filtro-per-page').value = '15';
        currentFilters = {};
        currentPage = 1;
        carregarClientes();
    }
    
    function carregarClientes() {
        showLoading();
        
        const params = new URLSearchParams({
            page: currentPage,
            sort_by: currentSort.field,
            sort_direction: currentSort.direction,
            ...currentFilters
        });
        
        fetch(`{{ route('clientes.index') }}?${params}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderTable(data.data);
                renderPagination(data.pagination);
                updateTableInfo(data.pagination);
            } else {
                showError('Erro ao carregar clientes');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showError('Erro ao carregar clientes');
        });
    }
    
    function renderTable(clientes) {
        hideLoading();
        
        if (clientes.length === 0) {
            showEmptyState();
            return;
        }
        
        hideEmptyState();
        
        tableBody.innerHTML = clientes.map(cliente => `
            <tr>
                <td class="align-middle">
                    ${cliente.logo_url ? 
                        `<div class="avatar avatar-m">
                            <img class="rounded-circle" src="${cliente.logo_url}" alt="${cliente.nome}" />
                        </div>` : 
                        `<div class="avatar avatar-m">
                            <div class="avatar-name rounded-circle bg-body-tertiary text-body-emphasis">
                                ${cliente.nome.charAt(0).toUpperCase()}
                            </div>
                        </div>`
                    }
                </td>
                <td class="align-middle">
                    <div class="d-flex align-items-center">
                        <h6 class="mb-0 fw-semibold text-body-highlight">${cliente.nome}</h6>
                    </div>
                </td>
                <td class="align-middle">
                    ${renderCoresMarca(cliente.cores_marca_formatada)}
                </td>
                <td class="align-middle">
                    <span class="badge badge-phoenix badge-phoenix-info">
                        ${cliente.redes_sociais_ativas_count || 0} rede(s)
                    </span>
                </td>
                <td class="align-middle">
                    ${cliente.ativo ? 
                        '<span class="badge badge-phoenix badge-phoenix-success">Ativo</span>' : 
                        '<span class="badge badge-phoenix badge-phoenix-secondary">Inativo</span>'
                    }
                </td>
                <td class="align-middle">
                    <span class="text-700 fw-semibold">
                        ${new Date(cliente.created_at).toLocaleDateString('pt-BR')}
                    </span>
                </td>
                <td class="align-middle">
                    <div class="btn-reveal-trigger position-static">
                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" 
                                type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="fa-solid fa-ellipsis-v fs-10"></span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                            <a class="dropdown-item" href="${generateRoute('clientes.show', cliente.id)}">
                                <span class="fa-solid fa-eye me-2"></span>Visualizar
                            </a>
                            <a class="dropdown-item" href="${generateRoute('clientes.edit', cliente.id)}">
                                <span class="fa-solid fa-edit me-2"></span>Editar
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item text-danger" href="#" onclick="confirmDelete(${cliente.id}, '${cliente.nome}')">
                                <span class="fa-solid fa-trash me-2"></span>Excluir
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        `).join('');
        
        updateSortIcons();
    }
    
    function renderCoresMarca(cores) {
        if (!cores || cores.length === 0) {
            return '<span class="text-400 fs-10">Sem cores definidas</span>';
        }
        
        return cores.slice(0, 3).map(cor => 
            `<span class="d-inline-block rounded-circle me-1" 
                  style="width: 16px; height: 16px; background-color: ${cor.hex};" 
                  title="${cor.nome}: ${cor.hex}"></span>`
        ).join('') + (cores.length > 3 ? `<span class="text-600 fs-10">+${cores.length - 3}</span>` : '');
    }
    
    function renderPagination(pagination) {
        if (pagination.total <= pagination.per_page) {
            paginationControls.innerHTML = '';
            return;
        }
        
        let html = '';
        
        // Previous button
        html += `
            <li class="page-item ${pagination.current_page <= 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${pagination.current_page - 1})" 
                   ${pagination.current_page <= 1 ? 'tabindex="-1"' : ''}>
                    <span class="fa-solid fa-chevron-left"></span>
                </a>
            </li>
        `;
        
        // Page numbers
        const startPage = Math.max(1, pagination.current_page - 2);
        const endPage = Math.min(pagination.last_page, pagination.current_page + 2);
        
        for (let i = startPage; i <= endPage; i++) {
            html += `
                <li class="page-item ${i === pagination.current_page ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                </li>
            `;
        }
        
        // Next button
        html += `
            <li class="page-item ${pagination.current_page >= pagination.last_page ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${pagination.current_page + 1})"
                   ${pagination.current_page >= pagination.last_page ? 'tabindex="-1"' : ''}>
                    <span class="fa-solid fa-chevron-right"></span>
                </a>
            </li>
        `;
        
        paginationControls.innerHTML = html;
    }
    
    function updateTableInfo(pagination) {
        tableInfo.textContent = `${pagination.from || 0} - ${pagination.to || 0} de ${pagination.total} clientes`;
    }
    
    function updateSortIcons() {
        document.querySelectorAll('[data-sort] .fa-sort, [data-sort] .fa-sort-up, [data-sort] .fa-sort-down')
            .forEach(icon => {
                icon.className = 'fa-solid fa-sort ms-1';
            });
        
        const activeSort = document.querySelector(`[data-sort="${currentSort.field}"] span`);
        if (activeSort) {
            activeSort.className = `fa-solid fa-sort-${currentSort.direction === 'asc' ? 'up' : 'down'} ms-1`;
        }
    }
    
    function showLoading() {
        loadingState.style.display = 'block';
        emptyState.style.display = 'none';
        tableBody.style.display = 'none';
    }
    
    function hideLoading() {
        loadingState.style.display = 'none';
        tableBody.style.display = 'table-row-group';
    }
    
    function showEmptyState() {
        emptyState.style.display = 'block';
        tableBody.style.display = 'none';
    }
    
    function hideEmptyState() {
        emptyState.style.display = 'none';
    }
    
    function showError(message) {
        hideLoading();
        // Implementar notificação de erro
        console.error(message);
    }
    
    function generateRoute(routeName, id) {
        const routes = {
            'clientes.show': `{{ url('clientes') }}/${id}`,
            'clientes.edit': `{{ url('clientes') }}/${id}/edit`
        };
        return routes[routeName] || '#';
    }
    
    // Funções globais
    window.aplicarFiltros = aplicarFiltros;
    window.limparFiltros = limparFiltros;
    window.changePage = function(page) {
        if (page >= 1) {
            currentPage = page;
            carregarClientes();
        }
    };
    
    window.confirmDelete = function(id, nome) {
        document.getElementById('deleteClientName').textContent = nome;
        document.getElementById('confirmDelete').onclick = function() {
            deleteCliente(id);
        };
        new bootstrap.Modal(document.getElementById('deleteModal')).show();
    };
    
    function deleteCliente(id) {
        fetch(`{{ url('clientes') }}/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                carregarClientes();
                // Mostrar notificação de sucesso
            } else {
                showError('Erro ao excluir cliente');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showError('Erro ao excluir cliente');
        });
    }
});
</script>
@endpush