@extends('template.layout')

@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        .td_center {
            text-align: center !important;
        }
        table thead tr th{
            text-align: center;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Gestión de Eventos
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title col-12">
            <div class="caption col-md-9">
                <div class="actions">
                    <!--<div class="btn-group">
                        <button class="btn blue btn-outline sbold " onclick="myModalShow()">
                            Registrar nuevo evento
                        </button>
                    </div>-->
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-hover nowrap dataTable dtr-inline" id="tbPersonal" style="text-align: center;">
                <thead>
                    <tr>
                        <th>Nombre del evento</th>
                        <th>Lugar</th>
                        <th>Fecha de Inicio</th>
                        <th>Fecha de Fin</th>
                        <th>Costo</th>
                        <th>Estado</th>
                        <th>Opciones</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>



@endsection

@section('scripts')
    <script src="{{asset('plugins/moment/moment.min.js')}}" type="text/javascript"></script>
    <script>

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var oTable = $('#tbPersonal').DataTable({
            "language": {
                "lengthMenu": "Mostrar _MENU_ registros",
                "sProcessing": "Procesando...",
                "sSearch": "Buscar:",
                "sRecords": "Registros:",
                "sInfoFiltered": "Registros",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros"
            },
            processing: true,
            serverSide: true,
            destroy: true,
            responsive:true,
            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'pdf'
            ],
            ajax:{
                url: '{{ route('gestion.eventos.post') }}',
                method: 'POST',
                error: function(error){
                }
            },
            columns:[
                {
                    data:'nombre',
                    name:'nombre'
                },
                {
                    data:'lugar',
                    name:'lugar'
                },
                {
                    data:'fecha_inicio',
                    name:'fecha_inicio',
                    render:function(data,type,row){
                        return '<td>'+moment(data).format('DD-MM-YYYY')+'</td>';
                    }
                },
                {
                    data:'fecha_fin',
                    name:'fecha_fin',
                    render:function(data,type,row){
                        return '<td>'+moment(data).format('DD-MM-YYYY')+'</td>';
                    }
                },
                {
                    data:'pago',
                    name:'pago',
                    render:function(data,type,row){
                        var aux = "";
                        if(data == 1)
                            return '<td>'+'Si'+'<td>'
                        else
                            return '<td>'+'Libre'+'<td>'
                    }
                },
                {
                    data:'activo',
                    name:'activo',

                    render:function(data,type,row){
                        var aux = "";
                        if(data == 1)
                            return '<td>'+'Vigente'+'<td>'

                        else
                            return '<td>'+'Pasado'+'<td>'

                    }
                },
                {
                    data: 'id',
                    name: 'id',
                    render: function(data,type,row){
                        var aux = "";
                        if(row.activo == 1){
                            aux = 'checked="checked"';
                        }
                        return '<td class="td_center">'+
                            '<a onclick="Inscritos('+data+')" title="Ver inscritos"'+
                            ' class="btn btn-outline btn-circle btn-sm yellow">'+
                            '<i class="fa fa-users"></i>  </a>'+'</td>'+
                            '<a onclick="Detalle('+data+')" title="Ver detalle"'  +
                            'class="btn btn-outline btn-circle dark btn-sm black">'+
                            '<i class="fa fa-eye"></i></a>';

                    }
                }

            ],
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [ 0, 1, 2,3,4, 5 ]
                    },
                    title: 'Listado de eventos'
                },{
                    extend: 'pdf',
                    exportOptions: {
                        columns: [ 0, 1, 2,3,4, 5 ]
                    },
                    pageSize: 'LEGAL',
                    customize: function(doc) {
                        //pageMargins [left, top, right, bottom]
                        doc.pageMargins = [ 120, 20, 20, 20 ];
                    },
                    title: 'Listado de eventos'
                }

            ]
        });

        function Inscritos($id) {
            window.location.href = "{{ url('evento/inscrito') }}"+"/"+ $id;
        }

        function Detalle($id){
            window.location.href = "{{ url('evento/detalle/') }}"+"/"+ $id;
        }

    </script>

@endsection