@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">Leave</h5>
                <div class="heading-elements">
                
                        <a href="#" 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>
			    <!-- 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="">All</option> -->
							<option value="{{$member->id}}">{{$member->full_name}}</option>
							@endforeach
						</select>
					</div>

					<div class="col-md-2">
						<select id="leaveTypeFilter" class="form-control select_form">
							<option value="">Select Leave Type</option>
							<option value="Full Day">Full Day</option>
							<option value="First Half">First Half</option>
							<option value="Second Half">Second Half</option>
							<option value="Late Arrival">Late Arrival</option>
							<option value="Early Departure">Early Departure</option>
						</select>
					</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-2">
						<input type="text" id="startDate" class="form-control" placeholder="Start Date" />
					</div>

					<div class="col-md-2">
						<input type="text" id="endDate" class="form-control" placeholder="Resume 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="event_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>Reasion</th>
                        <th>Leave Type</th>
						<th>Status</th>
                        <th>Start Date</th>
                        <th>Resume Date</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");
				//Select2Init();
				function capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
				var i=1;
				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,
					"searching": false,
					"lengthMenu": [lengthOptions, lengthOptionsNames],
					"searchDelay":'',
					"ajax": {
						"url": "{{route('leaves.leave-listing')}}",
						"type": "post",
						"data": function (d) {
							return $.extend({}, d, {
                                _token: attrcsrf,
								team_member: $('#teamMemberFilter').val(),
								leave_type: $('#leaveTypeFilter').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": "reason"},
						{"data": "leave_type"},
					
						{"data": "status"},
						{"data": "start_date_time"},
						{"data": "resume_date_time"},
						{
							"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, #leaveTypeFilter, #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'));
				});
			  });

			  $('#filterReset').click(function() {
				$('#teamMemberFilter').val('');
				$('#leaveTypeFilter').val('');
				$('#statusFilter').val('');
				$('#startDate').val('');
				$('#endDate').val('');
    		 });
		
			function deleteRecord(leave) {
				$('#event_table tbody input[class="dt-checkbox styled"]').prop('checked', false).uniform("refresh");
				$('#ids_' + leave).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('leave.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');
								}
							});
						}
					});

			  $(".select_form").select2({
               tags: true
             });
		</script>
        @endsection