@extends('master')
@section('content')
<link rel="stylesheet" href="/lib/css/bootstrap.css">
<link rel="stylesheet" href="/lib/css/select2.min.css"/>
<!--begin intro -->
<div id="intro">
    <!--begin header_wrapper -->
    @include('pages.partials.header')
    <!--end header_wrapper -->
</div>
<!--end intro -->
<!--begin newsletter_wrapper -->
<div id="subscribe" class="parallax_wrapper">
    <!--begin newsletter_box -->
    <div class="newsletter_box" style="padding: 25px 0 10px 0!important">
        <h3 class="parallax_title" style="font-size: 1.5rem;">Certificados {{$anio}}</h3>
    </div>
    <!--end newsletter_box -->
</div>
<!--end newsletter_wrapper -->
<!--begin section_wrapper -->
<div class="section_wrapper">
    <!--begin section_box -->
    <div class="small_margins p-2" style="margin-top: 10px">
        <!--begin row -->
        <div class="wrapper">
                <section class="content">
                    <form action="#" onsubmit="search(this); return false;" method="post">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="card card-info">
                                            <div class="card-header" style="background: #206797">
                                                <h3 class="card-title" style="float: none; text-align: center;">Buscar Certificado</h3>
                                            </div>
                                            <div class="card-body p-4" style="display: block;">
                                                <div class="row">
                                                    <div class="col-md-12 text-center" style="padding-bottom: 5px; color: #831515">
                                                        <label>Ingresa en Usuario y Clave tu Documento de Identidad (DNI), luego click en DESCARGAR para obtener tu certificado.</label>
                                                    </div>
                                                    <div class="col-md-12 text-center" style="padding-bottom: 5px; color: #656565">
                                                        <label>Si tienes inconvenientes,  escribemos a nuestro WhatsApp al <a aria-label="Chat on WhatsApp" href="https://wa.me/+51979665496" style="font-size: 16px; font-weight: bold">979 665 496</a> </label>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Usuario</label>
                                                        <div class="input-group input-group-sm">
                                                            <input type="text" onKeyPress="return acceptNum(event)" maxlength="12" class="form-control" name="user" id="user" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Clave</label>
                                                            <input type="password" onKeyPress="return acceptNum(event)" maxlength="12" class="form-control" name="pass"  id="pass" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>    
                                            <div class="card-footer" style="display: block; text-align: center;">
                                                <button id="boton" type="submit" style="background: #206797" class="btn btn-primary">Descargar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
        </div>
        <!--end row -->
    </div>
    <!--end section_box -->
</div>
<!--end section_wrapper -->
<!--begin contact_wrapper -->
<div id="contact" class="contact_wrapper">
    <!--begin contact_box -->
    <div class="contact_box">
        <i class="fa fa-map-marker fa-4x blue"></i><br>
        <h5 class="contact_title">INFORMES</h5>
        <p class="contact_details">CHICLAYO: Calle Manuel María Izaga 783- 2do piso. </p>
        <p class="contact_details">Celular: 979665496</p>
        <a href="mailto:someone@example.com" class="contact_details">informes@conede.edu.pe</a>
        <a href="/inscripciones" class="button_transparent">Inscribirse</a>
    </div>
    <!--end contact_box -->
</div>
<!--end contact_wrapper -->
@endsection

@section('scripts')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
        async function getAjax(url, inputs) {
           return new Promise((resolve, reject) => {
               var _token = $('meta[name="csrf-token"]').attr("content");
               $.ajaxSetup({
                 headers: {
                   "X-CSRF-TOKEN": _token
                 }
               });
               let token = { _token: _token };
               let data = {
                   ...inputs,
                   ...token
               };
               $.ajax({
                 url: window.location.origin + url,
                 data: data,
                 type: "post",
                 beforeSend: function() {
                   $(".preload").removeClass("d-none");
                 },
                 success: function(response) {
                   resolve(response);
                 },
                 complete: function(data) {
                   $(".preload").addClass("d-none");
                 },
                 async: true,
                 statusCode: {
                   404: function() {
                     console.log("Web not found");
                   }
                 },
                 error: function(x, xs, xt) {
                     console.log("error: " + x.status + " " + xt);
                 }
               });
           });
       }

    search = async (form) => {
        let inputs = {
            usu : form['user'].value,
            pass : form['pass'].value
        };
        document.getElementById("boton").innerHTML = "Buscando...";
        var result = await getAjax("/certificados/{{$anio}}", inputs); 

        if(result){
            location.href = result;
            document.getElementById('user').value = '';
            document.getElementById('pass').value = '';
        }else{
            document.getElementById("boton").innerHTML = "Descargar";
            alert('Lo sentimos, no se encontraron datos');
            return false;
        }   
    };      
</script>
@endsection