@extends('layouts.app')

@section('title', 'As melhores transportadoras de ' . ($especial ?? 'Carga Especial') . ' em ' . ($nomeCidadeEncontrada ?? 'Cidade') . ' - ' . ($siglaSolta ?? 'UF'))

@section('meta')
<meta name="description" content="Escolha entre as melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }} - {{ $siglaSolta ?? 'UF' }} para realizar seu transporte" />
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="CoteFrete - Transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }}" />
<meta property="og:url" content="{{ request()->url() }}" />
<meta property="og:description" content="Escolha entre as melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }} - {{ $siglaSolta ?? 'UF' }} para realizar seu transporte" />
<meta property="og:image" itemprop="image" content="{{ asset('assets/img/img-comp.webp') }}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<link rel="canonical" href="{{ request()->url() }}">
@include('partials.include-sitemap')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }} - {{ $siglaSolta ?? 'UF' }}",
  "description": "Lista de melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }} - {{ $siglaSolta ?? 'UF' }}",
  "url": "{{ request()->url() }}",
  "numberOfItems": "{{ isset($transportadoras) ? count($transportadoras) : 0 }}",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@type": "Organization",
        "name": "Transportadoras CoteFrete"
      }
    }
  ]
}
</script>
@endsection

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

<div class="container mt120">
  <div class="row">
    <div class="col-lg-12">
      <h6 class="black fs20">Frete de {{ $especial ?? 'Carga Especial' }} de {{ $nomeCidadeEncontrada ?? 'Cidade' }}</h6>
      <h1 class="fs36 fs24m fwb black">As 10 melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeCidadeEncontrada ?? 'Cidade' }} - {{ $siglaSolta ?? 'UF' }}</h1>
    </div>
    <div class='col-lg-12 mt20 mb30'>
      <div class='coluna gap10'>
        <h6 class="w100" style='line-height: 25px'>
          Solicite sua cotação de frete! Clique no botão abaixo, preencha o formulário e receba o orçamento por e-mail ou WhatsApp.
        </h6>
      </div>
    </div>
  </div>
  <div class='w100 linha' style='justify-content: flex-end'>
    <div class='btn-cotar bg-blue bg-blue h50 df-ac-jc w100'>
      <a class='df-ac-jc w100 h50' href="/cotacao">
        <span class='lh20 fwb white fs18 txt-center'>Faça uma cotação agora</span>
      </a>
    </div>
  </div>
  <div class='w100 mt30 mb30'>
    <div id="todas_transportadoras">
      @foreach($transportadoras ?? [] as $dadosTransportadora)
        @include('partials.cards-transportadoras2', ['dados_transportadora' => $dadosTransportadora])
      @endforeach
    </div>
    <div id="result" class='row'>
    </div>
  </div>
  <div class='btn-cotar bg-blue bg-blue h50 w100 df-ac-jc mb30'>
    <a class='df-ac-jc w100 h50' href="/transportadoras/pagina-1">
      <span class='lh20 fwb white fs18 txt-center'>Ver as transportadoras na CoteFrete</span>
    </a>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
  $(document).ready(function () {
    $("#buscar").on("keyup", function(event) {
      var search = $(this).val();
      if (search.length > 2) {
        $.post("{{ route('get.transportadoras') }}", {
            search: search,
            _token: '{{ csrf_token() }}'
          },
          function(data) {
            $("#todas_transportadoras").hide();
            $("#result").html(data);
            $("#result").show();
          }
        );
      } else {
        $("#todas_transportadoras").show();
        $("#result").empty();
        $("#result").hide();
      }
    });
  });
</script>
@endpush