@php
$esconderHeader = true;
@endphp

@extends('layouts.app')

@section('title', 'Cadastre-se como Transportadora')
@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')

@section('meta')
    @php
        $ogDescription = "Crie sua conta de transportadora para acessar nosso sistema de cotações e gerenciar suas rotas.";
    @endphp
    <meta name="description" content="{{ $ogDescription }}">
    <meta name="robots" content="index, follow">
    <meta name="author" content="CoteFrete">
    <link rel="canonical" href="https://cotefrete.com.br/cadastro-transportadora">
    @include('partials.meta-social', [
        'ogType' => 'website',
        'ogTitle' => 'Cadastre-se como Transportadora - CoteFrete',
        'ogDescription' => $ogDescription,
        'ogUrl' => 'https://cotefrete.com.br/cadastro-transportadora'
    ])
@endsection

@push('styles')
    <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="/assets/css/dacruz/login-transportadora.css" rel="stylesheet">
    <link href="/assets/css/cadastro-transportadora.css" rel="stylesheet">
@endpush

@section('content')
    <main class="container-fluid">
        <div class="row no-gutters">
            <section class="col-md-6 login-background d-md-flex align-items-center justify-content-center">
                <div style="max-width: 100%;">
                    <img src="{{ asset('assets/img/1824456.jpg') }}" alt="Transportadora realizando entrega de carga - Cadastro de parceiros CoteFrete" style="width: 100%; height: auto;">
                </div>
            </section>
            <section class="col-md-6 d-flex align-items-center justify-content-center min-vh-100 flex-column">
                <form id="form_cadastrar" method="post" action="{{ route('cadastro.transportadora.store') }}" class="login-form w100" style="max-width: 500px;">
                    @csrf

                    <img src="{{ asset('assets/img/logo-CF.png') }}" alt="Logomarca da CoteFrete" class="mb-4 d-block mx-auto" style="max-width: 200px; height: auto;">
                    <h1 class="title text-left">Faça seu cadastro</h1>
                    <p class="sub-title text-left">Preencha os campos abaixo.</p>

                    <div class="form-group">
                        <label for="nome_responsavel" style="color: black; font-weight: 500;">Nome Completo</label>
                        <input type="text" class="form-control" id="nome_responsavel" name="nome_responsavel" placeholder="Digite seu nome completo" value="{{ old('nome_responsavel') }}" maxlength="50" required>
                    </div>

                    <div class="form-group">
                        <label for="razao_social" style="color: black; font-weight: 500;">Razão Social</label>
                        <input type="text" class="form-control" id="razao_social" name="razao_social" placeholder="Digite a razão social" value="{{ old('razao_social') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="cnpj" style="color: black; font-weight: 500;">CNPJ</label>
                        <input type="text" class="form-control" id="cnpj" name="cnpj" placeholder="99.999.999/0001-99" value="{{ old('cnpj') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="email" style="color: black; font-weight: 500;">Email</label>
                        <div class="input-container w100m">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Digite seu email" value="{{ old('email') }}" required>
                            <button type="button" class="clear-btn">×</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="whatsapp" style="color: black; font-weight: 500;">WhatsApp</label>
                        <div class="input-container w100m">
                            <input type="tel" class="form-control" id="whatsapp" name="whatsapp" placeholder="(99) 99999-9999" value="{{ old('whatsapp') }}" required>
                            <button type="button" class="clear-btn">×</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="senha" style="color: black; font-weight: 500;">Senha</label>
                        <div class="input-container w100m">
                            <input type="password" class="form-control" id="senha" name="senha" placeholder="Crie uma senha" required>
                            <button type="button" class="clear-btn">×</button>
                        </div>
                    </div>

                    {{-- Validação visual da senha --}}
                    <div class="form-group senha_nova" style="padding-left: 0px; margin-top: 15px; text-align: unset;">
                        <small class="form-text text-muted">
                            <strong>Sua senha deve ter:</strong>
                        </small>
                        <div class="d-flex flex-column mt-2" style="flex-direction: column;">
                            <div class="text-danger d-flex align-items-center mb-2" id="caracteres">
                                <i class="fas fa-times-circle mr-1"></i> Pelo menos 8 caracteres
                            </div>
                            <div class="text-danger d-flex align-items-center mb-2" id="maiuscula">
                                <i class="fas fa-times-circle mr-1"></i> 1 ou mais letras maiúsculas
                            </div>
                            <div class="text-danger d-flex align-items-center mb-2" id="minuscula">
                                <i class="fas fa-times-circle mr-1"></i> 1 ou mais letras minúsculas
                            </div>
                            <div class="text-danger d-flex align-items-center mb-2" id="special">
                                <i class="fas fa-times-circle mr-1"></i> 1 ou mais caracteres especiais
                            </div>
                            <div class="text-danger d-flex align-items-center mb-2" id="numero">
                                <i class="fas fa-times-circle mr-1"></i> 1 ou mais números
                            </div>
                        </div>
                    </div>

                    {{-- _confirmation executa o metodo de verificacao de senhas default do laravel --}}
                    <div class="form-group">
                        <label for="senha_confirmation" style="color: black; font-weight: 500;">Confirmar Senha</label>
                        <div class="input-container w100m">
                            <input type="password" class="form-control" id="senha_confirmation" name="senha_confirmation" placeholder="Repita a senha" required>
                            <button type="button" class="clear-btn">×</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="codigo_indicacao_input" style="color: black; font-weight: 500;">
                            Código de Indicação (Opcional)
                            <i class="fas fa-info-circle ml-1" data-toggle="tooltip" title="Se você foi indicado por outra transportadora, insira o código aqui para ganhar 20% de desconto!"></i>
                        </label>
                        <div class="d-flex gap-2" style="gap: 8px;">
                            <input type="text" class="form-control" id="codigo_indicacao_input" name="codigo_indicacao" placeholder="Digite o código de indicação" value="{{ $codigo ?? old('codigo_indicacao') }}" maxlength="12" style="flex: 1;">
                            <button type="button" class="btn btn-sm btn-primary" id="verificar_codigo" style="white-space: nowrap;">
                                <i class="fas fa-check"></i> Verificar
                            </button>
                        </div>
                        <small id="codigo_feedback" class="form-text" style="display: none;"></small>
                    </div>

                    <div class="form-group" style="text-align: unset;">
                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input lgpd-required" id="termos" name="termos" required>
                            <label class="form-check-label" for="termos">
                                Concordo com os <a href="{{ route('termos.uso') }}" target="_blank" rel="noopener">Termos de Uso</a> *
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input lgpd-required" id="politica" name="politica" required>
                            <label class="form-check-label" for="politica">
                                Concordo com a <a href="{{ route('politica.privacidade') }}" target="_blank" rel="noopener">Política de Privacidade</a> *
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input lgpd-required" id="cookies" name="cookies" required>
                            <label class="form-check-label" for="cookies">
                                Aceito o uso de cookies para melhorar minha experiência *
                            </label>
                        </div>

                        <small class="text-muted">* Campos obrigatórios</small>
                    </div>

                    <div class="text-left">
                        <button type="submit" class="btn-submit mb-3" id="btn-cadastrar" disabled>
                            Cadastrar
                        </button>
                    </div>

                    <div class="text-left" style="text-align: center;">
                        <a href="{{ route('dacruz.login') }}">Já tenho conta</a>
                    </div>

                    {{-- Flash Messages --}}
                    @if (session('error'))
                        <div class="alert alert-danger mt-3" role="alert">
                            <strong>Erro:</strong> {{ session('error') }}
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success mt-3" role="alert">
                            <strong>Sucesso:</strong> {{ session('success') }}
                        </div>
                    @endif

                    @if (session('cadastro-realizado'))
                        <div class="alert alert-success mt-3" role="alert">
                            <strong>Sucesso:</strong> {{ session('cadastro-realizado') }}
                        </div>
                    @endif

                    {{-- Validation Errors --}}
                    @if ($errors->any())
                        <div class="alert alert-danger mt-3" role="alert">
                            <ul class="mb-0 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </form>
            </section>
        </div>
    </main>

    <!-- Modal de Verificação de Código -->
    <div class="modal fade" id="modalCodigoVerificacao" tabindex="-1" role="dialog" aria-labelledby="modalCodigoLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
                <div class="modal-header" style="border-bottom: none; padding: 30px 30px 20px; justify-content: center;">
                    <div class="text-center">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-envelope" style="color: white; font-size: 28px;"></i>
                        </div>
                    </div>
                </div>
                <div class="modal-body text-center" style="padding: 20px 40px 30px;">
                    <p style="color: #4a5568; font-size: 15px; margin-bottom: 8px; text-align: center;">
                        Enviamos um código de verificação para
                    </p>
                    <p style="margin-bottom: 25px; text-align: center;">
                        <strong id="email-enviado" style="color: #667eea; font-size: 16px;"></strong>
                    </p>

                    <div class="form-group mb-4">
                        <label for="codigo_verificacao" style="display: block; color: #4a5568; font-size: 14px; margin-bottom: 15px; font-weight: 500;">Digite o código recebido:</label>
                        <input type="text" class="form-control text-center" id="codigo_verificacao" maxlength="6" placeholder="000000" style="font-size: 32px; letter-spacing: 12px; height: 70px; border: 2px solid #e2e8f0; border-radius: 12px; font-weight: 600; color: #2d3748;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                        <small class="form-text text-danger text-center d-block mt-2" id="erro-codigo" style="display: none; font-size: 13px; text-align: center;"></small>
                    </div>

                    <div style="background: #f7fafc; border-radius: 10px; padding: 15px; margin-bottom: 20px; border-left: 4px solid #667eea; display: inline-block; text-align: left;">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock" style="color: #667eea; font-size: 18px; margin-right: 10px;"></i>
                            <span style="color: #4a5568; font-size: 14px;">O código expira em <strong>5 minutos</strong></span>
                        </div>
                    </div>

                    <div style="text-align: center;">
                        <p style="color: #718096; font-size: 14px; margin-bottom: 8px; text-align: center;">Não recebeu o código?</p>
                        <button type="button" class="btn btn-link" id="reenviar-codigo" disabled style="width: 165px; color: #667eea; font-weight: 500; text-decoration: none; font-size: 14px;padding: 8px 16px;border-radius: 8px;transition: all 0.3s ease; text-align: center;">
                            <i class="fas fa-redo-alt mr-1"></i> Reenviar código <span id="contador-reenvio"></span>
                        </button>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid #e2e8f0; padding: 20px 30px; justify-content: center; gap: 15px;">
                    <button type="button" class="btn btn-secondary" id="cancelar-verificacao" style="border: 2px solid #e2e8f0; background: white; color: #4a5568; padding: 10px 24px; border-radius: 10px; font-weight: 500; transition: all 0.3s ease;">
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" id="verificar_codigo_cadastro" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 10px 32px; border-radius: 10px; font-weight: 500; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); transition: all 0.3s ease;">
                        <i class="fas fa-check mr-2"></i>Verificar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Cadastro Concluído -->
    <div class="modal fade" id="modalCadastroSucesso" tabindex="-1" role="dialog" aria-labelledby="modalSucessoLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
                <div class="modal-header" style="border-bottom: none; padding: 40px 30px 20px; justify-content: center;">
                    <div class="text-center">
                        <div class="checkmark-animation" style="width: 80px; height: 80px; background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; animation: scaleIn 0.5s ease-out;">
                            <i class="fas fa-check" style="color: white; font-size: 40px; animation: checkmark 0.8s ease-out 0.3s both;"></i>
                        </div>
                    </div>
                </div>
                <div class="modal-body text-center" style="padding: 20px 40px 40px;">
                    <h3 style="color: #2d3748; font-size: 24px; font-weight: 600; margin-bottom: 15px;">
                        Cadastro Realizado com Sucesso!
                    </h3>
                    <p style="color: #4a5568; font-size: 16px; line-height: 1.6; margin-bottom: 25px;">
                        Sua conta foi criada com sucesso. <br>
                        Em breve você será redirecionado para fazer login.
                    </p>

                    <div style="background: #f0fff4; border-radius: 12px; padding: 20px; margin-bottom: 25px; border: 2px solid #9ae6b4;">
                        <div class="d-flex align-items-start" style="gap: 15px;">
                            <i class="fas fa-info-circle" style="color: #38a169; font-size: 22px; margin-top: 2px;"></i>
                            <div style="text-align: left;">
                                <p style="color: #2f855a; font-size: 14px; margin-bottom: 8px; font-weight: 600;">Próximos Passos:</p>
                                <ul style="color: #276749; font-size: 14px; margin: 0; padding-left: 20px; line-height: 1.8;">
                                    <li>Faça login com seu e-mail e senha</li>
                                    <li>Complete as informações da sua transportadora</li>
                                    <li>Aguarde a aprovação do cadastro</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="progress" style="height: 6px; border-radius: 10px; background-color: #e2e8f0; overflow: hidden;">
                        <div id="progress-redirect" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width 0.1s linear;"></div>
                    </div>
                    <p style="color: #718096; font-size: 13px; margin-top: 10px;">
                        Redirecionando em <strong id="contador-redirect">5</strong> segundos...
                    </p>
                </div>
                <div class="modal-footer" style="border-top: 1px solid #e2e8f0; padding: 20px 30px; justify-content: center;">
                    <button type="button" class="btn btn-primary" id="ir-para-login" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 12px 40px; border-radius: 10px; font-weight: 500; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; font-size: 16px;">
                        <i class="fas fa-arrow-right mr-2"></i>Ir para Login Agora
                    </button>
                </div>
            </div>
        </div>
    </div>
@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="/assets/js/cadastro-transportadora.js"></script>
@endpush