@extends('layouts.app')

@section('title', 'leave')

@section('content')

<!-- Page Content -->
<div class="content container-fluid">

	<!-- Page Header -->
	<div class="page-header">
		<div class="row align-items-center">
			<div class="col">
				<h3 class="page-title">Leaves Stats</h3>								
			</div>
			<div class="col-auto float-right ml-auto">
				<a href="{{ route('requestLeave') }}" class="btn btn-info btn-sm" ><i class="fa fa-plus"></i> Add Leave</a>
			</div>
		</div>
	</div>
	<!-- /Page Header -->
	
	<!-- Leave Statistics -->
	<div class="row">
		<div class="col-md-3">
			<div class="stats-info">
				<h6>Today Presents</h6>
				<h4>60 / 60</h4>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-info">
				<h6 class="text-warning">Pending Requests</h6>
				<h4 class="text-warning">{{$request_counts}}</h4>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-info">
				<h6>Planned Leaves</h6>
				<h4>8 <span>Total</span></h4>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-info">
				<h6>Unplanned Leaves</h6>
				<h4>0 <span>Today</span></h4>
			</div>
		</div>
		
	</div>
	<!-- /Leave Statistics -->
	<!-- Search Filter -->
	<div class="row filter-row">
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">  
			<div class="form-group form-focus">
				<input type="text" class="form-control floating">
				<label class="focus-label">Employee Name</label>
			</div>
	   </div>
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">  
			<div class="form-group form-focus select-focus">
				<select class="select floating"> 
					<option> -- Select -- </option>
					<option>Casual Leave</option>
					<option>Medical Leave</option>
					<option>Loss of Pay</option>
				</select>
				<label class="focus-label">Leave Type</label>
			</div>
	   </div>
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12"> 
			<div class="form-group form-focus select-focus">
				<select class="select floating"> 
					<option> -- Select -- </option>
					<option> Pending </option>
					<option> Approved </option>
					<option> Rejected </option>
				</select>
				<label class="focus-label">Leave Status</label>
			</div>
	   </div>
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">  
			<div class="form-group form-focus">
				<div class="cal-icon">
					<input class="form-control floating datetimepicker" type="text">
				</div>
				<label class="focus-label">From</label>
			</div>
		</div>
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">  
			<div class="form-group form-focus">
				<div class="cal-icon">
					<input class="form-control floating datetimepicker" type="text">
				</div>
				<label class="focus-label">To</label>
			</div>
		</div>
	   <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">  
			<a href="#" class="btn btn-success btn-block"> Search </a>  
	   </div>     
    </div>
	<!-- /Search Filter -->
	
	<div class="row">
		<div class="col-md-12">
			<div class="table-responsive">
				<table class="table table-striped custom-table mb-0 ">
					<thead>
						<tr>	
							<th>User</th>									
							<th>From</th>
							<th>To</th>
							<th>No of Days</th>
							<th>Reason</th>
							<th class="text-center">Status</th>
							<th>Created at</th>
							<th>Action by</th>
							<th class="text-right">Actions</th>
						</tr>
					</thead>
					<tbody>
						@if(count($data) > 0 )
						@foreach($data as $item)
						<tr>
							<td class="username">{{ucwords($item->first_name.' '.$item->last_name)}}</td>											
							<td>{{ date('d M Y',strtotime($item->from_date))}}</td>
							<td>{{date('d M Y',strtotime($item->to_date))}}</td>
							<td>{{$item->total_days}} days</td>
							<td>{{$item->subject}}</td>
							<td class="text-center">
								@if($item->status == 'pending')
								<div class="action-label">
									<a class="btn btn-white btn-sm btn-rounded" href="javascript:void(0);">
										<i class="fa fa-dot-circle-o text-warning"></i> Pending
									</a>
								</div>
								@endif
								@if($item->status == 'rejected')
								<div class="action-label">
									<a class="btn btn-white btn-sm btn-rounded" href="javascript:void(0);">
										<i class="fa fa-dot-circle-o text-danger"></i> Rejected
									</a>
								</div>
								@endif
								@if($item->status == 'approved')
								<div class="action-label">
									<a class="btn btn-white btn-sm btn-rounded" href="javascript:void(0);">
										<i class="fa fa-dot-circle-o text-success"></i> Approved
									</a>
								</div>
								@endif
							</td>
							<td>{{ date('d M Y h:i A',strtotime($item->created_at))}}</td>
							<td>
								{{ Techsaga::leaveActionBy($item->id)}}								
							</td>
							<td class="text-right">
								<a class="viewDetail" href="javascript:;" data="{{$item->id}}" user-id="{{$item->user_id}}" ><i class="fa fa-eye m-r-5"></i> view</a>
							</td>
						</tr>
					@endforeach
					@else
					<tr>
					<td class="" colspan="7">
						<h3 class="text-center text-success">Wow, you have not taken a leave. </h3>	
					</td>
					</tr>
					@endif
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<!-- /Page Content -->


<!-- show modal  -->

<div id="leaveDetail" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title">Leave Application - <span class="modalUsername"> </span> </h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label>Start Date</label>
							<div class="cal-icon">
								<input class="form-control from_date" type="text" readonly>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label>To Date</label>
							<div class="cal-icon">
								<input class="form-control to_date  " type="text" readonly>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label>Total days</label>
							<input class="form-control total_days" type="text" readonly>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-sm-12">
						<div class="form-group">
							<label>Reason</label>
							<label class="reasonData" style="min-height: 36px; padding: 5px; width: 100%; display: block; border: 1px solid #ddd;"></label>
						</div>
					</div>										
				</div>
				<div class="form-group">
					<label>Description</label>
					<div class="setDescription" style="min-height: 200px; padding: 5px; width: 100%; display: block;  border: 1px solid #ddd;"></div>
				</div>
				
				<span class="approvalRow">
				<form id="actionForm" method="POST">
				@csrf
				<div class="form-group row">				
				<label class="col-lg-2 col-form-label" >Action</label>
					<div class="col-lg-10" style="margin-top: 6px;">
						<div class="form-check form-check-inline" id="approvedLine">
							<input class="form-check-input actionType" type="radio" name="actionType" id="approved" value="approve" >
							<label class="form-check-label" for="approved">
							Approve
							</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input actionType" type="radio" name="actionType" id="rejected" value="reject">
							<label class="form-check-label" for="rejected">
							Reject
							</label>
						</div>
					</div>
				</div>	
				<div class="form-group row hide">				
					<label class="col-lg-4 col-form-label">Date : <span class="actionDateTime"></span> </label>
				</div>

				<div class="form-group hide showIfrejected">
					<label>Mention Reason</label>
				<textarea rows="4" class="form-control rejected_reason" placeholder="Enter your message here" name="rejected_reason"></textarea>
				</div>																	
				<input type="hidden" name="request_id" id="request_id" value="">
				<div class="form-group">					
					<div class="col-sm-6">
						<button type="submit" class="btn btn-sm btn-primary disabled submit-btn" id="actionBtn" >Update</button>
					</div>
				</div>
			</form>
			</span>
		</div>
	</div>
</div>
</div>
<!-- /Create Project Modal -->


<script type="text/javascript">
$(function(){
	
//view leave detail and perform action
$('.viewDetail').click(function(){
	var id = $(this).attr('data');
	
	$('#leaveDetail').modal({
		backdrop: 'static',
		keyboard: false
	});
	
	//check same user then hide 
	if("{{auth()->user()->id}}" == $(this).attr('user-id')){
		$('.approvalRow').hide();
	}
	else{
	$('.approvalRow').show();	
	}

	$('.modalUsername').html($('.username').html());
	$('.rejected_reason').html("");

		//get value from ajax
		$.ajax({
            url:'leaveDetail',
            type:'POST', 
            data:{"_token": "{{ csrf_token() }}","id":id},                 
            success: function(data) {
            //
            	var obj = JSON.parse(data);
            	
            	$('#request_id').val("");
                $('#request_id').val(obj.request_data.id);                    
            	$('.reasonData').html("");
                $('.reasonData').html(obj.request_data.reason);                    
                $('.setDescription').html("");
                $('.setDescription').html(obj.request_data.message);
                $('.from_date').val("");
                $('.from_date').val(obj.request_data.from_date);                    
                $('.to_date').val("");
                $('.to_date').val(obj.request_data.to_date);                    
                $('.total_days').val("");
                $('.total_days').val(obj.request_data.total_days);     

                if(obj.status_data.action_type !='')
                {	
                	console.log(obj.status_data.action_type);

                	if(obj.status_data.action_type=='rejected'){
                		
	                	$('#actionBtn').hide();   
	                	$('#approvedLine').hide();    
	                	$('.showIfrejected').show();   	                	
	                	$('.rejected_reason').html("");
                		$('.rejected_reason').html(obj.status_data.remarks);
                		$('#rejected').prop('checked', true);
                		$('.actionDateTime').html("");
                		$('.actionDateTime').html(obj.status_data.action_date_time);
                	}

                	if(obj.status_data.action_type=='approved'){
                		
	                	$('#actionBtn').hide();   
	                	/*$('#approvedLine').hide();    
	                	$('.showIfrejected').show();   	                	
	                	$('.rejected_reason').html("");
                		$('.rejected_reason').html(obj.status_data.remarks);
                		$('#rejected').prop('checked', true);*/
                	}

                }               
        }
    });           
});

//action selected
$('.actionType').change(function(){
      
     var type = $(this).val();
     if(type=='reject')
     {		
     		$('#actionBtn').removeClass('disabled');     		
     		$('.showIfrejected').show();     		
     		
     }
     if(type=='approve')
     {		$('#actionBtn').removeClass('disabled');          		
     		$('.showIfrejected').hide();     		
     }  
});

//submit task form
 $("#actionForm").validate({
        rules:{
           rejected_reason :  {
            required : $("#rejected").val()=='reject'
         },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            rejected_reason:{
                required: "Please mention the rejection reason."
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                  url:'leave/doAction',
                  type:'POST',
                  data: $('#actionForm').serialize(),
                success: function(data) {
                    $("#block").html(data);
                }
             });
             return false; // required to block normal submit since you used ajax
         }
});

});

</script>


@endsection