@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" style="background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 54%, rgba(23,39,42,0.8743872549019608) 100%);">
    <!--begin newsletter_box -->
    <div class="newsletter_box" style="padding: 25px 0 10px 0!important">
        <h3 class="parallax_title" style="font-size: 1.5rem; margin: 12px">Ficha para el Gran Sorteo organizado por la Trilogía Jurídica: <br>Escuela Jurídica INCEGA - CONEDE - JUNEDAP</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">
        <!--begin row -->
        <div class="wrapper">
            <div>
                <section class="content">
                    @if(Session::has('success'))
                    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
                    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" id="theme-styles">
                    <script type="text/javascript">
                        Swal.fire({
                          icon: 'success',
                          title: 'Felicidades',
                          html:
                          'Participante registrado correctamente'
                        })
                    </script>
                    @endif 
                    @if(Session::has('error'))
                    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
                    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" id="theme-styles">
                    <script type="text/javascript">
                        Swal.fire({
                          icon: 'error',
                          title: 'Error',
                          html:
                          'Lo sentimos, hubo problemas al registrarse'
                        })
                    </script>
                    @endif          
                    @if(Session::has('exists'))
                    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
                    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" id="theme-styles">
                    <script type="text/javascript">
                        Swal.fire({
                          icon: 'info',
                          html:
                          '<b>Participante ya se encuentra Registrado'
                        })
                    </script>
                    @endif 
                    <h4 style="color: #795548"><center>{{$sorteo->name}}</center></h3>
                    <form action="/sorteo" method="post">
                        {{ csrf_field() }}          
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="form-group">
                                        <div class="card card-info">
                                            <div class="card-header">
                                                <h3 class="card-title">Datos personales</h3>
                                            </div>
                                            <div class="card-body" style="display: block;">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label>DNI</label>
                                                        <div class="input-group input-group-sm">
                                                            <input type="text" oncopy="return false" onpaste="return false" onKeyPress="return acceptNum(event)" maxlength="8" class="form-control" name="dni" @if(Session::has('noexists')) value="{{Session::get('noexists')['dni']}}" @endif required>                                                            
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Nombres</label>
                                                            <input type="text" class="form-control" name="nombres" placeholder="" onpaste="return false" maxlength="50" oncut="return false" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_nom']}}" @endif oncopy="return false" onKeyPress="return acceptLet(event)" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Apellido Paterno</label>
                                                            <input type="text" class="form-control" name="paterno" placeholder="" onpaste="return false" maxlength="25" oncut="return false" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_pat']}}" @endif oncopy="return false" onKeyPress="return acceptLet(event)" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Apellido Materno</label>
                                                            <input type="text" class="form-control" name="materno" placeholder="" onpaste="return false" maxlength="25" oncut="return false" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_mat']}}" @endif oncopy="return false" onKeyPress="return acceptLet(event)" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Telefono / Celular</label>
                                                            <input type="text" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_tel']}}" @endif class="form-control" onKeyPress="return acceptNum(event)" maxlength="9" name="telefono" placeholder="" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Email</label>
                                                            <input type="email" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_ema']}}" @endif class="form-control" name="email" placeholder="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <div class="card card-success">
                                            <div class="card-header">
                                                <h3 class="card-title">Datos educativos / Laborales</h3>
                                            </div>
                                            <div class="card-body" style="display: block;">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Estado academico</label>
                                                            <select name="academico" id="academico" class="form-control" onchange="tipo(this.value);" required>
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                                <option value="E">Estudiante</option>
                                                                <option value="B">Bachiller</option>
                                                                <option value="P">Profesional</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12" id="divuniversidad">
                                                        <div class="form-group">
                                                            <label>Universidad</label>
                                                            <select name="universidad" id="universidad" class="form-control select2">
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                                @if(!empty($universidades))
                                                                @foreach ($universidades as $item)
                                                                <option value="{{$item->uni_cod}}">{{$item->uni_nom}}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12" id="divotro" style="display:none">
                                                        <div class="form-group">
                                                            <label>Centro Laboral</label>
                                                            <input onpaste="return false" oncut="return false" oncopy="return false" name="otro" type="text" id="otro" class="form-control" maxlength="250"></td>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12" id="divciudad" style="display:none">
                                                        <div class="form-group">
                                                            <label>Ciudad</label>
                                                            <input type="text" name="ciudad" class="form-control"></td>
                                                        </div>
                                                    </div>                                                    
                                                </div>
                                                <div class="row" id="divsede">
                                                    <div class="col-md-8">
                                                        <div class="form-group">
                                                            <label>Sede</label>
                                                            <input type="text" class="form-control" name="sede" maxlength="50">
                                                        </div>
                                                    </div>                                                    
                                                    <div class="col-md-4" id="divciclo">
                                                        <div class="form-group">
                                                            <label>Ciclo</label>
                                                            <select name="ciclo" id="ciclo" class="form-control">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                                <option value="11">11</option>
                                                                <option value="12">12</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="card card-secondary">
                                            <div class="card-footer" style="display: block; text-align: center;">
                                                <button type="submit" class="btn btn-primary">Registrarse</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>
    <!--end section_box -->
</div>
<div id="subscribe" class="parallax_wrapper" style="background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 54%, rgba(23,39,42,0.8743872549019608) 100%);">
    <!--begin newsletter_box -->
    <div class="newsletter_box" style="padding: 25px 0 10px 0!important">
        <h3 class="parallax_title" style="font-size: 1.5rem;">
        Transmisión en vivo en nuestras redes sociales del Facebook e Instagram.
        <br>
        La Trilogía Jurídica agradece tu participación</h3>
    </div>
    <!--end newsletter_box -->
</div>
<!--end section_wrapper -->
@endsection
@section('scripts')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $('.select2').select2();

    @if(!empty(Session::get('noexists')['data']['ins_sex'])) document.getElementById('sexo').value = "{{Session::get('noexists')['data']['ins_sex']}}"; @endif

    function tipo(valor){
       document.getElementById("otro").value = "";
       document.getElementById("universidad").value = "";
       if(valor=='B' || valor=='G'){
         document.getElementById("divuniversidad").style.display = "inline";
         document.getElementById("divsede").style.display = "flex";
         document.getElementById("divciclo").style.display = "flex";
         document.getElementById("divotro").style.display = "none";
         document.getElementById("divciudad").style.display = "none";
       }else if(valor=='P'){
         document.getElementById("divuniversidad").style.display = "none";
         document.getElementById("divsede").style.display = "none";
         document.getElementById("divciclo").style.display = "none";         
         document.getElementById("divotro").style.display = "inline";
         document.getElementById("divciudad").style.display = "inline";
       }else{
         document.getElementById("divuniversidad").style.display = "inline";
         document.getElementById("divsede").style.display = "flex";
         document.getElementById("divciclo").style.display = "flex";         
         document.getElementById("divotro").style.display = "none";
         document.getElementById("divciudad").style.display = "none";
       }
     }
       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);
                 }
               });
           });
       }
    
    $("#operacion").tooltip({
    // place tooltip on the right edge
    position: "center right",
    // a little tweaking of the position
    offset: [-120, -300],
    // use the built-in fadeIn/fadeOut effect
    effect: "fade",
    // custom opacity setting
    opacity: 0.9
    });
    
       $("form").submit(function (e) {
           if($(this).valid()) {
               $(".preload").removeClass("d-none");
           }
       });
        
    
    getDelegados = async () => {
    let inputs = {
       uni : $('#universidad').val()
    };
    var result = await getAjax("/delegados", inputs);
    $('#delegado').empty();
    $('#delegado').append($('<option>', { value: '', text: 'Seleccionar...' }));
    result.forEach(item => {
       $('#delegado').append($('<option>', { value: item.del_cod, text: item.del_nom }));
    });
    }; 

</script>
@endsection