@extends('index-left-sidebar')

@section('content')
	<div id="krik-single-event-sessions">
		<div class="panel krik-panel">
			<div class="panel-heading">
				<h3 class="krik-single-event-title">{{ $event_info->name }}</h3>
				
				<h4 class="krik-single-event-info">
					@php
						$event_start = new DateTime($event_info->start_ts);
						$event_end = new DateTime($event_info->end_ts);
						$event_days_diff = $event_start->diff($event_end)->d;
					@endphp
					@if($event_info->type_by_venue == 'physical')
						@if ($event_days_diff > 0)
							{{ date("d.m.Y. H:i", strtotime($event_info->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($event_info->end_ts)) . ', ' . $event_info->venue_name }}
						@else
							{{ date("d.m.Y. H:i", strtotime($event_info->start_ts)) . ', ' . $event_info->venue_name }}
						@endif
					@else
						@if ($event_days_diff > 0)
							{{ date("d.m.Y. H:i", strtotime($event_info->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($event_info->end_ts)) }}
						@else
							{{ date("d.m.Y. H:i", strtotime($event_info->start_ts)) }}
						@endif
					@endif
				</h4>
				
				
				<form method="POST">
					<button type="submit" class="btn krik-btn-export"><i class="fa fa-download" aria-hidden="true"></i>Export</button>
					{{ csrf_field() }}
				</form>
			</div>
		</div>
	
		<div class="col-md-12">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="pull-left">
						<h3 class="panel-title">Session attendees - {{ $session->name }}</h3>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="table-responsive">
					<table class="table table-striped" id="krik-sessions-table" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th style="max-width: 10px !important;">#</th>
				                <th>Lead name</th>
				                <th>Company</th>
				                <th>E-mail</th>
				                <th>Telephone</th>
				                <th>Checked at</th>
							</tr>
						</thead>
					</table>
				</div>
				<script>
					var table = $('#krik-sessions-table').DataTable({
						processing: true,
						serverSide: true,
						ajax: {
							url: '{!! route('sessions-report.data') !!}',
							data: {
								session_code: '{{ $session->session_code }}'
							},
							type: 'POST',
							headers: {
								'X-CSRF-TOKEN': '{{ csrf_token() }}'
							}
						},
						scrollCollapse: true,
						searching: true,
						info: false,
						bSort: false,
						autoWidth: true,
						columns: [
							{
								orderable: false,
								searchable: false,
								className: 'no-reorder',
								render: function() { return ''; }
							},
							{ data: 'name', name: 'name' },
							{ data: 'company', name: 'company' },
							{ data: 'email', name: 'email' },
							{ data: 'phone', name: 'phone' },
							{ data: 'attended_ts', name: 'attended_ts' }
						],
						language: {
							search: "_INPUT_",
							searchPlaceholder: "Search",
							lengthMenu: "_MENU_",
							processing: "Loading data, please wait...",
							zeroRecords: "No attendees in session",
							buttons: {
								colvis: 'Columns'
							}
						},
						paging: true,
						pagingType: 'simple_numbers',
						ordering: true,
						order: [
							[ 5, "asc" ]
						],
						orderClasses: false,
						stateSave: false,
						deferRender: true,
						colReorder: true,
						pageLength: 10,
						lengthMenu: [[ 10, 20, 50, 100, -1 ], [ 10, 20, 50, 100, 'All' ]],
						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)',
										exportOptions: {
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'copyHtml5',
										text: 'Copy (selected entries from current page)',
										exportOptions: {
											modifier: {
												selected: true
											},
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'print',
										text: 'Print (all entries from current page)',
										exportOptions: {
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'print',
										text: 'Print (selected entries from current page)',
										exportOptions: {
											modifier: {
												selected: true
											},
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'excelHtml5',
										text: 'Excel (all entries from current page)',
										exportOptions: {
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'excelHtml5',
										text: 'Excel (selected entries from current page)',
										exportOptions: {
											modifier: {
												selected: true
											},
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'csvHtml5',
										text: 'CSV (all entries from current page)',
										exportOptions: {
											columns: [1,2,3,4,5]
										}
									},
									{
										extend: 'csvHtml5',
										text: 'CSV (selected entries from current page)',
										exportOptions: {
											modifier: {
												selected: true
											},
											columns: [1,2,3,4,5]
										}
									}
								]
							},
							'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 = table.page.len() * table.page.info().page + 1 + i; });
						}
					});
					
					table.on('column-reorder', function () {
	                    table.column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) { cell.innerHTML = table.page.len() * table.page.info().page + 1 + i; });
	                });
		        </script>
			</div>
		</div>

	</div>
@endsection