@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
@endsection

@section('content')
    <main class="page-main">
        <div class="bodyfull">
            <div class="uk-container">
        
                <!-- Formulario de ingreso de código -->
                <div id="code-form" class="uk-card uk-card-default uk-card-body">
                    <h3 class="uk-card-title">Ingrese su Código de Certificado</h3>
                    <form id="certificate-form">
                        <input class="uk-input" type="text" id="certificate-code" placeholder="Código de Certificado(Ingrese los 5 digitos.)" required>
                        <button type="button" class="uk-button uk-button-primary uk-margin-top" onclick="validateCode()">
                            Ver Certificado
                        </button>
                    </form>
                </div>
        
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            function validateCode() {
                const code = document.getElementById('certificate-code').value.trim();

                if (!code) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Código requerido',
                        text: 'Por favor, ingrese un código de certificado.',
                    });
                    return;
                }

                // Show loading indicator
                Swal.fire({
                    title: 'Validando...',
                    text: 'Por favor, espere.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Send AJAX request
                $.ajax({
                    type: 'GET',
                    url: `/validarcertificado/${code}`,
                    success: function(response) {
                        Swal.close(); // Close loading indicator

                        if (response.status === 'ok') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Código válido',
                                text: 'Abriendo el certificado...',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                window.open(response.pdfUrl, '_blank'); // Open PDF in new window
                            });
                        }
                    },
                    error: function(response) {
                        Swal.close(); // Close loading indicator

                        let message = 'Ocurrió un error. Por favor, inténtelo nuevamente.';
                        if (response.responseJSON && response.responseJSON.message) {
                            message = response.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Código inválido',
                            text: message
                        });
                    }
                });
            }
        </script>
                

       
    </main>
@endsection