@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-icon.red{background:#ef4444}
.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-danger{background:#fee2e2;color:#991b1b}.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 20px;border-radius:8px;cursor:pointer;font-size:.9rem}
.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}
.empty-state i{font-size:3rem;margin-bottom:12px;display:block}

.form-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}
.form-modal-overlay.active{opacity:1;pointer-events:auto}
.form-modal{background:#fff;border-radius:12px;width:92%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.form-modal-overlay.active .form-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;line-height:1;padding:0 4px}
.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-size:.88rem;font-weight:600;color:#1B2A4A}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:.9rem;font-family:'Cairo',sans-serif;direction:rtl}
.form-group textarea{resize:vertical;min-height:80px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#E8502F;box-shadow:0 0 0 3px rgba(232,80,47,.1)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:8px}
.btn-cancel{background:#f1f5f9;color:#475569;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem}

.btn-sm{padding:5px 12px;font-size:.8rem;border:none;border-radius:6px;cursor:pointer;font-weight:600}
.btn-view{background:#dbeafe;color:#1e40af}.btn-view:hover{background:#bfdbfe}
.btn-delete{background:#fee2e2;color:#991b1b}.btn-delete:hover{background:#fecaca}
.action-btns{display:flex;gap:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.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="fa-solid fa-user-plus"></i> التوظيف</h1>
    <button class="btn-primary" onclick="document.getElementById('addModal').classList.add('active')">
        <i class="fa-solid fa-plus"></i> إضافة متقدم
    </button>
</div>

{{-- Stats Row --}}
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-icon navy"><i class="fa-solid fa-briefcase"></i></div>
        <div class="stat-info">
            <h3>{{ $stats['total'] }}</h3>
            <p>إجمالي الطلبات</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue"><i class="fa-solid fa-comments"></i></div>
        <div class="stat-info">
            <h3>{{ $stats['interviewing'] }}</h3>
            <p>في مرحلة المقابلة</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon green"><i class="fa-solid fa-user-check"></i></div>
        <div class="stat-info">
            <h3>{{ $stats['hired'] }}</h3>
            <p>تم التوظيف</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon yellow"><i class="fa-solid fa-folder-open"></i></div>
        <div class="stat-info">
            <h3>{{ $stats['open'] }}</h3>
            <p>مفتوحة</p>
        </div>
    </div>
</div>

{{-- Add Form Modal --}}
<div class="form-modal-overlay" id="addModal">
    <div class="form-modal">
        <div class="stat-modal-header">
            <h3><i class="fa-solid fa-plus"></i> إضافة متقدم جديد</h3>
            <button class="stat-modal-close" onclick="this.closest('.form-modal-overlay').classList.remove('active')">&times;</button>
        </div>
        <div class="stat-modal-body">
            <form action="{{ route('recruitment.store') }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="job_title">المسمى الوظيفي</label>
                    <input type="text" name="job_title" id="job_title" placeholder="المسمى الوظيفي" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="applicant_name">اسم المتقدم</label>
                        <input type="text" name="applicant_name" id="applicant_name" placeholder="اسم المتقدم" required>
                    </div>
                    <div class="form-group">
                        <label for="department">القسم</label>
                        <input type="text" name="department" id="department" placeholder="القسم">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="applicant_email">البريد الإلكتروني</label>
                        <input type="email" name="applicant_email" id="applicant_email" placeholder="البريد الإلكتروني">
                    </div>
                    <div class="form-group">
                        <label for="applicant_phone">رقم الهاتف</label>
                        <input type="text" name="applicant_phone" id="applicant_phone" placeholder="رقم الهاتف">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="source">المصدر</label>
                        <input type="text" name="source" id="source" placeholder="مصدر التقديم">
                    </div>
                    <div class="form-group">
                        <label for="applied_date">تاريخ التقديم</label>
                        <input type="date" name="applied_date" id="applied_date">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="expected_salary">الراتب المتوقع</label>
                        <input type="number" name="expected_salary" id="expected_salary" step="0.01" min="0" placeholder="الراتب المتوقع">
                    </div>
                    <div class="form-group">
                        <label for="interview_date">تاريخ المقابلة</label>
                        <input type="date" name="interview_date" id="interview_date">
                    </div>
                </div>
                <div class="form-group">
                    <label for="notes">ملاحظات</label>
                    <textarea name="notes" id="notes" placeholder="ملاحظات إضافية"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel" onclick="this.closest('.form-modal-overlay').classList.remove('active')">إلغاء</button>
                    <button type="submit" class="btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Main Table --}}
<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>
                    <th>إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recruitments as $index => $recruitment)
                <tr>
                    <td>{{ $recruitments->firstItem() + $index }}</td>
                    <td>{{ $recruitment->job_title }}</td>
                    <td>{{ $recruitment->applicant_name }}</td>
                    <td>{{ $recruitment->department ?? '-' }}</td>
                    <td>
                        @php
                            $stageLabels = [
                                'applied' => 'تقديم',
                                'screening' => 'فرز',
                                'interview' => 'مقابلة',
                                'offer' => 'عرض',
                                'hired' => 'توظيف',
                            ];
                            $stageBadges = [
                                'applied' => 'badge-secondary',
                                'screening' => 'badge-info',
                                'interview' => 'badge-warning',
                                'offer' => 'badge-success',
                                'hired' => 'badge-success',
                            ];
                        @endphp
                        <span class="badge {{ $stageBadges[$recruitment->stage] ?? 'badge-secondary' }}">{{ $stageLabels[$recruitment->stage] ?? $recruitment->stage }}</span>
                    </td>
                    <td>
                        @php
                            $statusLabels = [
                                'open' => 'مفتوح',
                                'hired' => 'تم التوظيف',
                                'rejected' => 'مرفوض',
                                'closed' => 'مغلق',
                            ];
                            $statusBadges = [
                                'open' => 'badge-info',
                                'hired' => 'badge-success',
                                'rejected' => 'badge-danger',
                                'closed' => 'badge-secondary',
                            ];
                        @endphp
                        <span class="badge {{ $statusBadges[$recruitment->status] ?? 'badge-secondary' }}">{{ $statusLabels[$recruitment->status] ?? $recruitment->status }}</span>
                    </td>
                    <td>{{ $recruitment->applied_date ? date('Y-m-d', strtotime($recruitment->applied_date)) : date('Y-m-d', strtotime($recruitment->created_at)) }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ url('/recruitment/' . $recruitment->id) }}" class="btn-sm btn-view" title="عرض">
                                <i class="fa-solid fa-eye"></i>
                            </a>
                            <form action="{{ url('/recruitment/' . $recruitment->id) }}" method="POST" style="display:inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا الطلب؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-sm btn-delete" title="حذف">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8">
                        <div class="empty-state">
                            <i class="fa-solid fa-user-plus"></i>
                            <p>لا توجد طلبات توظيف حالياً</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div style="margin-top:16px">
        {{ $recruitments->links() }}
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.form-modal-overlay.active').forEach(function(m){m.classList.remove('active')})}});
</script>
@endpush