@extends('layouts.admin')
@section('content')
<style>
	.mar-21 {
		margin-left: -19px;
		margin-top: -18px;
	}
	
    .select2-results__option--highlighted {
			background-color: #c6c1c1 !important;
			color: black;
		}
		.dt-hide{
			display: none;
		}
   
		.select2-container {
           width: 100% !important;
		   border-color: #2196f3 !important;
         }
		 .select2-selection {
            border-color: #2196f3!important; 
        }
		
		
</style>
<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title">Event</h5>
		<div class="heading-elements">
							<a href="{{route('event.create')}}" data-popup="custom-tooltip" data-original-title="Add Event"  title="Add Event" class="btn bg-success-400 btn-float rounded-round legitRipple">
					<i class="fa fa-plus"></i>
				</a>
			
							<button type="button" data-popup="custom-tooltip" data-original-title="Delete Event" title="Delete Event" class="btn bg-danger-400 btn-float rounded-round legitRipple dt-delete-record">
					<i class="icon-trash"></i>
				</button>
			
			<button type="button" class="btn btn-xs border-slate-400 text-slate-400 btn-flat  btn-icon btn-rounded exportCsv" data-toggle="tooltip" title="Export Report">
				<i class="icon-file-excel" aria-hidden="true"></i>
			</button>
			<a style="display: none;" href="" class="exportAnchor" target="_blank"></a>
		</div>
	</div>
	<!-- Top Banner section  -->
	<div class="table-responsive">
		<table id="event_table" class="table dt-datatable">
			<thead>
			<tr>
				<th style="padding: 10px 10.75px;"><input type="checkbox" class="datatable-select-all"></th>
				<th>Event Title</th>
				<th>Start Date</th>
				<th>End Date</th>
				<th>Is Active</th>
				<th>Updated By</th>
				<th>Updated On</th>
				<th>Action</th>
			</tr>
			</thead>
		</table>
    </div>
</div>

		<!--Display the Events list-->
		<script>
			$(document).ready(function () {
                var attrcsrf   = "{{ csrf_token() }}";
				customToolTip();
				checkBoxRefresh("datatable-checkbox");
				checkBoxRefresh("datatable-select-all");
				dt_DataTable = $('#event_table').DataTable({
					"dom": '<"datatable-header"fl><"datatable-scroll-wrap"tr><"datatable-footer"ip>',
					"language": datatableLang,
					"processing": true,
					"serverSide": true,
					"autoWidth" : false,
					"fixedHeader": false,
					"lengthMenu": [lengthOptions, lengthOptionsNames],
					"searchDelay":'',
					"ajax": {
						"url": "{{route('events.event-listing')}}",
						"type": "post",
						"data": function (d) {
							return $.extend({}, d, {
                                _token: attrcsrf
							});
						}
					},
					"initComplete": function () {
						$('.dataTables_filter').css('float', 'left');
						$('.dataTables_length').css('float', 'right');
           			 },
					"iDisplayLength": "",
					"order": [[0, "DESC"]],
					"stripeClasses": [ 'alpha-slate', 'even-row' ],
					"columns": [
						{
							"data": "event_id",
							"render": function (data, type, row) {
								return '<label class="form-check-label"><input type="checkbox" class="datatable-checkbox" id="ids_' + row['event_id'] + '" name="ids[]" value="' + row['event_id'] + '"/></label>';
							},
							"sortable": false,
							"searchable": false
						},
						{"data": "event_title"},
						{"data": "start_date"},
						{"data": "end_date"},
						{"data": "is_active",
							"render": function (data, type, row) {
								var is_checked = '';
								var id = row['event_id'];
								if (data == 1) {
									is_checked = 'checked="checked"';
								}
								var html = '';
								html += '<div class="checkbox checkbox-switchery switchery-xs">';
								html += '<label>';
								html += '<input data-id="' + id + '" type="checkbox" class="datatable-list-switchery dt-active-status" ' + is_checked + ' data-status="' + row.is_active + '">';
								html += '</label>';
								html += '</div>';
								return html;
							},
							"searchable": false
						},
						{"data": "updated_by"},
						{"data": "updated_at"},
						{
							"data": "action_button",
							"class": "no_click_allowed",
							"sortable": false,
							"searchable": false
						},
						
					],
					
					fnDrawCallback: function (oSettings) {
						customToolTip();
						checkBoxRefresh("datatable-checkbox");
						switcheryKeyGen("datatable-list-switchery");
					}
				});
				dtDataTableSearch();
				$('.exportCsv').click(function(){
					$(this).removeClass(".exportCsv");
					var dataTableParams = dt_DataTable.ajax.params();
					url = '';
					var recursiveEncoded = $.param( dataTableParams);
					$('.exportAnchor').attr('href',url+"?"+recursiveEncoded);
					$('.exportAnchor')[0].click();
				});		
			});

			function deleteRecord(event) {
				$('#event_table tbody input[class="dt-checkbox styled"]').prop('checked', false).uniform("refresh");
				$('#ids_' + event).prop('checked', true).uniform("refresh");
				$('.dt-delete-record').click();
			}

		    //Delete Record
			$(document).on('click', '.dt-delete-record', function () {
						var deleteElement = $('#event_table tbody input[class="datatable-checkbox"]:checked');
						var selectedLength = deleteElement.length;
						if (selectedLength == 0) {
							swalInit.fire({
								title: "Info",
								text: "Delete info",
								confirmButtonColor: "",
								type: "info"
							}).then(function () {
								return false;
							});
						} else {
							var deleteId = [];
							$.each(deleteElement, function (i, ele) {
								deleteId.push($(ele).val());
							});
							swalInit.fire({
								title: "Delete",
								text: "are you sure want to delete this record ? ",
								type: "warning",
								showCancelButton: true,
								closeOnConfirm: false,
								confirmButtonColor: "",
								showLoaderOnConfirm: true
							}).then(function(result) {
								if(result.value) {
									$.ajax({
										type: "DELETE",
										url: "{{ route('event.destroy', ':id') }}".replace(':id', deleteId.join(',')),
										dataType: "json",
										data: {event_id: deleteId},
										success: function (data) {
											if (data['success']) {
												swalInit.fire({
													title: "Success",
													text: data['msg'],
													type: "success",
													confirmButtonColor: "",
												}).then(function () {
													dt_DataTable.ajax.reload(null, false);
												});
											} else {
												swalInit.fire({
													title: "Error",
													text: data['msg'],
													type: "error",
													confirmButtonColor: ""
												}).then(function () {
													dt_DataTable.ajax.reload(null, false);
												});
											}
										}
									});
								} else {
									$('#event_table input').prop('checked', false).uniform('refresh');
								}
							});
						}
					});

			// Status change function
            $(document).on('click', '.dt-active-status', function () {
                    var eventId = $(this).attr('data-id');
                    var isActive = $(this).attr("data-status");
                    var newStatus = isActive == 1 ? 0 : 1;
                    $.ajax({
                        type: "POST",
                        url: "{{ route('events.change-status') }}",
                        dataType: "json",
                        data: {
                            event_id: eventId,
                            status: newStatus,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function (data) {
                            if (data.success) {
                                swal.fire({
                                    title: "Success",
                                    text: data.msg,
                                    icon: "success",
                                }).then(function () {
                                    dt_DataTable.ajax.reload(null, false);
                                });
                            } else {
                                swal.fire({
                                    title: "Error",
                                    text: data.msg,
                                    icon: "error"
                                });
                            }
                        }
                    });
                });
		</script>
        @endsection