@extends('layouts.landing_pages.mobiangra.theme')

@section('title', __('MobiAngra') . ' - ' . config('app.name'))

@push('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="{{ asset('mobiangra-assets/css/mapa.css') }}">
@endpush

@section('content')
    <div id="mapa-container">

        {{-- Mapa --}}
        <div id="map"></div>

        {{-- Barra de progresso da atualização do mapa (acima da barra de ações) --}}
        <div class="barra-atualizacao-progress" aria-hidden="true">
            <span id="barra-atualizacao-progress-bar" class="painel-atualizacao-progress-bar"></span>
        </div>

        {{-- Barra de ações inferior --}}
        <nav id="barra-acoes" aria-label="{{ __('Ações do mapa') }}">
            <button class="acao-btn" id="btn-localizar" title="{{ __('Minha localização') }}"
                aria-label="{{ __('Minha localização') }}">
                <i class="fa-solid fa-location-crosshairs" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-zoom-in" title="{{ __('Aproximar') }}" aria-label="{{ __('Aproximar') }}">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>
            </button>

            <button class="acao-btn acao-btn--destaque" id="btn-linhas" title="{{ __('Linhas') }}"
                aria-label="{{ __('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="{{ __('Afastar') }}" aria-label="{{ __('Afastar') }}">
                <i class="fa-solid fa-minus" aria-hidden="true"></i>
            </button>

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

        {{-- Botões flutuantes de filtro rápido --}}
        <div id="fab-filtros">
            <button id="fab-favoritos" class="fab-btn" type="button"
                title="{{ __('Mostrar apenas favoritas') }}"
                aria-label="{{ __('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="{{ __('Mostrar todas as linhas') }}"
                aria-label="{{ __('Mostrar todas as linhas') }}">
                <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
            </button>
        </div>

        {{-- Botão flutuante para reabrir o card de parada próxima (visível quando o card é fechado) --}}
        <button id="fab-parada-proxima" class="fab-btn fab-parada-proxima" type="button"
            title="{{ __('Parada mais próxima') }}"
            aria-label="{{ __('Mostrar parada mais próxima') }}">
            <img src="{{ asset('mobiangra-assets/images/placa-parada.png') }}"
                alt=""
                width="28"
                height="36"
                decoding="async"
                class="fab-parada-proxima-img"
                aria-hidden="true">
        </button>

        {{-- Card "Parada mais próxima": paradas ao redor do cidadão com ETA em tempo real --}}
        <section id="card-parada-proxima" class="card-parada" role="region"
            aria-label="{{ __('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">{{ __('Parada mais próxima') }}</span>
                </div>
                <button id="btn-fechar-card-parada" class="btn-fechar-card" type="button"
                    aria-label="{{ __('Fechar') }}" title="{{ __('Fechar') }}">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>
            <div id="card-parada-corpo" class="card-parada-corpo"></div>
        </section>

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

        {{-- Painel de Linhas (bottom sheet) --}}
        <div id="painel-linhas" role="dialog" aria-modal="true" aria-label="{{ __('Linhas de ônibus') }}">
            <div class="painel-handle" aria-hidden="true"></div>
            <div class="painel-header">
                <h2 class="painel-titulo">{{ __('Linhas') }}</h2>
                <button id="btn-fechar-linhas" class="btn-fechar" aria-label="{{ __('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">{{ __('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="{{ __('Buscar linha...') }}" autocomplete="off" aria-label="{{ __('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">{{ __('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>
                    {{ __('Favoritas') }}
                </button>
                <button class="tab-btn tab-btn--toggle-all" id="btn-toggle-all"
                    title="{{ __('Marcar ou desmarcar todas as linhas visíveis') }}" aria-label="{{ __('Marcar todas') }}">
                    <i class="fa-solid fa-check-double" aria-hidden="true"></i>
                    <span id="toggle-all-label">{{ __('Marcar tudo') }}</span>
                </button>
            </div>
            <div id="linhas-lista" role="tabpanel" aria-labelledby="tab-todas"></div>
        </div>

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

        {{-- Painel de Parada (bottom sheet) --}}
        <div id="painel-parada" role="dialog" aria-modal="true" aria-label="{{ __('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="{{ __('Fechar painel da parada') }}" title="{{ __('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>

            {{-- Previsão em tempo real (aba Programadas oculta temporariamente) --}}
            <div id="painel-parada-tab-tempo-real" class="painel-parada-scroll" role="region"
                aria-label="{{ __('Em tempo real') }}">
                <div id="painel-parada-chegadas" class="painel-parada-chegadas" role="list"
                    aria-live="polite"></div>
            </div>
        </div>

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

        {{-- Modal de Informações (bottom sheet) --}}
        <div id="modal-info" role="dialog" aria-modal="true" aria-label="{{ __('Informações') }}">
            <div class="painel-handle" aria-hidden="true"></div>
            <div class="painel-header">
                <h2 class="painel-titulo">{{ __('Informações') }}</h2>
                <button id="btn-fechar-info" class="btn-fechar" aria-label="{{ __('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>{{ __('Horários') }}</strong>
                        <span>{{ __('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>{{ __('Integrações') }}</strong>
                        <span>{{ __('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>{{ __('Passageiro Cidadão') }}</strong>
                        <span>{{ __('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>{{ __('Dúvidas') }}</strong>
                        <span>{{ __('Perguntas frequentes') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right info-link-seta" aria-hidden="true"></i>
                </a>
            </div>
        </div>

    </div>
@endsection

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