@extends('theme')
@section("title", env('APP_NAME') . " - Início")
@section('content')

@include('components._header', ["img" => "assets/imgs/banner/piedade.jpg", "title" => __("Fluxo de ônibus")])

<main>

    <div class="container section-content-pages">

        <div class="chrumb-share">

            <div class="breadcrumb">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route("home") }}"><i class="fas fa-home"></i> {{ __("Início") }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"><strong style="font-weight: normal">Fluxo de
                                ônibus</strong></li>
                    </ol>
                </nav>
            </div>

            <div class="share">
                <span>{{ __("Compartilhar:") }} </span> <a data-bs-toggle="modal" data-bs-target="#exampleModal"
                    class="share-link"><img src="{{ asset("assets/imgs/share.png") }}" class="share-icon"></a>
            </div>

        </div>

        <div class="row">

            <div class="clearfix">
                <div class="col-lg-5 mx-4 col-sm-12 col-12 pb-4 float-end" data-aos="fade-up" data-aos-duration="1000"
                    data-aos-offset="0">
                    <img src="assets/imgs/fluxo-onibus.jpg" class="img-fluid" alt="" data-aos="fade-left" data-aos-offset="0"
                        data-aos-duration="1000" data-aos-once="true">
                </div>

                <p data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                    {{ __("O trânsito de veículos de fretamento turístico intermunicipal somente será permitido às empresas ou entidades registradas no Departamento Estadual de Trânsito - DETRAN, na Agência Nacional de Transportes Terrestres - ANTT, nos departamentos estaduais de transportes rodoviários responsáveis e no Ministério do Turismo, observadas as normas que regulam tal tipo de transporte.") }}
                </p>

                <p data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                    {{ __("Há restrição de acesso de ônibus Double-Deck (DD) ou Low Drive (LD) à Estrada do Contorno passando pelo Colégio Naval. Por determinação da Marinha do Brasil, não poderão trafegar pelas vias de acesso à Estrada do Contorno veículos que ultrapassem as seguintes especificações: 13m de comprimento, 3,80m de altura e 7 toneladas de peso/carga e um eixo traseiro.") }}
                </p>

                <p data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                    {{ __("Com a TTS (Taxa de Turismo Sustentável) o processo de envio da autorização continua o mesmo. Porém, agora o operador precisa enviar o voucher da TTS em lote dos seus passageiros.") }}
                </p>

                <p data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                    <strong>Atenção:</strong> Os Operadores de Day Use que direcionarem seus passageiros para receptivo legalizado em Angra dos Reis e para um restaurante regularizado no município, obtém isenção da taxa de transporte e só ficam responsabilizados da TTS de seus passageiros, no valor de 5 UFIR por passageiro.
                </p>
            </div>

            <div class="col-12 text-center" style="margin-bottom: 50px;" data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                <a href="https://vivaangra.com.br/" target="_blank">
                    <img src="assets/imgs/banner-viva-angra-em-lote.png" class="img-fluid mt-5" alt="">
                </a>
            </div>


            <h3 class="text-center" style="margin-top: 80px;" data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                {{ __("Formulário online de solicitação") }}
            </h3>

            <form class="g-3 needs-validation" method="POST" action="{{ route('pages.fluxo-de-onibus.send') }}" novalidate
                data-aos="fade-up" data-aos-duration="1000" data-aos-offset="0">
                @csrf
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-md-3">
                        <label for="txtDataChegada" class="form-label">Data de chegada:</label>
                        <input type="date" class="form-control" id="txtDataChegada" name="txtDataChegada" max="2999-12-31"
                            min="{{ date('Y-m-d') }}" value="{{ old('txtDataChegada', $vdt_chegada ?? '') }}" required>
                        <div class="invalid-feedback">Data inválida</div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-md-3">
                        <label for="txtHorarioChegada" class="form-label">Horário de chegada:</label>
                        <input type="time" class="form-control" id="txtHorarioChegada" name="txtHorarioChegada"
                            value="{{ old('txtHorarioChegada', $vhr_chegada ?? '') }}" required>
                        <div class="invalid-feedback">Horário inválido</div>
                    </div>

                    <div class="col-md-6 col-sm-6 col-md-3">
                        <label for="txtDataRetorno" class="form-label">Data de retorno:</label>
                        <input type="date" class="form-control" id="txtDataRetorno" name="txtDataRetorno" max="2999-12-31"
                            min="{{ date('Y-m-d') }}" value="{{ old('txtDataRetorno', $vdt_retorno ?? '') }}" required>
                        <div class="invalid-feedback">Data inválida</div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-md-3">
                        <label for="txtHorarioRetorno" class="form-label">Horário de retorno:</label>
                        <input type="time" class="form-control" id="txtHorarioRetorno" name="txtHorarioRetorno"
                            value="{{ old('txtHorarioRetorno', $vhr_retorno ?? '') }}" required>
                        <div class="invalid-feedback">Horário inválido</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-9 col-md-9">
                        <label for="txtOrigem" class="form-label">Local de origem do grupo:</label>
                        <input type="text" class="form-control" id="txtOrigem" name="txtOrigem"
                            value="{{ old('txtOrigem', $vds_origem ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <label for="txtNrPassageiros" class="form-label">Nº de passageiros:</label>
                        <input type="number" class="form-control" id="txtNrPassageiros" name="txtNrPassageiros" min="0" max="99"
                            value="{{ old('txtNrPassageiros', $vnr_passageiro ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                </div>

                <h4>Dados da Empresa Transportadora</h4>
                <div class="row">
                    <div class="col-lg-9">
                        <label for="txtEmpresa" class="form-label">Empresa Transportadora:</label>
                        <input type="text" class="form-control" id="txtEmpresa" name="txtEmpresa"
                            value="{{ old('txtEmpresa', $vnm_empresa ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-6">
                        <label class="form-label mb-2">Veículo:</label>
                        @php
                        $veiculo = old('radioVeiculo', $vds_veiculo ?? '');
                        @endphp
                        @foreach(['Van', 'Micro-ônibus', 'Ônibus', 'Double Deck'] as $tipo)
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="radio-{{ Str::slug($tipo) }}" name="radioVeiculo"
                                value="{{ $tipo }}" required {{ $veiculo == $tipo ? 'checked' : '' }}>
                            <label class="form-check-label radioespecial" for="radio-{{ Str::slug($tipo) }}">{{ $tipo }}</label>
                        </div>
                        @endforeach
                    </div>

                    <div class="col-md-3 col-lg-3">
                        <label for="txtCNPJ" class="form-label">CNPJ:</label>
                        <input type="text" class="form-control cnpj" id="txtCNPJ" name="txtCNPJ"
                            value="{{ old('txtCNPJ', $vnr_cnpj ?? '') }}">
                        <div class="invalid-feedback">CNPJ inválido</div>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <label for="txtPlacaVeiculo" class="form-label">Placa:</label>
                        <input type="text" class="form-control toUpperCase" id="txtPlacaVeiculo" name="txtPlacaVeiculo"
                            maxlength="7" value="{{ old('txtPlacaVeiculo', $vds_placa ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3 col-lg-3">
                        <label for="txtTelEmpresa" class="form-label">Tel. da empresa:</label>
                        <input type="text" class="form-control telefone" id="txtTelEmpresa" name="txtTelEmpresa"
                            placeholder="Telefone" maxlength="15" pattern="\([0-9]{2}\)[\s][0-9]{4,5}-[0-9]{4}"
                            value="{{ old('txtTelEmpresa', $vnr_tel_empresa ?? '') }}" required>
                        <div class="invalid-feedback">Telefone inválido</div>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <label for="txtTel2" class="form-label">Telefone 2:</label>
                        <input type="text" class="form-control telefone" id="txtTel2" name="txtTel2" placeholder="Telefone"
                            maxlength="15" pattern="\([0-9]{2}\)[\s][0-9]{4,5}-[0-9]{4}"
                            value="{{ old('txtTel2', $vnr_tel2_empresa ?? '') }}">
                        <div class="invalid-feedback">Telefone inválido</div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                        <label for="txtEmailLicenca" class="form-label">E-mail para receber a Licença:</label>
                        <input type="email" class="form-control" id="txtEmailLicenca" name="txtEmailLicenca"
                            value="{{ old('txtEmailLicenca', $vds_email_licenca ?? '') }}" required>
                        <div class="invalid-feedback">E-mail inválido</div>
                    </div>
                </div>

                <h4>Dados do Guia</h4>
                <div class="row">
                    <div class="col-md-6 col-lg-6">
                        <label for="txtNomeGuia" class="form-label">Nome do Guia de Turismo:</label>
                        <input type="text" class="form-control" id="txtNomeGuia" name="txtNomeGuia"
                            value="{{ old('txtNomeGuia', $vnm_guia ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <label for="txtRegCadastur" class="form-label">Registro Cadastur:</label>
                        <input type="text" class="form-control reg-cadastur" id="txtRegCadastur" name="txtRegCadastur"
                            value="{{ old('txtRegCadastur', $vnr_reg_cadastur ?? '') }}">
                    </div>
                    <div class="col-md-6 col-lg-6">
                        <label for="txtEmailGuia" class="form-label">E-mail do Guia de Turismo:</label>
                        <input type="email" class="form-control" id="txtEmailGuia" name="txtEmailGuia"
                            value="{{ old('txtEmailGuia', $vds_email_guia ?? '') }}" required>
                        <div class="invalid-feedback">E-mail inválido</div>
                    </div>
                </div>

                <h4>Dados do Receptivo Turístico</h4>
                <div class="row">
                    <div class="col-md-6 col-lg-6">
                        <label for="txtNomeFantasiaAngra" class="form-label">Nome fantasia do receptivo em Angra:</label>
                        <input type="text" class="form-control" id="txtNomeFantasiaAngra" name="txtNomeFantasiaAngra"
                            value="{{ old('txtNomeFantasiaAngra', $vnm_fantasia_receptivo ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <label for="txtCNPJReceptivo" class="form-label">CNPJ:</label>
                        <input type="text" class="form-control cnpj" id="txtCNPJReceptivo" name="txtCNPJReceptivo"
                            value="{{ old('txtCNPJReceptivo', $vnr_cnpj_receptivo ?? '') }}" required>
                        <div class="invalid-feedback">CNPJ inválido</div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                        <label for="txtRazaoSocial" class="form-label">Razão social:</label>
                        <input type="text" class="form-control" id="txtRazaoSocial" name="txtRazaoSocial"
                            value="{{ old('txtRazaoSocial', $vds_razao_social ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                        <label for="txtResponsavel" class="form-label">Responsável:</label>
                        <input type="text" class="form-control" id="txtResponsavel" name="txtResponsavel"
                            value="{{ old('txtResponsavel', $vnm_responsavel ?? '') }}" required>
                        <div class="invalid-feedback">Campo obrigatório</div>
                    </div>
                    <div class="col-md-9">
                        <label for="txtObservacao" class="form-label">Observação:</label>
                        <textarea class="form-control" id="txtObservacao" name="txtObservacao" cols="3"
                            rows="3">{{ old('txtObservacao', $vds_observacao ?? '') }}</textarea>
                    </div>
                </div>

                <div class="col-md-12 mt-4 mb-5">
                    <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}">
                    </div>
                    <script src="https://www.google.com/recaptcha/api.js?hl=pt-BR" async defer></script>
                </div>

                <div class="col-12">
                    <button class="btn btn-primary btn-recaptcha" type="submit" id="btnSubmit" disabled>
                        <span id="btnText">Enviar Formulário</span>
                        <span id="btnSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </form>

        </div>

    </div>

    @if (session('success'))
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1055;">
        <div id="toastSuccess" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    @if (session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toastEl = document.getElementById('toastSuccess');
            const toast = new bootstrap.Toast(toastEl, {
                delay: 5000
            }); // desaparece após 5s
            toast.show();
        });
    </script>
    @endif

</main>
<script>
    function recaptchaCallback() {
        document.getElementById('btnSubmit').disabled = false;
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const btnSubmit = document.getElementById('btnSubmit');
        const btnText = document.getElementById('btnText');
        const btnSpinner = document.getElementById('btnSpinner');

        form.addEventListener('submit', function() {
            // Desabilita o botão
            btnSubmit.disabled = true;

            // Esconde o texto e mostra o spinner
            btnText.textContent = 'Enviando...';
            btnSpinner.classList.remove('d-none');
        });
    });
</script>

@endsection