@extends('layouts.app')
@section('title', 'إدارة الوظائف')
@section('content')
@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}.badge-secondary{background:#f1f5f9;color:#475569}
.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:8px 16px;border-radius:8px;cursor:pointer;font-size:.85rem}
.btn-sm{padding:4px 12px;font-size:.8rem;border-radius:6px;border:none;cursor:pointer}
.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);transform:translateY(20px);transition:transform .25s}.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.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}.stat-modal-close:hover{color:#ef4444}
.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:.85rem;color:#374151}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem}
.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
<div class="page-header"><h1><i class="fas fa-briefcase"></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"><div class="stat-icon navy"><i class="fas fa-briefcase"></i></div><div class="stat-info"><h3>{{ $stats['total'] ?? 0 }}</h3><p>إجمالي الوظائف</p></div></div>
    <div class="stat-card"><div class="stat-icon green"><i class="fas fa-bullhorn"></i></div><div class="stat-info"><h3>{{ $stats['published'] ?? 0 }}</h3><p>المنشورة</p></div></div>
    <div class="stat-card"><div class="stat-icon blue"><i class="fas fa-file-alt"></i></div><div class="stat-info"><h3>{{ $stats['draft'] ?? 0 }}</h3><p>مسودة</p></div></div>
    <div class="stat-card"><div class="stat-icon yellow"><i class="fas fa-lock"></i></div><div class="stat-info"><h3>{{ $stats['closed'] ?? 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($jobPostings as $i => $p)
<tr><td>{{ $i+1 }}</td><td>{{ $p->title }}</td><td>{{ $p->employment_type }}</td><td>{{ $p->location ?? '-' }}</td>
<td>@if($p->status=='published')<span class="badge badge-success">منشورة</span>@elseif($p->status=='draft')<span class="badge badge-warning">مسودة</span>@else<span class="badge badge-secondary">مغلقة</span>@endif</td>
<td>{{ $p->published_at ?? '-' }}</td>
<td style="white-space:nowrap">
@if($p->status=='draft')<form action="/job-postings/{{ $p->id }}/publish" method="POST" style="display:inline">@csrf<button class="btn-sm btn-success">نشر</button></form>@endif
@if($p->status=='published')<form action="/job-postings/{{ $p->id }}/close" method="POST" style="display:inline">@csrf<button class="btn-sm" style="background:#f59e0b;color:#fff">إغلاق</button></form>@endif
</td></tr>
@empty<tr><td colspan="7"><div class="empty-state"><i class="fas fa-briefcase"></i>لا توجد وظائف</div></td></tr>@endforelse
</tbody></table></div>{{ $jobPostings->links() }}</div>
<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="/job-postings" method="POST">@csrf
<div class="form-group"><label>المسمى الوظيفي</label><input type="text" name="title" required></div>
<div class="form-group"><label>القسم</label><select name="department_id" required>@foreach($departments ?? [] as $dept)<option value="{{ $dept->id }}">{{ $dept->name }}</option>@endforeach</select></div>
<div class="form-group"><label>نوع التوظيف</label><select name="employment_type"><option value="full_time">دوام كامل</option><option value="part_time">دوام جزئي</option><option value="contract">عقد</option><option value="internship">تدريب</option></select></div>
<div class="form-group"><label>مستوى الخبرة</label><select name="experience_level"><option value="entry">مبتدئ</option><option value="mid">متوسط</option><option value="senior">خبير</option><option value="lead">قيادي</option></select></div>
<div class="form-group"><label>الموقع</label><input type="text" name="location"></div>
<div class="form-group"><label>الوصف</label><textarea name="description" rows="3"></textarea></div>
<div class="form-group"><label>المتطلبات</label><textarea name="requirements" rows="3"></textarea></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="form-group"><label>الحد الأدنى للراتب</label><input type="number" name="salary_min"></div>
<div class="form-group"><label>الحد الأقصى</label><input type="number" name="salary_max"></div></div>
<div class="form-group"><label>الموعد النهائي</label><input type="date" name="deadline"></div>
<button type="submit" class="btn-primary" style="width:100%">إضافة</button></form></div></div></div>
@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
@endsection