@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-columns" style="color: #E8502F;"></i> خط التوظيف
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">متابعة مراحل التوظيف للمتقدمين</p>
        </div>
        @if(isset($jobs))
        <select id="jobFilter" onchange="window.location.href='?job_id='+this.value"
            style="padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; background: white;">
            <option value="">كل الوظائف</option>
            @foreach($jobs as $job)
                <option value="{{ $job->id }}" {{ request('job_id') == $job->id ? 'selected' : '' }}>{{ $job->title }}</option>
            @endforeach
        </select>
        @endif
    </div>

    {{-- Kanban Board --}}
    <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; overflow-x: auto; min-height: 500px;">
        @php
            $columns = [
                'applied' => ['title' => 'تم التقديم', 'color' => '#6366F1', 'bg' => '#EEF2FF'],
                'screening' => ['title' => 'الفرز', 'color' => '#F59E0B', 'bg' => '#FEF3C7'],
                'interview' => ['title' => 'المقابلة', 'color' => '#3B82F6', 'bg' => '#DBEAFE'],
                'offer' => ['title' => 'العرض الوظيفي', 'color' => '#10B981', 'bg' => '#DCFCE7'],
                'hired' => ['title' => 'تم التعيين', 'color' => '#059669', 'bg' => '#F0FDF4'],
            ];
        @endphp

        @foreach($columns as $status => $col)
        <div style="background: #F9FAFB; border-radius: 14px; padding: 16px; min-width: 220px;">
            {{-- Column Header --}}
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                <h3 style="font-size: 14px; color: {{ $col['color'] }}; margin: 0; font-weight: 700;">{{ $col['title'] }}</h3>
                <span style="background: {{ $col['bg'] }}; color: {{ $col['color'] }}; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;">
                    {{ isset($applicants) ? $applicants->where('status', $status)->count() : 0 }}
                </span>
            </div>

            {{-- Cards --}}
            @foreach(($applicants ?? collect())->where('status', $status) as $applicant)
            <a href="{{ route('applicants.show', $applicant->id) }}" style="text-decoration: none;">
                <div style="background: white; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-right: 3px solid {{ $col['color'] }}; transition: transform 0.15s;">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 50%; background: {{ $col['bg'] }}; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: {{ $col['color'] }};">
                            {{ mb_substr($applicant->name, 0, 1) }}
                        </div>
                        <div>
                            <div style="font-size: 14px; font-weight: 600; color: #1B2A4A;">{{ $applicant->name }}</div>
                            <div style="font-size: 11px; color: #9CA3AF;">{{ $applicant->applied_position ?? '' }}</div>
                        </div>
                    </div>
                    @if($applicant->email)
                    <div style="font-size: 11px; color: #6B7280; margin-bottom: 4px;">
                        <i class="fas fa-envelope" style="width: 14px;"></i> {{ $applicant->email }}
                    </div>
                    @endif
                    @if($applicant->created_at)
                    <div style="font-size: 11px; color: #9CA3AF;">
                        <i class="fas fa-clock" style="width: 14px;"></i> {{ $applicant->created_at->diffForHumans() }}
                    </div>
                    @endif
                </div>
            </a>
            @endforeach

            @if(isset($applicants) && $applicants->where('status', $status)->isEmpty())
            <div style="text-align: center; padding: 30px 10px; color: #D1D5DB; font-size: 13px;">
                <i class="fas fa-inbox" style="font-size: 22px; display: block; margin-bottom: 8px;"></i>
                لا يوجد متقدمون
            </div>
            @endif
        </div>
        @endforeach
    </div>
</div>
@endsection