@extends('layouts.main')

@section('content')
    <h2>{{$title}}</h2>
    @if(Auth::user()->canDo(['set_payroll']))
    <a href="{{route('payment_periods.create')}}" class="btn btn-dark">Create Payment Period</a>
    <hr>
    @endif
 
    <div class="table-responsive">               	
        <table class="table table-hover table-striped" id="example">
            <thead>
                <th>From</th> <th>To</th> <th>Status</th> <th>Action</th>
            </thead>
            <tbody>
                @foreach($payment_periods as $payment_period)
                <tr>
                    <td>{{ $payment_period->from }}</td>
                    <td>{{ $payment_period->to }}</td>
                    <td>
                        @php
                            $status = $payment_period->status;
                            if ($status === 'pending') {
                                $statusClass = 'warning';
                            } elseif ($status === 'approved') {
                                $statusClass = 'success';
                            } elseif ($status === 'declined') {
                                $statusClass = 'danger';
                            } else {
                                $statusClass = 'secondary';
                            }
                        @endphp
                        <span class="badge bg-{{ $statusClass }}">
                            {{ ucfirst($payment_period->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('payment_periods.show',$payment_period->id) }}" class="badge info btn-sm">Payroll</a>
                        @if($payment_period->status != "approved")
                            @if(Auth::user()->canDo(['set_payroll']))
                                <a href="{{ route('payment_periods.edit',$payment_period->id) }}" class="badge info btn-sm">Edit</a>
                            @endif
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
   
@endsection