@extends('index')

@section('content')
	<div class="krik-lead" id="krik-options-categories">
        <br>
		<div class="row">
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-left">
                                <h3 class="panel-title">Insights</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="panel-body table-responsive">
                            <table class="table table-striped" id="krik-leads-table" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th style="max-width: 10px !important;">#</th>
                                        <th>Company</th>
                                        <th>First name</th>
                                        <th>Last name</th>
                                        <th>E-mail</th>
                                        @foreach($events as $key => $event)
                                            <th data-event-time="{{ $event->start_ts }}">{{ $event->name }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th><input type="text" class="table-filter" placeholder="Company"></th>
                                        <th><input type="text" class="table-filter" placeholder="First name"></th>
                                        <th><input type="text" class="table-filter" placeholder="Last name"></th>
                                        <th><input type="text" class="table-filter" placeholder="E-mail"></th>
                                        @foreach($events as $key => $event)
                                            <th><input type="text" class="table-filter" placeholder="{{ $event->name }}"></th>
                                        @endforeach
                                    </tr>
                                </tfoot>
                            </table>

                            <script>
                                $(function() {
                                    var table = $('#krik-leads-table').DataTable({
                                        processing: true,
                                        serverSide: false,
                                        ajax: {
                                            url: '{!! route('allInsights.data') !!}',
                                            type: 'POST',
                                            headers: {
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            }
                                        },
                                        scrollCollapse: true,
                                        searching: true,
                                        info: false,
                                        bSort: true,
                                        autoWidth: true,
                                        order: [[1, 'asc'], [3, 'asc']],
                                        orderClasses: false,
                                        stateSave: false,
                                        // deferRender: true,
                                        colReorder: true,
                                        columns: [
                                            {
                                                orderable: false,
                                                searchable: false,
                                                className: 'no-reorder',
                                                render: function() { return ''; }
                                            },
                                            { data: 'company_name'},
                                            { data: 'first_name' },
                                            { data: 'last_name' },
                                            { data: 'email' },
                                            @foreach($events as $key => $event)
                                                {
                                                    name: 'event_id_{{ $event->id }}',
                                                    render: function(data, type, full, meta) {
                                                        if(full.event_id_{{ $event->id }} == 'not invited') {
                                                            return '<span class="event-not-invited">Not invited</span>';
                                                        } else if(full.event_id_{{ $event->id }} == 'not responded') {
                                                            return '<span class="event-not-responded">Not responded</span>';
                                                        } else if(full.event_id_{{ $event->id }} == 'registered') {
                                                            return '<span class="event-registered">Registered</span>';
                                                        } else if(full.event_id_{{ $event->id }} == 'did not come') {
                                                            return '<span class="event-did-not-come">Did not come</span>';
                                                        } else if(full.event_id_{{ $event->id }} == 'attended') {
                                                            return '<span class="event-attended">Attended</span>';
                                                        } else {
                                                            return 'No information';
                                                        }
                                                    }
                                                },
                                            @endforeach
                                        ],
                                        language: {
                                            search: "_INPUT_",
                                            searchPlaceholder: "Search",
                                            lengthMenu: "_MENU_",
                                            processing: "Loading data, please wait...",
                                            zeroRecords: "No data to display",
                                            buttons: {
                                                colvis: 'Columns'
                                            }
                                        },
                                        pageLength: 10,
                                        lengthMenu: [[ 10, 20, 50, 100, -1 ], [ 10, 20, 50, 100, 'All' ]],
                                        paging: true,
                                        pagingType: 'simple_numbers',
                                        select: {
                                            style: 'multi',
                                            selector: 'td:not(.no-selecting)'
                                        },
                                        dom: 'Bfrtilp',
                                        bInfo: true,
                                        buttons: [
                                            {
                                                extend: 'collection',
                                                text: 'Export',
                                                buttons: [
                                                {
                                                    extend: 'copyHtml5',
                                                    text: 'Copy (all entries from current page)'
                                                },
                                                {
                                                    extend: 'copyHtml5',
                                                    text: 'Copy (selected entries from current page)',
                                                    exportOptions: {
                                                    modifier: {
                                                        selected: true
                                                    }
                                                    }
                                                },
                                                {
                                                    extend: 'print',
                                                    text: 'Print (all entries from current page)'
                                                },
                                                {
                                                    extend: 'print',
                                                    text: 'Print (selected entries from current page)',
                                                    exportOptions: {
                                                    modifier: {
                                                        selected: true
                                                    }
                                                    }
                                                },
                                                {
                                                    extend: 'excelHtml5',
                                                    text: 'Excel (all entries from current page)'
                                                },
                                                {
                                                    extend: 'excelHtml5',
                                                    text: 'Excel (selected entries from current page)',
                                                    exportOptions: {
                                                        modifier: {
                                                            selected: true
                                                        }
                                                    }
                                                },
                                                {
                                                    extend: 'csvHtml5',
                                                    text: 'CSV (all entries from current page)'
                                                },
                                                {
                                                    extend: 'csvHtml5',
                                                    text: 'CSV (selected entries from current page)',
                                                    exportOptions: {
                                                        modifier: {
                                                            selected: true
                                                        }
                                                    }
                                                }
                                            ]
                                        },
                                        'colvis'
                                        ],
                                        initComplete: function(settings, json) {
                                            $('[data-info="tooltip"]').tooltip();
                                        },
                                        createdRow: function () {
                                            table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                                                cell.innerHTML = i+1;
                                            });
                                        }
                                    });

                                    table.on('order.dt search.dt column-reorder', function () {
                                        table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                                            cell.innerHTML = i+1;
                                        });
                                    }).draw();
                                    
                                    table.columns().every(function () {
                                        let that = this;
                                        $('input', this.footer()).on('keyup change', function () {
                                            if (that.search() !== this.value) {
                                                that.search(this.value).draw();
                                            }
                                        })
                                    })
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
@endsection