@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-gem" style="color: #E8502F;"></i> بنك المواهب
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">قاعدة بيانات المرشحين المحتملين</p>
        </div>
        <a href="{{ route('applicants.add-to-talent-bank') }}" 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>

    {{-- Search & Filter --}}
    <div style="background: white; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px; display: flex; gap: 12px; flex-wrap: wrap;">
        <form action="" method="GET" style="display: flex; gap: 12px; flex-wrap: wrap; width: 100%;">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث بالاسم أو المهارات..."
                style="flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none;">
            <select name="source" style="padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; background: white;">
                <option value="">كل المصادر</option>
                <option value="linkedin" {{ request('source') == 'linkedin' ? 'selected' : '' }}>لينكد إن</option>
                <option value="referral" {{ request('source') == 'referral' ? 'selected' : '' }}>ترشيح</option>
                <option value="career_fair" {{ request('source') == 'career_fair' ? 'selected' : '' }}>معرض توظيف</option>
                <option value="direct" {{ request('source') == 'direct' ? 'selected' : '' }}>تقديم مباشر</option>
            </select>
            <button type="submit" style="background: #1B2A4A; color: white; padding: 10px 20px; border: none; border-radius: 10px; font-size: 14px; cursor: pointer;">
                <i class="fas fa-search"></i> بحث
            </button>
        </form>
    </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: 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>
                </tr>
            </thead>
            <tbody>
                @forelse($talents as $talent)
                <tr style="border-top: 1px solid #F3F4F6;">
                    <td style="padding: 14px 16px;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <div style="width: 36px; height: 36px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #1B2A4A;">
                                {{ mb_substr($talent->name, 0, 1) }}
                            </div>
                            <span style="font-size: 14px; font-weight: 600; color: #1B2A4A;">{{ $talent->name }}</span>
                        </div>
                    </td>
                    <td style="padding: 14px 16px;">
                        @foreach(explode(',', $talent->skills ?? '') as $skill)
                            @if(trim($skill))
                            <span style="background: #EEF2FF; color: #1B2A4A; padding: 2px 8px; border-radius: 6px; font-size: 11px; margin-left: 4px; display: inline-block; margin-bottom: 2px;">{{ trim($skill) }}</span>
                            @endif
                        @endforeach
                    </td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #374151;">{{ $talent->experience }} سنة</td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #374151;">
                        @if($talent->source == 'linkedin') لينكد إن
                        @elseif($talent->source == 'referral') ترشيح
                        @elseif($talent->source == 'career_fair') معرض توظيف
                        @elseif($talent->source == 'direct') تقديم مباشر
                        @else {{ $talent->source }}
                        @endif
                    </td>
                    <td style="padding: 14px 16px; font-size: 14px; color: #6B7280;">{{ $talent->last_contact ? \Carbon\Carbon::parse($talent->last_contact)->format('Y/m/d') : '—' }}</td>
                    <td style="padding: 14px 16px; text-align: center;">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star" style="color: {{ $i <= ($talent->rating ?? 0) ? '#F59E0B' : '#E5E7EB' }}; font-size: 12px;"></i>
                        @endfor
                    </td>
                    <td style="padding: 14px 16px; text-align: center;">
                        @if(Route::has('applicants.talent-bank'))
                        <a href="{{ route('applicants.talent-bank', $talent->id) }}" style="color: #1B2A4A; margin-left: 8px; font-size: 15px;" title="عرض"><i class="fas fa-eye"></i></a>
                        @endif
                        @if(Route::has('recruitment.talent-bank.edit'))
                        <a href="{{ route('recruitment.talent-bank.edit', $talent->id) }}" style="color: #E8502F; font-size: 15px;" title="تعديل"><i class="fas fa-edit"></i></a>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="padding: 40px; text-align: center; color: #9CA3AF; font-size: 15px;">
                        <i class="fas fa-gem" style="font-size: 28px; margin-bottom: 10px; display: block; color: #D1D5DB;"></i>
                        لا يوجد مرشحون في بنك المواهب
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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