@push('metas')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<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', 'Login Transportadora - Entre na sua conta | CoteFrete')
@section('description', 'Faça login em sua conta para acessar todos os recursos e serviços disponíveis em nosso site. Proteja sua conta com uma senha segura e aproveite todas as vantagens que temos a oferecer.')
@section('canonical', 'https://cotefrete.com.br/login-transportadora')

@section('content')
<link rel="stylesheet" href="/assets/css/dacruz/app.min.css">
<link href="/assets/css/dacruz/login-transportadora.css" rel="stylesheet">

<main class="container-fluid">
  <div class="row no-gutters">
    <!-- Seção de apresentação visual (lado esquerdo) -->
    <section class="col-lg-7 d-flex align-items-center justify-content-center position-relative" style="background: linear-gradient(135deg, #324673 0%, #4a6fa5 100%);" aria-label="Apresentação visual">
      <div class="background-content" style="text-align: center; color: white;">
        <div class="image-container">
          <img src="{{ asset('assets/img/18244566.webp') }}" alt="Imagem de apresentação" style="width: 98%; height: auto; max-width: 100%; object-fit: cover; border-radius: 12px;">
        </div>
        <h2 style="color: white; font-size: 2.2rem; font-weight: 600; margin-bottom: 10px;">Bem-vindo de volta</h2>
        <p style="color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 10px;">Acesse sua conta e continue gerenciando suas cotações</p>
      </div>
    </section>

    <!-- Seção do formulário (lado direito) -->
    <section class="col-lg-5 d-flex align-items-center" style="background: #ffffff;" aria-label="Formulário de login">
      <div class="form-wrapper pt-3" style="max-width: 500px; width: 100%;">
        <form id="form_login" method="post" action="javascript:void(0)" class="cadastro-form" novalidate role="form" aria-label="Formulário de login de transportadora">
          @csrf

          <!-- Seção de verificação de código -->
          <div id="codigo-verif" class="verification-section" style="display: none;">
            <div class="verification-header">
                <h3 class="verification-title">Como deseja receber o código?</h3>
                <p class="verification-subtitle">Escolha o método preferido</p>
            </div>

            <div class="verification-options">
                <div class="verification-option" data-metodo="email">
                    <div class="option-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="option-content">
                        <h4>Código via e-mail</h4>
                        <p>Receba o código no seu e-mail cadastrado</p>
                    </div>
                    <div class="option-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <div class="verification-option" data-metodo="whatsapp">
                    <div class="option-icon">
                        <i class="fab fa-whatsapp"></i>
                    </div>
                    <div class="option-content">
                        <h4>Código via WhatsApp</h4>
                        <p>Receba o código no seu WhatsApp</p>
                    </div>
                    <div class="option-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
          </div>

          <!-- Seção de inserção de código -->
          <div id="proxima-etapa" class="code-section" style="display: none;">
            <div class="code-header">
                <button id="btn-voltar" class="btn-back">
                    <i class="fas fa-arrow-left"></i>
                    Voltar
                </button>
                <h4 class="code-title">Digite o código de verificação</h4>
            </div>

            <div class="code-message" id="mensagem-email" style="display: none;">
              <i class="fas fa-envelope"></i>
              <div class="message-content">
                  <p>Enviamos um código de 6 dígitos para o seu e-mail</p>
                  <span class="email-dinamico"></span>
              </div>
            </div>

            <div class="code-message" id="mensagem-whatsapp" style="display: none;">
              <i class="fab fa-whatsapp"></i>
              <div class="message-content">
                  <p>Enviamos um código de 6 dígitos para o seu WhatsApp</p>
                  <span>319xxxx-xx09</span>
              </div>
            </div>

            <div class="code-input-container" id="codigo-container">
                <input type="text" maxlength="1" class="code-input" />
                <input type="text" maxlength="1" class="code-input" />
                <input type="text" maxlength="1" class="code-input" />
                <input type="text" maxlength="1" class="code-input" />
                <input type="text" maxlength="1" class="code-input" />
                <input type="text" maxlength="1" class="code-input" />
            </div>

            <div class="code-timer" id="cronometro">
                <i class="fas fa-clock"></i>
                <span>Seu código expira em 3:00</span>
            </div>

            <div class="code-error" id="erro-codigo" style="display: none;">
                <i class="fas fa-exclamation-triangle"></i>
                <span></span>
            </div>
          </div>

          <!-- 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">Entre na sua conta</h1>
            <p class="form-subtitle">Preencha seus dados para acessar a plataforma</p>
          </div>

          <!-- Alertas -->
          @if (session('cadastro-realizado'))
              <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <i class="fas fa-check-circle"></i>
                  {{ session('cadastro-realizado')}}
                  <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
          @endif

          @if (session('error'))
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ session('error') }}
                  <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
          @endif

          <!-- Formulário de Login -->
          <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="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 email" 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="senha">
                  <i class="fas fa-lock" aria-hidden="true"></i> 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" aria-invalid="false" autocomplete="current-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>

          <div class="form-actions">
            <button id="btn-submit-login" type="submit" class="btn-submit g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback='onSubmit' data-action='submit'>
              <span class="btn-text">Entrar</span>
              <span class="btn-loading">
                <i class="fas fa-spinner fa-spin"></i>
                Entrando...
              </span>
            </button>
          </div>

          <!-- Links do formulário -->
          <div class="footer" style="margin-top: 25px;">
            <div class="form-links">
              <a href="#" class="forgot-password" id="btn_esqueci" aria-label="Recuperar senha">
                <i class="fas fa-key" aria-hidden="true"></i>
                Esqueceu a senha?
              </a>
              <p class="login-link">
                Não tem uma conta?
                <a href="{{ route('cadastro.transportadora') }}" class="login-link-text" aria-label="Ir para página de cadastro">
                  <i class="fas fa-user-plus" aria-hidden="true"></i>
                  Cadastre-se aqui
                </a>
              </p>
            </div>
          </div>

        </form>
      </div>
    </section>
  </div>
</main>

    <!-- Modal Esqueci minha senha -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        <i class="fas fa-key"></i>
                        Esqueci minha senha
                    </h5>
                    <button id="close_modal1" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="form_senha" method="post">
                        <div class="form-group">
                            <label for="email_usuario">Digite seu e-mail para recuperar sua senha</label>
                            <div class="input-wrapper">
                                <input type="email" class="form-control" id="email_usuario" placeholder="Email" required>
                                <div class="input-focus-border"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane"></i>
                                Recuperar senha
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Email enviado -->
    <div class="modal fade" id="email-enviado" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-body p-4">
                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                    <h5>Email enviado!</h5>
                    <p class="mt-2 text-muted">
                        Sua redefinição de senha expira em <strong>10 minutos</strong>.
                        Verifique seu email para continuar.
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal de confirmação de email -->
    <div class="modal fade" id="confirmMailModal" tabindex="-1" aria-labelledby="confirmMailModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmMailModalLabel">
                        <i class="fas fa-envelope"></i>
                        Confirmar e-mail
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="form_codigo" method="post">
                        <div class="form-group">
                            <label for="codigo_confirmacao">Digite o código enviado para o e-mail informado</label>
                            <div class="input-wrapper">
                                <input inputmode="numeric" type="tel" class="form-control" id="codigo_confirmacao" placeholder="Código" required>
                                <div class="input-focus-border"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="confirma_email" class="btn btn-primary">
                                <i class="fas fa-check"></i>
                                Confirmar e-mail
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <!-- jQuery - garantindo que esteja disponível antes do Bootstrap -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <!-- Popper.js - necessário para alguns componentes do Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Bootstrap JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
        <!-- Script customizado que depende do jQuery e Bootstrap -->
        <script src="/assets/js/dacruz/login-transportadora.js"></script>
    @endpush
@endsection