<?php $title = 'Cliente'; ?>

<div class="container">
    <div class="card">
        <div class="header">
            <h1 id="clientName">Cliente</h1>
            <div style="display: flex; gap: 0.5rem;">
                <a href="/clientes" class="btn btn-secondary">Voltar</a>
                <button id="printPdfBtn" class="btn btn-secondary" style="display: none;">
                    <i class="fas fa-file-pdf"></i> Imprimir PDF
                </button>
                <a href="#" id="editBtn" class="btn">Editar</a>
            </div>
        </div>
        
        <div id="loading" class="loading" aria-live="polite">Carregando cliente...</div>
        <div id="error" class="alert alert-error" style="display: none;" role="alert" aria-live="assertive"></div>
        
        <div id="clientInfo" style="display: none;">
            <!-- Seção Principal com Foto -->
            <div style="display: grid; grid-template-columns: 1fr auto; gap: 2rem; margin-bottom: 2rem;">
                <div>
                    <h2 style="margin-bottom: 1rem; color: #333;">Informações Principais</h2>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;">
                        <div class="form-group">
                            <label>ID:</label>
                            <div id="clientId" class="info-value"></div>
                        </div>
                        <div class="form-group">
                            <label>Nome Fantasia:</label>
                            <div id="clientNomeFantasia" class="info-value"></div>
                        </div>
                        <div class="form-group">
                            <label>Razão Social:</label>
                            <div id="clientRazaoSocial" class="info-value"></div>
                        </div>
                        <div class="form-group">
                            <label>Tipo:</label>
                            <div id="clientTipo" class="info-value"></div>
                        </div>
                        <div class="form-group">
                            <label>CNPJ:</label>
                            <div id="clientCnpj" class="info-value"></div>
                        </div>
                        <div class="form-group">
                            <label>CPF:</label>
                            <div id="clientCpf" class="info-value"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Foto do Cliente -->
                <div style="text-align: center;">
                    <div id="clientPhotoContainer" style="display: none;">
                        <img id="clientPhoto" src="" alt="Foto do Cliente" 
                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px; border: 2px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
                             onerror="this.parentElement.style.display='none'">
                        <div style="margin-top: 0.5rem; font-size: 0.9rem; color: #666;">Foto do Cliente</div>
                    </div>
                    <div id="noPhotoPlaceholder" style="width: 150px; height: 150px; background: #f5f5f5; border: 2px dashed #ccc; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999;">
                        <i class="fas fa-user" style="font-size: 3rem;"></i>
                    </div>
                </div>
            </div>

            <!-- Informações Fiscais -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Informações Fiscais</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>Inscrição Estadual:</label>
                        <div id="clientIE" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Inscrição Municipal:</label>
                        <div id="clientIM" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Contato -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Contato</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>E-mail:</label>
                        <div id="clientEmail" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Telefone Fixo:</label>
                        <div id="clientTelefoneFixo" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Telefone Celular:</label>
                        <div id="clientTelefoneCelular" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Contato:</label>
                        <div id="clientContato" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Site:</label>
                        <div id="clientSite" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Informações Financeiras -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Informações Financeiras</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>Limite de Crédito:</label>
                        <div id="clientLimiteCredito" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Referências:</label>
                        <div id="clientReferencias" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Status -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Status</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>Situação:</label>
                        <div id="clientStatus" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Motivo:</label>
                        <div id="clientStatusMotivo" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Endereço Principal -->
            <div id="principalAddressSection" style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Endereço Principal</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>CEP:</label>
                        <div id="principalCep" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Logradouro:</label>
                        <div id="principalLogradouro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Número:</label>
                        <div id="principalNumero" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Complemento:</label>
                        <div id="principalComplemento" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Bairro:</label>
                        <div id="principalBairro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Cidade:</label>
                        <div id="principalCidade" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Estado:</label>
                        <div id="principalEstado" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Coordenadas:</label>
                        <div id="principalCoordenadas" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Endereço de Cobrança -->
            <div id="billingAddressSection" style="margin-bottom: 2rem; display: none;">
                <h2 style="margin-bottom: 1rem; color: #333;">Endereço de Cobrança</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>CEP:</label>
                        <div id="billingCep" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Logradouro:</label>
                        <div id="billingLogradouro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Número:</label>
                        <div id="billingNumero" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Complemento:</label>
                        <div id="billingComplemento" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Bairro:</label>
                        <div id="billingBairro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Cidade:</label>
                        <div id="billingCidade" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Estado:</label>
                        <div id="billingEstado" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Coordenadas:</label>
                        <div id="billingCoordenadas" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Endereço de Entrega -->
            <div id="shippingAddressSection" style="margin-bottom: 2rem; display: none;">
                <h2 style="margin-bottom: 1rem; color: #333;">Endereço de Entrega</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>CEP:</label>
                        <div id="shippingCep" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Logradouro:</label>
                        <div id="shippingLogradouro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Número:</label>
                        <div id="shippingNumero" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Complemento:</label>
                        <div id="shippingComplemento" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Bairro:</label>
                        <div id="shippingBairro" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Cidade:</label>
                        <div id="shippingCidade" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Estado:</label>
                        <div id="shippingEstado" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Coordenadas:</label>
                        <div id="shippingCoordenadas" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Arquivos -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Arquivos</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>Arquivo Anexado:</label>
                        <div id="clientArquivo" class="info-value"></div>
                    </div>
                </div>
            </div>

            <!-- Observações -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Observações</h2>
                <div class="form-group">
                    <div id="clientObservacoes" class="info-value" style="white-space: pre-wrap; background: #f9f9f9; padding: 1rem; border-radius: 4px; border: 1px solid #e0e0e0;"></div>
                </div>
            </div>

            <!-- Informações do Sistema -->
            <div style="margin-bottom: 2rem;">
                <h2 style="margin-bottom: 1rem; color: #333;">Informações do Sistema</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                    <div class="form-group">
                        <label>Criado em:</label>
                        <div id="clientCreatedAt" class="info-value"></div>
                    </div>
                    <div class="form-group">
                        <label>Atualizado em:</label>
                        <div id="clientUpdatedAt" class="info-value"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.info-value {
    font-weight: 500;
    color: #333;
    min-height: 1.2em;
}

.info-value:empty::before {
    content: "—";
    color: #999;
}

@media (max-width: 768px) {
    .container > .card > .header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .container > .card > .header > div {
        justify-content: center;
    }
    
    #clientInfo > div:first-child {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
    let currentClient = null;

    async function loadClient() {
        try {
            showLoading();
            const pathParts = window.location.pathname.split('/');
            const clientId = pathParts[pathParts.length - 1];
            
            const response = await apiRequest(`/api/clientes/${clientId}`);
            
            if (!response) return; // Redirecionado para login

            if (!response.ok) {
                throw new Error('Erro ao carregar cliente');
            }

            const payload = await response.json();
            currentClient = payload.data || payload;
            displayClient(currentClient);
        } catch (error) {
            hideLoading();
            const errEl = document.getElementById('error');
            errEl.style.display = 'block';
            errEl.textContent = error.message;
        }
    }

    function displayClient(client) {
        const nomeDisplay = client.nome_fantasia || client.nome || client.razao_social || 'Cliente';
        document.getElementById('clientName').textContent = nomeDisplay;
        
        // Informações principais
        document.getElementById('clientId').textContent = client.id ?? '';
        document.getElementById('clientNomeFantasia').textContent = client.nome_fantasia || client.nome || '';
        document.getElementById('clientRazaoSocial').textContent = client.razao_social || '';
        document.getElementById('clientTipo').textContent = client.tipo === 'PJ' ? 'Pessoa Jurídica' : 'Pessoa Física';
        document.getElementById('clientCnpj').textContent = client.cnpj || '';
        document.getElementById('clientCpf').textContent = client.cpf || '';
        
        // Informações fiscais
        document.getElementById('clientIE').textContent = client.ie || '';
        document.getElementById('clientIM').textContent = client.im || '';
        
        // Contato
        document.getElementById('clientEmail').textContent = client.email || '';
        document.getElementById('clientTelefoneFixo').textContent = client.telefone_fixo || '';
        document.getElementById('clientTelefoneCelular').textContent = client.telefone_celular || '';
        document.getElementById('clientContato').textContent = client.contato_nome || '';
        document.getElementById('clientSite').textContent = client.site_url || '';
        
        // Informações financeiras
        const limiteCredito = client.limite_credito ? 
            new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(client.limite_credito) : '';
        document.getElementById('clientLimiteCredito').textContent = limiteCredito;
        document.getElementById('clientReferencias').textContent = client.referencias || '';
        
        // Status
        let status = 'Ativo';
        if (client.bloqueado) status = 'Bloqueado';
        else if (client.inativo) status = 'Inativo';
        document.getElementById('clientStatus').textContent = status;
        document.getElementById('clientStatusMotivo').textContent = client.status_motivo || '';
        
        // Foto do cliente
        if (client.imagem_url) {
            document.getElementById('clientPhoto').src = client.imagem_url;
            document.getElementById('clientPhotoContainer').style.display = 'block';
            document.getElementById('noPhotoPlaceholder').style.display = 'none';
        } else {
            document.getElementById('clientPhotoContainer').style.display = 'none';
            document.getElementById('noPhotoPlaceholder').style.display = 'flex';
        }
        
        // Endereço principal
        const addr = client.address || {};
        if (addr.logradouro || addr.cep) {
            document.getElementById('principalCep').textContent = addr.cep || '';
            document.getElementById('principalLogradouro').textContent = addr.logradouro || '';
            document.getElementById('principalNumero').textContent = addr.numero || '';
            document.getElementById('principalComplemento').textContent = addr.complemento || '';
            document.getElementById('principalBairro').textContent = addr.bairro || '';
            document.getElementById('principalCidade').textContent = addr.cidade || '';
            document.getElementById('principalEstado').textContent = addr.estado || '';
            
            const coords = (addr.latitude && addr.longitude) ? 
                `${addr.latitude}, ${addr.longitude}` : '';
            document.getElementById('principalCoordenadas').textContent = coords;
        }
        
        // Endereço de cobrança
        const billing = client.billing_address || {};
        if (billing.logradouro || billing.cep) {
            document.getElementById('billingAddressSection').style.display = 'block';
            document.getElementById('billingCep').textContent = billing.cep || '';
            document.getElementById('billingLogradouro').textContent = billing.logradouro || '';
            document.getElementById('billingNumero').textContent = billing.numero || '';
            document.getElementById('billingComplemento').textContent = billing.complemento || '';
            document.getElementById('billingBairro').textContent = billing.bairro || '';
            document.getElementById('billingCidade').textContent = billing.cidade || '';
            document.getElementById('billingEstado').textContent = billing.estado || '';
            
            const billingCoords = (billing.latitude && billing.longitude) ? 
                `${billing.latitude}, ${billing.longitude}` : '';
            document.getElementById('billingCoordenadas').textContent = billingCoords;
        }
        
        // Endereço de entrega
        const shipping = client.shipping_address || {};
        if (shipping.logradouro || shipping.cep) {
            document.getElementById('shippingAddressSection').style.display = 'block';
            document.getElementById('shippingCep').textContent = shipping.cep || '';
            document.getElementById('shippingLogradouro').textContent = shipping.logradouro || '';
            document.getElementById('shippingNumero').textContent = shipping.numero || '';
            document.getElementById('shippingComplemento').textContent = shipping.complemento || '';
            document.getElementById('shippingBairro').textContent = shipping.bairro || '';
            document.getElementById('shippingCidade').textContent = shipping.cidade || '';
            document.getElementById('shippingEstado').textContent = shipping.estado || '';
            
            const shippingCoords = (shipping.latitude && shipping.longitude) ? 
                `${shipping.latitude}, ${shipping.longitude}` : '';
            document.getElementById('shippingCoordenadas').textContent = shippingCoords;
        }
        
        // Arquivos
        if (client.arquivo_url) {
            const fileName = client.arquivo_url.split('/').pop();
            document.getElementById('clientArquivo').innerHTML = 
                `<a href="${client.arquivo_url}" target="_blank" style="color: #007bff; text-decoration: none;">
                    <i class="fas fa-file"></i> ${fileName}
                </a>`;
        }
        
        // Observações
        document.getElementById('clientObservacoes').textContent = client.observacoes || '';
        
        // Informações do sistema
        const formatDate = (dateStr) => {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            return date.toLocaleString('pt-BR');
        };
        
        document.getElementById('clientCreatedAt').textContent = formatDate(client.created_at);
        document.getElementById('clientUpdatedAt').textContent = formatDate(client.updated_at);
        
        document.getElementById('editBtn').href = `/clientes/${client.id}/edit`;
        document.getElementById('printPdfBtn').style.display = 'inline-block';
        
        hideLoading();
        document.getElementById('clientInfo').style.display = 'block';
    }

    function generatePDF() {
        if (!currentClient) return;
        
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        
        // Configurações
        const margin = 20;
        let yPos = margin;
        const lineHeight = 7;
        const sectionSpacing = 10;
        
        // Título
        doc.setFontSize(18);
        doc.setFont(undefined, 'bold');
        const nomeDisplay = currentClient.nome_fantasia || currentClient.nome || currentClient.razao_social || 'Cliente';
        doc.text('Ficha do Cliente', margin, yPos);
        yPos += lineHeight + 5;
        
        doc.setFontSize(14);
        doc.text(nomeDisplay, margin, yPos);
        yPos += lineHeight + sectionSpacing;
        
        // Função auxiliar para adicionar seção
        function addSection(title, fields) {
            doc.setFontSize(12);
            doc.setFont(undefined, 'bold');
            doc.text(title, margin, yPos);
            yPos += lineHeight;
            
            doc.setFont(undefined, 'normal');
            doc.setFontSize(10);
            
            fields.forEach(field => {
                if (field.value) {
                    doc.text(`${field.label}: ${field.value}`, margin + 5, yPos);
                    yPos += lineHeight;
                }
            });
            
            yPos += sectionSpacing;
            
            // Nova página se necessário
            if (yPos > 270) {
                doc.addPage();
                yPos = margin;
            }
        }
        
        // Informações principais
        addSection('Informações Principais', [
            { label: 'ID', value: currentClient.id },
            { label: 'Nome Fantasia', value: currentClient.nome_fantasia || currentClient.nome },
            { label: 'Razão Social', value: currentClient.razao_social },
            { label: 'Tipo', value: currentClient.tipo === 'PJ' ? 'Pessoa Jurídica' : 'Pessoa Física' },
            { label: 'CNPJ', value: currentClient.cnpj },
            { label: 'CPF', value: currentClient.cpf }
        ]);
        
        // Informações fiscais
        addSection('Informações Fiscais', [
            { label: 'Inscrição Estadual', value: currentClient.ie },
            { label: 'Inscrição Municipal', value: currentClient.im }
        ]);
        
        // Contato
        addSection('Contato', [
            { label: 'E-mail', value: currentClient.email },
            { label: 'Telefone Fixo', value: currentClient.telefone_fixo },
            { label: 'Telefone Celular', value: currentClient.telefone_celular },
            { label: 'Contato', value: currentClient.contato_nome },
            { label: 'Site', value: currentClient.site_url }
        ]);
        
        // Informações financeiras
        const limiteCredito = currentClient.limite_credito ? 
            new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(currentClient.limite_credito) : '';
        addSection('Informações Financeiras', [
            { label: 'Limite de Crédito', value: limiteCredito },
            { label: 'Referências', value: currentClient.referencias }
        ]);
        
        // Endereços
        const addr = currentClient.address || {};
        if (addr.logradouro || addr.cep) {
            const coords = (addr.latitude && addr.longitude) ? `${addr.latitude}, ${addr.longitude}` : '';
            addSection('Endereço Principal', [
                { label: 'CEP', value: addr.cep },
                { label: 'Logradouro', value: addr.logradouro },
                { label: 'Número', value: addr.numero },
                { label: 'Complemento', value: addr.complemento },
                { label: 'Bairro', value: addr.bairro },
                { label: 'Cidade', value: addr.cidade },
                { label: 'Estado', value: addr.estado },
                { label: 'Coordenadas', value: coords }
            ]);
        }
        
        const billing = currentClient.billing_address || {};
        if (billing.logradouro || billing.cep) {
            const billingCoords = (billing.latitude && billing.longitude) ? `${billing.latitude}, ${billing.longitude}` : '';
            addSection('Endereço de Cobrança', [
                { label: 'CEP', value: billing.cep },
                { label: 'Logradouro', value: billing.logradouro },
                { label: 'Número', value: billing.numero },
                { label: 'Complemento', value: billing.complemento },
                { label: 'Bairro', value: billing.bairro },
                { label: 'Cidade', value: billing.cidade },
                { label: 'Estado', value: billing.estado },
                { label: 'Coordenadas', value: billingCoords }
            ]);
        }
        
        const shipping = currentClient.shipping_address || {};
        if (shipping.logradouro || shipping.cep) {
            const shippingCoords = (shipping.latitude && shipping.longitude) ? `${shipping.latitude}, ${shipping.longitude}` : '';
            addSection('Endereço de Entrega', [
                { label: 'CEP', value: shipping.cep },
                { label: 'Logradouro', value: shipping.logradouro },
                { label: 'Número', value: shipping.numero },
                { label: 'Complemento', value: shipping.complemento },
                { label: 'Bairro', value: shipping.bairro },
                { label: 'Cidade', value: shipping.cidade },
                { label: 'Estado', value: shipping.estado },
                { label: 'Coordenadas', value: shippingCoords }
            ]);
        }
        
        // Observações
        if (currentClient.observacoes) {
            addSection('Observações', [
                { label: '', value: currentClient.observacoes }
            ]);
        }
        
        // Informações do sistema
        const formatDate = (dateStr) => {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            return date.toLocaleString('pt-BR');
        };
        
        addSection('Informações do Sistema', [
            { label: 'Criado em', value: formatDate(currentClient.created_at) },
            { label: 'Atualizado em', value: formatDate(currentClient.updated_at) }
        ]);
        
        // Salvar PDF
        const fileName = `cliente_${currentClient.id}_${nomeDisplay.replace(/[^a-zA-Z0-9]/g, '_')}.pdf`;
        doc.save(fileName);
    }

    // Event listeners
    document.getElementById('printPdfBtn').addEventListener('click', generatePDF);

    // Carregar cliente ao inicializar a página
    document.addEventListener('DOMContentLoaded', loadClient);
</script>