@extends('layouts.app')
@push('styles')
  <link rel="stylesheet" href="{{ asset('assets/css/trabalhe.conosco.css') }}">
@endpush
@section('title', 'Trabalhe Conosco | Oportunidades na CoteFrete')
@section('canonical', 'https://cotefrete.com.br/trabalhe-conosco')

@section('meta')
<meta name="description" content="Junte-se à equipe da CoteFrete e construa uma carreira de sucesso. Confira nossas oportunidades de emprego e faça parte de uma empresa inovadora no setor de transporte e logística. Candidate-se agora!">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Trabalhe Conosco | Oportunidades na CoteFrete" />
<meta property="og:url" content="https://cotefrete.com.br/trabalhe-conosco" />
<meta property="og:description" content="Junte-se à equipe da CoteFrete e construa uma carreira de sucesso. Confira nossas oportunidades de emprego e faça parte de uma empresa inovadora no setor de transporte e logística. Candidate-se agora!" />
<meta property="og:image" itemprop="image" content="{{ asset('assets/img/img-comp.webp') }}">
<link rel="canonical" href="https://cotefrete.com.br/trabalhe-conosco" />
@endsection

@section('content')
    <div class="container" style="max-width: inherit;">
        <div class="row m0-mobile" style="align-items: flex-start; margin-right: 0px;">
            <div class="col-md-6 df-jc desk" style="height: 900px; background-size: cover; background-position: right; background-image: url('{{ asset('assets/img/trabalhe-conosco.webp') }}');"></div>
            <div class="col-md-6 mt120">
                <form id="form_geral" action="javascript:void(0)" method="post" enctype="multipart/form-data" style="text-align:center" class="pj" data-store-url="{{ url('/trabalhe-conosco/store') }}">
                    @csrf
                    <h1 class='blue' style='text-align: left;'>Junte-se à nossa equipe!</h1>
                    <h6 class='mt10 mb10' style='text-align: left;'>Preencha os campos para se candidatar às nossas próximas oportunidades e fazer parte do nosso time.</h6>
                    <div class="row">
                        <div class="col-lg-12">
                            <fieldset class='coluna mt10' style='align-items: flex-start;'>
                                <label for="nome">Nome*</label>
                                <input type="text" style='margin-top: 0' id="nome" name="nome" class="form-input" placeholder="Seu nome" autocomplete="off" required>
                                <small id="error-nome" class="text-danger"></small>
                            </fieldset>
                        </div>
                        <div class="col-lg-12">
                            <fieldset class='coluna mt10' style='align-items: flex-start;'>
                                <label for="email">E-mail*</label>
                                <input type="email" style="margin-top: 0;" id="email" name="email" placeholder="seuemail@dominio.com.br" required>
                                <small id="error-email" class="text-danger"></small>
                            </fieldset>
                        </div>
                        <div class="col-lg-12">
                            <fieldset class='coluna mt10' style='align-items: flex-start;'>
                                <label for="area_interesse">Área de Interesse*</label>
                                <select name="area_interesse" id="area_interesse" class="input" style="padding: 8px; height: 51px;" required>
                                    <option value="" disabled selected>Área de interesse*</option>
                                    <option value="Administrativo" class="option">Administrativo</option>
                                    <option value="Atendimento" class="option">Atendimento</option>
                                    <option value="Financeiro" class="option">Financeiro</option>
                                    <option value="Marketing" class="option">Marketing</option>
                                    <option value="Programação" class="option">Programação</option>
                                    <option value="Recursos Humanos" class="option">Recursos Humanos</option>
                                </select>
                                <small id="error-area_interesse" class="text-danger"></small>
                            </fieldset>
                        </div>
                        <div class="col-lg-12">
                            <fieldset class='coluna mt10' style='align-items: flex-start;'>
                                <label for="mensagem">Mensagem (opcional)</label>
                                <textarea id="mensagem" name="mensagem" style='margin-top: 0' class="form-control" cols="30" rows="5" placeholder="Escreva sua mensagem aqui"></textarea>
                                <small id="error-mensagem" class="text-danger"></small>
                            </fieldset>
                        </div>
                        <div class="col-lg-12">
                            <fieldset class='coluna mt10' style='align-items: flex-start;'>
                                <label for="curriculo">Currículo*</label>
                                <input type="file" id="curriculo" name="curriculo" accept=".pdf,.doc,.docx" required>
                                <small id="error-curriculo" class="text-danger"></small>
                            </fieldset>
                        </div>
                        <div class="col-lg-12 mt10">
                            <fieldset class='coluna' style='align-items: flex-start;'>
                                <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='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>
                            </fieldset>
                        </div>
                        <div class="col-lg-12 mb20 mt10" style='display: flex; justify-content: center;'>
                            <fieldset>
                                <button type="button" id="form-submit" class="main-button df-ac-jc fs15" style='display: flex'>
                                    <div style='width: 30px; height: 30px; border-radius: 15px; margin-right: 8px' class='df-ac-jc bg-white'>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" class="bi bi-send" viewBox="0 0 16 16">
                                            <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>
                                    </div>Enviar
                                </button>
                            </fieldset>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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/vendors.min.js"></script>
    <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/assets/js/trabalhe-conosco.js"></script>
    <script src="/assets/js/custom.min.js"></script>
@endsection