@if(!empty($setting->ins_virtual) and strtotime($setting->ins_virtual) < strtotime(now()))
@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;">Ficha de inscripciòn (Modalidad Virtual {{$conede->cone_per}})</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 <br> ' +
                          '<a href="{{ Session::get('success') }}" target="_blank" style="font-weight:bold">Descargar PDF</a> '
                        })
                    </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:
                          '{{ Session::get('error') }}'
                        })
                    </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</b> <br><br> ' +
                          '<img style="max-height: 180px; margin-bottom: 15px;" src={{config("app.cdn_image")}}/qr/{{trim((Session::get('exists')->ins_dni))}}.png /> <br> ' +
                          '{{Session::get('exists')->ins_nom}} {{Session::get('exists')->ins_pat}} {{Session::get('exists')->ins_mat}} <br> ' +
                          '<a href="/ficha?register={{base64_encode(Session::get('exists')->id)}}" target="_blank" style="font-weight:bold">Descargar PDF</a> '
                        })
                    </script>
                    @endif 
                    <form action="/inscripciones/virtual" method="post" enctype="multipart/form-data">
                        {{ 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>
                                                            @if(!Session::has('noexists'))
                                                            <span class="input-group-append">
                                                            <input type="hidden" name="search" id="search">
                                                            <button type="submit" class="btn btn-info btn-flat" onclick="document.getElementById('search').value=1">Buscar</button>
                                                            </span>
                                                            @endif
                                                        </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" 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" 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" 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>Fecha de Nacimiento</label>
                                                            <div class="input-group date" data-target-input="nearest">
                                                                <input type="date" class="form-control datetimepicker-input" data-target="#nacimiento" id="nacimiento" name="nacimiento" @if(!empty(Session::get('noexists')['data']['ins_nac'])) value="{{Session::get('noexists')['data']['ins_nac']}}" @endif max="2025-12-31" required>
                                                                <div class="input-group-append" data-target="#nacimiento" data-toggle="datetimepicker">
                                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-6">
                                                        <div class="form-group">
                                                            <label>Sexo</label>
                                                            <select name="sexo" id="sexo" class="form-control" required>
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                                <option value="M">Masculino</option>
                                                                <option value="F">Femenino</option>
                                                            </select>
                                                        </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="" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 col-sm-12" data-select2-id="43">
                                                        <div class="form-group">
                                                            <label>Direccion</label>
                                                            <input type="text" @if(!empty(Session::get('noexists')['data'])) value="{{Session::get('noexists')['data']['ins_dir']}}" @endif class="form-control" name="direccion" placeholder="" required>
                                                        </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 y/o 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="G">Egresado</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" onchange="getDelegados()" disabled>
                                                                <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"></td>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Departamento</label>
                                                            <select name="departamento" id="departamento" class="form-control" onchange="getUbigeo(1, this.value, '#provincia');" required>
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                                @if(!empty($departamentos))
                                                                @foreach ($departamentos as $item)
                                                                <option value="{{$item->dep_cod}}">{{$item->dep_nom}}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Provincia</label>
                                                            <select name="provincia" id="provincia" class="form-control" onchange="getUbigeo(2, this.value, '#distrito');" required>
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Distrito</label>
                                                            <select name="distrito" id="distrito" class="form-control" required>
                                                                <option selected="selected" value="">Seleccionar...</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="card card-info">
                                            <div class="card-header">
                                                <h3 class="card-title">Datos de Pago</h3>
                                            </div>
                                            <div class="card-body" style="display: block;">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Banco (Deposito / Transferencia)</label>
                                                            <select name="banco" id="banco" class="form-control" required>
                                                                <option value="" selected="selected">Seleccionar...</option>
                                                                @if(!empty($bancos))
                                                                @foreach ($bancos as $item)
                                                                <option value="{{$item->cue_id}}">{{$item->cue_ban}} ({{$item->cue_nro}}) - {{$item->cue_tit}}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Voucher escaneado en formato PNG ó JPG / captura de pantalla (Máx 1MB)</label>
                                                            <input id="voucher" alt="Debe seleccionar una Imagen para Voucher" name="voucher" type="file" class="form-control" required>
                                                            <input type="hidden" id="file" name="file">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Fecha de deposito</label>
                                                            <div class="input-group date" data-target-input="nearest">
                                                                <input type="date" class="form-control datetimepicker-input" data-target="#deposito" id="deposito" name="deposito" max="2025-12-31" required>
                                                                <div class="input-group-append" data-target="#deposito" data-toggle="datetimepicker">
                                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Numero de operacion</label>
                                                            <input type="text" class="form-control" name="operacion" id="operacion" placeholder="" onKeyPress="return acceptNum(event)" required>
                                                            <div id="divope" style="display:none"></div>
                                                            <div class="tooltip2"><img id="imgvou" name="imgvou" style="float:left;margin:0 15px 20px 0; width:300px" /></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Total S/.</label>
                                                            <input type="text" class="form-control" name="total" placeholder="" onKeyPress="return acceptNum(event)" oncopy="return false" onpaste="return false" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="card card-secondary">
                                            @if(Session::has('noexists'))
                                            <div class="card-footer" style="display: block; text-align: center;">
                                                <button type="submit" class="btn btn-primary">Registrarse</button>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </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/virtual" 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 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=='E' || valor=='G'){
         document.getElementsByTagName('select')[2].disabled = false;
         document.getElementById("divuniversidad").style.display = "inline";
         document.getElementById("divotro").style.display = "none";
       }else if(valor=='P'){
         document.getElementsByTagName('select')[2].disabled = true;
         document.getElementById("divuniversidad").style.display = "none";
         document.getElementById("divotro").style.display = "inline";
       }else{
         document.getElementsByTagName('select')[2].disabled = true;
         document.getElementById("divuniversidad").style.display = "inline";
         document.getElementById("divotro").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);
                 }
               });
           });
       }
    
    getUbigeo = async (level, value, select) => {
    let inputs = {
       level : level,
       parent : value
    };
    var result = await getAjax("/ubigeo", inputs);
    $(select).empty();
    $(select).append($('<option>', { value: '', text: 'Seleccionar...' }));
    if(level == 1){
       $('#distrito').empty();
       $('#distrito').append($('<option>', { value: '', text: 'Seleccionar...' }));
    }
    result.forEach(item => {
       if(level == 1){
           $(select).append($('<option>', { value: (item.code).substring(0, 4), text: item.name }));
       }else{
           $(select).append($('<option>', { value: item.code, text: item.name }));
       }
    });
    };  
    
    $("#banco").change(function(){
    var ab = $(this).val();
    if (ab==''){$("#divope").css("display", "none"); $("#imgvou").attr('src','');}
    if (ab==1){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/nacion.jpg');}
    if (ab==2){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/piura.jpg');}
    if (ab==3){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/sck.jpg');}
    if (ab==4){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/bcp.jpg');}
    if (ab==5){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/bcp.jpg');}
    if (ab==6){$("#divope").css("display", "inline"); $("#imgvou").attr('src','images/continental.jpg');}
    });
    
    $("#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");
           }
       });
    
    function habilitar(){
    for (a=2; a < document.getElementsByTagName('input').length; a++){
    document.getElementsByTagName('input')[a].disabled = false;}
    for (b=1; b < document.getElementsByTagName('select').length; b++){
    document.getElementsByTagName('select')[b].disabled = false;}
    document.getElementsByTagName('select')[2].disabled = true;
    //document.getElementsByTagName('select')[5].disabled = true;
    }
    
    function desabilitar(){
    for (a=2; a < document.getElementsByTagName('input').length; a++){
    document.getElementsByTagName('input')[a].disabled = true;}
    for (b=0; b < document.getElementsByTagName('select').length; b++){
    document.getElementsByTagName('select')[b].disabled = true;}
    document.getElementsByTagName('input')[2].readOnly = false;
    document.getElementsByTagName('input')[2].disabled = false;
    }      
    
    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 }));
    });
    }; 
    
    jQuery(function ($) {
       let voucher;
       $('#voucher').change(function()
       {
           var fileInput = $(this).val();
           var sizeByte = $(this).get(0).files[0]['size'];
           var siezekiloByte = parseInt(sizeByte / 1024);
           if(siezekiloByte > 1024){
               alert('El tamaño supera el limite permitido');
               $(this).val('');
               $('#file').val('');
               return false;
           }
    
           var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
           if (!allowedExtensions.exec(fileInput)) {
               alert('Imagen inválida');
               $(this).val('');
               $('#file').val('');
               return false;
           }
           let reader = new FileReader();
           reader.onload = (e) => { 
               $('#preview-voucher').attr('src', e.target.result);
               $('#file').val(e.target.result);
           }   
           reader.readAsDataURL(this.files[0]); 
       });
    });
</script>
@if(Session::has('noexists'))
<script type="text/javascript">habilitar();</script>
@else
<script type="text/javascript">desabilitar();</script>
@endif
@endsection
@endif