@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">
            Crear Programa de Capacitaciones/Evaluaciones
        </div>
        <div class="card-body">
            <br>
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist" style="  justify-content: center; display: flex;">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="capacitaciones" data-bs-toggle="pill" data-bs-target="#capacitaciones_contenido" type="button" role="tab" aria-controls="capacitaciones_contenido" aria-selected="true"><i class="fa-solid fa-chalkboard-user"></i> Capacitaciones</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="evaluaciones" data-bs-toggle="pill" data-bs-target="#evaluaciones_contenido" type="button" role="tab" aria-controls="evaluaciones_contenido" aria-selected="false"><i class="fa-solid fa-book"></i> Evaluaciones</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="capacitaciones_contenido" role="tabpanel" aria-labelledby="capacitaciones">
                    <div class="row">
                        <div class="col">
                            <label for="nombre_paq_cap">Nombre del Programa</label>
                            <input type="text" class="form-control mt-2" id="nombre_paq_cap" name="nombre_paq_cap" style="text-align: center">
                        </div>
                        <div class="col">
                            <label for="capacitaciones" class="mb-2">Seleccione las Capacitaciones: </label>
                            <select name="capacitaciones[]" id="capacitaciones" class="slc_cap" multiple="multiple">
                                @foreach($capacitaciones as $c)
                                    <option value="{{$c->id}}">{{$c->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col">
                            <label for="fecha_inicio">Fecha de Inicio</label>
                            <input type="date" class="form-control mt-2" id="fecha_inicio" name="fecha_inicio">
                        </div>
                        <div class="col">
                            <label for="fecha_termino">Fecha de Termino</label>
                            <input type="date" class="form-control mt-2" id="fecha_termino" name="fecha_termino">
                        </div>
                        <div class="col">
                            <label for="dias_evaluacion">Dias de Capacitación</label>
                            <input class="form-control mt-2" type="number" id="dias_capacitacion" style="text-align: center" min="1" max="3">
                        </div>
                    </div>
                    <br><br>
                    <div class="d-grid gap-2 col-6 mx-auto ">
                        <center id="spinner_cap" style="display: none;"> Guardando <br><i class="fas fa-spinner fa-pulse"></i> </center>
                        <button class="btn btn-success" id="boton_cap" type="button" onclick="agregarCapacitacion();">Guardar Programa</button>
                    </div>
                </div>
                <div class="tab-pane fade" id="evaluaciones_contenido" role="tabpanel" aria-labelledby="evaluaciones">
                    <div class="row">
                        <div class="col">
                            <label for="nombre_paq_ev">Nombre del Programa</label>
                            <br><br>
                            <input type="text" class="form-control" id="nombre_paq_ev" name="nombre_paq_ev" style="text-align: center">
                        </div>
                        <div class="col">
                            <label for="evaluaciones">Seleccione las Evaluaciones: </label>
                            <br><br>
                            <select name="evaluaciones[]" id="evaluaciones" class="slc_ev mt-4" multiple="multiple">
                                @foreach($evaluaciones as $e)
                                    <option value="{{$e->id_encuesta}}">{{$e->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <br><br>
                    <div class="d-grid gap-2 col-6 mx-auto">
                        <center id="spinner_ev" style="display: none;"> Guardando <br><i class="fas fa-spinner fa-pulse"></i> </center>
                        <button class="btn btn-success" id="boton_ev" type="button" onclick="agregarEvaluacion();">Guardar Programa</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card border-dark mt-4">
        <div class="card-header">
            Programas Activos
        </div>
        <div class="card-body">
            <br>
            <div class="row">
                <div class="col">
                    <table class="table tabla_programa">
                        <thead>
                            <th class="text-center">
                                Capacitaciones
                            </th>
                        </thead>
                        <tbody>
                                @foreach($cap as $c)
                                <tr>
                                    <td>
                                        <div class="row">
                                            <div class="col">
                                                <div class="d-grid gap-2 col-12 mx-auto">
                                                    <button class="btn btn-outline-dark" type="button" onclick="modalPrograma({{$c->id}},'{{$c->nombre_paquete}}','capacitacion')">
                                                            {{$c->nombre_paquete}} <br>
                                                            {{date("d/m/Y H:i:s",strtotime($c->fecha_creacion))}}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-warning mt-2" onclick="cerrarPrograma({{$c->id}});"><i class="fa-solid fa-rectangle-xmark"></i></button>
                                                <button class="btn btn-danger mt-2" onclick="eliminarPrograma({{$c->id}});"><i class="fa-regular fa-trash-can"></i> </button>
                                            </div>
                                        </div>
                      
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="col">
                    <table class="table tabla_programa">
                        <thead>
                            <th class="text-center">
                                Evaluaciones
                            </th>
                        </thead>
                        <tbody>
                                @foreach($ev as $e)
                                <tr>
                                    <td>
                                        <div class="row">
                                            <div class="col">
                                                <div class="d-grid gap-2 col-12 mx-auto">
                                                    <button class="btn btn-outline-dark" type="button" onclick="modalPrograma('{{$e->id}}','{{$e->nombre_paquete}}','evaluacion')">
                                                        {{$e->nombre_paquete}} <br>
                                                            {{date("d/m/Y H:i:s",strtotime($e->fecha_creacion))}}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-warning mt-2" onclick="cerrarPrograma({{$e->id}});"><i class="fa-solid fa-rectangle-xmark"></i></button>
                                                <button class="btn btn-danger mt-2" onclick="eliminarPrograma({{$e->id}});"><i class="fa-regular fa-trash-can"></i> </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
             
                </div>
            </div>
        </div>
    </div>
    <div class="card border-dark mt-4">
        <div class="card-header" data-bs-toggle="collapse" href="#contenedor_colapse" role="button" aria-expanded="false" aria-controls="contenedor_colapse">
            Programas Cerrados
        </div>
        <div class="card-body collapse" id="contenedor_colapse"> 
            <br>
            <div class="row">
                <div class="col">
                    <table class="table tabla_programa">
                        <thead>
                            <th class="text-center">
                                Capacitaciones
                            </th>
                        </thead>
                        <tbody>
                                @foreach($cap_cerradas as $cc)
                                <tr>
                                    <td>
                                        <div class="row">
                                            <div class="col">
                                                <div class="d-grid gap-2 col-12 mx-auto">
                                                    <button class="btn btn-outline-dark" type="button" onclick="modalPrograma({{$cc->id}},'{{$cc->nombre_paquete}}','capacitacion')">
                                                            {{$cc->nombre_paquete}} <br>
                                                            {{date("d/m/Y H:i:s",strtotime($cc->fecha_creacion))}}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-info mt-2" onclick="reactivarPrograma({{$cc->id}})"><i class="fa-regular fa-folder-open"></i></button>
                                                <button class="btn btn-danger mt-2" onclick="eliminarPrograma({{$cc->id}});"><i class="fa-regular fa-trash-can"></i> </button>
                                            </div>
                                        </div>
                      
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="col">
                    <table class="table tabla_programa">
                        <thead>
                            <th class="text-center">
                                Evaluaciones
                            </th>
                        </thead>
                        <tbody>
                                @foreach($ev_cerradas as $ec)
                                <tr>
                                    <td>
                                        <div class="row">
                                            <div class="col">
                                                <div class="d-grid gap-2 col-12 mx-auto">
                                                    <button class="btn btn-outline-dark" type="button" onclick="modalPrograma('{{$ec->id}}','{{$ec->nombre_paquete}}','evaluacion')">
                                                        {{$ec->nombre_paquete}} <br>
                                                            {{date("d/m/Y H:i:s",strtotime($ec->fecha_creacion))}}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-info mt-2" onclick="reactivarPrograma({{$ec->id}})"><i class="fa-regular fa-folder-open"></i></button>
                                                <button class="btn btn-danger mt-2" onclick="eliminarPrograma({{$ec->id}});"><i class="fa-regular fa-trash-can"></i> </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
             
                </div>
            </div>
        </div>
    </div>
    <br><br>
</div>
@include('modal.modal_programa')
@section('script')
<script>
    $(document).ready(function () {
        $('.tabla_programa').DataTable({
            "language": {
                "sProcessing":    "Procesando...",
                "sLengthMenu":    "Mostrar _MENU_ registros",
                "sZeroRecords":   "No se encontraron resultados",
                "sEmptyTable":    "Ningún dato disponible en esta tabla",
                "sInfo":          "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":     "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":  "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":   "",
                "sSearch":        "Buscar:",
                "sUrl":           "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":    "Último",
                    "sNext":    "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            }
        });
        $('.slc_cap').select2({width: '100%'});
        $('.slc_ev').select2({width: '100%'});
    });

    function agregarCapacitacion(){
        $.ajax({
                url: "agregarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                  'nombre':$("#nombre_paq_cap").val(),
                  'tipo': "capacitacion",
                  'contenido': $(".slc_cap").val(),
                  'dias': $("#dias_capacitacion").val(),
                  'fecha_inicio': $("#fecha_inicio").val(),
                  'fecha_termino': $("#fecha_termino").val()
                },
                beforeSend: function() {
                    $("#spinner_cap").css('display','block');
                    $("#boton_cap").css('display','none');
                },
                success: function(data) {

                    $("#spinner_cap").css('display','none');
                    $("#boton_cap").css('display','block');
                        Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Programa Agregado Correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        }).then((result) => {
                            window.location.reload();
                        })
                },
                error: function(data) {
                    console.log(data);
                }
            });
    }

    function agregarEvaluacion(){
        $.ajax({
                url: "agregarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                  'nombre':$("#nombre_paq_ev").val(),
                  'tipo': "evaluacion",
                  'contenido': $(".slc_ev").val(),
                },
                beforeSend: function() {
                    $("#spinner_ev").css('display','block');
                    $("#boton_ev").css('display','none');
                },
                success: function(data) {

                    $("#spinner_ev").css('display','none');
                    $("#boton_ev").css('display','block');
                    Swal.fire({
                    position: 'center',
                    icon: 'success',
                    title: 'Programa Agregado Correctamente',
                    showConfirmButton: false,
                    timer: 1500
                    }).then((result) => {
                        window.location.reload();
                    })
                },
                error: function(data) {
                    console.log(data);
                }
        });
    }

    function eliminarPrograma(id){

        Swal.fire({
        title: 'Eliminar Programa?',
        text: "Se eliminaran todos los registros asociados a este Programa",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Borrar'
        }).then((result) => {
        if (result.isConfirmed) {

            $.ajax({
                url: "eliminarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    'id':id,
                },
                beforeSend: function() {
         
                },
                success: function(data) {
                    Swal.fire(
                    'Registro Eliminado',
                    '',
                    'success'
                    ).then((result) => {
                        window.location.reload();
                    })
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
        })
    }

    function reactivarPrograma(id){

        Swal.fire({
        title: '¿Activar Programa?',
        text: "",
        icon: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Activar'
        }).then((result) => {
        if (result.isConfirmed) {

            $.ajax({
                url: "reactivarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    'id':id,
                },
                beforeSend: function() {
         
                },
                success: function(data) {
                    Swal.fire(
                    'Programa Activado',
                    '',
                    'success'
                    ).then((result) => {
                        window.location.reload();
                    })
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
        })
    }

    function cerrarPrograma(id){
        Swal.fire({
        title: '¿Cerrar Programa?',
        text: "",
        icon: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Cerrar'
        }).then((result) => {
        if (result.isConfirmed) {

            $.ajax({
                url: "cerrarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    'id':id,
                },
                beforeSend: function() {
         
                },
                success: function(data) {
                    Swal.fire(
                    'Programa Cerrado',
                    '',
                    'success'
                    ).then((result) => {
                        window.location.reload();
                    })
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
        })
    }

    function modalPrograma(id,nombre_paquete,tipo){

        $.ajax({
                url: "buscarPrograma",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                  'id':id,
                  'tipo':tipo,
                },
                dataType:'html',
                beforeSend: function() {
                    $("#header").html("");
                },
                success: function(data) {
                    $("#header").append('<label><b>'+nombre_paquete+'</b></label>');
                    $("#cuerpo").html(data);
                    $("#modal_programa").modal("show");
                },
                error: function(data) {
                    console.log(data);
                }
        });

    }
</script>
@endsection
@endsection