@extends('layouts.app')

@section('title', 'الوظائف الشاغرة')

@section('content')
<div style="padding: 28px;">
    {{-- Header --}}
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <div>
            <h1 style="font-size: 22px; color: #1B2A4A; margin: 0 0 4px;">
                <i class="fas fa-briefcase" style="color: #E8502F;"></i> الوظائف الشاغرة
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">إدارة الإعلانات الوظيفية والشواغر المتاحة</p>
        </div>
        <a href="{{ route('job-postings.create') }}" style="background: #E8502F; color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;">
            <i class="fas fa-plus"></i> إضافة وظيفة
        </a>
    </div>

    {{-- Stats --}}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px;">
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">إجمالي الوظائف</div>
            <div style="font-size: 26px; font-weight: 700; color: #1B2A4A;">{{ $jobs->count() ?? 0 }}</div>
        </div>
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">وظائف نشطة</div>
            <div style="font-size: 26px; font-weight: 700; color: #22C55E;">{{ $jobs->where('status', 'active')->count() ?? 0 }}</div>
        </div>
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">إجمالي الطلبات</div>
            <div style="font-size: 26px; font-weight: 700; color: #E8502F;">{{ $jobs->sum('applications_count') ?? 0 }}</div>
        </div>
    </div>

    {{-- Table --}}
    <div style="background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #F9FAFB;">
                    <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600;">المسمى الوظيفي</th>
                    <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600;">القسم</th>
                    <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600;">الموقع</th>
                    <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600;">نوع التوظيف</th>
                    <th style="padding: 14px 16px; text-align: center; font-size: 13px; color: #6B7280; font-weight: 600;">عدد الطلبات</th>
                    <th style="padding: 14px 16px; text-align: center; font-size: 13px; color: #6B7280; font-weight: 600;">الحالة</th>
                    <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: #6B7280; font-weight: 600;">تاريخ النشر</th>
                    <th style="padding: 14px 16px; text-align: center; font-size: 13px; color: #6B7280; font-weight: 600;">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($jobs as $job)
                <tr style="border-top: 1px solid #F3F4F6;">
                    <td style="padding: 14px 16px; font-size: 14px; color: #1B2A4A; font-weight: 600;">{{ $job->title }}</td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #374151;">{{ $job->department->name ?? '—' }}</td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #374151;">{{ $job->location }}</td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #374151;">
                        @if($job->type == 'full_time') دوام كامل
                        @elseif($job->type == 'part_time') دوام جزئي
                        @elseif($job->type == 'contract') عقد
                        @else {{ $job->type }}
                        @endif
                    </td>
                    <td style="padding: 14px 16px; text-align: center;">
                        <span style="background: #EEF2FF; color: #1B2A4A; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;">{{ $job->applications_count ?? 0 }}</span>
                    </td>
                    <td style="padding: 14px 16px; text-align: center;">
                        @if($job->status == 'active')
                            <span style="background: #DCFCE7; color: #166534; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;">نشطة</span>
                        @elseif($job->status == 'closed')
                            <span style="background: #FEE2E2; color: #991B1B; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;">مغلقة</span>
                        @else
                            <span style="background: #FEF3C7; color: #92400E; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;">مسودة</span>
                        @endif
                    </td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #6B7280;">{{ $job->posted_date ? \Carbon\Carbon::parse($job->posted_date)->format('Y/m/d') : '—' }}</td>
                    <td style="padding: 14px 16px; text-align: center;">
                        <a href="{{ route('job-postings.show', $job->id) }}" style="color: #1B2A4A; margin-left: 8px; font-size: 15px;" title="عرض"><i class="fas fa-eye"></i></a>
                        @if(Route::has('recruitment.jobs.edit'))
                        <a href="{{ route('recruitment.jobs.edit', $job->id) }}" style="color: #E8502F; margin-left: 8px; font-size: 15px;" title="تعديل"><i class="fas fa-edit"></i></a>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="padding: 40px; text-align: center; color: #9CA3AF; font-size: 15px;">
                        <i class="fas fa-briefcase" style="font-size: 28px; margin-bottom: 10px; display: block; color: #D1D5DB;"></i>
                        لا توجد وظائف شاغرة حالياً
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($jobs instanceof \Illuminate\Pagination\LengthAwarePaginator && $jobs->hasPages())
    <div style="margin-top: 20px; display: flex; justify-content: center;">
        {{ $jobs->links() }}
    </div>
    @endif
</div>
@endsection