@props([
    'linha',
    'itinerario',
    'corLinha' => '#21409a',
])

@php
    $sentidos = $itinerario['sentidos'] ?? [];
    $routeId = $itinerario['route_id'] ?? null;
@endphp

<article class="ma-itinerario mt-4" id="ma-itinerario-detalhe"
    data-linha-codigo="{{ $linha->codigo }}"
    data-route-id="{{ $routeId }}">

    <header class="ma-itinerario__header">
        <div class="ma-itinerario__line-badge" style="background-color: {{ $corLinha }}">
            {{ $linha->codigo }}
        </div>
        <div>
            <h2 class="ma-itinerario__line-title">{{ $linha->nome_completo ?? $linha->nome }}</h2>
            <p class="ma-itinerario__line-subtitle mb-0">{{ __('Informações e trajeto da linha') }}</p>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm ma-itinerario__fav-btn ms-auto"
            id="ma-itinerario-favoritar"
            title="{{ __('Adicionar aos favoritos') }}"
            aria-label="{{ __('Adicionar aos favoritos') }}">
            <i class="fa-regular fa-star" aria-hidden="true"></i>
        </button>
    </header>

    <div class="ma-itinerario__body">
        <section class="ma-itinerario__section" aria-labelledby="ma-sobre-title">
            <h3 id="ma-sobre-title" class="ma-itinerario__section-title">
                <i class="fa-solid fa-circle-info me-1" aria-hidden="true"></i>
                {{ __('Sobre a linha') }}
            </h3>
            <dl class="row ma-itinerario__meta mb-0">
                <dt class="col-sm-4">{{ __('Tipo de linha') }}</dt>
                <dd class="col-sm-8">{{ __('Convencional') }}</dd>

                <dt class="col-sm-4">{{ __('Dias de operação') }}</dt>
                <dd class="col-sm-8">{{ __('Todos os dias') }}</dd>

                @if ($linha->tarifa)
                    <dt class="col-sm-4">{{ __('Tarifa') }}</dt>
                    <dd class="col-sm-8">R$ {{ number_format((float) $linha->tarifa, 2, ',', '.') }}</dd>
                @endif

                @if ($linha->tarifa_cidadao)
                    <dt class="col-sm-4">{{ __('Tarifa Passageiro Cidadão') }}</dt>
                    <dd class="col-sm-8">R$ {{ number_format((float) $linha->tarifa_cidadao, 2, ',', '.') }}</dd>
                @endif
            </dl>
        </section>

        <section class="ma-itinerario__section" aria-labelledby="ma-itinerario-title">
            <h3 id="ma-itinerario-title" class="ma-itinerario__section-title">
                <i class="fa-solid fa-route me-1" aria-hidden="true"></i>
                {{ __('Itinerário') }}
            </h3>

            @if (empty($sentidos))
                <p class="text-muted mb-0">{{ __('Itinerário indisponível para esta linha no momento.') }}</p>
            @else
                @foreach ($sentidos as $sentido)
                    <div class="ma-itinerario__sentido-block">
                        @if (count($sentidos) > 1)
                            <h4 class="ma-itinerario__sentido-label">{{ $sentido['label'] }}</h4>
                        @endif
                        <ol class="ma-itinerario__stops-list">
                            @foreach ($sentido['paradas'] as $paradaIdx => $parada)
                                <li @class([
                                    'ma-itinerario__stop',
                                    'ma-itinerario__stop--first' => $paradaIdx === 0,
                                    'ma-itinerario__stop--last' => $paradaIdx === count($sentido['paradas']) - 1,
                                ])>
                                    <span class="ma-itinerario__stop-marker" aria-hidden="true"></span>
                                    <span class="ma-itinerario__stop-name">{{ $parada['nome'] }}</span>
                                </li>
                            @endforeach
                        </ol>
                    </div>
                @endforeach
            @endif
        </section>

        <div class="d-flex flex-wrap gap-2 ma-itinerario__actions">
            <a href="{{ route('mobiangra.horarios', ['linha' => $linha->codigo]) }}" class="btn btn-outline-primary btn-sm">
                <i class="fa-solid fa-clock me-1" aria-hidden="true"></i>{{ __('Ver horários') }}
            </a>
            <a href="{{ route('mobiangra.mapa') }}" class="btn btn-primary btn-sm">
                <i class="fa-solid fa-map-location-dot me-1" aria-hidden="true"></i>{{ __('Ver trajeto completo no mapa') }}
            </a>
        </div>
    </div>

    <div class="ma-itinerario__save-card mt-4">
        <div>
            <strong>{{ __('Salve esta linha') }}</strong>
            <p class="mb-0 small text-muted">{{ __('Adicione aos favoritos para acessar rapidamente no mapa.') }}</p>
        </div>
        <button type="button" class="btn btn-primary btn-sm" id="ma-itinerario-favoritar-card">
            <i class="fa-regular fa-star me-1" aria-hidden="true"></i>{{ __('Adicionar aos favoritos') }}
        </button>
    </div>
</article>