@extends('layouts.app')
@section('title','Payroll')
@section('page-title','Payroll')

@section('content')
@if(!auth()->user()->canAccess('payroll'))
<div class="alert alert-danger"><i class="bi bi-lock-fill me-2"></i>You do not have permission to access Payroll.</div>
@else
<div class="page-header">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
        <div><h1>Payroll Periods</h1></div>
        @if(auth()->user()->isHrOrAdmin())
        <a href="{{ route('payroll.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>Generate Payroll
        </a>
        @endif
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Period</th>
                    <th class="d-none d-md-table-cell">Date Range</th>
                    <th class="d-none d-md-table-cell">Payment Date</th>
                    <th>Employees</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($periods as $period)
            <tr>
                <td class="fw-semibold">{{ $period->name }}</td>
                <td class="d-none d-md-table-cell" style="font-size:.82rem;color:var(--text-2);">
                    {{ \Carbon\Carbon::parse($period->start_date)->format('M j') }} — {{ \Carbon\Carbon::parse($period->end_date)->format('M j, Y') }}
                </td>
                <td class="d-none d-md-table-cell" style="font-size:.82rem;">{{ \Carbon\Carbon::parse($period->payment_date)->format('M j, Y') }}</td>
                <td class="fw-semibold">{{ $period->records_count }}</td>
                <td>
                    <span class="badge bg-{{ $period->status === 'approved' ? 'success' : ($period->status === 'draft' ? 'warning' : 'secondary') }}">
                        {{ ucfirst($period->status) }}
                    </span>
                </td>
                <td class="text-end">
                    <div class="d-flex gap-1 justify-content-end">
                        <a href="{{ route('payroll.show',$period) }}" class="btn btn-sm btn-icon btn-outline-primary"><i class="bi bi-eye"></i></a>
                        @if($period->status === 'draft' && auth()->user()->hasRole('super_admin','president'))
                        <form method="POST" action="{{ route('payroll.approve',$period) }}">
                            @csrf<button class="btn btn-sm btn-icon btn-success" title="Approve"><i class="bi bi-check-lg"></i></button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="text-center py-4" style="color:var(--text-2);">No payroll periods found</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($periods->hasPages())
    <div class="card-body pt-0">{{ $periods->links('pagination::bootstrap-5') }}</div>
    @endif
</div>
@endif
@endsection