@extends('layouts.site')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style rel="stylesheet">
        .justify-content-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    <div class="wrapper">
        <div class="header">
            <div>Superlegis</div>
            <a class="login" href="/login">
                <i class="fa fa-sign-in" style="margin-right: 5px;"></i>ACESSO RESTRITO
            </a>
        </div>

        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h1>Central de Autenticação de documentos</h1>

                    <form method="POST" id="form-secret" class="mt-4">
                        <input name="secret-pdf" id="secret-pdf" type="text" class="form-control text-center"
                            placeholder="Insira a chave: xxxxxxxxxx" required />
                        <br />
                        <div class="g-recaptcha" data-sitekey="6LfKxOAoAAAAAC4alwC1yfybVmVgu2gNURUpX0KB"
                            style="margin: 0 auto; display: inline-block;"></div>
                        <br />
                        <button type="submit" class="btn btn-success">Validar</button>
                    </form>

                    <div id="loading" style="display: none; margin-top: 10px;">Carregando...</div>

                    <div id="responseMessage" class="mt-4 font-weight-bold"></div>

                    <div id="signatureInfo" class="mt-4" style="display: none;">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th scope="row">Código do Documento</th>
                                    <td id="docCode"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Chave de Verificação</th>
                                    <td id="verificationKey"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Tenant</th>
                                    <td id="tenantName"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Data de Criação</th>
                                    <td id="createdAt"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>


    <script>
        $(document).ready(function() {
            $('#form-secret').on('submit', function(event) {
                event.preventDefault();

                var captchaResponse = grecaptcha.getResponse();
                if (captchaResponse.length === 0) {
                    alert('Por favor, complete o reCAPTCHA.');
                    return;
                }

                var secretPdf = $('#secret-pdf').val().trim();
                if (!secretPdf) {
                    alert('Por favor, insira o código.');
                    return;
                }

                var csrfToken = $('meta[name="csrf-token"]').attr('content');

                $('#loading').show();
                $('#responseMessage').text('');
                $('#signatureInfo').hide();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: '/validate/doc/signature/token/' + captchaResponse,
                    data: {
                        'captchaResponse': captchaResponse,
                        'secretPdf': secretPdf
                    },
                    success: function(response) {
                        $('#loading').hide();
                        grecaptcha.reset();

                        if (response.success) {
                            $('#responseMessage').css('color', 'green').text(response.message);

                            const data = response.data;
                            $('#docCode').text(data.document_code);
                            $('#verificationKey').text(data.verification_key);
                            $('#tenantName').text(data.tenant);

                            const createdAt = new Date(data.created_at);
                            $('#createdAt').text(createdAt.toLocaleString('pt-BR'));

                            $('#signatureInfo').show();
                        } else {
                            $('#responseMessage').css('color', 'red').text(response.message);
                        }
                    },
                    error: function() {
                        $('#loading').hide();
                        $('#responseMessage').css('color', 'red').text(
                            'Erro ao validar. Tente novamente.');
                        grecaptcha.reset();
                    }
                });
            });

            // Preenche código da URL automaticamente
            const currentURL = window.location.href;
            const urlParts = currentURL.split('/');
            const code = urlParts[urlParts.length - 1];
            document.getElementById("secret-pdf").value = code;
        });
    </script>
@endsection