@extends('layouts.app_main')

@section('content')
    <div class="col-sm-9">
        <div class="panel panel-default">
            <div class="panel-heading">Payslips</div>
 
            <div class="panel-body">
            	<div id="list" style="display:none;">
	                @foreach($payslips as $payslip)
	                	<stong>Period ending:</stong> {{$payslip->period_end_date}} - - <a class='payslip' href="/payslip/{{$payslip->id}}">View</a><br/>
	                @endforeach
	            </div>
	            <div id="payslip" style="display:none;">
	            	<div style="text-align:center;"><button class="btn btn-primary" id="closepreview" style="margin-bottom:5px;">Close</button></div>
	            	<iframe style="width:100%; height:500px;" src=""></iframe>
	            </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
	$("#list").show();
	$('.payslip').on('click',function(event){
		event.preventDefault();
		url=$(this).attr('href');
		$('iframe').attr('src',url) ;
		$("#list").hide();
		$("#payslip").show();
	});
	$('#closepreview').on('click',function(event){
		$("#list").show();
		$("#payslip").hide();
	});
@endsection