@push('metas')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#324673">
@endpush

@php
  $esconderHeader = true;
@endphp

@extends('layouts.app')

@section('title', 'Cadastre-se como Transportadora')

@section('meta')
<meta property="og:type" content="website">
<meta property="og:title" content="Cadastre-se como Transportadora - CoteFrete">
<meta property="og:url" content="https://cotefrete.com.br/cadastro-transportadora2">
<meta property="og:description" content="Crie sua conta de transportadora para acessar nosso sistema de cotações e gerenciar suas cotações.">
@endsection
@section('description', 'Crie sua conta de transportadora para acessar nosso sistema de cotações e gerenciar suas rotas.')
@section('canonical', 'https://cotefrete.com.br/cadastro-transportadora')

@push('styles')
  <link rel="stylesheet" href="/assets/css/dacruz/app.min.css">
  <link href="/assets/css/cadastro-transportadora2.css" rel="stylesheet">
@endpush

@section('content')

  <main class="cadastro-container" role="main" aria-label="Formulário de cadastro de transportadora">
    <div class="row no-gutters min-vh-100">
      <!-- Seção da imagem -->
      <section class="col-lg-7 d-flex align-items-center justify-content-center position-relative" aria-label="Apresentação dos benefícios">
        <div class="background-overlay" aria-hidden="true"></div>
        <div class="background-content">
          <!-- Imagem do monitor com formulário -->
          <div class="monitor-container" role="img" aria-label="Demonstração visual do processo de cadastro">
            <div class="monitor-screen">
              <div class="screen-header">
                <div class="window-controls" aria-hidden="true">
                  <div class="control-btn close" aria-label="Botão fechar"></div>
                  <div class="control-btn minimize" aria-label="Botão minimizar"></div>
                  <div class="control-btn maximize" aria-label="Botão maximizar"></div>
                </div>
                <div class="registration-banner" aria-hidden="true">REGISTRATION</div>
              </div>
              <div class="screen-content">
                <div class="form-fields" aria-hidden="true">
                  <div class="field">NAME</div>
                  <div class="field">E-MAIL</div>
                  <div class="field">PASSWORD</div>
                </div>
                <div class="user-avatar" aria-hidden="true">
                  <div class="avatar-circle">
                    <i class="fas fa-user" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="monitor-stand" aria-hidden="true"></div>
          </div>

          <h2 class="background-title">Conecte-se ao futuro do transporte</h2>
          <p class="background-subtitle">Junte-se a milhares de transportadoras que já confiam na CoteFrete</p>
          <div class="features-list" role="list" aria-label="Benefícios da plataforma">
            <div class="feature-item" role="listitem">
              <i class="fas fa-check-circle" aria-hidden="true"></i>
              <span>Cotações em tempo real</span>
            </div>
            <div class="feature-item" role="listitem">
              <i class="fas fa-check-circle" aria-hidden="true"></i>
              <span>Gestão completa de rotas</span>
            </div>
            <div class="feature-item" role="listitem">
              <i class="fas fa-check-circle" aria-hidden="true"></i>
              <span>Suporte especializado</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Seção do formulário -->
      <section class="col-lg-5 d-flex align-items-center justify-content-center min-vh-100" style="background: #ffffff;" aria-label="Formulário de cadastro">
        <div class="form-wrapper">
          <form id="form_cadastrar" method="post" action="{{ route('cadastro.transportadora.store') }}" class="cadastro-form" novalidate role="form" aria-label="Formulário de cadastro de transportadora">
            @csrf

            <!-- Header do formulário -->
            <div class="form-header">
              <img src="{{ asset('assets/img/logo-CF.png') }}" alt="Logomarca da CoteFrete" class="logo">
              <h1 class="form-title">Crie sua conta</h1>
              <p class="form-subtitle">Preencha os dados abaixo para começar</p>
            </div>

            <!-- Progress indicator -->
            <nav class="progress-indicator" role="navigation" aria-label="Progresso do cadastro">
              <div class="progress-step active" data-step="1" role="tab" aria-selected="true" aria-label="Passo 1: Dados básicos" tabindex="0">
                <div class="step-number" aria-hidden="true">1</div>
                <div class="step-label">Dados básicos</div>
              </div>
              <div class="progress-step" data-step="2" role="tab" aria-selected="false" aria-label="Passo 2: Contato" tabindex="-1">
                <div class="step-number" aria-hidden="true">2</div>
                <div class="step-label">Contato</div>
              </div>
              <div class="progress-step" data-step="3" role="tab" aria-selected="false" aria-label="Passo 3: Segurança" tabindex="-1">
                <div class="step-number" aria-hidden="true">3</div>
                <div class="step-label">Segurança</div>
              </div>
            </nav>

            <!-- Step 1: Dados básicos -->
            <div class="form-step active" data-step="1" role="tabpanel" aria-labelledby="step-1" aria-hidden="false">
              <div class="form-group">
                <label class="form-label" for="razao_social">Razão Social</label>
                <div class="input-wrapper">
                  <input type="text" class="form-control" id="razao_social" name="razao_social" placeholder="Digite a razão social da empresa" required aria-describedby="razao_social_feedback" aria-invalid="false" autocomplete="organization">
                  <div class="input-icon" aria-hidden="true"></div>
                  <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de razão social">
                    <i class="fas fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="field-feedback" id="razao_social_feedback" role="alert" aria-live="polite"></div>
              </div>

              <div class="form-group">
                <label class="form-label" for="cnpj">CNPJ</label>
                <div class="input-wrapper">
                  <input type="text" class="form-control" id="cnpj" name="cnpj" placeholder="99.999.999/0001-99" required style="background: #f9fafb !important; background-color: #f9fafb !important;" aria-describedby="cnpj_feedback" aria-invalid="false" autocomplete="off">
                  <div class="input-icon" aria-hidden="true"></div>
                  <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de CNPJ">
                    <i class="fas fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="field-feedback" id="cnpj_feedback" role="alert" aria-live="polite"></div>
              </div>
            </div>

            <!-- Step 2: Contato -->
            <div class="form-step" data-step="2" role="tabpanel" aria-labelledby="step-2" aria-hidden="true">
              <div class="form-group">
                <label class="form-label" for="email">
                  <i class="fas fa-envelope" aria-hidden="true"></i> Email
                </label>
                <div class="input-wrapper">
                  <input type="email" class="form-control" id="email" name="email" placeholder="digite seu e-mail" required aria-describedby="email_feedback" aria-invalid="false" autocomplete="email">
                  <div class="input-icon" aria-hidden="true"></div>
                  <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de email">
                    <i class="fas fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="field-feedback" id="email_feedback" role="alert" aria-live="polite"></div>
              </div>

              <div class="form-group">
                <label class="form-label" for="whatsapp">
                  <i class="fab fa-whatsapp" aria-hidden="true"></i> WhatsApp
                </label>
                <div class="input-wrapper">
                  <input type="tel" class="form-control" id="whatsapp" name="whatsapp" placeholder="(00) 00000-0000" required aria-describedby="whatsapp_feedback" aria-invalid="false" autocomplete="tel">
                  <div class="input-icon" aria-hidden="true"></div>
                  <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de WhatsApp">
                    <i class="fas fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="field-feedback" id="whatsapp_feedback" role="alert" aria-live="polite"></div>
              </div>
            </div>

            <!-- Step 3: Segurança -->
            <div class="form-step" data-step="3" role="tabpanel" aria-labelledby="step-3" aria-hidden="true">
              <!-- Container para campos de senha lado a lado -->
              <div class="password-fields-container">
                <div class="form-group password-field">
                  <label class="form-label" for="senha">Crie uma Senha</label>
                  <div class="input-wrapper">
                    <input type="password" class="form-control" id="senha" name="senha" placeholder="Digite sua senha" required aria-describedby="senha_feedback senha_criteria" aria-invalid="false" autocomplete="new-password">
                    <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de senha">
                      <i class="fas fa-times" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="toggle-password" title="Mostrar/ocultar senha" aria-label="Mostrar senha" aria-pressed="false">
                      <i class="fas fa-eye" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="field-feedback" id="senha_feedback" role="alert" aria-live="polite"></div>
                </div>

                <div class="form-group password-field">
                  <label class="form-label" for="senha_confirmation">Confirmar Senha</label>
                  <div class="input-wrapper">
                    <input type="password" class="form-control" id="senha_confirmation" name="senha_confirmation" placeholder="Repita a senha" required aria-describedby="senha_confirmation_feedback" aria-invalid="false" autocomplete="new-password">
                    <button type="button" class="clear-btn" title="Limpar campo" aria-label="Limpar campo de confirmação de senha">
                      <i class="fas fa-times" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="toggle-password" title="Mostrar/ocultar senha" aria-label="Mostrar confirmação de senha" aria-pressed="false">
                      <i class="fas fa-eye" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="field-feedback" id="senha_confirmation_feedback" role="alert" aria-live="polite"></div>
                </div>
              </div>

              <!-- Critérios de senha -->
              <div class="form col-md-12 senha_nova" style="padding-left: 0px" id="senha_criteria" role="region" aria-label="Critérios de senha">
                <small class="form-text text-muted">
                  <strong>Sua senha deve ter:</strong>
                </small>
                <div class="password-criteria-grid mt-2" role="list" aria-label="Lista de critérios de senha">
                  <div class="text-danger d-flex align-items-center mb-2 criterion" id="caracteres" role="listitem" data-criterion="length">
                    <i class="fas fa-times-circle mr-1" aria-hidden="true"></i> Pelo menos 8 caracteres
                  </div>
                  <div class="text-danger d-flex align-items-center mb-2 criterion" id="numero" role="listitem" data-criterion="number">
                    <i class="fas fa-times-circle mr-1" aria-hidden="true"></i> 1 ou mais números
                  </div>
                  <div class="text-danger d-flex align-items-center mb-2 criterion" id="maiuscula" role="listitem" data-criterion="uppercase">
                    <i class="fas fa-times-circle mr-1" aria-hidden="true"></i> 1 ou mais letras maiúsculas
                  </div>
                  <div class="text-danger d-flex align-items-center mb-2 criterion" id="minuscula" role="listitem" data-criterion="lowercase">
                    <i class="fas fa-times-circle mr-1" aria-hidden="true"></i> 1 ou mais letras minúsculas
                  </div>
                  <div class="text-danger d-flex align-items-center mb-2 criterion" id="special" role="listitem" data-criterion="special">
                    <i class="fas fa-times-circle mr-1" aria-hidden="true"></i> 1 ou mais caracteres especiais
                  </div>
                </div>
              </div>

              <!-- Termos e condições -->
              <div class="form-group terms-group">
                <div class="custom-checkbox">
                  <input type="checkbox" id="politica" name="politica" required aria-describedby="politica_feedback" aria-invalid="false">
                  <label for="politica">
                    <span class="checkmark" aria-hidden="true"></span>
                    <span class="label-text">
                      Concordo com a
                      <a href="{{ route('politica.privacidade') }}" target="_blank" class="terms-link" aria-label="Abrir Política de Privacidade em nova aba">Política de Privacidade</a>
                      e
                      <a href="http://127.0.0.1:8000/termos-de-uso" target="_blank" class="terms-link" aria-label="Abrir Termos de Uso em nova aba">Termos de Uso</a>
                    </span>
                  </label>
                </div>
                <div class="field-feedback" id="politica_feedback" role="alert" aria-live="polite"></div>
              </div>
            </div>

            <!-- Navegação do formulário -->
            <div class="form-navigation" role="group" aria-label="Navegação do formulário">
              <button type="button" class="btn btn-secondary btn-prev" id="btnPrev" style="display: none;" aria-label="Voltar para o passo anterior">
                <i class="fas fa-arrow-left" aria-hidden="true"></i>
                Anterior
              </button>
              <button type="button" class="btn btn-primary btn-next" id="btnNext" aria-label="Avançar para o próximo passo">
                Próximo
                <i class="fas fa-arrow-right" aria-hidden="true"></i>
              </button>
              <button type="submit" class="btn btn-success btn-submit" id="btnSubmit" style="display: none;" aria-label="Finalizar cadastro">
                <span class="btn-text">
                  <i class="fas fa-user-plus" aria-hidden="true"></i>
                  Criar Conta
                </span>
                <span class="btn-loading" style="display: none;" aria-hidden="true">
                  <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                  Criando conta...
                </span>
              </button>
            </div>

            <!-- Links do formulário -->
            <div class="footer">
              <p class="login-link">
                Já tem uma conta?
                <a href="{{ route('dacruz.login') }}" class="login-link-text" aria-label="Ir para página de login">
                  <i class="fas fa-sign-in-alt" aria-hidden="true"></i>
                  Faça login aqui
                </a>
              </p>
            </div>
          </form>
        </div>
      </section>
    </div>
  </main>

@endsection

@push('scripts')
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  <script src="/assets/js/cadastro-transportadora2.js"></script>
@endpush