@extends('layouts.app')
@section('title', 'تقرير الرواتب المتقدم')
@section('content')
<div class="container-fluid py-4">
    <h4 class="mb-4"><i class="fas fa-chart-line me-2"></i>تقارير الرواتب المتقدمة — {{ $year }}</h4>

    <!-- Year selector -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">السنة</label>
                    <input type="number" name="year" class="form-control" value="{{ $year }}">
                </div>
                <div class="col-md-2"><button class="btn btn-primary"><i class="fas fa-filter me-1"></i>عرض</button></div>
            </form>
        </div>
    </div>

    <!-- Monthly Comparison Chart -->
    <div class="card mb-4">
        <div class="card-header"><h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>مقارنة الرواتب الشهرية</h5></div>
        <div class="card-body">
            <canvas id="monthlyPayrollChart" height="200"></canvas>
        </div>
    </div>

    <div class="row">
        <!-- Department Cost -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header"><h5 class="mb-0"><i class="fas fa-building me-2"></i>تكلفة الأقسام</h5></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead><tr><th>القسم</th><th>الموظفين</th><th>الإجمالي</th><th>الصافي</th></tr></thead>
                            <tbody>
                            @foreach($departmentCosts as $dc)
                            <tr>
                                <td>{{ $dc->department }}</td>
                                <td>{{ $dc->employee_count }}</td>
                                <td>{{ number_format($dc->total_earnings, 0) }}</td>
                                <td>{{ number_format($dc->total_net, 0) }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Allowance Analysis -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header"><h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>تحليل البدلات</h5></div>
                <div class="card-body">
                    <canvas id="allowanceChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Data Table -->
    <div class="card">
        <div class="card-header"><h5 class="mb-0">البيانات الشهرية</h5></div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr><th>الشهر</th><th>الموظفين</th><th>الإجمالي</th><th>الخصومات</th><th>الصافي</th><th>الحالة</th></tr>
                    </thead>
                    <tbody>
                    @foreach($monthlyData as $md)
                    <tr>
                        <td>{{ $md['label'] }}</td>
                        <td>{{ $md['employee_count'] }}</td>
                        <td>{{ number_format($md['total_earnings']) }}</td>
                        <td>{{ number_format($md['total_deductions']) }}</td>
                        <td><strong>{{ number_format($md['total_net']) }}</strong></td>
                        <td>
                            @if($md['status'] === 'approved') <span class="badge bg-success">معتمد</span>
                            @elseif($md['status'] === 'calculated') <span class="badge bg-info">محسوب</span>
                            @else <span class="badge bg-secondary">لم يحسب</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const monthlyData = @json($monthlyData);

    // Monthly payroll chart
    new Chart(document.getElementById('monthlyPayrollChart'), {
        type: 'bar',
        data: {
            labels: monthlyData.map(d => d.label),
            datasets: [
                { label: 'الإجمالي', data: monthlyData.map(d => d.total_earnings), backgroundColor: '#1B2A4A' },
                { label: 'الصافي', data: monthlyData.map(d => d.total_net), backgroundColor: '#E8502F' },
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'top', labels: { font: { family: 'Cairo' } } } },
            scales: { y: { beginAtZero: true } }
        }
    });

    // Allowance pie chart
    const allowanceData = @json($allowanceAnalysis);
    if (allowanceData.length > 0) {
        new Chart(document.getElementById('allowanceChart'), {
            type: 'doughnut',
            data: {
                labels: allowanceData.map(d => d.label),
                datasets: [{
                    data: allowanceData.map(d => d.amount),
                    backgroundColor: ['#1B2A4A', '#E8502F', '#28a745', '#ffc107'],
                    borderWidth: 2, borderColor: '#fff',
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom', labels: { font: { family: 'Cairo' } } } }
            }
        });
    }
});
</script>
@endsection