@extends('layouts.app')

@section('title', 'Inscreva-se em nossa lista de e-mails')

@section('meta')
  <meta name="description" content="Adicione seus dados para ser notificado quando publicarmos novos posts">
  <meta name="robots" content="index, follow">
  <meta name="author" content="CoteFrete">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Inscreva-se em nossa Lista de E-mails - CoteFrete">
  <meta property="og:url" content="{{ url('/captura') }}">
  <meta property="og:description" content="Adicione seus dados para ser notificado quando publicarmos novos posts sobre transporte e logística.">
  <link rel="canonical" href="{{ url('/captura') }}">
@endsection

@push('styles')
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="{{ asset('assets/css/captura.css') }}">
@endpush

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

  <div class="container mt40 captura-container" style='padding-top: 25px;'>
    <div class="row">
      <div class="col-lg-12">
        <div class="captura-card">
          <div class="row bg-white">
            <div class="col-lg-2"></div>
            <div class="col-lg-8 align-self-center">
              <div class='txt-center' style="padding: 30px 20px 20px 20px;">
                <h1 class='fwb captura-title'>Cadastre-se agora para receber conteúdos novos e exclusivos gratuitamente por e-mail!</h1>
                <p class="captura-subtitle">Preencha seus dados abaixo e fique por dentro das novidades</p>
              </div>
              <form id="form_geral" action="javascript:void(0)" method="post" novalidate>
                <div class="row">
                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="nome">
                        Nome Completo <span style="color: #dc3545;">*</span>
                      </label>
                      <i class="bi bi-person form-icon"></i>
                      <input type="text" name="name" id="nome" placeholder="Ex: João Silva" autocomplete="name" required aria-required="true" aria-describedby="nome-hint">
                      <span class="validation-message" id="nome-error"></span>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="email">
                        E-mail <span style="color: #dc3545;">*</span>
                      </label>
                      <i class="bi bi-envelope form-icon"></i>
                      <input type="email" name="email" id="email" value="{{ $email }}" placeholder="seu@email.com" required aria-required="true" aria-describedby="email-hint">
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="profissao">
                        Profissão
                      </label>
                      <i class="bi bi-briefcase form-icon"></i>
                      <select name="profissao" id="profissao" aria-describedby="profissao-hint">
                        <option value="" hidden>Selecione...</option>
                        <option value="Conferente">Conferente</option>
                        <option value="Empreendedor">Empreendedor</option>
                        <option value="Estudante">Estudante</option>
                        <option value="Gerente">Gerente</option>
                        <option value="Motorista">Motorista</option>
                        <option value="Operacional">Operacional</option>
                        <option value="Vendedor">Vendedor</option>
                        <option value="Outros">Outros</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="aniversario">
                        Aniversário <span style="color: #dc3545;">*</span>
                      </label>
                      <i class="bi bi-calendar-event form-icon"></i>
                      <input inputmode="numeric" type="tel" id="aniversario" placeholder="DD/MM (ex: 25/12)" autocomplete="bday" required aria-required="true" aria-describedby="aniversario-hint" maxlength="5" pattern="[0-9]{2}/[0-9]{2}">
                      <span class="validation-message" id="aniversario-error"></span>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="tel">Telefone</label>
                      <i class="bi bi-telephone form-icon"></i>
                      <input inputmode="numeric" type="tel" id="tel" placeholder="(XX) XXXXX-XXXX" autocomplete="tel" aria-describedby="tel-hint">
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-field-wrapper has-icon">
                      <label for="site">Website</label>
                      <i class="bi bi-globe form-icon"></i>
                      <input type="url" name="site" id="site" placeholder="https://seusite.com.br" autocomplete="url" aria-describedby="site-hint">
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-field-wrapper">
                      <div class='linha' style='align-items: flex-start; gap: 10px;'>
                        <input type='checkbox' id='consentimento_lgpd' name='consentimento_lgpd' required style='margin-top: 5px; flex-shrink: 0;'>
                        <label for='consentimento_lgpd' class='black fs14' style='line-height: 1.5;'>
                          Concordo com o tratamento dos meus dados pessoais conforme a <a href='{{ route('politica.privacidade') }}' target='_blank' class='blue' rel='noopener noreferrer'>Lei Geral de Proteção de Dados (LGPD)</a>. <span style='color: #dc3545;'>*</span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="privacy-text">
                      <div class="privacy-title">
                        <i class="bi bi-info-circle"></i>
                        <strong>Informações Importantes</strong>
                      </div>
                      Você pode se desinscrever a qualquer momento da nossa lista de e-mail clicando no link no rodapé dos nossos e-mails.
                      Para mais informações sobre nossa política de privacidade, <a href="{{ url('/politicas-de-privacidade') }}" target="_blank" rel="noopener noreferrer">visite nossa página de privacidade</a>.
                    </div>
                  </div>
                  <div class="col-lg-6 submit-button-wrapper">
                    <button type="submit" class="main-button df-ac-jc d-flex fs15" aria-label="Enviar formulário de inscrição">
                      <span class="loading-spinner"></span>
                      <svg xmlns="http://www.w3.org/2000/svg" class="button-icon" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
                      </svg>
                      <span>Enviar Inscrição</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-lg-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@push('scripts')
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
  <script src="{{ asset('assets/js/custom.min.js') }}"></script>
  <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
  <script src="{{ asset('assets/js/captura.js') }}"></script>
@endpush