@extends('template.layout')

@section('styles')
    <style>
        .select2-dropdown {
            z-index: 99999;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Gestión de Encuestas
    </h1>

    <div class="portlet light bordered">
        <div class="portlet-title col-12">
            <div class="caption col-md-9">
                Lista de Encuestas Generadas
            </div>
            <div class="actions">
                <div class="btn-group">
                    <button class="btn btn-primary" data-target="#add_encuesta" data-toggle="modal">
                        <i class="fa fa-plus"></i>
                        <span class="hidden-xs"> Registrar Encuesta </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-hover" id="table_gestion">
                <thead class="thead-default">
                <tr>
                    <th>Nombre de la Encuesta</th>
                    <th>Fecha de Publicación</th>
                    <th>Fecha de Finalización</th>
                    <th>Accion</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>


    <div id="modal_gestion" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div id="modal_content" class="modal-content">
            </div>
        </div>
    </div>

    <div id="add_encuesta" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title caption-subject font-blue-secondary sbold uppercase"> A&ntilde;adir una Nueva Encuesta </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <a id="import" class="dashboard-stat dashboard-stat-v2 blue" href="#">
                                    <div class="visual">
                                        <i class="icon-folder-alt"></i>
                                    </div>
                                    <div class="details">
                                        <div class="number" style="margin-left: 30px;">
                                            <span data-counter="counterup" data-value="1349">Importar Encuesta</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <a id="add" href="#" class="dashboard-stat dashboard-stat-v2 blue">
                                    <div class="visual">
                                        <i class="icon-plus"></i>
                                    </div>
                                    <div class="details">
                                        <div class="number" style="margin-left: 30px;">
                                            <span data-counter="counterup" data-value="1349">Agregar Encuesta</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var urlBase = "{{ url('admin/encuestas') }}";
        var urlData = "{{ route('encuesta.admin.get') }}";

        var oTable = $('#table_gestion').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: urlData,
                method: 'GET',
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'nombre',
                    name:'nombre',
                    "searchable": true
                },
                {
                    data:'fecha_publicacion',
                    name:'fecha_publicacion',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +Date.parse(data).toString("dd/MM/yyyy")+
                            '</td>'
                    }
                },
                {
                    data:'fecha_finalizacion',
                    name:'fecha_finalizacion',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +Date.parse(data).toString("dd/MM/yyyy")+
                            '</td>'
                    }
                },
                {
                    data:'id',
                    name:'id',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +'<a class="button-a" href="' + urlBase + "/editar/" + data + '" style="color: #1b76d6" title="Editar"><i class="fa fa-pencil-square-o"></i></a>'
                            +'<button class="eliminar button-a" data-id="' + data + '" style="color: #EC6248" title="Eliminar"><i class="fa fa-trash-o"></i></button>'
                            +'<a href="'+ urlBase + '/enviar/' + data + '" class="enviar button-a" data-id="' + data + '" style="color: #006600" title="Enviar encuesta"><i class="icon-action-redo"></i></a>'
                            +'</td>'
                    }
                }
            ],
            "pageLength": 10,
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });
        var cargando = false;

        $('a#add').on('click', function () {
            if (!cargando) {
                cargando = true;
                $('#add_encuesta').modal('toggle');

                $.ajax({
                    url: urlBase + "/registrar",
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#modal_content').html(result);
                        $('#modal_gestion').modal({
                            show: true
                        });
                    },
                    error: function(error){
                        console.log(error);
                    },
                    complete: function(error) {
                        cargando = false;
                    }
                });
            }
        });

        $('a#import').on('click', function () {
            if (!cargando) {
                cargando = true;
                $('#add_encuesta').modal('toggle');
                $.ajax({
                    url: urlBase + "/importar",
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#modal_content').html(result);
                        $('#modal_gestion').modal({
                            show: true
                        });
                    },
                    error: function(error){
                        console.log(error);
                    },
                    complete: function(error) {
                        cargando = false;
                    }
                });
            }
        });

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

            var id = $(this).data('id');
            swal({
                    title: 'Está seguro de eliminar esta encuesta?',
                    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: urlBase + "/eliminar",
                            type: "POST",
                            data: {
                                id: id
                            },
                            success: function (result) {
                                if (result === "true") {
                                    swal({
                                        title: 'La encuesta fue eliminada',
                                        text: "El registro se eliminó exitosamente!",
                                        type: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: true
                                    });
                                    tableRefresh();
                                }
                                else {
                                    swal("La encuesta ya ha sido enviada!", "No se puede eliminar la encuesta!", "error");
                                }
                            },
                            error: function(error){
                                swal("No se puede eliminar", "Ocurrió un problema con su solicitud.", "error");
                            }
                        });
                    }
                })
        });

        function tableRefresh() {
            oTable.draw();
        }

    </script>
@endsection