@extends('layouts.app')

@section('title', 'Landing Page')

@section('meta')
<meta name="robots" content="index, follow">
<meta name="author" content="CoteFrete">
<meta name="description" content="Cotação enviada com sucesso para as transportadoras da CoteFrete" />
<link rel="shortcut icon" href="{{ asset('assets/img/fav.ico') }}">
@endsection

@push('styles')
<link href="{{ asset('administrativo/assets/vendors/select2/select2.min.css') }}" rel="stylesheet">
@endsection

@section('content')
<style>
  .subtitulo-lp{
    text-align: justify;
    font-size: 17px;
    font-weight: 500;
    color: #333;
  }
  .titulo-lp{
    font-size: 24px;
    font-weight: bold;
    color: #000e2d;
  }
  .card-form{
    background-color: #f26e35;
    border-radius: 10px;
    padding: 30px;
    opacity: 0.9;
  }
  .input-lp{
    border: none;
    border-radius: 5px;
    padding-left: 10px;
  }

  .btn-lp{
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    background-color: #324673;
    border: 1px solid #324673;
  }

  .btn-lp:hover{
    background-color: transparent;
    border: 1px solid #324673;
    color: #324673;
  }

  .bg-caminhao {
    background-image: url('{{ asset("assets/img/lp-img.webp") }}');
    background-size: cover;
    background-position-y: center;
    background-position-x: right;
  }

  @media (max-width: 600px) {
    .bg-caminhao {
      background-image: url('{{ asset("assets/img/fundo-mo.webp") }}') !important;
    }
  }

  .p50{
    padding: 50px;
  }

  .w32{
    width: 32%;
  }

  .w48{
    width: 48%;
  }
</style>

<!-- Schema.org markup para Landing Page -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Landing Page - CoteFrete",
  "description": "Cotação enviada com sucesso para as transportadoras da CoteFrete",
  "url": "https://cotefrete.com.br/landing-page",
  "mainEntity": {
    "@type": "Service",
    "name": "Serviço de Cotação de Frete",
    "description": "Plataforma que conecta você às melhores transportadoras do Brasil para cotações de frete rápidas e eficientes",
    "provider": {
      "@type": "Organization",
      "name": "CoteFrete",
      "url": "https://cotefrete.com.br",
      "logo": "https://cotefrete.com.br/assets/img/logo-CF.png"
    },
    "serviceType": "Cotação de Frete Online",
    "areaServed": {
      "@type": "Country",
      "name": "Brasil"
    }
  }
}
</script>

@include('botao-whatsapp')

<div class='w100 df-ac-jc h50' style='z-index: 10000; background-color: #000e2d; position: fixed; top: 0'>
  <img loading="lazy" src="{{ asset('assets/img/logo-CF.webp') }}" class='h40' style='width: auto' alt="CoteFrete - Plataforma de cotação de frete online">
</div>
<div class='bg-caminhao p50 p20m w100' id='top' style='margin-top: 50px;'>
  <div class='w100'>
    <div class='linha w100' style='align-items: flex-start'>
      <div class='w50 w100m df-ac-jc'>
        <form id="form_orcamento" action="javascript:void(0)" class='w100 card-form p20m'>
          <div class='w100 coluna'>
            <span class='w100 txt-center fwb white' style='text-transform: uppercase; line-height: 1; font-size: 22px;'>
              RECEBA COTAÇÕES DE FRETE AGORA
            </span>
          </div>
          <div class='w100' style='border: 1px dashed #fff; margin: 15px 0'></div>
          <div class='w100 coluna gap10'>
            <div class='w100 coluna-m linha' style='justify-content: space-between'>
              <div class='coluna w48 w100m'>
                <label class='w100 fw600 white' style='line-height: 1'>Selecione o tipo de cotação:</label>
                <select id="tipo_cotacao" class='w100 input-lp h40'>
                  <option value="" disabled selected>Selecione</option>
                  @if(isset($servicos) && count($servicos) > 0)
                    @foreach($servicos as $servico)
                      <option value='{{ $servico->nome }}'>{{ $servico->nome }}</option>
                    @endforeach
                  @endif
                </select>
              </div>
              <div class='linha w48 w100m' style='justify-content: space-between;'>
                <div class='coluna w100'>
                  <label class='w100 fw600 white' style='line-height: 1'>Nome ou Empresa</label>
                  <input id="nome_completo" class='w100 input-lp h40' type="text" Placeholder='Ex: José Silva' required>
                </div>
              </div>
            </div>
            <div class='w100 coluna-m linha' style='justify-content: space-between'>
              <div class='coluna w48 w100m'>
                <label class='w100 fw600 white' style='line-height: 1'>Município de Coleta</label>
                <input type="hidden" id="cidade_origem" class="select2 searchText br7 fwb" autocomplete="off" tabindex="-1" title="">
              </div>
              <div class='coluna w48 w100m mt10m'>
                <label class='w100 fw600 white' style='line-height: 1'>Município de Entrega</label>
                <input type="hidden" id="cidade_destino" class="select2 searchText br7fwb" autocomplete="off" tabindex="-1" title="">
              </div>
            </div>

            <style>
              .searchText {
                background-color: #fcfcfc;
                border: 2px solid #324673 !important;
                padding: 3px 0;
              }
            </style>
            <div class='w100 coluna-m linha' style='justify-content: space-between'>
              <div class='coluna variaveis tipo_carga veiculos w32 w100m'>
                <label class='w100 fw600 white' style='line-height: 1'>Valor de Nota</label>
                <input inputmode="numeric" id="valor_nota" class='w100 input-lp h40 money_mask' type="tel" Placeholder='R$ 1000,00' required>
              </div>
              <div class='coluna variaveis tipo_carga veiculos w32 w100m mt10m'>
                <label class='w100 fw600 white' style='line-height: 1'>Quantidade</label>
                <input inputmode="numeric" id="qtde" class='w100 input-lp h40' type="number" Placeholder='10' required>
              </div>
              <div class='coluna variaveis veiculos w32 w100m mt10m' style='display: none;'>
                <label class='w100 fw600 white' style='line-height: 1'>Modelo</label>
                <input id="modelo" class='w100 input-lp h40' type="text" Placeholder=''>
              </div>
              <div class='coluna variaveis armazenamento w32 w100m mt10m' style='display: none;'>
                <label class='w100 fw600 white' style='line-height: 1'>Volume (m³)</label>
                <input inputmode="numeric" id="volume" class='w100 input-lp h40' type="tel" Placeholder=''>
              </div>
              <div class='coluna variaveis tipo_carga armazenamento w32 w100m mt10m'>
                <label class='w100 fw600 white' style='line-height: 1'>Peso total (kg)</label>
                <input inputmode="numeric" id="peso" class='w100 input-lp h40' type="tel" Placeholder='1000kg' required>
              </div>
              <div class='coluna variaveis armazenamento w32 w100m mt10m' style='display: none;'>
                <label class='w100 fw600 white' style='line-height: 1'>Período (dias)</label>
                <input id="periodo" inputmode="numeric" class='w100 input-lp h40' type="tel" Placeholder='Ex: 30'>
              </div>
            </div>
            <div class='w100 coluna-m linha' style='justify-content: space-between'>
              <div class='coluna w48 w100m'>
                <label class='w100 fw600 white' style='line-height: 1'>E-mail</label>
                <input id="email" class='w100 input-lp h40' type="mail" Placeholder='Ex: email@email.com' required>
              </div>
              <div class='coluna w48 w100m mt10m'>
                <label class='w100 fw600 white' style='line-height: 1'>WhatsApp</label>
                <input inputmode="numeric" id="tel" class='w100 input-lp h40' type="tel" Placeholder='(XX) XXXXX-XXXX' required>
              </div>
            </div>
            <div class='w100 coluna'>
              <label class='w100 fw600 white' style='line-height: 1'>Descrição</label>
              <textarea id="desc" cols="30" rows="10" class='w100 input-lp h40' style='min-height: 100px' type="text" placeholder='Informações de medidas, data do carregamento, responsável pela carga e descarga, etc.' required></textarea>
            </div>
            <div class='w100 coluna mt10'>
              <div class='linha' style='align-items: flex-start; gap: 10px;'>
                <input type='checkbox' id='consentimento_lgpd' name='consentimento_lgpd' required style='margin-top: 5px;'>
                <label for='consentimento_lgpd' class='white fs14' style='line-height: 1.5;'>
                  Concordo com o tratamento dos meus dados pessoais conforme a <a href='{{ url("/politicas-de-privacidade") }}' target='_blank' class='white' style='text-decoration: underline;' rel='noopener noreferrer'>Lei Geral de Proteção de Dados (LGPD)</a>. <span style='color: #ffcccc;'>*</span>
                </label>
              </div>
            </div>
            <div class='w100 df-ac-jc mt10'>
              <button type="submit" id="btn_cotacao" class='btn-lp'>
                Enviar
              </button>
            </div>
          </div>
        </form>
      </div>
      <div class='desk w50'></div>
    </div>
  </div>
</div>

<div class='w100 p50 p20m'>
  <div class='df-ac-jc w100' style='padding: 20px 0'>
    <span class='txt-center black fwb' style='font-size: 40px;'>Nossas Especialidades</span>
  </div>
  <div class='linha coluna-m w100'>
    <div class='col-md-4'>
      <div class='w100 coluna'>
        <div class='w100'>
                          <img loading="lazy" class='w100' src="{{ asset('assets/img/box.webp') }}" style='height: auto' alt="Transportadoras de mudanças residenciais e comerciais">
        </div>
        <div class='w80 w100m coluna'>
          <span class='titulo-lp'>Mudanças em geral</span>
          <span class='subtitulo-lp mt10'>Nossas principais modalidades são mudanças residenciais, industriais e comerciais.</span>
        </div>
      </div>
    </div>
    <div class='col-md-4'>
      <div class='w100 coluna'>
        <div class='w100'>
                          <img loading="lazy" class='w100' src="{{ asset('assets/img/servico-lp.webp') }}" style='height: auto' alt="Transportadoras especializadas em cargas especiais">
        </div>
        <div class='w80 w100m coluna'>
          <span class='titulo-lp'>Cargas Especiais</span>
          <span class='subtitulo-lp mt10'>Encontre uma transportadora especializada independente da sua necessidade de fretamento.</span>
        </div>
      </div>
    </div>
    <div class='col-md-4'>
      <div class='w100 coluna'>
        <div class='w100'>
                          <img loading="lazy" class='w100' src="{{ asset('assets/img/fast.webp') }}" style='height: auto' alt="Transportadoras para entregas urgentes de frete">
        </div>
        <div class='w80 w100m coluna'>
          <span class='titulo-lp'>Entregas Urgentes</span>
          <span class='subtitulo-lp mt10'>Nossas empresas parceiras são habilitadas em serviços urgentes, sem danificar a carga.</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal_confirmacao" tabindex="-1" role="dialog" aria-labelledby="modal_confirmacaoTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="form_confirmacao" action="javascript:void(0)" class="modal-content" method="POST">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_confirmacaoTitle">Confirme seu Email</h5>
        <button id='fechar_codigo' type="button" class="close" data-dismiss="modal" aria-label="Close" style='background: transparent; border: none'>
          <span aria-hidden="true" style='font-size: 30px'>&times;</span>
        </button>
      </div>
      <div class="modal-body row">
        <div class="col-lg-12">
          <label class='fw600' id="txt-confirmacao" style='font-size: 17px; color: #000'></label>
          <fieldset class='mt20'>
            <input type="text" class='input-modal w100' id="codigo_confirmacao" placeholder="Código">
          </fieldset>
        </div>
      </div>
      <div class="modal-footer">
        <button id="btn_enviar_confirmacao" type="submit" style='border: none' class="bg-blue btn btn-primary">Enviar</button>
        <button id="btn_fechar_confirmacao" type="button" data-dismiss="modal" style='border: none' class="bg-blue btn btn-primary" hidden>Fechar</button>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script async src="{{ asset('assets/js/custom.min.js') }}"></script>
<script defer src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
<script src="{{ asset('assets/js/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/js/select2/select2_locale_pt-BR.min.js') }}"></script>

<script>
  $(document).ready(function() {

    $('#cidade_origem').select2({
      minimumInputLength: 3,
      query: async function(query) {
        var data = await popularSelect(query.term);
        query.callback(data);
      }
    });

    $('#cidade_destino').select2({
      minimumInputLength: 3,
      query: async function(query) {
        var data = await popularSelect(query.term);
        query.callback(data);
      }
    });

    function popularSelect(cidade_string) {
      cidade_string = cidade_string
        .toUpperCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/'/g, '')
        .replace(/-/g, ' ')
        .replace(/\s+/g, " ")

      const cachedData = sessionStorage.getItem('estadosCidadesData');
      if (cachedData) {
        return new Promise((resolve, reject) => {
          var options = processData(JSON.parse(cachedData), cidade_string);
          resolve(options);
        });
      } else {
        return new Promise((resolve, reject) => {
          $.getJSON("{{ asset('assets/estados-cidades.json') }}", function(data, textStatus, jqXHR) {
            sessionStorage.setItem('estadosCidadesData', JSON.stringify(data));
            var options = processData(data, cidade_string);
            resolve(options);
          });
        });
      }
    }

    function processData(data, cidade_string) {
      var options = {
        results: []
      };

      const estados = data.estados;
      estados.forEach(estado => {
        const sigla = estado.sigla;
        estado.cidades.forEach(cidade => {
          let cidade_padronizada = cidade
          cidade_padronizada += ' ' + sigla;
          cidade_padronizada = cidade_padronizada
            .toUpperCase()
            .normalize("NFD")
            .replace(/[\u0300-\u036f]/g, "")
            .replace(/'/g, '')
            .replace(/-/g, ' ')
            .replace(/\s+/g, " ")

          if (cidade_padronizada.includes(cidade_string)) {
            options.results.push({
              id: `${cidade} - ${sigla}`,
              text: `${cidade} - ${sigla}`
            });
          }
        });
      });

      options.results.sort((a, b) => a.text.localeCompare(b.text));
      options.results = prioritizeMatches(options.results, cidade_string);

      return options;
    }

    function prioritizeMatches(array, searchString) {
      searchString = searchString
        .toUpperCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/'/g, '')
        .replace(/-/g, ' ')
        .replace(/\s+/g, " ")

      const countMatches = (text, search) => {
        let matchCount = 0;
        let searchIndex = 0;

        for (let textIndex = 0; textIndex < text.length; textIndex++) {
          if (searchIndex < search.length && text[textIndex] === search[searchIndex]) {
            matchCount++;
            searchIndex++;
          } else if (searchIndex < search.length) {
            searchIndex = 0;
            if (text[textIndex] === search[searchIndex]) {
              matchCount = 1;
              searchIndex++;
            } else {
              matchCount--;
            }
          }
        }

        return matchCount;
      };

      return array.sort((a, b) => {
        let textA = a.text.toUpperCase()
          .normalize("NFD")
          .replace(/[\u0300-\u036f]/g, "")
          .replace(/'/g, '')
          .replace(/-/g, ' ')
          .replace(/\s+/g, " ")

        let textB = b.text.toUpperCase()
          .normalize("NFD")
          .replace(/[\u0300-\u036f]/g, "")
          .replace(/'/g, '')
          .replace(/-/g, ' ')
          .replace(/\s+/g, " ")

        const matchesA = countMatches(textA, searchString);
        const matchesB = countMatches(textB, searchString);

        if (matchesA > matchesB) return -1;
        if (matchesA < matchesB) return 1;

        return 0;
      });
    }

    $("body").on("change", "#tipo_cotacao", function() {
      var tipo = $(this).val();
      $(".variaveis").hide();
      $(".variaveis input").attr("required", false);
      if (tipo == "Transporte de Carga em Geral" || tipo == "Transporte de Químico Comum" ||  tipo == "Transporte de Químico Classificado" || tipo == "Transporte Aéreo" || tipo == "Transporte de Carga Refrigerada") {
        $(".tipo_carga").show();
        $(".tipo_carga input").attr("required", true);
      } else if (tipo == "Armazenamento de Cargas") {
        $(".armazenamento").show();
        $(".armazenamento input").attr("required", true);
      } else if (tipo == "Transporte de Carro" || tipo == "Transporte de Máquina" || tipo == "Transporte de Moto") {
        $(".veiculos").show();
        $(".veiculos input").attr("required", true);
      } else {
        $(".variaveis").hide();
      }
    });

    $("#fechar_codigo, #btn_fechar_confirmacao").click(function(e) {
      $("#modal_confirmacao").modal("hide");
      $("#btn_enviar_confirmacao, #codigo_confirmacao").show();
      $("#btn_fechar_confirmacao").hide();
      $("#txt-confirmacao").html("Enviamos um código no email que você preencheu acima para certificar da veracidade da cotação.<br>Insira o código recebido abaixo.");
    });

    $("#form_orcamento").submit(function(e) {
      if ($("#desc").val().length < 15) {
        alert("Complemente a sua descrição")
        return false;
      } else if ($("#tel").val().length < 14) {
        alert("Coloque um número de telefone válido")
        return false;
      } else if (!$("#consentimento_lgpd").is(':checked')) {
        alert("É necessário aceitar o consentimento LGPD para continuar.");
        return false;
      } else {
        var email = $("#email").val();
        var atSignIndex = email.indexOf('@');
        var dotIndex = email.lastIndexOf('.');
        if (atSignIndex == -1 || dotIndex == -1 || dotIndex < atSignIndex) {
          alert('Por favor, insira um endereço de e-mail válido.');
        } else {
          $("#txt-confirmacao").html('Confirme o código de 06 dígitos enviado para "' + email + '" e clique em "Confirmar". Verifique a caixa de spam.');
          $("#modal_confirmacao").modal("show");
          var tipo = $("#tipo_cotacao").val();
          var email = $("#email").val();
          var nome_completo = $("#nome_completo").val();
          var cidade_origem = $("#cidade_origem").val();
          var cidade_destino = $("#cidade_destino").val();
          var valor_nota = $("#valor_nota").val().replace(/[._,]/g, '');
          var qtde = $("#qtde").val();
          var peso = $("#peso").val().replace(/[._,]/g, '');
          var modelo = $("#modelo").val();
          var periodo = $("#periodo").val();
          var volume = $("#volume").val().replace(/[._,]/g, '');
          var tel = $("#tel").val();
          if ($("#tipo_carga_especial").length) {
            var carga_especial = $("#tipo_carga_especial").val();
          } else {
            var carga_especial = "";
          }
          var desc = $("#desc").val();
          $.post("{{ url('/proc/confirmar_email') }}", {
              cidade_origem,
              cidade_destino,
              tipo,
              valor_nota,
              qtde,
              peso,
              modelo,
              periodo,
              volume,
              carga_especial,
              nome_completo,
              email,
              tel,
              desc
            },
            function(data) {
              if (data == "proibido") {
                $("#btn_enviar_confirmacao, #codigo_confirmacao").hide();
                $("#btn_fechar_confirmacao").show();
                $("#txt-confirmacao").html("O email " + email + " está na blacklist por ter infringindo as políticas do site. <br><br> Caso deseje que seu email seja removido da Blacklist, favor enviar um email para contato@cotefrete.com.br e justifique o motivo pelo qual você deve retornar a enviar cotações em nosso site.");
              } else if (data == "desativado") {
                $("#modal_confirmacao").modal("hide");
                alert('O serviço de cotações está indisponível no momento! Por favor, tente novamente mais tarde.');
              } else if (data.split('-')[0] == "enviado") {
                last_id = data.split('-')[1];
                $.post("{{ url('/proc/orcamento') }}", {
                    last_id
                  },
                  function(data) {}
                );
                window.location.href = "{{ url('/agradecimento-cotacao') }}";
              } else if (data.split('-')[0] == "cookie") {
                $("#txt-confirmacao").html("Um código já foi enviado para seu email na última hora.<br>Insira o código deste email abaixo.");
                last_id = data.split('-')[1];
                codigo = data.split('-')[2];
              } else {
                last_id = data.split('-')[0];
                codigo = data.split('-')[1];
              }
            }
          );
        }
      }
    });

    $("#form_confirmacao").submit(function(e) {
      var codigo_confirmacao = $("#codigo_confirmacao").val();
      if (codigo_confirmacao !== codigo) {
        alert("O código inserido não é o mesmo que foi enviado por email. Confira e tente novamente!");
      } else {
        $.post("{{ url('/proc/check_status') }}", {},
          function(data) {
            if (data == "desativado") {
              alert('O serviço de cotações está indisponível no momento! Por favor, tente novamente mais tarde.');
            } else {
              $("#btn_cotacao").attr("disabled", true);
              $("#btn_cotacao").css("background-color", "gray");
              $.post("{{ url('/proc/orcamento') }}", {
                  last_id
                },
                function(data) {}
              );
              window.location.href = "{{ url('/agradecimento-cotacao') }}";
            }
          }
        );
      }
    });

    $('.money_mask, #volume, #peso').mask("#.##0,00", {
      reverse: true
    });

    $("#tel").keyup(function() {
      var tamanho = $(this).val().length;
      if (tamanho <= 14) {
        x = $(this).val().replace(/\D/g, "").replace(/(\d{0})(\d)/, "$1($2").replace(/(\d{2})(\d)/, "$1) $2").replace(/(\d{4})(\d)/, "$1-$2").substring(0, 14)
        $(this).val(x)
        return x
      } else {
        x = $(this).val().replace(/\D/g, "").replace(/(\d{0})(\d)/, "$1($2").replace(/(\d{2})(\d)/, "$1) $2").replace(/(\d{5})(\d)/, "$1-$2").substring(0, 15)
        $(this).val(x)
        return x
      }
    });

  });
</script>
@endpush