@extends('layouts.novo_padrao')
@section ('content')

<div class="py-12 maincontent">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
        @endif
        <div
            class="bodycomponent bgcomponent overflow-hidden shadow-sm sm:rounded-lg">
            <form action="{{route('verificador.salvar')}}" id="formprincipal" class="formulariocomponent" method="POST">
                @csrf
                
                <div class="row">
                    <div class="col text-center">
                        <h3>Verificar cadastros de visitante</h3>
                        </h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <input type="text" class="form-control" placeholder="Digite o CPF do visitante..."
                            name="cpf" id="cpf" required autocomplete="off">

                    </div>
                </div>
                <div class="row align-items-center justify-content-end">
                    <div class="col-md-4 text-right">
                        <!-- Botão com largura ajustada e margem à esquerda para mais alinhamento -->
                        <button type="submit" class="btn btn-primary w-100">Verificar</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <style>
        #registroForm {
            display: none;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="{{ asset('js/webcamfunctions.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#cpf').mask('000.000.000-00');
            $('#numeroRg').mask('S', {
                translation: {
                    'S': {
                        pattern: /[A-Za-z0-9.-]/,
                        recursive: true
                    }
                }
            });

            function validarCPF(cpf) {
                cpf = cpf.replace(/[^\d]+/g, '');
                if (cpf.length !== 11) {
                    return false;
                }

                if (/^(\d)\1{10}$/.test(cpf)) {
                    return false;
                }

                function calcularDigito(cpf, base) {
                    var soma = 0;
                    for (var i = 0; i < base - 1; i++) {
                        soma += parseInt(cpf.charAt(i)) * (base - i);
                    }
                    var digito = 11 - (soma % 11);
                    return digito > 9 ? 0 : digito;
                }

                var d1 = calcularDigito(cpf, 10);
                var d2 = calcularDigito(cpf, 11);

                return parseInt(cpf.charAt(9)) === d1 && parseInt(cpf.charAt(10)) === d2;
            }

            $('#formprincipal').on('submit', function(e) {
                var cpfInput = $('#cpf');
                if (!validarCPF(cpfInput.val())) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'CPF inválido. Por favor, verifique o número digitado.',
                        confirmButtonText: 'Corrigir'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            cpfInput.val('');
                            cpfInput.focus();
                        }
                    });
                }
            });
        });
    </script>

</div>
@endsection