<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#0d6efd">
  <title>Bulo Passageiro Web</title>
  <link rel="manifest" href="../manifest.webmanifest">
  <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/passageiro-web.css">
</head>
<body>
  <div class="web-app-shell">
    <div class="sidebar-backdrop" data-sidebar-backdrop></div>
    <aside class="app-sidebar" data-sidebar>
      <button class="sidebar-close" type="button" data-close-sidebar aria-label="Fechar menu">×</button>
      <div class="sidebar-profile">
        <div class="avatar" data-avatar>P</div>
        <div>
          <strong data-user-name>Passageiro</strong>
          <span data-user-email>Conta Bulo</span>
        </div>
      </div>
      <nav class="sidebar-nav">
        <a class="active" href="app.php">Chamar corrida</a>
        <a href="painel.php">Painel da conta</a>
        <a href="painel.php#corridas">Corridas</a>
        <a href="painel.php#carteira">Carteira</a>
        <a href="painel.php#indicacoes">Indicações</a>
        <a href="painel.php#documentos">Documentos</a>
        <a href="painel.php#suporte">Ajuda</a>
      </nav>
      <button class="sidebar-logout" type="button" data-logout>Sair</button>
    </aside>

    <main class="app-main">
      <section class="map-area">
        <div id="map" class="map-canvas" aria-label="Mapa da corrida"></div>

        <header class="top-card">
          <button class="icon-button desktop-hidden" type="button" data-menu aria-label="Abrir menu">
            <span></span><span></span><span></span>
          </button>
          <button class="profile-button mobile-profile" type="button" data-mobile-profile aria-label="Abrir menu do passageiro">
            <span data-mobile-avatar>P</span>
          </button>
          <div class="greeting">
            <span data-greeting>Olá</span>
            <strong>Para onde vamos?</strong>
          </div>
        </header>

        <button class="locate-button" type="button" data-center-map aria-label="Centralizar mapa">
          <span>⌖</span>
        </button>

        <section class="ride-panel" data-panel>
          <div class="grabber"></div>
          <div class="panel-scroll">
            <div class="location-permission" data-location-permission>
              <div>
                <strong>Permitir localização</strong>
                <span>Use sua posição atual para preencher o embarque e calcular a corrida.</span>
              </div>
              <button type="button" data-location-request>Permitir</button>
            </div>

            <div class="route-form" data-search-state>
              <label class="address-field">
                <span>Saindo de</span>
                <input id="originInput" autocomplete="off" placeholder="Buscando sua localização">
              </label>

              <div class="stops-list" data-stops></div>

              <label class="address-field destination-field">
                <span>Destino</span>
                <input id="destinationInput" autocomplete="off" placeholder="Digite o destino">
                <button class="add-stop" type="button" data-add-stop aria-label="Adicionar parada">+</button>
              </label>
            </div>

            <div class="quick-addresses">
              <div class="quick-head">
                <strong>Endereços salvos</strong>
                <span data-saved-count>0/5</span>
              </div>
              <div class="quick-row" data-saved-addresses></div>
              <div class="quick-head recent-head">
                <strong>Últimos usados</strong>
                <span data-recent-count>0/5</span>
              </div>
              <div class="quick-row" data-recent-addresses></div>
            </div>

            <div class="route-summary hidden" data-route-summary>
              <div>
                <strong data-route-distance>-- km</strong>
                <span data-route-duration>-- min</span>
              </div>
              <span data-route-region>Tarifa padrão</span>
            </div>

            <div class="category-payment hidden" data-quote-box>
              <div class="section-title">
                <strong>Escolha o tipo de carro</strong>
                <button type="button" data-clear-route>Cancelar</button>
              </div>
              <div class="option-grid" data-categories></div>

              <div class="section-title payment-title">
                <strong>Forma de pagamento</strong>
              </div>
              <div class="option-grid payment-grid" data-payments></div>

              <button class="primary-action" type="button" data-request-ride>
                Confirmar corrida
              </button>
            </div>

            <div class="active-ride hidden" data-active-ride>
              <div class="active-head">
                <div>
                  <strong data-active-title>Buscando motorista</strong>
                  <span data-active-subtitle>Estamos conectando você com um motorista disponível.</span>
                </div>
                <button class="collapse-button" type="button" data-active-toggle>⌄</button>
              </div>
              <div class="active-body" data-active-body>
                <button class="driver-card hidden" type="button" data-driver-card data-open-driver-profile>
                  <img data-driver-photo alt="">
                  <div>
                    <strong data-driver-name>Motorista</strong>
                    <span data-driver-rating>5.00</span>
                    <small data-driver-vehicle>Veículo</small>
                  </div>
                </button>
                <div class="ride-code hidden" data-ride-code-box>
                  <span>Código do passageiro</span>
                  <strong data-ride-code>----</strong>
                </div>
                <div class="status-message" data-active-message>
                  A busca está em andamento.
                </div>
                <button class="chat-action hidden" type="button" data-open-chat>
                  <span>Mensagens</span>
                  <strong class="hidden" data-chat-badge>0</strong>
                </button>
                <div class="rating-box hidden" data-rating-box>
                  <strong>Avalie o motorista</strong>
                  <div class="star-row" data-rating-stars>
                    <button type="button" data-rating="1">★</button>
                    <button type="button" data-rating="2">★</button>
                    <button type="button" data-rating="3">★</button>
                    <button type="button" data-rating="4">★</button>
                    <button type="button" data-rating="5">★</button>
                  </div>
                  <div class="rating-good hidden" data-rating-good>
                    <label>Elogio
                      <select data-rating-seal>
                        <option value="">Escolha um selo opcional</option>
                        <option value="bom_condutor">Bom condutor</option>
                        <option value="simpatico">Simpático</option>
                        <option value="veiculo_limpo">Veículo limpo</option>
                        <option value="boa_rota">Boa rota</option>
                        <option value="boa_conversa">Boa conversa</option>
                      </select>
                    </label>
                    <textarea data-rating-comment-good placeholder="Comentário opcional"></textarea>
                  </div>
                  <div class="rating-bad hidden" data-rating-bad>
                    <span>O que aconteceu?</span>
                    <label><input type="checkbox" value="problema_veiculo"> Problema no veículo</label>
                    <label><input type="checkbox" value="veiculo_sujo"> Veículo sujo</label>
                    <label><input type="checkbox" value="motorista_rude"> Motorista rude</label>
                    <label><input type="checkbox" value="direcao_perigosa"> Direção perigosa</label>
                    <label><input type="checkbox" value="rota_ruim"> Rota ruim</label>
                    <label><input type="checkbox" value="atraso"> Atraso excessivo</label>
                    <textarea data-rating-comment-bad placeholder="Conte rapidamente o que aconteceu"></textarea>
                  </div>
                  <button class="primary-action" type="button" data-submit-rating>Enviar avaliação</button>
                </div>
                <button class="danger-action" type="button" data-cancel-ride>Cancelar corrida</button>
              </div>
            </div>
          </div>
        </section>

        <div class="toast" data-toast></div>
      </section>

    </main>
  </div>

  <div class="modal hidden" data-cancel-modal>
    <div class="modal-card">
      <h2>Cancelar corrida</h2>
      <p>Informe o motivo do cancelamento.</p>
      <select data-cancel-reason>
        <option value="mudei_de_ideia">Mudei de ideia</option>
        <option value="endereco_errado">Endereço errado</option>
        <option value="demora_motorista">Motorista demorou</option>
        <option value="outro_motivo">Outro motivo</option>
      </select>
      <textarea data-cancel-note placeholder="Observação opcional"></textarea>
      <div class="modal-actions">
        <button type="button" data-close-cancel>Voltar</button>
        <button type="button" data-confirm-cancel>Confirmar cancelamento</button>
      </div>
    </div>
  </div>

  <div class="modal hidden" data-chat-modal>
    <div class="modal-card chat-modal-card">
      <div class="modal-actions chat-head">
        <h2>Mensagens</h2>
        <button type="button" data-close-chat>Fechar</button>
      </div>
      <div class="chat-list" data-chat-list>
        <div class="empty-chat">Nenhuma mensagem ainda.</div>
      </div>
      <form class="chat-form" data-chat-form>
        <input data-chat-input autocomplete="off" maxlength="1000" placeholder="Digite uma mensagem">
        <button type="submit">Enviar</button>
      </form>
    </div>
  </div>

  <div class="modal hidden" data-driver-profile-modal>
    <div class="modal-card driver-profile-modal-card">
      <div class="modal-actions chat-head">
        <h2>Perfil do motorista</h2>
        <button type="button" data-close-driver-profile>Fechar</button>
      </div>
      <div class="driver-profile-body" data-driver-profile-body></div>
    </div>
  </div>

  <script>
    window.BULO_GOOGLE_KEY = 'AIzaSyBrteucu_jnqE8DkFPU-Yn6Kjj-LP_N_aQ';
  </script>
  <script src="../assets/site/passageiro-web.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrteucu_jnqE8DkFPU-Yn6Kjj-LP_N_aQ&libraries=places&callback=initBuloPassengerWeb"></script>
</body>
</html>
