@extends('layouts.app')

@section('title', 'Buscar Destinos de Transporte - Página ' . ($estaPagina ?? 1))

@section('meta')
    @php
      $ogUrl = route('rotas.pagina', ['pagina' => $estaPagina ?? 1]);
      $ogDescription = "Principais rotas de frete do Brasil - Página " . ($estaPagina ?? 1) . ". Faça cotação de transporte online nas rotas mais buscadas. Compare preços das melhores transportadoras e receba cotações por WhatsApp e Email.";
    @endphp
    <meta name="description" content="{{ $ogDescription }}">
    <meta name="author" content="CoteFrete">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ $ogUrl }}" />
    @include('partials.meta-social', [
      'ogType' => 'website',
      'ogTitle' => 'Principais Rotas de Frete do Brasil - CoteFrete',
      'ogDescription' => 'Faça cotação de transporte online nas rotas mais buscadas do Brasil. Compare preços das melhores transportadoras e receba cotações por WhatsApp e Email.',
      'ogUrl' => $ogUrl
    ])
@endsection

@section('content')
    @include('botao-whatsapp')

    <div class="container mt120">
        <nav aria-label="Breadcrumb" style="font-size: 14px;">
            <ol style="list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
                <li><a href="/" class="black p0" style="text-decoration: none;">CoteFrete</a></li>
                <li style="color: #999;">></li>
                <li aria-current="page" style="color: #666;">Rotas</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-lg-12">
                <h6 class="black fs20">Buscar transportadoras</h6>
                <h1 class="fs36 fs24m fwb black">Faça sua cotação de frete a partir dos municípios</h1>
                <h6 class='w100 mt20' style='line-height: 25px;'>Se você está buscando por uma maneira rápida e descomplicada de obter cotações para fretes e mudanças em diversas rotas pelo Brasil, você está no lugar certo! Aqui, oferecemos uma visão completa de nossas {{ number_format($total ?? 0, 0, ',', '.') }} rotas disponíveis para frete, permitindo que você escolha aquela que melhor atende às suas necessidades.<br><br>
                    Com a nossa plataforma de rotas disponíveis, você pode economizar tempo e dinheiro em suas necessidades de transporte. Ao invés de ter que entrar em contato com cada transportadora individualmente, você pode receber várias cotações em um só lugar e escolher a opção de frete mais vantajosa para você.<br><br>
                </h6>
            </div>
        </div>
    </div>

    <div class="container mb50">
        <div class="row">
            @foreach($resultados ?? [] as $dados)
                <a href='/cotacao/transporte-de-{{ $dados['origem_encoded'] }}-para-{{ $dados['destino_encoded'] }}' class='col-md-2'>
                    <div class='linha retangulo b-blue blue retangulo-full txt-center fw600'>
                        <span class='fs12 fs10m'>Transportadoras de {{ $dados['origem'] }} para {{ $dados['destino'] }}</span>
                    </div>
                </a>
            @endforeach

            <div class="col-xs-12 col-sm-12 col-md-12">
                <ul id="paginacao" class="pagination txt-center">
                    @php
                        $penultima = ($num_paginas ?? 1) - 1;
                        $antipenultima = ($num_paginas ?? 1) - 2;
                        $metade_paginas = ceil(($num_paginas ?? 1) / 2);
                        $tres_ultimos = ($num_paginas ?? 1) - 3;
                        $pagina_anterior = ($estaPagina ?? 1) - 1;
                        $pagina_seguinte = ($estaPagina ?? 1) + 1;
                        $primeiro_dots = ceil(($estaPagina ?? 1) / 2);
                        $segundo_dots = ceil((($num_paginas ?? 1) - ($estaPagina ?? 1)) / 2) + ($estaPagina ?? 1);
                    @endphp

                    @if(($estaPagina ?? 1) >= 4 && ($estaPagina ?? 1) < $antipenultima)
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-1'>1</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $primeiro_dots }}'>...</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $pagina_anterior }}'>{{ $pagina_anterior }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $estaPagina ?? 1 }}'>{{ $estaPagina ?? 1 }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $pagina_seguinte }}'>{{ $pagina_seguinte }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $segundo_dots }}'>...</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $num_paginas ?? 1 }}'>{{ $num_paginas ?? 1 }}</a></li>
                    @elseif(($estaPagina ?? 1) >= $antipenultima)
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-1'>1</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $metade_paginas }}'>...</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $tres_ultimos }}'>{{ $tres_ultimos }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $antipenultima }}'>{{ $antipenultima }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $penultima }}'>{{ $penultima }}</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $num_paginas ?? 1 }}'>{{ $num_paginas ?? 1 }}</a></li>
                    @else
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-1'>1</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-2'>2</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-3'>3</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-4'>4</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $metade_paginas }}'>...</a></li>
                        <li class='paginacao'><a class='cpt p0' href='/rotas/pagina-{{ $num_paginas ?? 1 }}'>{{ $num_paginas ?? 1 }}</a></li>
                    @endif
                </ul>
            </div>
        </div>
    </div>

    <div class='container mb50'>
        <div class='row'>
            <div class='col-lg-12'>
                <div>
                    <h6 class='w100' style='line-height: 25px;'>Nosso processo de cotação é simples e fácil de usar. Basta selecionar a rota desejada e preencher alguns detalhes básicos sobre suas necessidades de transporte. Em pouco tempo, você receberá várias cotações de nossas transportadoras parceiras, permitindo que você escolha a opção de frete mais adequada para suas necessidades e orçamento.<br><br>
                        Não perca mais tempo procurando por transportadoras individuais. Use nossa plataforma de rotas disponíveis e obtenha as melhores cotações para suas necessidades de transporte hoje mesmo!</h6>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Schema.org BreadcrumbList -->
    @include('partials.schema-breadcrumb', [
        'items' => [
            ['name' => 'Home', 'url' => url('/')],
            ['name' => 'Rotas', 'url' => route('rotas.pagina', ['pagina' => $estaPagina ?? 1])]
        ]
    ])
    
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script>
        window.estaPagina = '{{ $estaPagina ?? 1 }}';
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function initRotasScript() {
                if (typeof jQuery === 'undefined') {
                    setTimeout(initRotasScript, 50);
                    return;
                }
                const $ = jQuery;
                $(document).ready(function() {
                    var estaPagina = window.estaPagina || '1';
                    $(".paginacao a").filter(function() {
                        return $(this).text().trim() === estaPagina;
                    }).css("background-color", "#324673").css("color", "white");
                });
            }
            initRotasScript();
        });
    </script>
@endpush