@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">
        Mis eventos
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title col-12">
            <div class="caption">
                <h4 class="modal-title caption-subject font-blue-secondary sbold uppercase"> Filtro</h4>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-offset-3 col-md-6">
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <h4><i class="glyphicon glyphicon-search"></i>  Búsqueda avanzada</h4>
                        </div>
                        <div class="col-md-6">
                            <h6 style="margin-bottom: 0px; margin-top: 16px">Por: Fecha de evento</h6>
                        </div>
                        <input id="datetimepicker" style="text-align: center" class="form-control form-control-inline input-md date-picker" type="search" value="">
                    </div>
                </div>
            </div>
            <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 del evento</th>
                        <th>Fecha de inscripción</th>
                        <th>Ver detalle</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,
            ajax:{
                url: '{{ route('miseventos.post') }}',
                method: 'POST',
                error: function(error){
                }
            },
            initComplete: function () {
                $('#datetimepicker').datepicker({
                    format: "dd/mm/yyyy",
                    locale: 'pe',
                    autoclose: true,
                    buttonText: "Seleccionar fecha",
                    closeText: "Limpiar"
                }).on('change',function(){
                    console.log(oTable.column(2).search($(this).val()).draw());

                });
            },
            columns:[
                {
                    data:'nombre',
                    name:'nombre'
                },
                {
                    data:'lugar',
                    name:'lugar'
                },
                {
                    data:'fecha_inicio',
                    name:'fecha_inicio'
                },
                {
                    data:'fecha_inscripcion',
                    name:'fecha_inscripcion'
                },
                {
                    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="Detalle('+data+')" title="Ver detalle"'  +
                            'class="btn btn-outline btn-circle dark btn-sm black">'+
                            '<i class="fa fa-eye"></i></a></td>';

                    }
                }

            ]
        });



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

    </script>

@endsection