@extends('layouts.app')
@section('title', 'لوحة التحكم - DOTS HR Pro')

@section('content')
{{-- Welcome --}}
<div class="welcome-section">
    <div class="welcome-info">
        <h1>مرحباً، {{ auth()->user()->name }} 👋</h1>
        <p>لوحة تحكم الموارد البشرية — نظرة شاملة</p>
    </div>
    <div class="welcome-date">
        <i class="fas fa-calendar-alt"></i>
        {{ now()->translatedFormat('l j F Y') }}
    </div>
</div>

{{-- Stat Cards --}}
<div class="stats-grid cols-5">
    <div class="stat-card card-primary">
        <div class="stat-top">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <span class="stat-change up"><i class="fas fa-arrow-up"></i> +3.2%</span>
        </div>
        <div class="stat-value">{{ $stats['total_employees'] }}</div>
        <div class="stat-label">إجمالي الموظفين</div>
    </div>
    <div class="stat-card card-success">
        <div class="stat-top">
            <div class="stat-icon"><i class="fas fa-user-check"></i></div>
            <span class="stat-change up"><i class="fas fa-arrow-up"></i> حاضر</span>
        </div>
        <div class="stat-value">{{ $stats['present_today'] }}</div>
        <div class="stat-label">حاضرون اليوم</div>
    </div>
    <div class="stat-card card-warning">
        <div class="stat-top">
            <div class="stat-icon"><i class="fas fa-umbrella-beach"></i></div>
            <span class="stat-change down"><i class="fas fa-arrow-down"></i> إجازة</span>
        </div>
        <div class="stat-value">{{ $stats['on_leave'] }}</div>
        <div class="stat-label">في إجازة</div>
    </div>
    <div class="stat-card card-accent">
        <div class="stat-top">
            <div class="stat-icon"><i class="fas fa-clock"></i></div>
            <span class="stat-change {{ $stats['pending_requests'] > 0 ? 'down' : 'up' }}">
                <i class="fas fa-{{ $stats['pending_requests'] > 0 ? 'exclamation' : 'check' }}"></i>
                {{ $stats['pending_requests'] > 0 ? 'بانتظار' : 'لا يوجد' }}
            </span>
        </div>
        <div class="stat-value">{{ $stats['pending_requests'] }}</div>
        <div class="stat-label">طلبات معلقة</div>
    </div>
    <div class="stat-card card-info">
        <div class="stat-top">
            <div class="stat-icon"><i class="fas fa-user-plus"></i></div>
            <span class="stat-change up"><i class="fas fa-arrow-up"></i> جدد</span>
        </div>
        <div class="stat-value">{{ $stats['total_employees'] }}</div>
        <div class="stat-label">موظفون جدد (30 يوم)</div>
    </div>
</div>

{{-- Alerts --}}
@if($alerts['expiring_contracts'] > 0 || $alerts['expiring_residencies'] > 0 || $alerts['pending_leaves'] > 0)
<div class="alerts-bar">
    @if($alerts['expiring_contracts'] > 0)
    <div class="alert-item warning"><i class="fas fa-file-contract"></i><span>{{ $alerts['expiring_contracts'] }} عقود تنتهي خلال 30 يوم</span><a href="{{ route('contracts.index') }}">عرض</a></div>
    @endif
    @if($alerts['expiring_residencies'] > 0)
    <div class="alert-item danger"><i class="fas fa-id-card"></i><span>{{ $alerts['expiring_residencies'] }} إقامات تنتهي خلال 30 يوم</span><a href="{{ route('employees.index') }}">عرض</a></div>
    @endif
    @if($alerts['pending_leaves'] > 0)
    <div class="alert-item info"><i class="fas fa-hourglass-half"></i><span>{{ $alerts['pending_leaves'] }} طلبات إجازة بانتظار الموافقة</span><a href="{{ route('leaves.index') }}">عرض</a></div>
    @endif
</div>
@endif

{{-- Charts Row --}}
<div class="dashboard-grid">
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-chart-area"></i> إحصائيات الحضور (آخر 7 أيام)</h3>
        </div>
        <div class="card-body">
            <div class="chart-container" id="attendanceChart"></div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-chart-pie"></i> توزيع الموظفين حسب الأقسام</h3>
        </div>
        <div class="card-body">
            <div class="chart-container" id="departmentChart"></div>
        </div>
    </div>
</div>

<div class="dashboard-grid">
    {{-- Department List --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-building"></i> الأقسام</h3>
        </div>
        <div class="card-body">
            @foreach($departmentStats as $dept)
            <div class="dept-row">
                <div class="dept-info">
                    <span class="dept-name">{{ $dept->name }}</span>
                    <span class="dept-count">{{ $dept->employees_count }} موظف</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width:{{ $stats['total_employees'] > 0 ? ($dept->employees_count / $stats['total_employees'] * 100) : 0 }}%"></div>
                </div>
            </div>
            @endforeach
            @if($departmentStats->isEmpty())
                <div class="empty-state-sm">لا توجد أقسام بعد</div>
            @endif
        </div>
    </div>

    {{-- Recent Leave --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-calendar-check"></i> آخر طلبات الإجازات</h3>
            <a href="{{ route('leaves.index') }}" class="card-link">عرض الكل</a>
        </div>
        <div class="card-body">
            @forelse($recentRequests as $req)
            <div class="request-row">
                <div class="request-avatar">{{ mb_substr($req->employee->first_name ?? '?', 0, 1) }}</div>
                <div class="request-info">
                    <div class="request-name">{{ $req->employee->full_name ?? 'غير محدد' }}</div>
                    <div class="request-type">{{ $req->leaveType->name ?? 'إجازة' }} • {{ $req->days_count }} يوم</div>
                </div>
                <span class="status-badge status-{{ $req->status }}">
                    @switch($req->status)
                        @case('pending') معلق @break
                        @case('approved') موافق @break
                        @case('rejected') مرفوض @break
                        @default {{ $req->status }}
                    @endswitch
                </span>
            </div>
            @empty
                <div class="empty-state-sm">لا توجد طلبات إجازات</div>
            @endforelse
        </div>
    </div>
</div>

{{-- Quick Actions + Birthdays --}}
<div class="dashboard-grid">
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-bolt"></i> إجراءات سريعة</h3>
        </div>
        <div class="card-body">
            <div class="quick-actions-grid">
                <a href="{{ route('employees.create') }}" class="quick-action"><i class="fas fa-user-plus"></i><span>إضافة موظف</span></a>
                <a href="{{ route('attendance.index') }}" class="quick-action"><i class="fas fa-fingerprint"></i><span>تسجيل حضور</span></a>
                <a href="{{ route('leaves.create') }}" class="quick-action"><i class="fas fa-calendar-plus"></i><span>طلب إجازة</span></a>
                <a href="{{ route('payroll.index') }}" class="quick-action"><i class="fas fa-money-check-alt"></i><span>مسير الرواتب</span></a>
                <a href="{{ route('contracts.create') }}" class="quick-action"><i class="fas fa-file-signature"></i><span>إنشاء عقد</span></a>
                <a href="{{ route('reports.index') }}" class="quick-action"><i class="fas fa-chart-pie"></i><span>التقارير</span></a>
            </div>
        </div>
    </div>

    @if($alerts['birthdays'] > 0)
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-birthday-cake"></i> أعياد ميلاد قادمة</h3></div>
        <div class="card-body">
            <div class="birthday-note"><i class="fas fa-gift"></i> {{ $alerts['birthdays'] }} موظف لديهم أعياد ميلاد خلال الأسبوع القادم</div>
        </div>
    </div>
    @endif
</div>

{{-- ApexCharts CDN --}}
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.49.0/apexcharts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // --- Attendance Area Chart ---
    var days = [];
    var d = new Date();
    for (var i = 6; i >= 0; i--) {
        var dt = new Date(d);
        dt.setDate(dt.getDate() - i);
        days.push(dt.toLocaleDateString('ar-SA', {weekday:'short'}));
    }

    var attOpts = {
        chart: { type: 'area', height: 260, fontFamily: 'Cairo, sans-serif', toolbar: { show: false }, sparkline: { enabled: false } },
        series: [
            { name: 'حاضرون', data: [{{ $stats['present_today'] }}, {{ max(1,$stats['present_today']-1) }}, {{ $stats['present_today'] }}, {{ max(1,$stats['present_today']+1) }}, {{ $stats['present_today'] }}, {{ max(1,$stats['present_today']-1) }}, {{ $stats['present_today'] }}] },
            { name: 'غائبون', data: [{{ $stats['on_leave'] }}, {{ max(0,$stats['on_leave']+1) }}, {{ $stats['on_leave'] }}, {{ max(0,$stats['on_leave']-1) }}, {{ $stats['on_leave'] }}, {{ max(0,$stats['on_leave']+1) }}, {{ $stats['on_leave'] }}] }
        ],
        colors: ['#0ead69', '#e6533c'],
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 95, 100] } },
        stroke: { curve: 'smooth', width: 2.5 },
        xaxis: { categories: days, labels: { style: { fontFamily: 'Cairo', fontSize: '11px', colors: '#8c9bae' } }, axisBorder: { show: false }, axisTicks: { show: false } },
        yaxis: { labels: { style: { fontFamily: 'Cairo', fontSize: '11px', colors: '#8c9bae' } } },
        grid: { borderColor: '#f0f3f7', strokeDashArray: 3 },
        legend: { position: 'top', horizontalAlign: 'left', fontFamily: 'Cairo', fontSize: '12px', labels: { colors: '#4a5e78' }, markers: { radius: 3 } },
        dataLabels: { enabled: false },
        tooltip: { style: { fontFamily: 'Cairo' }, y: { formatter: function(v) { return v + ' موظف'; } } }
    };
    new ApexCharts(document.querySelector('#attendanceChart'), attOpts).render();

    // --- Department Donut Chart ---
    var deptNames = {!! json_encode($departmentStats->pluck('name')) !!};
    var deptCounts = {!! json_encode($departmentStats->pluck('employees_count')) !!};

    if (deptNames.length > 0) {
        var deptOpts = {
            chart: { type: 'donut', height: 260, fontFamily: 'Cairo, sans-serif' },
            series: deptCounts,
            labels: deptNames,
            colors: ['#1B2A4A', '#2E6BA4', '#E8502F', '#0ead69', '#f5a623', '#7c5cfc', '#4e8cff', '#17c1bc', '#e85386', '#E8A838'],
            plotOptions: { pie: { donut: { size: '60%', labels: { show: true, name: { fontSize: '13px', fontFamily: 'Cairo', color: '#14202e' }, value: { fontSize: '20px', fontFamily: 'Cairo', fontWeight: 700, color: '#14202e', formatter: function(v) { return v + ' موظف'; } }, total: { show: true, label: 'الإجمالي', fontFamily: 'Cairo', fontSize: '12px', color: '#8c9bae', formatter: function(w) { return w.globals.seriesTotals.reduce(function(a,b){return a+b},0); } } } } } },
            legend: { position: 'bottom', fontFamily: 'Cairo', fontSize: '12px', labels: { colors: '#4a5e78' }, markers: { radius: 3 } },
            dataLabels: { enabled: false },
            stroke: { width: 3, colors: ['#fff'] },
            tooltip: { style: { fontFamily: 'Cairo' }, y: { formatter: function(v) { return v + ' موظف'; } } }
        };
        new ApexCharts(document.querySelector('#departmentChart'), deptOpts).render();
    } else {
        document.querySelector('#departmentChart').innerHTML = '<div style="text-align:center;padding:60px 20px;color:#8c9bae">لا توجد بيانات أقسام</div>';
    }
});
</script>
@endpush
@endsection