@extends('layouts.app', ['path' => 'reports.payroll.bonus'])
@section('title', 'Bonus 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">Bonus 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">Bonus Report</li>
                    </ol>
                </nav>
            </div>

        </div>

        @include('partials.new_alerts')

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

        <!-- Report Results -->
        @include('compaines.reports.widgets.report-table', [
            'title' => 'Bonus Report Results',
            'tableId' => 'bonusReportTable',
            'tableBodyId' => 'reportTableBody',
            'reportType' => 'bonus',
            'headers' => ['Employee ID','Employee', 'Department', 'Bonus Type', 'Amount', 'Status', 'Date'],
            'emptyIcon' => 'ti ti-gift',
            'emptyTitle' => 'No bonus data available',
            'emptyMessage' => 'Apply filters and click "View Report" to view bonus results'
        ])

    </div>
@endsection

@push('css')
    <style>
        .empty-state {
            padding: 2rem;
        }

        .report-summary-card {
            border-left: 4px solid var(--bs-primary);
            transition: all 0.3s ease;
        }

        .report-summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .table-hover tbody tr:hover {
            background-color: rgba(var(--bs-primary-rgb), 0.05);
        }

        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
@endpush

@push('scripts')

@endpush