@extends('layouts.mobiangra.theme')

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

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

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

                <div class="p-4 mobiangra-subpage-body">
                    @if ($linhas->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="fa-solid fa-clock fa-3x mb-3 d-block text-primary" aria-hidden="true"></i>
                            <p>{{ __('A grade de horários ainda não foi publicada. Volte em breve.') }}</p>
                        </div>
                    @else
                        <x-mobiangra.horarios-linha-combobox
                            :linhas="$linhas"
                            :linha-ativa-idx="$linhaAtivaIdx" />

                        <div id="horarios-linhas-content">
                            @foreach ($linhas as $idx => $linha)
                                <div id="linha-{{ $linha->id }}"
                                     class="horarios-linha-panel {{ $linhaAtivaIdx !== null && $idx === $linhaAtivaIdx ? '' : 'd-none' }}"
                                     role="region"
                                     aria-label="{{ $linha->nome_completo }}">
                                    <x-mobiangra.horarios-linha :linha="$linha" />
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('mobiangra-assets/js/mobiangra_busca_linhas.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('mobiangra-assets/js/horarios.js') }}?v={{ time() }}"></script>
@endpush