@extends('layouts.app_main')

@section('content')
    <div class="col-sm-9">
        <div class="panel panel-default">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
            <div class="panel-heading">Leave Applications</div>

            <div class="panel-body">
                <div class="col-md-12 text-center">
					<table width="100%" style="margin-top: 20px;text-align:left; border: 1px solid #d3e0e9; color: #aaa;">
						<tr>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								<strong>Used &nbsp;</strong>
							</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								<strong>Left &nbsp;</strong>
							</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								<strong>Total</strong>
							</td>
						</tr>
						<tr>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								5
							</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								5
							</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">
								10
							</td>
						</tr>
					</table>
				</div>
					<br/><br/><br/><br/><br/>

					<h4>Pending Applications</h4>
					<table width="100%" style="margin-top: 20px;text-align:left; border: 1px solid #d3e0e9;">
						<tr>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Application Date</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Leave Type</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Date Start</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Date End</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Cancel Application</td>							
						</tr>
						@foreach($pending as $application)
						<tr>
							<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->created_at}}</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->type}}</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->date_from}}</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->date_to}}</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;"><a href="/leave/delete/{{$application->id}}">Cancel</a></td>	
						</tr>
						@endforeach
					</table><br/><br/>
					<h4>Application Status</h4>
					<table width="100%" style="margin-top: 20px;text-align:left; border: 1px solid #d3e0e9;">
						<tr>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Application Date</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Leave Type</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Date Start</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Date End</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Cancel Application</td>
							<td style="padding:3px; border: 1px solid #d3e0e9;">Status</td>
						</tr>

						@foreach($current  as $application)
							<tr>
								<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->created_at}}</td>
								<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->type}}</td>
								<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->date_from}}</td>
								<td style="padding:3px; border: 1px solid #d3e0e9;">{{$application->date_to}}</td>
								<td style="padding:3px; border: 1px solid #d3e0e9;"><a href="/leave/delete/{{$application->id}}">Cancel</a></td>
								<td style="padding:3px; border: 1px solid #d3e0e9;">
								@if($application->status == 1)	
									Review
								@elseif($application->status == 2)
									Approved
								@elseif($application->status == 3)
									Declined
								@else
									Canceled
								@endif
								</td>		
							</tr>					
						@endforeach
					</table>
				</div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
     $('.date').datepicker({  
       dateFormat: 'yy-mm-dd'
     });  
     $('.input-group-addon-calendar').on('click',function(){
     	$(".date", $(this).closest(".input-group")).focus();
     });
@endsection