@extends('layouts.app', ['path' => 'reports.payroll.payitem'])
@section('title', 'PayItem Report - HRMS')

@section('content')
    <div class="content">
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">PayItem Report</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">Reports</li>
                        <li class="breadcrumb-item">Payroll</li>
                        <li class="breadcrumb-item active" aria-current="page">PayItem Report</li>
                    </ol>
                </nav>
            </div>
        </div>

        @include('partials.new_alerts')

        <!-- Filter Widget -->
        @include('compaines.reports.widgets.filter-widget', [
            'reportType' => 'payitem',
            'filters' => [
                'dateRange' => true,
                'employee' => true,
                'department' => true,
                'allowanceType' => false,
                'status' => false,
            ],
        ])

        <!-- Report Results -->
        @include('compaines.reports.widgets.report-table', [
            'title' => 'PayItem Report Results',
            'tableId' => 'payitemReportTable',
            'tableBodyId' => 'reportTableBody',
            'reportType' => 'payitem',
            'headers' => ['Employee ID','Employee', 'Department', 'Pay Item', 'Amount', 'Type', 'Date'],
            'emptyIcon' => 'ti ti-coins',
            'emptyTitle' => 'No payitem data available',
            'emptyMessage' => 'Apply filters and click "View Report" to view payitem results'
        ])
    </div>
@endsection