@extends('layouts.app')

@section('title', 'Encontre as melhores transportadoras de ' . ($especial ?? 'Carga Especial') . ' em ' . ($nomeEstadoEncontrado ?? 'Estado'))

@section('meta')
<meta name="description" content="Escolha entre as melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeEstadoEncontrado ?? 'Estado' }} 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 {{ $nomeEstadoEncontrado ?? 'Estado' }}" />
<meta property="og:url" content="{{ request()->url() }}" />
<meta property="og:description" content="Escolha entre as melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeEstadoEncontrado ?? 'Estado' }} 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 {{ $nomeEstadoEncontrado ?? 'Estado' }}",
  "description": "Lista de melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeEstadoEncontrado ?? 'Estado' }}",
  "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">Transportadoras para frete de {{ $especial ?? 'Carga Especial' }} de {{ $nomeEstadoEncontrado ?? 'Estado' }}</h6>
      <h1 class="fs36 fs24m fwb black">Cote com as 10 melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeEstadoEncontrado ?? 'Estado' }}</h1>
    </div>
  </div>
</div>

<div class='container mb30 mt20'>
  <div class='row'>
    <div class='col-lg-12'>
      <div class='coluna gap10'>
        <h6 class='w100' style='line-height: 25px;'>
          Se você está procurando as melhores transportadoras de {{ $especial ?? 'Carga Especial' }} em {{ $nomeEstadoEncontrado ?? 'Estado' }}, podemos te ajudar a encontrar a empresa perfeita para o seu negócio.
        </h6>
        <h6 class='w100' style='line-height: 25px;'>
          Para solicitar uma cotação de frete é só selecionar uma das transportadoras abaixo e clicar no botão de solicitar cotação. Após isso, basta preencher o formulário e aguardar a proposta de frete da transportadora selecionada por Email ou WhatsApp.
        </h6>
      </div>
    </div>
  </div>
</div>

<div class='container'>
  <div class='w100 coluna' style='justify-content: flex-end'>
    <div class='btn-cotar 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 class='w100'>
      <label class='mt20 mb10'>Selecione uma cidade</label>
      <select id="select_cidade" class='w100 rota-sel black fw500 fs16 br7 cpt'>
        <option value="" disabled selected>Selecione uma cidade</option>
        @foreach($cidades ?? [] as $cidade)
          <option value="{{ $cidade['link'] }}">{{ $cidade['nome'] }}</option>
        @endforeach
      </select>
    </div>
  </div>
</div>

<div class='container mt30 mb50'>
  <div class='w100'>
    <div id="todas_transportadoras">
      @php
        $borda = 0;
      @endphp
      @foreach($transportadoras ?? [] as $dadosTransportadora)
        @php
          $classe_borda = '';
          if($borda === 0){
            $classe_borda = 'brd-azul b-blue';
            $borda = 1;
          }
        @endphp
        @include('partials.cards-transportadoras2', ['dados_transportadora' => $dadosTransportadora, 'classe_borda' => $classe_borda])
      @endforeach
    </div>
    <div id="result" class='row'>
    </div>
  </div>
</div>

<div class='container df-ac-jc mb30'>
  <div class='btn-cotar bg-blue h50 w100 df-ac-jc'>
    <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 defer src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script defer src="{{ asset('assets/js/custom.min.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    function initInlineScript() {
      if (typeof jQuery === 'undefined') {
        setTimeout(initInlineScript, 50);
        return;
      }
      const $ = jQuery;
      $(document).ready(function () {
        $("#select_cidade").change(function (e) {
          e.preventDefault();
          var selectedValue = $(this).val();
          if (selectedValue !== "") {
            location.assign("/melhores-transportadoras-da-cidade/{{ $nomeEspecialLink ?? '' }}/{{ $nomeEstadoUrl ?? '' }}/" + selectedValue);
          } else {
            alert("Por favor, selecione uma cidade.");
          }
        });
      });
    }
    initInlineScript();
  });
</script>
@endpush