<?php $__env->startSection('title', __('MobiAngra') . ' - ' . config('app.name')); ?>

<?php $__env->startPush('styles'); ?>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.css"
        integrity="sha512-qN/uDg9bS3IAldWq4lswyC+9ZSoShtfyNDp+FaJhdtXJqdgubHA+s4nB8BajW0m90Y0+RBGbqu2anzbxiQYdHA="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="<?php echo e(asset('mobiangra-assets/css/mapa.css')); ?>">
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <div id="mapa-container">

        
        <div id="map"></div>

        
        <div class="barra-atualizacao-progress" aria-hidden="true">
            <span id="barra-atualizacao-progress-bar" class="painel-atualizacao-progress-bar"></span>
        </div>

        
        <nav id="barra-acoes" aria-label="<?php echo e(__('Ações do mapa')); ?>">
            <button class="acao-btn" id="btn-localizar" title="<?php echo e(__('Minha localização')); ?>"
                aria-label="<?php echo e(__('Minha localização')); ?>">
                <i class="fa-solid fa-location-crosshairs" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-zoom-in" title="<?php echo e(__('Aproximar')); ?>" aria-label="<?php echo e(__('Aproximar')); ?>">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>
            </button>

            <button class="acao-btn acao-btn--destaque" id="btn-linhas" title="<?php echo e(__('Linhas')); ?>"
                aria-label="<?php echo e(__('Ver linhas de ônibus')); ?>" aria-expanded="false" aria-controls="painel-linhas">
                <i class="fa-solid fa-bus-simple" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-zoom-out" title="<?php echo e(__('Afastar')); ?>" aria-label="<?php echo e(__('Afastar')); ?>">
                <i class="fa-solid fa-minus" aria-hidden="true"></i>
            </button>

            <a href="<?php echo e(route('mobiangra.index')); ?>"
               class="acao-btn"
               id="btn-home"
               title="<?php echo e(__('Início MobiAngra')); ?>"
               aria-label="<?php echo e(__('Voltar à página inicial do MobiAngra')); ?>">
                <i class="fa-solid fa-house" aria-hidden="true"></i>
            </a>
        </nav>

        
        <div id="fab-filtros">
            <button id="fab-favoritos" class="fab-btn" type="button"
                title="<?php echo e(__('Mostrar apenas favoritas')); ?>"
                aria-label="<?php echo e(__('Mostrar apenas favoritas')); ?>">
                <i class="fa-solid fa-star" aria-hidden="true"></i>
            </button>
            <button id="fab-todas" class="fab-btn fab-btn--active" type="button"
                title="<?php echo e(__('Mostrar todas as linhas')); ?>"
                aria-label="<?php echo e(__('Mostrar todas as linhas')); ?>">
                <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
            </button>
        </div>

        
        <button id="fab-parada-proxima" class="fab-btn fab-parada-proxima" type="button"
            title="<?php echo e(__('Parada mais próxima')); ?>"
            aria-label="<?php echo e(__('Mostrar parada mais próxima')); ?>">
            <img src="<?php echo e(asset('mobiangra-assets/images/placa-parada.png')); ?>"
                alt=""
                width="28"
                height="36"
                decoding="async"
                class="fab-parada-proxima-img"
                aria-hidden="true">
        </button>

        
        <section id="card-parada-proxima" class="card-parada" role="region"
            aria-label="<?php echo e(__('Parada mais próxima')); ?>" aria-hidden="true">
            <div class="card-parada-header">
                <div class="card-parada-titulo-wrap">
                    <i class="fa-solid fa-location-dot card-parada-icone" aria-hidden="true"></i>
                    <span class="card-parada-titulo" id="card-parada-titulo"><?php echo e(__('Parada mais próxima')); ?></span>
                </div>
                <button id="btn-fechar-card-parada" class="btn-fechar-card" type="button"
                    aria-label="<?php echo e(__('Fechar')); ?>" title="<?php echo e(__('Fechar')); ?>">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>
            <div id="card-parada-corpo" class="card-parada-corpo"></div>
        </section>

        
        <div id="backdrop-linhas" class="backdrop" role="presentation"></div>

        
        <div id="painel-linhas" role="dialog" aria-modal="true" aria-label="<?php echo e(__('Linhas de ônibus')); ?>">
            <div class="painel-handle" aria-hidden="true"></div>
            <div class="painel-header">
                <h2 class="painel-titulo"><?php echo e(__('Linhas')); ?></h2>
                <button id="btn-fechar-linhas" class="btn-fechar" aria-label="<?php echo e(__('Fechar painel de linhas')); ?>">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>

            <div id="status-chip" class="painel-status" aria-live="polite">
                <i class="fa-solid fa-bus-simple status-chip__bus" aria-hidden="true"></i>
                <span id="status-veiculos"><?php echo e(__('Carregando...')); ?></span>
                <span id="status-atualizacao"></span>
            </div>

            <div class="painel-atualizacao-progress" aria-hidden="true">
                <span id="painel-linhas-progress-bar" class="painel-atualizacao-progress-bar"></span>
            </div>

            <div class="painel-busca">
                <i class="fa-solid fa-magnifying-glass busca-icone" aria-hidden="true"></i>
                <input type="search" id="linhas-search" class="linhas-search-input"
                    placeholder="<?php echo e(__('Buscar linha...')); ?>" autocomplete="off" aria-label="<?php echo e(__('Buscar linha')); ?>" />
            </div>
            <div class="painel-tabs" role="tablist">
                <button class="tab-btn tab-btn--active" data-tab="todas" id="tab-todas" role="tab"
                    aria-selected="true"><?php echo e(__('Todas')); ?></button>
                <button class="tab-btn" data-tab="favoritas" id="tab-favoritas" role="tab" aria-selected="false">
                    <i class="fa-solid fa-star" aria-hidden="true"></i>
                    <?php echo e(__('Favoritas')); ?>

                </button>
                <button class="tab-btn tab-btn--toggle-all" id="btn-toggle-all"
                    title="<?php echo e(__('Marcar ou desmarcar todas as linhas visíveis')); ?>" aria-label="<?php echo e(__('Marcar todas')); ?>">
                    <i class="fa-solid fa-check-double" aria-hidden="true"></i>
                    <span id="toggle-all-label"><?php echo e(__('Marcar tudo')); ?></span>
                </button>
            </div>
            <div id="linhas-lista" role="tabpanel" aria-labelledby="tab-todas"></div>
        </div>

        
        <div id="backdrop-parada" class="backdrop" role="presentation"></div>

        
        <div id="painel-parada" role="dialog" aria-modal="true" aria-label="<?php echo e(__('Parada')); ?>">
            <div class="painel-handle" aria-hidden="true"></div>

            <div class="painel-header painel-header--parada">
                <h2 id="painel-parada-nome" class="painel-titulo painel-titulo--parada"></h2>
                <button id="btn-fechar-parada" class="btn-fechar" type="button"
                    aria-label="<?php echo e(__('Fechar painel da parada')); ?>" title="<?php echo e(__('Fechar')); ?>">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>

            <div id="painel-parada-meta" class="painel-status painel-status--parada" hidden>
                <i class="fa-solid fa-person-walking status-chip__bus" aria-hidden="true"></i>
                <span id="painel-parada-distancia" class="painel-status-texto"></span>
            </div>

            <div id="painel-parada-linhas" class="painel-parada-linhas-wrap"></div>

            <div class="painel-atualizacao-progress" aria-hidden="true">
                <span id="painel-parada-progress-bar" class="painel-atualizacao-progress-bar"></span>
            </div>

            
            <div id="painel-parada-tab-tempo-real" class="painel-parada-scroll" role="region"
                aria-label="<?php echo e(__('Em tempo real')); ?>">
                <div id="painel-parada-chegadas" class="painel-parada-chegadas" role="list"
                    aria-live="polite"></div>
            </div>
        </div>

        
        <div id="backdrop-info" class="backdrop" role="presentation"></div>

        
        <div id="modal-info" role="dialog" aria-modal="true" aria-label="<?php echo e(__('Informações')); ?>">
            <div class="painel-handle" aria-hidden="true"></div>
            <div class="painel-header">
                <h2 class="painel-titulo"><?php echo e(__('Informações')); ?></h2>
                <button id="btn-fechar-info" class="btn-fechar" aria-label="<?php echo e(__('Fechar informações')); ?>">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>
            <div class="info-links">
                <a href="https://portal.angra.rj.gov.br/sdc-trans-horarios-onibus.asp?IndexSigla=SSP&vNomeLink=Hor%E1rios%20dos%20Itiner%E1rios%20do%20Munic%EDpio"
                    target="_blank" rel="noopener noreferrer" class="info-link">
                    <div class="info-link-icone"><i class="fa-solid fa-clock" aria-hidden="true"></i></div>
                    <div class="info-link-texto">
                        <strong><?php echo e(__('Horários')); ?></strong>
                        <span><?php echo e(__('Itinerários do Município')); ?></span>
                    </div>
                    <i class="fa-solid fa-chevron-right info-link-seta" aria-hidden="true"></i>
                </a>
                <a href="https://portal.angra.rj.gov.br/noticia.asp?vid_noticia=63626&IndexSigla=imp" target="_blank"
                    rel="noopener noreferrer" class="info-link">
                    <div class="info-link-icone"><i class="fa-solid fa-arrows-turn-to-dots" aria-hidden="true"></i></div>
                    <div class="info-link-texto">
                        <strong><?php echo e(__('Integrações')); ?></strong>
                        <span><?php echo e(__('Pontos de integração entre linhas')); ?></span>
                    </div>
                    <i class="fa-solid fa-chevron-right info-link-seta" aria-hidden="true"></i>
                </a>
                <a href="https://angra.rj.gov.br/passageirocidadao" target="_blank" rel="noopener noreferrer"
                    class="info-link">
                    <div class="info-link-icone"><i class="fa-solid fa-id-card" aria-hidden="true"></i></div>
                    <div class="info-link-texto">
                        <strong><?php echo e(__('Passageiro Cidadão')); ?></strong>
                        <span><?php echo e(__('Cartão para passageiros')); ?></span>
                    </div>
                    <i class="fa-solid fa-chevron-right info-link-seta" aria-hidden="true"></i>
                </a>
                <a href="https://portal.angra.rj.gov.br/sdc-trans-faq.asp?IndexSigla=SSP&vNomeLink=Tire%20suas%20d%FAvidas"
                    target="_blank" rel="noopener noreferrer" class="info-link">
                    <div class="info-link-icone"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></div>
                    <div class="info-link-texto">
                        <strong><?php echo e(__('Dúvidas')); ?></strong>
                        <span><?php echo e(__('Perguntas frequentes')); ?></span>
                    </div>
                    <i class="fa-solid fa-chevron-right info-link-seta" aria-hidden="true"></i>
                </a>
            </div>
        </div>

    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.js"
        integrity="sha512-dXgoFR02YHJ9Fa29P3D/1umNaZ0EXS2N0w29Lm3b/1BK8UDLMdLWDFwuujIyJJdU27/PLuk3dmS1V9NO8ABX1A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.3/leaflet-maplibre-gl.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script>

    <script>
        window.MOBIANGRA = {
            liveDataUrl: <?php echo json_encode(route('mobiangra.live_data'), 15, 512) ?>,
            shapesUrl: <?php echo json_encode(route('mobiangra.shapes'), 15, 512) ?>,
            stopsUrl: <?php echo json_encode(route('mobiangra.stops'), 15, 512) ?>,
            tripsUrl: <?php echo json_encode(route('mobiangra.trips'), 15, 512) ?>,
            departuresUrl: <?php echo json_encode(route('mobiangra.mapa_departures'), 15, 512) ?>,
            stopLinesUrl: <?php echo json_encode(route('mobiangra.mapa_stop_lines'), 15, 512) ?>,
            stopEtaUrl: <?php echo json_encode(route('mobiangra.stop_eta', ['stop_id' => '__STOP_ID__']), 512) ?>,
            stopScheduledUrl: <?php echo json_encode(route('mobiangra.stop_scheduled', ['stop_id' => '__STOP_ID__']), 512) ?>,
            horariosUrl: <?php echo json_encode(route('mobiangra.horarios', ['linha' => '__LINHA__']), 512) ?>,
            showScheduled: false,
            nearbyStopsUrl: <?php echo json_encode(route('mobiangra.nearby_stops'), 15, 512) ?>,
            routeNames: <?php echo json_encode($routeNames, 15, 512) ?>,
            lineColors: <?php echo json_encode($lineColors, 15, 512) ?>,
            vehicleColors: <?php echo json_encode($vehicleColors, 15, 512) ?>,
            microVehicles: <?php echo json_encode($microVehicles, 15, 512) ?>,
            defaults: <?php echo json_encode($mapDefaults, 15, 512) ?>,
            eta: <?php echo json_encode($etaConfig, 15, 512) ?>,
            departures: <?php echo json_encode($departures, 15, 512) ?>,
            stopLines: {},
            stopIconUrl: <?php echo json_encode(asset('mobiangra-assets/images/busstop.svg'), 15, 512) ?>,
            refreshInterval: <?php echo e($fetchInterval * 1000); ?>,
            i18n: {
                linha: <?php echo json_encode(__('Linha'), 15, 512) ?>,
                sentido: <?php echo json_encode(__('Sentido'), 15, 512) ?>,
                velocidade: <?php echo json_encode(__('Velocidade'), 15, 512) ?>,
                veiculo: <?php echo json_encode(__('Veículo'), 15, 512) ?>,
                localizar: <?php echo json_encode(__('Minha localização'), 15, 512) ?>,
                localizacaoNegada: <?php echo json_encode(__('Permissão de localização negada. Ative o acesso à localização para este site nas configurações do Safari.'), 15, 512) ?>,
                localizacaoIndisponivel: <?php echo json_encode(__('Não foi possível obter sua localização. Verifique o GPS e tente novamente.'), 15, 512) ?>,
                ocultarTodas: <?php echo json_encode(__('Ocultar todas'), 15, 512) ?>,
                exibirTodas: <?php echo json_encode(__('Exibir todas'), 15, 512) ?>,
                buscarLinha: <?php echo json_encode(__('Buscar linha'), 15, 512) ?>,
                ida: <?php echo json_encode(__('Ida'), 15, 512) ?>,
                volta: <?php echo json_encode(__('Volta'), 15, 512) ?>,
                veiculosAtivos: <?php echo json_encode(__('veículos ativos'), 15, 512) ?>,
                atualizado: <?php echo json_encode(__('Atualizado'), 15, 512) ?>,
                semDados: <?php echo json_encode(__('Sem dados de veículos'), 15, 512) ?>,
                carregando: <?php echo json_encode(__('Carregando...'), 15, 512) ?>,
                kmh: 'km/h',
                semFavoritas: <?php echo json_encode(__('Nenhuma linha favorita ainda. Toque na ⭐ para favoritar.'), 15, 512) ?>,
                semResultados: <?php echo json_encode(__('Nenhuma linha encontrada.'), 15, 512) ?>,
                favoritar: <?php echo json_encode(__('Favoritar linha'), 15, 512) ?>,
                removerFavorito: <?php echo json_encode(__('Remover dos favoritos'), 15, 512) ?>,
                marcarTudo: <?php echo json_encode(__('Marcar tudo'), 15, 512) ?>,
                desmarcarTudo: <?php echo json_encode(__('Desmarcar tudo'), 15, 512) ?>,
                ir: <?php echo json_encode(__('Ir'), 15, 512) ?>,
                irLinha: <?php echo json_encode(__('Ir para linha no mapa'), 15, 512) ?>,
                parada: <?php echo json_encode(__('Parada'), 15, 512) ?>,
                linhas: <?php echo json_encode(__('Linhas'), 15, 512) ?>,
                previsaoChegada: <?php echo json_encode(__('Previsão de chegada'), 15, 512) ?>,
                chegandoAgora: <?php echo json_encode(__('Chegando'), 15, 512) ?>,
                min: <?php echo json_encode(__('min'), 15, 512) ?>,
                semPrevisao: <?php echo json_encode(__('Sem previsão em tempo real'), 15, 512) ?>,
                calculandoEta: <?php echo json_encode(__('Calculando previsão...'), 15, 512) ?>,
                maisLinhas: <?php echo json_encode(__('outras linhas'), 15, 512) ?>,
                verTodasLinhas: <?php echo json_encode(__('Ver todas as :total linhas'), 15, 512) ?>,
                verMenosLinhas: <?php echo json_encode(__('Ver menos'), 15, 512) ?>,
                paradaMaisProxima: <?php echo json_encode(__('Parada mais próxima'), 15, 512) ?>,
                paradaSelecionada: <?php echo json_encode(__('Parada selecionada'), 15, 512) ?>,
                paradasProximas: <?php echo json_encode(__('Paradas próximas'), 15, 512) ?>,
                proximaParada: <?php echo json_encode(__('Próxima parada'), 15, 512) ?>,
                localizando: <?php echo json_encode(__('Localizando...'), 15, 512) ?>,
                ativeLocalizacao: <?php echo json_encode(__('Ative sua localização para ver a parada mais próxima e os horários em tempo real.'), 15, 512) ?>,
                usarLocalizacao: <?php echo json_encode(__('Usar minha localização'), 15, 512) ?>,
                nenhumaParadaProxima: <?php echo json_encode(__('Nenhuma parada encontrada perto de você.'), 15, 512) ?>,
                erroCarregarParadas: <?php echo json_encode(__('Não foi possível carregar as paradas próximas.'), 15, 512) ?>,
                aPe: <?php echo json_encode(__('a pé'), 15, 512) ?>,
                previsaoTempoReal: <?php echo json_encode(__('Previsão em tempo real'), 15, 512) ?>,
                fecharParada: <?php echo json_encode(__('Fechar painel da parada'), 15, 512) ?>,
                tabTempoReal: <?php echo json_encode(__('Em tempo real'), 15, 512) ?>,
                tabProgramadas: <?php echo json_encode(__('Programadas'), 15, 512) ?>,
                semProgramadas: <?php echo json_encode(__('Nenhuma chegada programada para hoje.'), 15, 512) ?>,
                carregandoProgramadas: <?php echo json_encode(__('Carregando horários...'), 15, 512) ?>,
                chegadasProgramadas: <?php echo json_encode(__('Chegadas programadas'), 15, 512) ?>,
                verHorarios: <?php echo json_encode(__('Ver horários'), 15, 512) ?>,
                verHorariosLinha: <?php echo json_encode(__('Ver horários da linha :linha'), 15, 512) ?>,
            },
        };
    </script>
    <script src="<?php echo e(asset('mobiangra-assets/js/mobiangra_busca_linhas.js')); ?>?v=<?php echo e(@filemtime(public_path('mobiangra-assets/js/mobiangra_busca_linhas.js')) ?: time()); ?>"></script>
    <script src="<?php echo e(asset('mobiangra-assets/js/mapa.js')); ?>?v=<?php echo e(@filemtime(public_path('mobiangra-assets/js/mapa.js')) ?: time()); ?>"></script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.landing_pages.mobiangra.theme', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/portal/resources/views/mobiangra/mapa.blade.php ENDPATH**/ ?>