<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Painel do Motorista - 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 class="active" href="./">Motorista</a>
        <a href="../passageiro/">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">M</div>
          <div>
            <h1 id="titulo">Painel do motorista</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>
        <button class="btn btn-primary" id="refresh" type="button">Atualizar</button>
      </div>

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

      <section class="metric-grid">
        <div class="metric-card"><span>Ganhos hoje</span><strong id="ganhosHoje">--</strong></div>
        <div class="metric-card"><span>Corridas hoje</span><strong id="corridasHoje">--</strong></div>
        <div class="metric-card"><span>Saldo carteira</span><strong id="saldoCarteira">--</strong></div>
        <div class="metric-card"><span>Nota</span><strong id="nota">--</strong></div>
      </section>

      <section class="panel-grid">
        <div>
          <div class="panel-card">
            <div class="tabs">
              <button class="tab-button active" data-tab="ganhos">Ganhos</button>
              <button class="tab-button" data-tab="corridas">Corridas</button>
              <button class="tab-button" data-tab="veiculos">Veículos</button>
              <button class="tab-button" data-tab="indicacoes">Indicações</button>
            </div>

            <div data-panel="ganhos">
              <div class="action-row">
                <button class="btn btn-small btn-ghost" id="weekPrev" type="button">Semana anterior</button>
                <strong id="semanaTitulo">Semana atual</strong>
                <button class="btn btn-small btn-ghost" id="weekNext" type="button">Próxima semana</button>
              </div>
              <p id="semanaResumo" class="empty">Carregando semana...</p>
              <div class="mini-bars" id="ganhosBars"></div>
              <h2 style="margin-top:18px;">Corridas do dia</h2>
              <div class="list" id="corridasDiaLista"></div>
            </div>

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

            <div data-panel="veiculos" class="hidden">
              <h2>Veículos cadastrados</h2>
              <div class="list" id="veiculosLista"></div>
            </div>

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

        <aside>
          <div class="panel-card">
            <h2>Status do cadastro</h2>
            <div class="list" id="statusLista"></div>
          </div>

          <div class="panel-card">
            <h2>Carteira</h2>
            <div class="list" id="carteiraLista"></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 Motorista</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 = { motorista: {}, semanaOffset: 0, corridas: [], corridasRecentes: [], suporte: {}, indicacoes: {}, carteira: {}, veiculos: [] };
    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 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 renderHeader(motorista) {
      state.motorista = motorista;
      const nome = text(motorista.primeiro_nome, motorista.nome || user.nome);
      document.querySelector('#titulo').textContent = `Ola, ${nome}`;
      document.querySelector('#subtitulo').textContent = `${text(user.email)} | ${text(motorista.disponivel) === 'sim' ? 'online' : 'offline'}`;
      document.querySelector('#ganhosHoje').textContent = money(motorista.ganhos_hoje);
      document.querySelector('#corridasHoje').textContent = text(motorista.corridas_hoje, '0');
      document.querySelector('#nota').textContent = `${Number(motorista.nota_media || 0).toFixed(2)}`;
      const foto = motorista.foto_url ? `../${motorista.foto_url}` : '';
      document.querySelector('#avatar').innerHTML = foto ? `<img src="${esc(foto)}" alt="">` : nome.slice(0, 1).toUpperCase();
      list('#statusLista', `
        <div class="list-item"><strong>Status geral</strong><span>${badge(motorista.status_operacional)}</span></div>
        <div class="list-item"><strong>CNH</strong><span>${badge(motorista.cnh_status)} ${esc(text(motorista.cnh_vencimento, ''))}</span></div>
        <div class="list-item"><strong>Veículo</strong><span>${badge(motorista.documento_veiculo_status)} ${motorista.tem_veiculo_aprovado ? 'com veículo aprovado' : 'sem veículo aprovado'}</span></div>
        <div class="list-item"><strong>Foto</strong><span>${badge(motorista.selfie_status)}</span></div>
      `);
    }

    function renderGanhos(data) {
      const resumo = data.resumo || {};
      const semana = data.semana || {};
      document.querySelector('#semanaTitulo').textContent = semana.eh_semana_atual ? 'Semana atual' : `Semana ${text(semana.rotulo)}`;
      document.querySelector('#semanaResumo').className = '';
      document.querySelector('#semanaResumo').innerHTML = `Semana ${esc(text(semana.rotulo))} | Total ${money(resumo.total_ganhos)} | ${esc(text(resumo.total_corridas, 0))} corridas | ${esc(text(resumo.total_horas_online, 0))}h online`;
      document.querySelector('#weekNext').disabled = Number(semana.offset || 0) >= 0;
      const dias = data.dias || [];
      const max = Math.max(...dias.map((dia) => Number(dia.ganhos || 0)), 1);
      document.querySelector('#ganhosBars').innerHTML = dias.map((dia) => {
        const h = Math.max(5, Math.round((Number(dia.ganhos || 0) / max) * 124));
        return `<button class="bar-wrap btn-ghost" data-day="${esc(dia.data)}" title="${money(dia.ganhos)}"><div class="bar" style="height:${h}px"></div><div class="bar-label">${esc(dia.rotulo)}</div></button>`;
      }).join('');
      document.querySelectorAll('[data-day]').forEach((button) => button.addEventListener('click', () => loadCorridasDia(button.dataset.day)));
      const hoje = dias.find((dia) => dia.data === new Date().toISOString().slice(0, 10)) || dias[0];
      if (hoje) loadCorridasDia(hoje.data);
    }

    async function loadCorridasDia(dataRef) {
      try {
        const data = await getJson(`../auth/ganhos_corridas_dia.php?id_motorista=${user.id}&data=${dataRef}`);
        state.corridas = data.corridas || [];
        list('#corridasDiaLista', state.corridas.map((c) => corridaItem(c, true)).join(''));
        bindCorridas();
      } catch (error) {
        list('#corridasDiaLista', `<div class="empty">${esc(error.message)}</div>`);
      }
    }

    function renderCarteira(data) {
      state.carteira = data.carteira || {};
      const carteira = state.carteira;
      document.querySelector('#saldoCarteira').textContent = money(carteira.saldo_disponivel || carteira.saldo);
      const extrato = carteira.extrato || [];
      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>Resgates</strong><span>${(carteira.resgates || []).length} pedidos recentes</span></div>
        ${extrato.slice(0, 4).map((item) => `<div class="list-item"><strong>${money(item.valor)}</strong><span>${esc(text(item.descricao || item.origem))} | ${esc(text(item.criado_em))}</span></div>`).join('')}
      `);
    }

    function renderVeiculos(data) {
      state.veiculos = data.veiculos || [];
      list('#veiculosLista', state.veiculos.map((v) => `
        <div class="list-item">
          <strong>${esc(text(v.marca))} ${esc(text(v.modelo))}</strong>
          <span>${esc(text(v.cor))} | ${esc(text(v.placa, 'placa não informada'))} | ${badge(v.status)} ${v.ativo ? '<span class="badge ok">ativo</span>' : ''}</span>
        </div>
      `).join(''));
    }

    function renderIndicacoes(data) {
      state.indicacoes = data.indicacoes || {};
      const resumo = state.indicacoes.resumo || {};
      const extrato = state.indicacoes.extrato || [];
      const codigo = text(state.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, 5).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 corridaItem(c, motoristaValue) {
      const valor = motoristaValue ? c.valor_motorista : c.valor;
      return `
        <div class="list-item ride-summary" data-ride-card="${c.id}">
          <div class="ride-summary-main">
            <strong>#${c.id} - ${money(valor)}</strong>
            <span>${badge(c.status)} ${esc(text(c.categoria_veiculo))} | ${esc(text(c.forma_pagamento))} | ${esc(text(c.passageiro_nome, 'Passageiro'))}</span>
            <span>${esc(text(c.origem_endereco))} -> ${esc(text(c.destino_endereco))}</span>
          </div>
          <button class="ride-toggle" data-ride="${c.id}" type="button" aria-label="Abrir detalhes da corrida">&#9662;</button>
        </div>
      `;
    }

    function bindCorridas() {
      return;
    }

    document.addEventListener('click', (event) => {
      const button = event.target.closest('.ride-toggle');
      if (!button) return;
      event.preventDefault();
      event.stopPropagation();
      const id = Number(button.dataset.ride);
      const c = [...state.corridas, ...state.corridasRecentes].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 motorista</strong><span>${money(c.valor_motorista || (Number(c.valor || 0) * 0.85))}</span></div>
          <div class="list-item"><strong>Valor total</strong><span>${money(c.valor_total || c.valor)}</span></div>
          <div class="list-item"><strong>Status</strong><span>${badge(c.status)}</span></div>
          <div class="list-item"><strong>Pagamento</strong><span>${esc(text(c.forma_pagamento))}</span></div>
          <div class="list-item"><strong>Distância</strong><span>${esc(text(c.distancia_rota_real_km || c.distancia_km || c.distancia, 0))} km</span></div>
          <div class="list-item"><strong>Tempo</strong><span>${esc(text(c.tempo_estimado || c.duracao_segundos, '--'))}</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);
    }

    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 || [];
      state.corridasRecentes = data.corridas || [];
      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(''));
      list('#corridasLista', state.corridasRecentes.slice(0, 12).map((c) => corridaItem(c, false)).join(''));
      document.querySelectorAll('[data-ticket]').forEach((button) => button.addEventListener('click', () => openTicket(button.dataset.ticket)));
      bindCorridas();
    }

    async function openTicket(id) {
      const data = await getJson(`../auth/suporte_chamado.php?id_motorista=${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 === 'motorista' ? '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.php', { id_motorista: 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.php', {
        id_motorista: 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 m = state.motorista;
      openModal('Perfil do motorista', `
        <div class="detail-grid">
          <div class="list-item"><strong>Nome</strong><span>${esc(text(m.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>Nota</strong><span>${Number(m.nota_media || 0).toFixed(2)} (${esc(text(m.total_avaliacoes, 0))} avaliacoes)</span></div>
          <div class="list-item"><strong>Status</strong><span>${badge(m.status_operacional)}</span></div>
          <div class="list-item"><strong>Veículo ativo</strong><span>${esc(text(m.veiculo_ativo?.modelo || m.veiculo_modelo, 'Não informado'))}</span></div>
          <div class="list-item"><strong>Disponibilidade</strong><span>${esc(text(m.disponivel) === 'sim' ? 'Online' : 'Offline')}</span></div>
        </div>
      `);
    });

    document.querySelector('#weekPrev').addEventListener('click', async () => {
      state.semanaOffset -= 1;
      await loadGanhos();
    });
    document.querySelector('#weekNext').addEventListener('click', async () => {
      state.semanaOffset = Math.min(0, state.semanaOffset + 1);
      await loadGanhos();
    });

    async function loadGanhos() {
      const ganhos = await getJson(`../auth/ganhos_semanais.php?id_motorista=${user.id}&semana_offset=${state.semanaOffset}`);
      renderGanhos(ganhos);
    }

    async function load() {
      document.querySelector('#alert').className = 'alert';
      try {
        const [status, carteira, veiculos, indicacoes, suporte] = await Promise.all([
          getJson(`../auth/motorista_status.php?id_motorista=${user.id}`),
          getJson(`../auth/carteira_motorista.php?id_motorista=${user.id}`),
          getJson(`../auth/veiculos_listar.php?id_motorista=${user.id}`),
          getJson(`../auth/indicacoes_motorista.php?id_motorista=${user.id}`),
          getJson(`../auth/suporte_chamados.php?id_motorista=${user.id}`),
        ]);
        renderHeader(status.motorista || {});
        renderCarteira(carteira);
        renderVeiculos(veiculos);
        renderIndicacoes(indicacoes);
        renderSuporte(suporte);
        await loadGanhos();
      } 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>
