@extends('layouts.app')
@section('title', 'تقرير الحضور المتقدم')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقرير الحضور الشهري المتقدم</h1>
        <p class="page-subtitle">تحليل شامل للحضور والانصراف مع إحصائيات</p>
    </div>
</div>

<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <label class="form-label">الشهر</label>
                <input type="month" name="month" class="form-input" value="{{ $month }}">
            </div>
            <div class="filter-group">
                <label class="form-label">القسم</label>
                <select name="department_id" class="form-select">
                    <option value="">جميع الأقسام</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ $departmentId == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-group" style="align-self: flex-end;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> عرض</button>
            </div>
        </form>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);"><i class="fas fa-check"></i></div>
        <div class="stat-value">{{ $totals['present'] }}</div>
        <div class="stat-label">إجمالي أيام الحضور</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);"><i class="fas fa-times"></i></div>
        <div class="stat-value">{{ $totals['absent'] }}</div>
        <div class="stat-label">إجمالي أيام الغياب</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);"><i class="fas fa-clock"></i></div>
        <div class="stat-value">{{ $totals['late'] }}</div>
        <div class="stat-label">إجمالي التأخير</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);"><i class="fas fa-business-time"></i></div>
        <div class="stat-value">{{ number_format($totals['total_hours'], 0) }}</div>
        <div class="stat-label">إجمالي ساعات العمل</div>
    </div>
</div>

{{-- رسم بياني يومي --}}
@if(count($dailyData) > 0)
<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-chart-area"></i> الحضور اليومي</h3></div>
    <div class="card-body">
        <div style="display: flex; align-items: flex-end; gap: 2px; height: 150px;">
            @php $maxD = max(1, max(array_column($dailyData, 'count'))); @endphp
            @foreach($dailyData as $d)
                <div style="flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; height: {{ ($d['count'] / $maxD) * 130 }}px; min-height: 2px;" title="يوم {{ $d['date'] }}: {{ $d['count'] }} حاضر"></div>
            @endforeach
        </div>
        <div style="display: flex; gap: 2px; margin-top: 0.3rem;">
            @foreach($dailyData as $i => $d)
                <div style="flex: 1; text-align: center; font-size: 0.65rem; color: var(--text-muted);">{{ ($i % 5 == 0) ? $d['date'] : '' }}</div>
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- جدول تفصيلي --}}
<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-table"></i> تفاصيل الموظفين</h3></div>
    <div class="card-body" style="padding: 0;">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>القسم</th>
                        <th>حضور</th>
                        <th>غياب</th>
                        <th>تأخير</th>
                        <th>إجازة</th>
                        <th>ساعات العمل</th>
                        <th>متوسط يومي</th>
                        <th>نسبة الحضور</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($report as $r)
                        <tr>
                            <td>{{ $r['employee']->first_name }} {{ $r['employee']->last_name }}</td>
                            <td>{{ $r['employee']->department->name ?? '—' }}</td>
                            <td style="color: var(--success); font-weight: 600;">{{ $r['present'] }}</td>
                            <td style="color: var(--danger); font-weight: 600;">{{ $r['absent'] }}</td>
                            <td style="color: var(--warning); font-weight: 600;">{{ $r['late'] }}</td>
                            <td>{{ $r['leave'] }}</td>
                            <td>{{ $r['total_hours'] }}h</td>
                            <td>{{ $r['avg_hours'] }}h</td>
                            <td>
                                <span class="status-badge {{ $r['attendance_rate'] >= 90 ? 'status-active' : ($r['attendance_rate'] >= 75 ? 'status-pending' : 'status-expired') }}">
                                    {{ $r['attendance_rate'] }}%
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection