@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;
                }
                .filter-section {
					  margin-left: 15px; 
				      margin-right: 15px; 
			    }
				@media (max-width: 768px) {
				.mobile-element {
					padding-left: 9px;
					margin-bottom: 6px;
				}
               }
        </style>
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">Report</h5>
                <div class="heading-elements">
                
                        <a href="{{route('reporting-form')}}" data-popup="custom-tooltip" data-original-title="Add report"  title="Add report" 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 report" title="Delete report" 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>
			    <!-- Filter section -->
				 
				<div class="filter-section row">
					<div class="col-md-2">
						<select id="teamMemberFilter" class="form-control select_form">
							<option value="">Select Team Member</option>
							@foreach ($teamMembers as $member)
							<option value="{{$member->id}}">{{$member->full_name}}</option>
							@endforeach
						</select>
					</div>
                    <div class="col-sm-1" style="max-width: 11.66667%;">
                        <input lass="form-check-input" type="radio" name="complaint_issue" id="appreciation_issue"
                            value="2"  {{ old('complaint_issue') == '2' ? 'checked' : '' }} checked />
                        Appreciation
                        <br><input type="radio" type="radio" name="complaint_issue" id="complaint_issue"
                            value="1" {{ old('complaint_issue') == '1' ? 'checked' : '' }} />
                        Complaint / Issue
                        <label id="for_member_or_with_guest-error" class="validation-invalid-label" for="for_member_or_with_guest"></label>
                    </div>

					<div class="col-md-2" id="appreciation_type_row">
						<select id="apprTypeFilter" class="form-control select_form" style="display: {{ old('complaint_issue') == '2' ? 'block' : 'none' }};">
							<option value="">Select appreciation type</option>
							@foreach ($appreciation_type as $type)
							<option value="{{$type->id}}">{{$type->name}}</option>
							@endforeach
						</select>
					</div>
                    
					<div class="col-md-2" id="issue_type_row" style="display: {{ old('complaint_issue') == '1' ? 'block' : 'none' }}">
						<select id="issueTypeFilter" class="form-control select_form">
							<option value="">Select issue type</option>
							@foreach ($issue_type as $type)
							<option value="{{$type->id}}">{{$type->name}}</option>
							@endforeach
						</select>
					</div>

                    <div class="col-sm-1" style="display: {{ old('topic') == '1' ? 'block' : 'none' }};max-width: 11.66667%; "  id="select_topic_row">
                        <input lass="form-check-input" type="radio" name="topic" id="topic"
                            value="general" />
                            General 
							<br><input type="radio" type="radio" name="topic" id="topic"
                            value="moderate"/>
                            Moderate 
                            <input type="radio" type="radio" name="topic" id="topic"
                            value="serious"/>
                            Serious 
                    </div>

					<div class="col-md-2">
						<select id="statusFilter" class="form-control select_form">
							<option value="">Select Status</option>
							<option value="pending">Pending</option>
							<option value="approved">Approved</option>
							<option value="rejected">Rejected</option>
						</select>
					</div>

					<div class="col-md-1">
						<input type="text" id="startDate" class="form-control" placeholder="Start Date" />
					</div>

					<div class="col-md-1">
						<input type="text" id="endDate" class="form-control" placeholder="End Date" />
					</div>
					<div class="col-md-1 mobile-element" style="padding-left:85px;"> 
                        <button id="filterReset" style="width:84px" class="btn bg-secondary" >Reset</button>
                    </div><div class="col-md-1" >
						<button id="filterSubmit" class="btn bg-success-400">Submit</button>
					</div>
				</div>
            <!-- Top Banner section  -->
            <div class="table-responsive">
				
                <table id="report_table" class="table dt-datatable">
                    <thead>
                    <tr>
                        <th style="padding: 10px 10.75px;"><input type="checkbox" class="datatable-select-all"></th>
                        <th>Sr. No.</th>
                        <th>Team member</th>
                        <th>Type</th>
						<th>Status</th>
                        <th>Created At</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");
				function capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
				$('#filterReset').click(function() {
					$('#teamMemberFilter').val('').trigger('change');
                    $('input[type="radio"][name="complaint_issue"]').prop('checked', false);
                    $('input[type="radio"][name="topic"]').prop('checked', false);
                    $('#apprTypeFilter').val('').trigger('change');
					$('#issueTypeFilter').val('').trigger('change');
					$('#statusFilter').val('').trigger('change');
					$('#startDate').val('');
					$('#endDate').val('');
                });
				var i=1;
				dt_DataTable = $('#report_table').DataTable({
					"dom": '<"datatable-header"fl><"datatable-scroll-wrap"tr><"datatable-footer"ip>',
					"language": datatableLang,
					"processing": true,
					"serverSide": true,
					"autoWidth" : false,
					"fixedHeader": false,
					"searching": false,
					"lengthMenu": [lengthOptions, lengthOptionsNames],
					"searchDelay":'',
					"ajax": {
						"url": "{{route('report.report-listing')}}",
						"type": "post",
						"data": function (d) {
							return $.extend({}, d, {
                                _token: attrcsrf,
								team_member: $('#teamMemberFilter').val(),
								complaint_issue: $('input[name="complaint_issue"]:checked').val(),
								appreciation_type: $('#apprTypeFilter').val(),
								issue_type: $('#issueTypeFilter').val(),
                                topic:$('input[name="topic"]:checked').val(),
								status: $('#statusFilter').val(),
								start_date: $('#startDate').val(),
								end_date: $('#endDate').val()
							});
						}
					},
					"initComplete": function () {
						
						$('.dataTables_filter').css('float', 'left');
						$('.dataTables_length').css('float', 'right');
           			 },
					"iDisplayLength": "",
					"order": [[0, "DESC"]],
					"stripeClasses": [ 'alpha-slate', 'even-row' ],
					"columns": [
						{
							"data": "id",
							"render": function (data, type, row) {
								return '<label class="form-check-label"><input type="checkbox" class="datatable-checkbox" id="ids_' + row['id'] + '" name="ids[]" value="' + row['id'] + '"/></label>';
							},
							"sortable": false,
							"searchable": false
						},
						{
						"render": function (data, type, row, meta) {
							return meta.row + meta.settings._iDisplayStart + 1;
						},
						"sortable": false,
						"searchable": false
					     },
						{
						  "data": "user.first_name", 
							"render": function (data, type, row) {
								var full_user_name = row.user.first_name+' '+row.user.middle_name+' '+row.user.last_name; 
								
								return row.user && full_user_name ? capitalizeFirstLetter(full_user_name): 'Name is not exist';  
							}
						},
						
						{"data": "reporting_type"},
                        {"data": "status"},
						
						{"data": "created_at"},
						
						{
							"data": "action_button",
							"class": "no_click_allowed",
							"sortable": false,
							"searchable": false
						},
						
					],
					
					fnDrawCallback: function (oSettings) {
						customToolTip();
						checkBoxRefresh("datatable-checkbox");
						switcheryKeyGen("datatable-list-switchery");
					}
				});

				$('#filterSubmit').click(function () {
                    dt_DataTable.draw();
                 });

				$('#teamMemberFilter, input[name="complaint_issue"], #apprTypeFilter, input[name="topic"],#issueTypeFilter,#statusFilter, #startDate, #endDate').change(function () {
					dt_DataTable.draw();
				});
				
				dtDataTableSearch();
				$("#startDate").daterangepicker({
				singleDatePicker: true,
				showDropdowns: true,
				autoUpdateInput: false,
				timePickerIncrement: 15, 
				locale: {
					format: 'DD-MM-YYYY' 
				}
				})
				.on('apply.daterangepicker', function(ev, picker) {
					$(this).val(picker.startDate.format('DD-MM-YYYY'));
				});

				$("#endDate").daterangepicker({
					singleDatePicker: true,
					showDropdowns: true,
					autoUpdateInput: false,
					timePickerIncrement: 15, 
					locale: {
						format: 'DD-MM-YYYY' 
					}
				})
				.on('apply.daterangepicker', function(ev, picker) {
					$(this).val(picker.endDate.format('DD-MM-YYYY'));
				});
			  });
		
			function deleteRecord(report) {
				$('#report_table tbody input[class="dt-checkbox styled"]').prop('checked', false).uniform("refresh");
				$('#ids_' + report).prop('checked', true).uniform("refresh");
				$('.dt-delete-record').click();
			}

		    //Delete Record
			$(document).on('click', '.dt-delete-record', function () {
						var deleteElement = $('#report_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('report.delete', ':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 {
									$('#report_table input').prop('checked', false).uniform('refresh');
								}
							});
						}
					});

					$(".select_form").select2({
            tags: true
        });
		</script>
        <script>
       document.addEventListener('DOMContentLoaded', function() {
        const complaintIssueRadio = document.getElementById('complaint_issue');
        const appreciationRadio = document.getElementById('appreciation_issue');
        const selectTopicRow = document.getElementById('select_topic_row');
        const appreciationTypeRow = document.getElementById('appreciation_type_row');
        const issue_type = document.getElementById('issue_type_row');

        function toggleSections() {
		 var col_md;
            if (complaintIssueRadio.checked) {
                issue_type.style.display = '';
                selectTopicRow.style.display = '';
                appreciationTypeRow.style.display = 'none';
            } else if (appreciationRadio.checked) {
				col_md=1;
                selectTopicRow.style.display = 'none';
                appreciationTypeRow.style.display = '';
                issue_type.style.display = 'none';
            }
        }
        complaintIssueRadio.addEventListener('change', toggleSections);
        appreciationRadio.addEventListener('change', toggleSections);
        toggleSections();
    });
    </script>
 @endsection