@extends('layouts.app')
@section('title', 'تقرير ' . $report->month_name . ' ' . $report->year . ' - DOTS HR Pro')

@section('content')
@php $summaries = $report->employee_summaries ?? []; @endphp
<style>
    .stat-card-link {
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
    }
    .stat-card-link:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }
    .stat-card-link::after {
        content: '\f35d';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 12px;
        color: #adb5bd;
        transition: color 0.2s;
    }
    .stat-card-link:hover::after {
        color: var(--primary);
    }

    /* Modal styles */
    .detail-modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1050;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .detail-modal-overlay.active {
        display: flex;
    }
    .detail-modal {
        background: #fff;
        border-radius: 12px;
        width: 100%;
        max-width: 700px;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        animation: modalSlide 0.25s ease;
    }
    @keyframes modalSlide {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .detail-modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .detail-modal-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #1B2A4A;
    }
    .detail-modal-close {
        background: none;
        border: none;
        font-size: 22px;
        color: #6c757d;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background 0.15s;
    }
    .detail-modal-close:hover {
        background: #f1f3f5;
        color: #343a40;
    }
    .detail-modal-body {
        padding: 20px 24px;
        overflow-y: auto;
        flex: 1;
    }
    .detail-modal-body table {
        width: 100%;
        border-collapse: collapse;
    }
    .detail-modal-body table th,
    .detail-modal-body table td {
        padding: 10px 12px;
        text-align: right;
        border-bottom: 1px solid #f1f3f5;
        font-size: 14px;
    }
    .detail-modal-body table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .detail-modal-body table tbody tr:hover {
        background: #f8f9fa;
    }
    .rate-bar {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .rate-bar-track {
        flex: 1;
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }
    .rate-bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.4s ease;
    }
    .rate-bar-value {
        font-weight: 600;
        font-size: 13px;
        min-width: 42px;
        text-align: left;
    }
    .distribution-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 20px;
    }
    .dist-card {
        border-radius: 10px;
        padding: 20px;
        text-align: center;
    }
    .dist-card .dist-count {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
    }
    .dist-card .dist-label {
        font-size: 13px;
        margin-top: 6px;
        opacity: 0.85;
    }
    .dist-card .dist-percent {
        font-size: 12px;
        margin-top: 4px;
        opacity: 0.7;
    }
    .dist-excellent { background: #d4edda; color: #155724; }
    .dist-good { background: #fff3cd; color: #856404; }
    .dist-low { background: #f8d7da; color: #721c24; }

    @media(max-width:600px) {
        .distribution-cards { grid-template-columns: 1fr; }
        .detail-modal { max-width: 100%; }
    }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">تقرير الحضور الشهري</h1>
        <p class="page-subtitle">{{ $report->month_name }} {{ $report->year }} — {{ $report->department?->name ?? 'جميع الأقسام' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('monthly-reports.export-pdf', $report) }}" class="btn btn-danger"><i class="fas fa-file-pdf"></i> تصدير PDF</a>
        <a href="{{ route('monthly-reports.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card stat-card-link" onclick="scrollToEmployees()" title="عرض تفاصيل الموظفين">
        <div class="stat-icon" style="background:var(--primary-light);color:var(--primary)"><i class="fas fa-users"></i></div>
        <div class="stat-value">{{ $report->total_employees }}</div>
        <div class="stat-label">عدد الموظفين</div>
    </div>
    <div class="stat-card stat-card-link" onclick="openModal('attendance')" title="عرض تفاصيل الحضور">
        <div class="stat-icon" style="background:var(--success-light);color:var(--success)"><i class="fas fa-calendar-check"></i></div>
        <div class="stat-value">{{ $report->total_present }}</div>
        <div class="stat-label">إجمالي أيام الحضور</div>
    </div>
    <div class="stat-card stat-card-link" onclick="openModal('absence')" title="عرض تفاصيل الغياب">
        <div class="stat-icon" style="background:var(--danger-light);color:var(--danger)"><i class="fas fa-calendar-times"></i></div>
        <div class="stat-value">{{ $report->total_absent }}</div>
        <div class="stat-label">إجمالي أيام الغياب</div>
    </div>
    <div class="stat-card stat-card-link" onclick="openModal('rate')" title="عرض توزيع نسب الحضور">
        <div class="stat-icon" style="background:var(--warning-light);color:var(--warning)"><i class="fas fa-percentage"></i></div>
        <div class="stat-value">{{ $report->attendance_rate }}%</div>
        <div class="stat-label">نسبة الحضور العامة</div>
    </div>
</div>

{{-- Modal: Attendance Details --}}
<div class="detail-modal-overlay" id="modal-attendance">
    <div class="detail-modal">
        <div class="detail-modal-header">
            <h3><i class="fas fa-calendar-check" style="color:var(--success);margin-left:8px"></i> تفاصيل أيام الحضور</h3>
            <button class="detail-modal-close" onclick="closeModal('attendance')">&times;</button>
        </div>
        <div class="detail-modal-body">
            @php
                $sortedByPresent = collect($summaries)->sortByDesc('present_days')->values();
            @endphp
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>الموظف</th>
                        <th>القسم</th>
                        <th>أيام الحضور</th>
                        <th>نسبة الحضور</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sortedByPresent as $idx => $emp)
                    <tr>
                        <td>{{ $idx + 1 }}</td>
                        <td><strong>{{ $emp['employee_name'] }}</strong></td>
                        <td>{{ $emp['department'] ?: '—' }}</td>
                        <td><span style="color:var(--success);font-weight:700;font-size:16px">{{ $emp['present_days'] }}</span></td>
                        <td>
                            <div class="rate-bar">
                                <div class="rate-bar-track">
                                    <div class="rate-bar-fill" style="width:{{ $emp['attendance_rate'] }}%;background:{{ $emp['attendance_rate'] >= 90 ? 'var(--success)' : ($emp['attendance_rate'] >= 75 ? 'var(--warning)' : 'var(--danger)') }}"></div>
                                </div>
                                <span class="rate-bar-value">{{ $emp['attendance_rate'] }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: Absence Details --}}
<div class="detail-modal-overlay" id="modal-absence">
    <div class="detail-modal">
        <div class="detail-modal-header">
            <h3><i class="fas fa-calendar-times" style="color:var(--danger);margin-left:8px"></i> تفاصيل أيام الغياب</h3>
            <button class="detail-modal-close" onclick="closeModal('absence')">&times;</button>
        </div>
        <div class="detail-modal-body">
            @php
                $sortedByAbsent = collect($summaries)->sortByDesc('absent_days')->values();
            @endphp
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>الموظف</th>
                        <th>القسم</th>
                        <th>أيام الغياب</th>
                        <th>التأخيرات</th>
                        <th>الإجازات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sortedByAbsent as $idx => $emp)
                    <tr>
                        <td>{{ $idx + 1 }}</td>
                        <td><strong>{{ $emp['employee_name'] }}</strong></td>
                        <td>{{ $emp['department'] ?: '—' }}</td>
                        <td><span style="color:var(--danger);font-weight:700;font-size:16px">{{ $emp['absent_days'] }}</span></td>
                        <td><span style="color:var(--warning);font-weight:600">{{ $emp['late_days'] }}</span></td>
                        <td>{{ $emp['leave_days'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: Attendance Rate Distribution --}}
<div class="detail-modal-overlay" id="modal-rate">
    <div class="detail-modal">
        <div class="detail-modal-header">
            <h3><i class="fas fa-chart-pie" style="color:var(--warning);margin-left:8px"></i> توزيع نسب الحضور</h3>
            <button class="detail-modal-close" onclick="closeModal('rate')">&times;</button>
        </div>
        <div class="detail-modal-body">
            @php
                $total = count($summaries);
                $excellent = collect($summaries)->where('attendance_rate', '>=', 90)->count();
                $good = collect($summaries)->filter(fn($e) => $e['attendance_rate'] >= 75 && $e['attendance_rate'] < 90)->count();
                $low = collect($summaries)->where('attendance_rate', '<', 75)->count();
                $pctExcellent = $total > 0 ? round($excellent / $total * 100) : 0;
                $pctGood = $total > 0 ? round($good / $total * 100) : 0;
                $pctLow = $total > 0 ? round($low / $total * 100) : 0;
                $sortedByRate = collect($summaries)->sortBy('attendance_rate')->values();
            @endphp
            <div class="distribution-cards">
                <div class="dist-card dist-excellent">
                    <div class="dist-count">{{ $excellent }}</div>
                    <div class="dist-label">ممتاز (90%+)</div>
                    <div class="dist-percent">{{ $pctExcellent }}% من الموظفين</div>
                </div>
                <div class="dist-card dist-good">
                    <div class="dist-count">{{ $good }}</div>
                    <div class="dist-label">جيد (75-89%)</div>
                    <div class="dist-percent">{{ $pctGood }}% من الموظفين</div>
                </div>
                <div class="dist-card dist-low">
                    <div class="dist-count">{{ $low }}</div>
                    <div class="dist-label">ضعيف (أقل من 75%)</div>
                    <div class="dist-percent">{{ $pctLow }}% من الموظفين</div>
                </div>
            </div>

            @if($low > 0)
            <h4 style="margin:20px 0 12px;font-size:15px;color:#721c24"><i class="fas fa-exclamation-triangle" style="margin-left:6px"></i> موظفون بحضور ضعيف</h4>
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>القسم</th>
                        <th>الحضور</th>
                        <th>الغياب</th>
                        <th>النسبة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sortedByRate as $emp)
                        @if($emp['attendance_rate'] < 75)
                        <tr>
                            <td><strong>{{ $emp['employee_name'] }}</strong></td>
                            <td>{{ $emp['department'] ?: '—' }}</td>
                            <td>{{ $emp['present_days'] }}</td>
                            <td><span style="color:var(--danger);font-weight:600">{{ $emp['absent_days'] }}</span></td>
                            <td>
                                <span class="status-badge status-expired">{{ $emp['attendance_rate'] }}%</span>
                            </td>
                        </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
            @endif
        </div>
    </div>
</div>

<div class="card" style="margin-bottom:20px">
    <div class="card-header">
        <h3 class="card-title">ملخص التقرير</h3>
    </div>
    <div class="card-body">
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">كود التقرير</span>
                <span class="detail-value"><span class="code-badge">{{ $report->report_code }}</span></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">الفترة</span>
                <span class="detail-value">{{ $report->month_name }} {{ $report->year }}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">القسم</span>
                <span class="detail-value">{{ $report->department?->name ?? 'جميع الأقسام' }}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">أيام العمل</span>
                <span class="detail-value">{{ $report->total_working_days }} يوم</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">إجمالي ساعات العمل</span>
                <span class="detail-value">{{ number_format($report->total_worked_hours, 1) }} ساعة</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">إجمالي الساعات الإضافية</span>
                <span class="detail-value">{{ number_format($report->total_overtime_hours, 1) }} ساعة</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">إجمالي التأخيرات</span>
                <span class="detail-value">{{ $report->total_late }} يوم</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">إجمالي الإجازات</span>
                <span class="detail-value">{{ $report->total_leaves }} يوم</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">أنشئ بواسطة</span>
                <span class="detail-value">{{ $report->generatedByUser?->name ?? '—' }}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">تاريخ الإنشاء</span>
                <span class="detail-value">{{ $report->created_at->format('Y/m/d H:i') }}</span>
            </div>
            @if($report->notes)
            <div class="detail-item full">
                <span class="detail-label">ملاحظات</span>
                <span class="detail-value">{{ $report->notes }}</span>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="card" id="employees-section">
    <div class="card-header">
        <h3 class="card-title">تفاصيل حضور الموظفين</h3>
    </div>
    <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>
                    <th>الإضافي</th>
                    <th>نسبة الحضور</th>
                </tr>
            </thead>
            <tbody>
                @forelse($summaries as $i => $emp)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td><strong>{{ $emp['employee_name'] }}</strong></td>
                    <td><span class="code-badge">{{ $emp['employee_code'] ?: '—' }}</span></td>
                    <td>{{ $emp['department'] ?: '—' }}</td>
                    <td><span style="color:var(--success);font-weight:600">{{ $emp['present_days'] }}</span></td>
                    <td><span style="color:var(--danger);font-weight:600">{{ $emp['absent_days'] }}</span></td>
                    <td><span style="color:var(--warning);font-weight:600">{{ $emp['late_days'] }}</span></td>
                    <td>{{ $emp['leave_days'] }}</td>
                    <td>{{ number_format($emp['worked_hours'], 1) }}</td>
                    <td>{{ number_format($emp['overtime_hours'], 1) }}</td>
                    <td>
                        <span class="status-badge {{ $emp['attendance_rate'] >= 90 ? 'status-active' : ($emp['attendance_rate'] >= 75 ? 'status-pending' : 'status-expired') }}">
                            {{ $emp['attendance_rate'] }}%
                        </span>
                    </td>
                </tr>
                @empty
                <tr><td colspan="11"><div class="empty-state-sm">لا توجد بيانات موظفين</div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<script>
function scrollToEmployees() {
    var el = document.getElementById('employees-section');
    if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        el.style.boxShadow = '0 0 0 3px var(--primary)';
        setTimeout(function() { el.style.boxShadow = ''; }, 2000);
    }
}

function openModal(type) {
    var modal = document.getElementById('modal-' + type);
    if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

function closeModal(type) {
    var modal = document.getElementById('modal-' + type);
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
}

// Close modal on overlay click
document.querySelectorAll('.detail-modal-overlay').forEach(function(overlay) {
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) {
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }
    });
});

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.detail-modal-overlay.active').forEach(function(m) {
            m.classList.remove('active');
        });
        document.body.style.overflow = '';
    }
});
</script>
@endsection