{{--{{ dd($preguntas) }}--}}
<div class="portlet light" style="padding: 0;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject sbold uppercase"> Lista de Preguntas del Examen </span>
        </div>
        <div class="actions">
            @if($editar)
                <button id="add_pregunta" class="btn btn-primary" data-examen="{{ $examen->id }}">
                    <i class="fa fa-plus"></i>
                    <span class="hidden-xs"> Agregar Pregunta </span>
                </button>
            @endif
        </div>
    </div>
    <div class="portlet-body">
        <table class="table table-striped table-bordered table-hover table-bg" id="table_preguntas">
            <thead class="thead-default">
                <tr>
                    <th>Nro.</th>
                    <th>Respuesta</th>
                    <th>Puntaje</th>
                    <th>Subprueba</th>
                    <th>Capacidad</th>
                    <th>Competencia</th>
                    @if($editar)
                        <th>Opciones</th>
                    @endif
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@section('scripts')

    @parent
    <script>
        var urlBase = "{{ url('admin/examenes') }}";
        var urlBasePregunta = "{{ url('admin/examenes/preguntas') }}";
        var urlPreguntas = "{{ route('pregunta.get', ['id' => $examen->id]) }}";

        var oTable = $('#table_preguntas').DataTable({
            "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "No existen registros creados",
                "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"
                }
            },
            processing: true,
            serverSide: true,
            destroy: true,
            responsive:true,
            ajax:{
                url: urlPreguntas,
                method: 'POST',
                error: function(error){
//                    alert("Ocurrio un problema al procesar los datos");
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'numero',
                    name:'numero',
                    "searchable": true,
                    render: function(data,type,row,meta){
                        return '<td> ' + (meta.row + 1) + ' </td>';
                    }
                },
                {
                    data:'rpta_correcta',
                    name:'rpta_correcta',
                    "searchable": false,
                    render: function(data,type,row){
                        switch (data) {
                            case '1': return '<td> A </td>';
                            case '2': return '<td> B </td>';
                            case '3': return '<td> C </td>';
                            case '4': return '<td> D </td>';
                            case '5': return '<td> E </td>';
                            default: return '<td> Error </td>';
                        }
                    }
                },
                {
                    data:'puntaje',
                    name:'puntaje',
                    "searchable": false
                },
                {
                    data:'subprueba',
                    name:'subprueba',
                    "searchable": true
                },
                {
                    data:'capacidad',
                    name:'capacidad',
                    "searchable": true
                },
                {
                    data:'competencia',
                    name:'competencia',
                    "searchable": true
                },
                    @if($editar)
                {
                    data:'id',
                    name:'id',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +'<button' +
                            ' class="btn btn-outline btn-circle btn-sm green-dark editar" data-id="'+data+'">'+
                            '<i class="fa fa-pencil"></i> Editar </button>'
                            +'<button' +
                            ' class="btn btn-outline btn-circle btn-sm red eliminar" data-id="'+data+'">'+
                            '<i class="fa fa-trash"></i> Eliminar </button>'
                            +'</td>'
                    }
                }
                    @endif

            ],
            "pageLength": -1,
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });

        $('button#add_pregunta').on('click', function () {
            this.blur();
            var button = $(this);
            var id = button.data('examen');
            button.prop("disabled",true);
            $.ajax({
                url: urlBasePregunta + "/registrar/" + id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('.modal-content').html(result);
                    $('#periodo_modal').modal({
                        show: true
                    });
                },
                error: function(error){
                },
                complete: function (result) {
                    button.prop('disabled', false);
                }
            });
            return false;
        });

        $('#table_preguntas').on('click','.editar', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBasePregunta + "/editar/" + id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('.modal-content').html(result);
                    $('#periodo_modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });

        $('#table_preguntas').on('click','.eliminar', function () {

            var id = $(this).data('id');
            swal({
                    title: '¿Está seguro de eliminar la pregunta?',
                    text: "Una vez borrada no se podrá recuperar",
                    type: "warning",
                    confirmButtonText: "Si",
                    cancelButtonText: " No",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: urlBasePregunta + "/eliminar",
                            type: "POST",
                            data: {
                                id: id
                            },
                            success: function (result) {
                                if (result == 'true') {
                                    swal({
                                        title: 'La pregunta fue eliminada',
                                        text: "El registro se eliminó exitosamente!",
                                        type: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: true
                                    });
                                    refreshPreguntas();
                                }
                                else {
                                    swal("No se puede eliminar", "Ocurrió un problema con su solicitud.", "error");
                                }
                            },
                            error: function(error){
                                swal("No se puede eliminar", "Ocurrió un problema con su solicitud.", "error");
                            }
                        });
                    }
                })
        });

        function refreshPreguntas() {
            oTable.draw();
        }
    </script>

@endsection