@extends('layouts.mobiangra.theme')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('mobiangra-assets/css/itinerarios.css') }}?v={{ time() }}">
@endpush

@section('content')
    <section class="mobiangra-subpage ma-itinerarios-page">
        <div class="container">
            <x-mobiangra.breadcrumb :items="[
                ['label' => 'MobiAngra', 'url' => route('mobiangra.index')],
                ['label' => __('Itinerários')],
            ]" />

            <div class="mobiangra-subpage-card">
                <x-mobiangra.subpage-header :title="__('Itinerários')" />

                <div class="p-4 mobiangra-subpage-body">
                    @if ($linhas->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="fa-solid fa-route fa-3x mb-3 d-block text-primary" aria-hidden="true"></i>
                            <p>{{ __('Nenhuma linha publicada no momento. Volte em breve.') }}</p>
                        </div>
                    @else
                        <x-mobiangra.horarios-linha-combobox
                            :linhas="$linhas"
                            :linha-ativa-idx="$linhaAtivaIdx"
                            :label="__('Selecione a linha para consultar o itinerário e as informações da rota.')"
                            :placeholder="__('Buscar por nº ou nome da linha...')" />

                        @if ($linhaAtiva && $itinerario)
                            <x-mobiangra.itinerario-linha
                                :linha="$linhaAtiva"
                                :itinerario="$itinerario"
                                :cor-linha="$corLinha" />
                        @else
                            <div class="alert alert-info mb-0 mt-4">
                                <i class="fa-solid fa-circle-info me-1" aria-hidden="true"></i>
                                {{ __('Selecione uma linha acima para ver o itinerário e as informações da rota.') }}
                            </div>
                        @endif
                    @endif

                    <div id="horarios-linhas-content" class="d-none" aria-hidden="true"></div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        window.mobiangraHorariosConfig = {
            navigateUrl: @json(route('mobiangra.itinerarios')),
        };
    </script>
    <script src="{{ asset('mobiangra-assets/js/mobiangra_busca_linhas.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('mobiangra-assets/js/horarios.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('mobiangra-assets/js/itinerarios.js') }}?v={{ time() }}"></script>
@endpush