<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Painel do Passageiro - Bulo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <link rel="icon" type="image/png" href="../assets/site/img/favicon.png">
  <link rel="apple-touch-icon" href="../assets/site/img/apple-touch-icon.png">
  <link rel="stylesheet" href="../assets/site/site.css">
</head>
<body>
  <header class="site-header">
    <div class="site-shell site-nav">
      <a class="brand-link" href="../index.php"><img class="brand-logo" src="../assets/site/img/bulo-logo.png" alt="Bulo">Bulo</a>
      <nav class="nav-links" data-nav-links>
        <a href="../motorista/">Motorista</a>
        <a class="active" href="painel.php">Passageiro</a>
        <a href="../ajuda/">Ajuda</a>
        <a href="#" id="logout">Sair</a>
      </nav>
      <button class="mobile-toggle" data-mobile-toggle aria-label="Abrir menu">&#9776;</button>
    </div>
  </header>

  <main class="section section-soft">
    <div class="site-shell">
      <div class="dashboard-head">
        <div class="dashboard-user">
          <div class="avatar" id="avatar">P</div>
          <div>
            <h1 id="titulo">Painel do passageiro</h1>
            <p id="subtitulo">Carregando informações da sua conta...</p>
            <div class="action-row">
              <button class="btn btn-small btn-secondary" id="openProfile" type="button">Ver perfil</button>
            </div>
          </div>
        </div>
        <div class="dashboard-actions">
          <a class="btn btn-primary" href="app.php">Chamar corrida</a>
          <button class="btn btn-secondary" id="refresh" type="button">Atualizar</button>
        </div>
      </div>

      <div id="alert" class="alert"></div>

      <section class="metric-grid">
        <div class="metric-card"><span>Saldo carteira</span><strong id="saldoCarteira">--</strong></div>
        <div class="metric-card"><span>Corridas</span><strong id="totalCorridas">--</strong></div>
        <div class="metric-card"><span>Nota</span><strong id="nota">--</strong></div>
        <div class="metric-card"><span>Documento</span><strong id="documento">--</strong></div>
      </section>

      <section class="panel-grid">
        <div>
          <div class="panel-card">
            <div class="tabs">
              <button class="tab-button active" data-tab="corridas">Corridas</button>
              <button class="tab-button" data-tab="carteira">Carteira</button>
              <button class="tab-button" data-tab="indicacoes">Indicações</button>
              <button class="tab-button" data-tab="documentos">Documentos</button>
            </div>

            <div data-panel="corridas">
              <h2>Corridas recentes</h2>
              <div class="list" id="corridasLista"></div>
            </div>

            <div data-panel="carteira" class="hidden">
              <h2>Carteira</h2>
              <div class="list" id="carteiraLista"></div>
            </div>

            <div data-panel="indicacoes" class="hidden">
              <h2>Indicações</h2>
              <div class="list" id="indicacoesLista"></div>
            </div>

            <div data-panel="documentos" class="hidden">
              <h2>Documentos opcionais</h2>
              <div class="list" id="documentosLista"></div>
            </div>
          </div>
        </div>

        <aside>
          <div class="panel-card">
            <h2>Perfil</h2>
            <div class="list" id="perfilLista"></div>
          </div>

          <div class="panel-card">
            <h2>Suporte</h2>
            <form id="supportForm" class="form-compact support-form">
              <label>Assunto
                <select class="select" id="supportCategoria"></select>
              </label>
              <label>Prioridade
                <select class="select" id="supportPrioridade"></select>
              </label>
              <label>Corrida relacionada
                <select class="select" id="supportCorrida"><option value="">Sem corrida vinculada</option></select>
              </label>
              <label>Titulo
                <input class="input" id="supportTitulo" placeholder="Titulo do chamado">
              </label>
              <label>Mensagem
                <textarea class="textarea" id="supportDescricao" placeholder="Descreva o que aconteceu"></textarea>
              </label>
              <button class="btn btn-primary" type="submit">Abrir chamado</button>
            </form>
            <div class="support-list-title"><span>Meus chamados</span><small id="supportCount">0</small></div>
            <div class="list" id="suporteLista"></div>
          </div>
        </aside>
      </section>
    </div>
  </main>

  <div class="modal-backdrop" id="modal">
    <div class="modal-card">
      <div class="modal-head">
        <h2 id="modalTitle">Detalhes</h2>
        <button class="btn btn-small btn-ghost" id="modalClose" type="button">Fechar</button>
      </div>
      <div class="modal-body" id="modalBody"></div>
    </div>
  </div>

  <footer class="site-footer">
    <div class="site-shell footer-inner">
      <span>Bulo Passageiro</span>
      <nav class="footer-links" aria-label="Redes sociais">
        <a href="https://www.instagram.com/bulo.app/" target="_blank" rel="noopener">Instagram</a>
        <a href="https://www.facebook.com/bulo.app/" target="_blank" rel="noopener">Facebook</a>
      </nav>
    </div>
  </footer>
  <script src="../assets/site/site.js"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const rawUser = sessionStorage.getItem('bulo_user');
    const user = rawUser ? JSON.parse(rawUser) : null;
    const state = { passageiro: {}, corridas: [], suporte: {}, indicacoes: {}, documentos: {}, carteira: {} };
    const money = (value) => `R$ ${(Number(value || 0)).toFixed(2).replace('.', ',')}`;
    const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[c]));
    const text = (value, fallback = '--') => value === null || value === undefined || value === '' ? fallback : String(value);
    const mediaUrl = (value) => {
      const raw = String(value || '').trim();
      if (!raw) return '';
      if (/^(https?:|data:|blob:)/i.test(raw)) return raw;
      if (raw.startsWith('/') || raw.startsWith('../') || raw.startsWith('./')) return raw;
      return `../${raw.replace(/^\/+/, '')}`;
    };
    const list = (id, html) => document.querySelector(id).innerHTML = html || '<div class="empty">Nenhuma informação encontrada.</div>';

    if (!user || !user.id) {
      window.location.href = './';
    }

    document.querySelector('#logout').addEventListener('click', (event) => {
      event.preventDefault();
      sessionStorage.removeItem('bulo_user');
      window.location.href = './';
    });

    document.querySelectorAll('.tab-button').forEach((button) => {
      button.addEventListener('click', () => {
        document.querySelectorAll('.tab-button').forEach((item) => item.classList.toggle('active', item === button));
        document.querySelectorAll('[data-panel]').forEach((panel) => panel.classList.toggle('hidden', panel.dataset.panel !== button.dataset.tab));
      });
    });

    async function getJson(url, options = {}) {
      const response = await fetch(url, options);
      const data = await response.json();
      if (!response.ok || data.success !== true) {
        throw new Error(data.message || 'Falha ao carregar dados.');
      }
      return data;
    }

    function postJson(url, payload) {
      return getJson(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
    }

    function badge(status) {
      const s = text(status, 'pendente');
      const cls = ['aprovado', 'aprovada', 'ativo', 'sim', 'confirmado', 'finalizada'].includes(s) ? 'ok' : (['reprovado', 'cancelada', 'erro'].includes(s) ? 'bad' : 'warn');
      return `<span class="badge ${cls}">${esc(s)}</span>`;
    }

    function openModal(title, html) {
      document.querySelector('#modalTitle').textContent = title;
      document.querySelector('#modalBody').innerHTML = html;
      document.querySelector('#modal').classList.add('open');
    }

    document.querySelector('#modalClose').addEventListener('click', () => document.querySelector('#modal').classList.remove('open'));
    document.querySelector('#modal').addEventListener('click', (event) => {
      if (event.target.id === 'modal') document.querySelector('#modal').classList.remove('open');
    });

    function renderResumo(data) {
      const p = data.passageiro || {};
      state.passageiro = p;
      const nome = text(p.primeiro_nome, p.nome || user.nome);
      document.querySelector('#titulo').textContent = `Ola, ${nome}`;
      document.querySelector('#subtitulo').textContent = `${text(p.email, user.email)} | ${text(p.cidade, 'Cidade não informada')}`;
      document.querySelector('#saldoCarteira').textContent = money(p.saldo_carteira);
      document.querySelector('#totalCorridas').textContent = text(p.total_corridas, '0');
      document.querySelector('#nota').textContent = `${Number(p.nota_media || 0).toFixed(2)}`;
      document.querySelector('#documento').textContent = p.passageiro_verificado ? 'Verificado' : 'Pendente';
      const foto = mediaUrl(p.foto_url);
      document.querySelector('#avatar').innerHTML = foto ? `<img src="${esc(foto)}" alt="">` : nome.slice(0, 1).toUpperCase();
      list('#perfilLista', `
        <div class="list-item"><strong>Nome</strong><span>${esc(text(p.nome))}</span></div>
        <div class="list-item"><strong>Celular</strong><span>${esc(text(p.celular))}</span></div>
        <div class="list-item"><strong>Cidade</strong><span>${esc(text(p.cidade))} ${esc(text(p.uf, ''))}</span></div>
        <div class="list-item"><strong>Documento</strong><span>${badge(p.passageiro_documento_status)}</span></div>
      `);
    }

    function renderCorridas(data) {
      state.corridas = data.corridas || [];
      list('#corridasLista', state.corridas.slice(0, 15).map((c) => `
        <div class="list-item ride-summary" data-ride-card="${c.id}">
          <div class="ride-summary-main">
            <strong>#${c.id} - ${money(c.valor)}</strong>
            <span>${badge(c.status)} ${esc(text(c.categoria_veiculo))} | ${esc(text(c.forma_pagamento))} | ${esc(text(c.motorista_nome, 'Motorista não definido'))}</span>
            <span>${esc(text(c.origem_endereco))} -> ${esc(text(c.destino_endereco))}</span>
          </div>
          <div class="ride-actions">
            ${c.id_motorista ? `<button class="btn btn-small btn-secondary" data-driver-profile="${c.id_motorista}" type="button">Perfil</button>` : ''}
            <button class="ride-toggle" data-ride="${c.id}" type="button" aria-label="Abrir detalhes da corrida">&#9662;</button>
          </div>
        </div>
      `).join(''));
      bindCorridas();
    }

    function bindCorridas() {
      return;
    }

    document.addEventListener('click', (event) => {
      const profileButton = event.target.closest('[data-driver-profile]');
      if (profileButton) {
        event.preventDefault();
        event.stopPropagation();
        openDriverProfile(Number(profileButton.dataset.driverProfile));
        return;
      }

      const button = event.target.closest('.ride-toggle');
      if (!button) return;
      event.preventDefault();
      event.stopPropagation();
      const id = Number(button.dataset.ride);
      const c = state.corridas.find((item) => Number(item.id) === id);
      if (!c) {
        const card = button.closest('.ride-summary');
        const wrapper = document.createElement('div');
        wrapper.className = 'ride-expanded';
        wrapper.innerHTML = '<div class="empty">Não foi possível carregar os detalhes desta corrida.</div>';
        card?.insertAdjacentElement('afterend', wrapper);
        return;
      }
      toggleCorrida(button, c);
    });

    function rideLatLng(c, prefix) {
      const lat = Number(c[`${prefix}_lat`]);
      const lng = Number(c[`${prefix}_lng`]);
      return Number.isFinite(lat) && Number.isFinite(lng) ? [lat, lng] : null;
    }

    function rideRoute(c) {
      const pontos = Array.isArray(c.rota_pontos) ? c.rota_pontos : [];
      const rota = pontos
        .map((p) => [Number(p.lat), Number(p.lng)])
        .filter((p) => Number.isFinite(p[0]) && Number.isFinite(p[1]));
      if (rota.length > 1) return rota;
      const origem = rideLatLng(c, 'origem');
      const destino = rideLatLng(c, 'destino');
      return origem && destino ? [origem, destino] : [];
    }

    function toggleCorrida(button, c) {
      const card = button.closest('.ride-summary');
      const existing = card?.nextElementSibling;
      if (existing?.classList.contains('ride-expanded')) {
        existing.remove();
        button.classList.remove('open');
        return;
      }
      document.querySelectorAll('.ride-expanded').forEach((item) => item.remove());
      document.querySelectorAll('.ride-toggle.open').forEach((item) => item.classList.remove('open'));
      button.classList.add('open');
      const mapId = `rideMap${c.id}_${Date.now()}`;
      const wrapper = document.createElement('div');
      wrapper.className = 'ride-expanded';
      wrapper.innerHTML = `
        <div id="${mapId}" class="ride-map"></div>
        <div class="detail-grid">
          <div class="list-item"><strong>Valor pago</strong><span>${money(c.valor)}</span></div>
          <div class="list-item"><strong>Status</strong><span>${badge(c.status)}</span></div>
          <div class="list-item"><strong>Categoria</strong><span>${esc(text(c.categoria_veiculo))}</span></div>
          <div class="list-item"><strong>Pagamento</strong><span>${esc(text(c.forma_pagamento))}</span></div>
          <div class="list-item"><strong>Motorista</strong><span>${esc(text(c.motorista_nome, 'Não definido'))}</span></div>
          <div class="list-item"><strong>Veículo</strong><span>${esc(text(c.veiculo_marca, ''))} ${esc(text(c.veiculo_modelo, ''))} ${esc(text(c.veiculo_cor, ''))} ${esc(text(c.veiculo_placa, ''))}</span></div>
          <div class="list-item"><strong>Distância</strong><span>${esc(text(c.distancia, 0))} km</span></div>
          <div class="list-item"><strong>Tempo</strong><span>${esc(text(c.tempo_estimado))}</span></div>
          <div class="list-item"><strong>Origem</strong><span>${esc(text(c.origem_endereco))}</span></div>
          <div class="list-item"><strong>Destino</strong><span>${esc(text(c.destino_endereco))}</span></div>
          <div class="list-item"><strong>Criada em</strong><span>${esc(text(c.criada_em))}</span></div>
          <div class="list-item"><strong>Finalizada em</strong><span>${esc(text(c.finalizada_em || c.cancelada_em))}</span></div>
        </div>
        <div class="ride-route-note">${Array.isArray(c.rota_pontos) && c.rota_pontos.length > 1 ? 'Rota real registrada pelo app.' : 'Sem pontos suficientes da rota real; exibindo linha entre origem e destino.'}</div>
      `;
      card.insertAdjacentElement('afterend', wrapper);
      renderRideMap(mapId, c);
    }

    function renderRideMap(mapId, c) {
      const route = rideRoute(c);
      const origem = rideLatLng(c, 'origem');
      const destino = rideLatLng(c, 'destino');
      const center = route[0] || origem || destino || [-29.6842, -53.8069];
      if (typeof L === 'undefined') {
        document.getElementById(mapId).innerHTML = '<div class="empty">Mapa indisponivel no momento.</div>';
        return;
      }
      const map = L.map(mapId, { zoomControl: true, scrollWheelZoom: false }).setView(center, 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap',
      }).addTo(map);
      const bounds = [];
      if (route.length > 1) {
        L.polyline(route, { color: '#0d6efd', weight: 5, opacity: 0.9 }).addTo(map);
        bounds.push(...route);
      }
      if (origem) {
        L.circleMarker(origem, { radius: 8, color: '#0d6efd', fillColor: '#0d6efd', fillOpacity: 1 }).addTo(map).bindPopup('Origem');
        bounds.push(origem);
      }
      if (destino) {
        L.circleMarker(destino, { radius: 8, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 1 }).addTo(map).bindPopup('Destino');
        bounds.push(destino);
      }
      if (bounds.length > 1) {
        map.fitBounds(L.latLngBounds(bounds), { padding: [28, 28], maxZoom: 16 });
      }
      setTimeout(() => map.invalidateSize(), 80);
    }

    async function openDriverProfile(idMotorista) {
      if (!idMotorista) return;
      try {
        const data = await getJson(`../auth/perfil_motorista.php?id_motorista=${idMotorista}`);
        const p = data.perfil || {};
        const foto = mediaUrl(p.foto_url);
        const elogios = p.elogios || {};
        const comentarios = Array.isArray(p.comentarios) ? p.comentarios : [];
        openModal('Perfil do motorista', `
          <div class="driver-profile-modal">
            <div class="driver-profile-head">
              <div class="avatar avatar-large">${foto ? `<img src="${esc(foto)}" alt="">` : esc(text(p.nome, 'M')).slice(0, 1).toUpperCase()}</div>
              <div>
                <h3>${esc(text(p.nome, 'Motorista'))}</h3>
                <p>${esc(text(p.cidade, 'Cidade nao informada'))} ${esc(text(p.uf, ''))}</p>
              </div>
            </div>
            <div class="detail-grid">
              <div class="list-item"><strong>Nota</strong><span>${Number(p.nota_media || 0).toFixed(2)} (${esc(text(p.total_avaliacoes, 0))} avaliacoes)</span></div>
              <div class="list-item"><strong>Viagens</strong><span>${esc(text(p.total_viagens, 0))}</span></div>
              <div class="list-item"><strong>Cadastro</strong><span>${esc(text(p.tempo_cadastro_texto, 'Cadastro recente'))}</span></div>
              <div class="list-item"><strong>5 estrelas</strong><span>${esc(text(p.viagens_5_estrelas, 0))}</span></div>
            </div>
            <h3>Elogios</h3>
            <div class="badge-row">
              <span class="badge ok">Bom condutor: ${Number(elogios.bom_condutor || 0)}</span>
              <span class="badge ok">Simpatico: ${Number(elogios.simpatico || 0)}</span>
              <span class="badge ok">Veiculo limpo: ${Number(elogios.veiculo_limpo || 0)}</span>
              <span class="badge ok">Boa rota: ${Number(elogios.boa_rota || 0)}</span>
              <span class="badge ok">Boa conversa: ${Number(elogios.boa_conversa || 0)}</span>
            </div>
            <h3>Comentarios recentes</h3>
            <div class="list">
              ${comentarios.slice(0, 5).map((item) => `<div class="list-item"><strong>★★★★★</strong><span>${esc(text(item.comentario, ''))}</span></div>`).join('') || '<div class="empty">Nenhum comentario 5 estrelas ainda.</div>'}
            </div>
          </div>
        `);
      } catch (error) {
        openModal('Perfil do motorista', `<div class="empty">${esc(error.message || 'Nao foi possivel carregar o perfil do motorista.')}</div>`);
      }
    }

    function renderCarteira(data) {
      const carteira = data.carteira || {};
      state.carteira = carteira;
      const movimentos = carteira.movimentos || [];
      list('#carteiraLista', `
        <div class="list-item"><strong>Saldo disponível</strong><span>${money(carteira.saldo_disponivel || carteira.saldo)}</span></div>
        <div class="list-item"><strong>Pix pendente</strong><span>${money(carteira.pix_pendente)}</span></div>
        <div class="list-item"><strong>Cartões</strong><span>${(carteira.cartoes || []).length} cadastrados</span></div>
        ${movimentos.slice(0, 8).map((m) => `<div class="list-item"><strong>${money(m.valor)}</strong><span>${badge(m.status)} ${esc(text(m.descricao || m.origem))} | ${esc(text(m.criado_em))}</span></div>`).join('')}
      `);
    }

    function renderIndicacoes(data) {
      const indicacoes = data.indicacoes || {};
      state.indicacoes = indicacoes;
      const resumo = indicacoes.resumo || {};
      const extrato = indicacoes.extrato || [];
      const codigo = text(indicacoes.codigo, '');
      const link = `${window.location.origin}/bulo_backend/cadastro/?ref=${encodeURIComponent(codigo)}`;
      list('#indicacoesLista', `
        <div class="list-item"><strong>Seu código</strong><span>${esc(codigo)}</span></div>
        <div class="list-item"><strong>Link de convite</strong><span>${esc(link)}</span><div class="action-row"><button class="btn btn-small btn-secondary" id="copyReferral" type="button">Copiar link</button><button class="btn btn-small btn-primary" id="shareReferral" type="button">Compartilhar</button></div></div>
        <div class="list-item"><strong>Saldo indicacoes</strong><span>${money(resumo.saldo_disponivel)}</span></div>
        <div class="list-item"><strong>Total gerado</strong><span>${money(resumo.total_gerado)}</span></div>
        ${extrato.slice(0, 6).map((item) => `<div class="list-item"><strong>${money(item.valor_indicacao)}</strong><span>${esc(text(item.indicado_nome, 'Indicado'))} | ${esc(text(item.origem))}</span></div>`).join('')}
      `);
      document.querySelector('#copyReferral')?.addEventListener('click', () => navigator.clipboard.writeText(link));
      document.querySelector('#shareReferral')?.addEventListener('click', () => navigator.share ? navigator.share({ title: 'Bulo', text: 'Cadastre-se no Bulo pelo meu convite.', url: link }) : navigator.clipboard.writeText(link));
    }

    function renderDocumentos(data) {
      const docs = data.documentos || {};
      state.documentos = docs;
      list('#documentosLista', `
        <div class="list-item"><strong>Status</strong><span>${badge(docs.status)}</span></div>
        <div class="list-item"><strong>Documento</strong><span>${docs.documento_url ? 'enviado' : 'não enviado'}</span></div>
        <div class="list-item"><strong>Selfie</strong><span>${docs.selfie_url ? 'enviada' : 'não enviada'}</span></div>
        <div class="list-item"><strong>Observação</strong><span>${esc(text(docs.observacao, 'Sem observação'))}</span></div>
      `);
    }

    function renderSuporte(data) {
      state.suporte = data;
      const categorias = data.categorias || {};
      const prioridades = data.prioridades || {};
      document.querySelector('#supportCategoria').innerHTML = Object.entries(categorias).map(([k, v]) => `<option value="${esc(k)}">${esc(v)}</option>`).join('');
      document.querySelector('#supportPrioridade').innerHTML = Object.entries(prioridades).map(([k, v]) => `<option value="${esc(k)}">${esc(v)}</option>`).join('');
      document.querySelector('#supportCorrida').innerHTML = '<option value="">Sem corrida vinculada</option>' + (data.corridas || []).map((c) => `<option value="${c.id}">#${c.id} - ${money(c.valor)} - ${esc(text(c.status))}</option>`).join('');
      const chamados = data.chamados || [];
      document.querySelector('#supportCount').textContent = `${chamados.length} chamados`;
      list('#suporteLista', chamados.slice(0, 6).map((c) => `
        <button class="list-item btn-ghost" data-ticket="${c.id}" type="button"><strong>#${c.id} - ${esc(text(c.titulo))}</strong><span>${badge(c.status)} ${esc(text(c.ultima_mensagem, ''))}</span></button>
      `).join(''));
      document.querySelectorAll('[data-ticket]').forEach((button) => button.addEventListener('click', () => openTicket(button.dataset.ticket)));
    }

    async function openTicket(id) {
      const data = await getJson(`../auth/suporte_chamado_passageiro.php?id_passageiro=${user.id}&id_chamado=${id}`);
      const chamado = data.chamado || {};
      const mensagens = data.mensagens || [];
      openModal(`Chamado #${id}`, `
        <div class="list-item"><strong>${esc(text(chamado.titulo))}</strong><span>${badge(chamado.status)} ${esc(text(chamado.categoria))}</span></div>
        <div class="message-list">${mensagens.map((m) => `<div class="message ${m.remetente_tipo === 'passageiro' ? 'mine' : ''}">${esc(text(m.mensagem, ''))}<small>${esc(text(m.nome_remetente))} | ${esc(text(m.criado_em))}</small></div>`).join('')}</div>
        <form id="ticketReply" class="form-compact">
          <textarea class="textarea" id="ticketMessage" placeholder="Responder chamado"></textarea>
          <button class="btn btn-primary" type="submit">Enviar resposta</button>
        </form>
      `);
      document.querySelector('#ticketReply').addEventListener('submit', async (event) => {
        event.preventDefault();
        await postJson('../auth/suporte_chamado_passageiro.php', { id_passageiro: user.id, id_chamado: id, mensagem: document.querySelector('#ticketMessage').value });
        await load();
        await openTicket(id);
      });
    }

    document.querySelector('#supportForm').addEventListener('submit', async (event) => {
      event.preventDefault();
      await postJson('../auth/suporte_chamados_passageiro.php', {
        id_passageiro: user.id,
        categoria: document.querySelector('#supportCategoria').value,
        prioridade: document.querySelector('#supportPrioridade').value,
        id_corrida: document.querySelector('#supportCorrida').value,
        titulo: document.querySelector('#supportTitulo').value,
        descricao: document.querySelector('#supportDescricao').value,
      });
      event.target.reset();
      await load();
    });

    document.querySelector('#openProfile').addEventListener('click', () => {
      const p = state.passageiro;
      openModal('Perfil do passageiro', `
        <div class="detail-grid">
          <div class="list-item"><strong>Nome</strong><span>${esc(text(p.nome, user.nome))}</span></div>
          <div class="list-item"><strong>E-mail</strong><span>${esc(text(user.email))}</span></div>
          <div class="list-item"><strong>Celular</strong><span>${esc(text(p.celular))}</span></div>
          <div class="list-item"><strong>Cidade</strong><span>${esc(text(p.cidade))} ${esc(text(p.uf, ''))}</span></div>
          <div class="list-item"><strong>Nota</strong><span>${Number(p.nota_media || 0).toFixed(2)} (${esc(text(p.total_avaliacoes, 0))} avaliacoes)</span></div>
          <div class="list-item"><strong>Documento</strong><span>${badge(p.passageiro_documento_status)}</span></div>
        </div>
      `);
    });

    async function load() {
      document.querySelector('#alert').className = 'alert';
      try {
        const [resumo, carteira, corridas, documentos, indicacoes, suporte] = await Promise.all([
          getJson(`../auth/passageiro_resumo.php?id_usuario=${user.id}`),
          getJson(`../auth/carteira_passageiro.php?id_usuario=${user.id}`),
          getJson(`../auth/corridas_passageiro.php?id_usuario=${user.id}`),
          getJson(`../auth/documentos_passageiro.php?id_usuario=${user.id}`),
          getJson(`../auth/indicacoes_passageiro.php?id_usuario=${user.id}`),
          getJson(`../auth/suporte_chamados_passageiro.php?id_usuario=${user.id}`),
        ]);
        renderResumo(resumo);
        renderCarteira(carteira);
        renderCorridas(corridas);
        renderDocumentos(documentos);
        renderIndicacoes(indicacoes);
        renderSuporte(suporte);
      } catch (error) {
        const alert = document.querySelector('#alert');
        alert.textContent = error.message || 'Erro ao carregar painel.';
        alert.className = 'alert show error';
      }
    }

    document.querySelector('#refresh').addEventListener('click', load);
    load();
  </script>
</body>
</html>
