@extends('layouts.master')

@section('content')
    <div class="container">
        <div class="c-header">
            <h2>Payslips</h2>
        </div>

        <div class="card">

            <div class="card-body card-padding">

                <div class="panel-group" role="tablist" aria-multiselectable="true">
                    @foreach($payslipYears as $year=>$monthly)
                        <div class="panel">
                            <div class="panel-heading" role="tab" id="heading{{$loop->index}}">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$loop->index}}"
                                       aria-expanded="true" aria-controls="collapse{{$loop->index}}">
                                        {{$year}}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse{{$loop->index}}" class="" role="tabpanel"
                                 aria-labelledby="heading{{$loop->index}}">
                                <div class="panel-body">

                                    <div class="pmb-block">


                                        <div class="contacts c-profile clearfix row">

                                            @foreach($monthly as $payslip)
                                                <div class="col-md-3 col-sm-3 col-xs-3" style='margin:20px 0 20px;'>
                                                    <div class="c-item">

                                                        <a class="c-info" href="{{ route('payslip.view',[$payslip->year,$payslip->month]) }}" target="_blank">
                                                            <strong>

                                                                <img src="https://ui-avatars.com/api/?background=random&font-size=0.28&length=3&name={{date('F', mktime(0, 0, 0, $payslip->month, 10))}}" alt="{{date('F', mktime(0, 0, 0, $payslip->month, 10))}}"
                                                                     class="img-thumbnail border-0 rounded-circle list-thumbnail align-self-center xsmall">
                                                            </strong>
                                                        </a>
                                                        <a  href="{{ route('payslip.view',[$payslip->year,$payslip->month]) }}" class="waves-effect text-center" target="_blank"><i class="zmdi zmdi-eye"></i> View</a>

                                                        <div class="c-footer text-center">

                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
@endsection