@extends('layouts.app')
@section('title', 'تهيئة الموظفين الجدد')

@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff}
.stat-icon.navy{background:#1B2A4A}.stat-icon.green{background:#10b981}.stat-icon.yellow{background:#f59e0b}.stat-icon.blue{background:#3b82f6}
.stat-info h3{margin:0;font-size:1.4rem;font-weight:700;color:#1B2A4A}.stat-info p{margin:2px 0 0;font-size:.85rem;color:#64748b}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.table-wrapper{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px 12px;text-align:right;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.data-table th{background:#f8fafc;font-weight:600;color:#64748b;font-size:.85rem}
.data-table tr:hover{background:#f8fafc}
.badge{padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600}
.badge-success{background:#d1fae5;color:#065f46}.badge-warning{background:#fef3c7;color:#92400e}.badge-info{background:#dbeafe;color:#1e40af}
.btn-primary{background:#E8502F;color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}
.btn-primary:hover{background:#d4431f}
.btn-success{background:#10b981;color:#fff;border:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.85rem}
.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}
.empty-state i{font-size:3rem;margin-bottom:12px;display:block}
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:#fff;border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}
.stat-modal-header h3{margin:0;font-size:1.05rem;color:#1B2A4A}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#64748b;line-height:1;padding:0 4px}
.stat-modal-body{padding:20px;overflow-y:auto}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.9rem;color:#1B2A4A}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:.9rem;font-family:inherit;box-sizing:border-box}
.form-group textarea{resize:vertical;min-height:80px}
.stat-card[onclick]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
</style>
@endpush

@section('content')
<div class="page-header">
    <h1><i class="fas fa-user-plus"></i> تهيئة الموظفين الجدد</h1>
    <button class="btn-primary" onclick="openStatModal('addModal')"><i class="fas fa-plus"></i> إضافة مهمة</button>
</div>

<div class="stats-row">
    <div class="stat-card" onclick="openStatModal('totalModal')"><div class="stat-icon navy"><i class="fas fa-tasks"></i></div><div class="stat-info"><h3>{{ $stats['total'] ?? 0 }}</h3><p>إجمالي المهام</p></div></div>
    <div class="stat-card" onclick="openStatModal('pendingModal')"><div class="stat-icon yellow"><i class="fas fa-clock"></i></div><div class="stat-info"><h3>{{ $stats['pending'] ?? 0 }}</h3><p>قيد الانتظار</p></div></div>
    <div class="stat-card" onclick="openStatModal('progressModal')"><div class="stat-icon blue"><i class="fas fa-spinner"></i></div><div class="stat-info"><h3>{{ $stats['in_progress'] ?? 0 }}</h3><p>قيد التنفيذ</p></div></div>
    <div class="stat-card" onclick="openStatModal('completedModal')"><div class="stat-icon green"><i class="fas fa-check-circle"></i></div><div class="stat-info"><h3>{{ $stats['completed'] ?? 0 }}</h3><p>مكتملة</p></div></div>
</div>

<div class="card">
    <div class="table-wrapper">
        <table class="data-table">
            <thead>
                <tr><th>#</th><th>الموظف</th><th>المهمة</th><th>الفئة</th><th>الموعد</th><th>الحالة</th><th>إجراءات</th></tr>
            </thead>
            <tbody>
                @forelse($tasks as $i => $t)
                <tr>
                    <td>{{ $tasks->firstItem() + $i }}</td>
                    <td>{{ $t->employee_name ?? '-' }}</td>
                    <td>{{ $t->title }}</td>
                    <td>
                        @switch($t->category)
                            @case('documents') مستندات @break
                            @case('training') تدريب @break
                            @case('equipment') معدات @break
                            @case('access') صلاحيات @break
                            @case('orientation') توجيه @break
                            @default {{ $t->category }}
                        @endswitch
                    </td>
                    <td>{{ $t->due_date }}</td>
                    <td>
                        @if($t->status=='completed')
                            <span class="badge badge-success">مكتمل</span>
                        @elseif($t->status=='in_progress')
                            <span class="badge badge-info">قيد التنفيذ</span>
                        @else
                            <span class="badge badge-warning">قيد الانتظار</span>
                        @endif
                    </td>
                    <td>
                        @if($t->status!='completed')
                            <form action="{{ url('/onboarding/' . $t->id . '/complete') }}" method="POST" style="display:inline">
                                @csrf
                                <button type="submit" class="btn-success"><i class="fas fa-check"></i></button>
                            </form>
                        @else
                            <span style="color:#10b981"><i class="fas fa-check-double"></i></span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7">
                        <div class="empty-state">
                            <i class="fas fa-user-plus"></i>
                            <p>لا توجد مهام</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($tasks->hasPages())
    <div style="margin-top:16px;display:flex;justify-content:center">
        {{ $tasks->links() }}
    </div>
    @endif
</div>

@foreach(['totalModal' => 'جميع المهام', 'pendingModal' => 'قيد الانتظار', 'progressModal' => 'قيد التنفيذ', 'completedModal' => 'مكتملة'] as $mid => $mtitle)
<div class="stat-modal-overlay" id="{{ $mid }}">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3>{{ $mtitle }}</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table class="data-table">
                <thead><tr><th>الموظف</th><th>المهمة</th><th>الفئة</th><th>الموعد</th></tr></thead>
                <tbody>
                @php $filter = str_replace('Modal','',$mid); @endphp
                @foreach($tasks as $t)
                    @if($filter=='total' || ($filter=='pending' && $t->status=='pending') || ($filter=='progress' && $t->status=='in_progress') || ($filter=='completed' && $t->status=='completed'))
                    <tr><td>{{ $t->employee_name ?? '-' }}</td><td>{{ $t->title }}</td><td>{{ $t->category }}</td><td>{{ $t->due_date }}</td></tr>
                    @endif
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endforeach

<div class="stat-modal-overlay" id="addModal">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3>إضافة مهمة تهيئة</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <form action="{{ url('/onboarding') }}" method="POST">
                @csrf
                <div class="form-group"><label>رقم الموظف</label><input type="number" name="employee_id" required></div>
                <div class="form-group"><label>المهمة</label><input type="text" name="title" required></div>
                <div class="form-group"><label>الوصف</label><textarea name="description" rows="3"></textarea></div>
                <div class="form-group">
                    <label>الفئة</label>
                    <select name="category" required>
                        <option value="documents">مستندات</option>
                        <option value="training">تدريب</option>
                        <option value="equipment">معدات</option>
                        <option value="access">صلاحيات</option>
                        <option value="orientation">توجيه</option>
                    </select>
                </div>
                <div class="form-group"><label>المسؤول (رقم الموظف)</label><input type="number" name="assigned_to"></div>
                <div class="form-group"><label>الموعد</label><input type="date" name="due_date" required></div>
                <button type="submit" class="btn-primary" style="width:100%">إضافة</button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function openStatModal(id){document.getElementById(id).classList.add('active')}
function closeStatModal(el){el.closest('.stat-modal-overlay').classList.remove('active')}
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.stat-modal-overlay.active').forEach(function(m){m.classList.remove('active')})}});
</script>
@endpush