@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>
				
                @role('admin')
                    <a href="{{ url('/events/' . $event_code . '/sessions/manage') }}" class="btn krik-btn-manage"><i class="fa fa-cogs"></i>Manage sessions</a>
                @endrole
			</div>
		</div>
	
		<div class="col-md-12">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="pull-left">
						<h3 class="panel-title">Check Sessions</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>Name</th>
								<th>Location</th>
								<th>Start</th>
								<th>End</th>
								<th>Attendees</th>
							</tr>
						</thead>
					</table>
				</div>
				<script>
					var table = $('#krik-sessions-table').DataTable({
						processing: true,
						serverSide: true,
						ajax: {
							url: '{!! route('sessions.data') !!}',
							data: {
								event_code: '{{ $event_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 ''; }
							},
							{
								name: 'name',
								className: 'no-selecting',
								render: function(data, type, full, meta) {
									return '<a href="{{ url('/events/' . $event_code . '/sessions') }}/' + full.session_code + '"><span class="krik-manage-name">' + full.name + '</span></a>';
								}
							},
							{ data: 'location', name: 'location' },
							{ data: 'start_ts', name: 'start_ts' },
							{ data: 'end_ts', name: 'end_ts' },
							{
								name: 'name',
								className: 'no-selecting',
								render: function(data, type, full, meta) {
									if(full.attendees == 0) {
										return '<span class="krik-manage-attended-none">0</span>';
									} else {
										return '<a href="{{ url('/events/' . $event_code . '/sessions') }}/' + full.session_code + '/report"><span class="krik-manage-attended">' + full.attendees + '</span></a>';
									}
								}
							}
						],
						language: {
							search: "_INPUT_",
							searchPlaceholder: "Search",
							lengthMenu: "_MENU_",
							processing: "Loading data, please wait...",
							zeroRecords: "No sessions",
							buttons: {
								colvis: 'Columns'
							}
						},
						paging: true,
						pagingType: 'simple_numbers',
						ordering: true,
						order: [
							[ 3, "asc" ],
							[ 4, "asc" ],
							[ 2, "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 = 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();
		        </script>
			</div>
		</div>

	</div>
@endsection