@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 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>

        {{-- 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-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 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')),
            routeNames: @json($routeNames),
            lineColors: @json($lineColors),
            vehicleColors: @json($vehicleColors),
            microVehicles: @json($microVehicles),
            defaults: @json($mapDefaults),
            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')),
            },
        };
    </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