@extends('layout.qr')
@section('header')
@section('content')
<style>
    .centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="content text-center" style="margin-left:50px; margin-right:50px;">
    <div class="card border-dark ">
        <div class="card-header" style="cursor: pointer" data-bs-toggle="collapse" data-bs-target="#contenedor_cursos" aria-expanded="false" aria-controls="contenedor_cursos"><b>Plan de Estudio</b></div>
        <div class="card-body text-dark mt-3">
            <div class="collapse" id="contenedor_cursos">
                @foreach($historial as $h)
                    <div class="card mt-2 mb-2" style="display:inline-block; cursor: pointer;" onclick="modal_paquete({{$h->id_paquete}},'{{$h->tipo}}','{{$h->id_perfil}}');">
                        <div class="card-body bg-success" style="color:white">
                            <h5 class="card-title">{{$h->nombre_paquete}}</h5>
                            <p class="card-text"></p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@include('modal.modal_contenido_paquete')
@include('modal.modal_desc_capacitacion') 

@section('script')
<script>
    
    function descargar_diploma(id,rut){
        $.ajax({
                url: "capacitaciones/"+rut+"/getDatosCurso",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                dataType: "json",
                data: {
                  'id':id,
                },
                async:true,
                beforeSend: function() {
                    $("#header").html("");
                    $("#pie").html("");
                },
                success: function(data) {
   
                    $("#header").append("<h5 class='modal-title'>"+data.curso+"</h5>");
                    $("#id").val(data.id);
                    $("#nota_promedio").val(data.nota_promedio+"%");
                    $("#asistencia_promedio").val(data.asistencia_promedio+"%");
                    $("#fecha_inicio").val(moment(data.fecha_ini).format('DD/MM/YYYY'));
                    $("#fecha_termino").val(moment(data.fecha_fin).format('DD/MM/YYYY'));
                    $("#fecha_vigencia").val(moment(data.vigencia).format('DD/MM/YYYY'));
                    $("#cargo").val(data.cargo);
                    $("#gerencia").val(data.gerencia);                    

                    if(data.validacion == "valido"){
                        $("#pie").append('<button type="submit"  class="btn btn-block btn-success"><i class="fa-solid fa-file-arrow-down"></i> Descargar Diploma  </button>\
                                          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>')
                    }
                    else{
                        $("#pie").append('<button type="submit" disabled class="btn btn-block btn-default"><i class="fa-solid fa-file-arrow-down"></i> No Vigente</button>\
                                          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>')
                    }

                    $('body').addClass('modal-open');
                    $('#modal_desc').css('overflow-y', 'auto');
                    $("#modal_desc").modal('show');
                },
                error: function(data) {
                    console.log(data);
                }
            });
    }

    function modal_paquete(id_paquete,tipo,id_perfil){

        $.ajax({                        
                url: "getContenidoPaquete",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType:"html",
                data: {
                    'id_paquete':id_paquete,
                    'tipo':tipo,
                    'id_perfil':id_perfil,
                },
                beforeSend:function(){
                },
                success: function(data)
                {
                    $("#contenedor_paq").html(data);
                    $("#modal_contenido_paquete").modal("show");
                },
                error:function(data){
                    console.log(data);
                }
        });

    }

    function modal_desc(id_paquete,id_perfil,id_ev_cap){
        
        $.ajax({                        
                url: "getInfoCapacitacion",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    'id_paquete':id_paquete,
                    'id_perfil':id_perfil,
                    'id_ev_cap':id_ev_cap
                },
                dataType:'json',
                beforeSend:function(){
                    $("#pie").html("");
                },
                success: function(data)
                {
                    
                    $("#calificacion").val(data['calificacion']);
                    $("#fecha_ini").val(moment(data['fecha_inicio']).format("DD/MM/YYYY"));
                    $("#fecha_fin").val(moment(data['fecha_termino']).format("DD/MM/YYYY"));
                    $("#nota_promedio").val(data['nota_promedio']+'%');
                    $("#asis_promedio").val(data['asistencia_promedio']+'%');
                    if(data['validacion'] == "valido"){
                        $("#pie").append('<button type="submit"  class="btn btn-block btn-success"><i class="fa-solid fa-file-arrow-down"></i> Descargar Diploma  </button>\
                                          ')
                    }
                    else{
                        $("#pie").append('<button type="submit" disabled class="btn btn-block btn-default"><i class="fa-solid fa-file-arrow-down"></i> No Vigente</button>\
                                          ')
                    }

                    $("#modal_contenido_paquete").css('display','none');
                    $("#modal_desc_capacitacion").modal("show");
                },
                error:function(data){
                    console.log(data);
                }
        });

    }

    function modal_desc_volver(){
        $("#modal_desc_capacitacion").modal("hide");
        $("#modal_contenido_paquete").css("display",'block');
    }
</script>
@endsection
@endsection