@extends('layouts.app')

@section('title', 'معرض أعمال المتدرب: ' . ($talent->name ?? 'غير معروف') . ' - منصة ابدأ')

@section('content')
<div class="min-h-screen bg-[#f8fafc] py-12" x-data="{ showModal: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header Section -->
        <div class="mb-8">
            <a href="{{ route('employer.talents.index') }}" class="inline-flex items-center text-gray-400 hover:text-ebda-blue mb-4 transition-colors font-bold text-sm">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                العودة إلى سوق المواهب
            </a>
            <h1 class="text-2xl font-black text-[#1e3a8a] mb-2 text-right">معرض أعمال: {{ $talent->name }}</h1>
            <p class="text-gray-600 text-sm">استكشف المشاريع والإنجازات التي تثبت مهارات المتدرب</p>
        </div>

        <!-- Hero Profile Card -->
        <div class="bg-white rounded-[2.5rem] shadow-sm border border-gray-100 p-6 mb-8">
            <div class="flex flex-col lg:flex-row items-start gap-6">
                <!-- Avatar & Basic Info -->
                <div class="flex-1">
                    <div class="flex items-start gap-3 mb-3">
                        <div class="relative flex-shrink-0">
                            <x-user-avatar :user="$talent" size="w-12 h-12" />
                        </div>
                        <div>
                            <h2 class="text-lg font-bold text-gray-900 mb-1">{{ $talent->name }}</h2>
                            <p class="text-gray-500 text-xs">{{ $talent->email }}</p>
                            <p class="text-[#1e3a8a] font-medium text-xs mt-1">متدرب مؤهل</p>
                        </div>
                    </div>

                    <!-- Skills Badges -->
                    <div>
                        <h3 class="text-[10px] font-bold text-gray-700 mb-1.5">المهارات المتقنة</h3>
                        <div class="flex flex-wrap gap-1">
                            @foreach($talent->skills as $skill)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-blue-50 text-[#1e3a8a]">
                                {{ $skill->skill_name }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Stats Section -->
                <div class="lg:w-48">
                    <div class="grid grid-cols-2 gap-2">
                        <div class="bg-gradient-to-br from-blue-50 to-white rounded-xl p-3 border border-blue-100">
                            <div class="flex items-center justify-center w-8 h-8 bg-[#1e3a8a] rounded-lg mb-1.5 mx-auto">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                </svg>
                            </div>
                            <p class="text-xl font-black text-[#1e3a8a] text-center">{{ $talent->enrolledCourses->count() }}</p>
                            <p class="text-xs text-gray-600 text-center mt-0.5">كورس معتمد</p>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-white rounded-xl p-3 border border-green-100">
                            <div class="flex items-center justify-center w-8 h-8 bg-green-600 rounded-lg mb-1.5 mx-auto">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                                </svg>
                            </div>
                            <p class="text-xl font-black text-green-600 text-center">{{ $talent->skills->count() }}</p>
                            <p class="text-xs text-gray-600 text-center mt-0.5">مهارة متقنة</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Portfolio Gallery -->
        <div class="mb-8">
            <div class="flex items-center mb-6">
                <h3 class="text-2xl font-black text-gray-900">معرض الأعمال</h3>
                <div class="flex-1 h-1 bg-gradient-to-r from-[#1e3a8a] to-transparent mr-4"></div>
            </div>

            @if($portfolios && $portfolios->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($portfolios as $item)
                <div class="bg-white rounded-[2.5rem] shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow">
                    @if($item->type === 'image')
                    <div class="aspect-w-16 aspect-h-9 bg-gray-100">
                        @php
                            $fileExists = Storage::disk('public')->exists($item->file_path);
                            $imageUrl = $fileExists ? asset('storage/' . $item->file_path) : 'https://placehold.co/600x400/1e3a8a/FFFFFF?text=' . urlencode('نموذج عمل');
                        @endphp
                        <img src="{{ $imageUrl }}" alt="{{ $item->title }}" class="w-full h-48 object-cover">
                    @else
                    <div class="aspect-w-16 aspect-h-9 bg-gray-100 flex items-center justify-center h-48">
                        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    @endif

                    <div class="p-5">
                        <h4 class="font-bold text-lg text-gray-900 mb-2">{{ $item->title }}</h4>
                        <p class="text-gray-600 text-sm mb-3">{{ Str::limit($item->description, 120) }}</p>

                        @if($item->type !== 'image')
                        @php
                            $fileExists = Storage::disk('public')->exists($item->file_path);
                            $downloadUrl = $fileExists ? asset('storage/' . $item->file_path) : '#';
                        @endphp
                        @if($fileExists)
                        <a href="{{ $downloadUrl }}" target="_blank" download class="inline-flex items-center px-5 py-2.5 bg-[#1e3a8a] text-white rounded-xl font-bold hover:bg-blue-800 transition-colors text-sm">
                            <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            تحميل الملف
                        </a>
                        @else
                        <span class="inline-flex items-center px-5 py-2.5 bg-gray-100 text-gray-400 rounded-xl font-bold text-sm">
                            <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                            </svg>
                            ملف غير متوفر
                        </span>
                        @endif
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-[2.5rem] shadow-sm border border-gray-100 p-8 text-center">
                <div class="text-gray-400 mb-4">
                    <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
                <p class="text-gray-600 mb-3">هذا المتدرب بدأ مسيرته للتو، اطلع على مهاراته المتقنة في الكورسات أعلاه</p>
            </div>
            @endif
        </div>

        <!-- Sticky Contact Button -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 shadow-lg z-40">
            <div class="max-w-7xl mx-auto">
                <button @click="showModal = true" 
                        class="w-full md:w-auto md:mx-auto md:inline-flex items-center justify-center px-10 py-3 bg-[#1e3a8a] text-white rounded-2xl font-black hover:bg-blue-800 transition-all shadow-lg hover:shadow-xl">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    التواصل مع {{ $talent->name }}
                </button>
            </div>
        </div>

        <!-- Contact Modal -->
        <div x-show="showModal" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-50 overflow-y-auto"
             aria-labelledby="modal-title" 
             role="dialog" 
             aria-modal="true"
             style="display: none;">

            <!-- Backdrop -->
            <div class="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-md transition-opacity"
                 x-show="showModal"
                 @click="showModal = false"></div>

            <!-- Modal Panel -->
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div class="relative inline-block align-bottom bg-white rounded-[2.5rem] text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
                     x-show="showModal"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

                    <!-- Modal Header -->
                    <div class="bg-[#1e3a8a] px-6 py-4">
                        <h3 class="text-lg font-bold text-white" id="modal-title">
                            معلومات التواصل مع الكفاءة
                        </h3>
                    </div>

                    <!-- Modal Body -->
                    <div class="px-6 py-6">
                        <!-- Trainee Name -->
                        <div class="mb-6">
                            <p class="text-gray-600 mb-3">تواصل مباشرة مع الموهبة:</p>
                            <div class="flex items-center bg-gray-50 rounded-xl p-4">
                                <div class="w-12 h-12 bg-[#1e3a8a] rounded-full flex items-center justify-center text-white text-lg font-bold ml-3">
                                    {{ mb_substr($talent->name, 0, 1) }}
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900">{{ $talent->name }}</h4>
                                    <p class="text-sm text-gray-600">متدرب مؤهل</p>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Options -->
                        <div class="space-y-3">
                            <!-- WhatsApp -->
                            @if($talent->phone && !empty(trim($talent->phone)))
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $talent->phone) }}?text={{ urlencode('مرحباً ' . $talent->name . '، لقد شاهدنا ملفك المتميز على منصة ابدأ ونود التواصل معك بخصوص فرصة عمل.') }}"
                               target="_blank"
                               class="flex items-center justify-center w-full p-4 bg-green-500 hover:bg-green-600 text-white rounded-xl transition-colors">
                                <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                </svg>
                                <span class="font-bold">تواصل عبر واتساب</span>
                            </a>
                            @else
                            <button disabled
                                    class="flex items-center justify-center w-full p-4 bg-green-300 text-white rounded-xl cursor-not-allowed opacity-60">
                                <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                </svg>
                                <span class="font-bold">رقم الهاتف غير متوفر</span>
                            </button>
                            @endif

                            <!-- Email -->
                            <a href="https://mail.google.com/mail/?view=cm&fs=1&to={{ $talent->email }}&su={{ urlencode('بخصوص ملفك على منصة ابدأ') }}"
                               target="_blank"
                               class="flex items-center justify-center w-full p-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition-colors">
                                <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                                </svg>
                                <span class="font-bold">تواصل عبر Gmail</span>
                            </a>
                        </div>

                        <!-- Note -->
                        <p class="text-xs text-gray-500 mt-4 text-center">
                            نرجو إبلاغ إدارة المنصة في حال تم الاتفاق المبدئي على التوظيف لضمان حقوق الأطراف
                        </p>
                    </div>

                    <!-- Modal Footer -->
                    <div class="px-6 py-4 bg-gray-50">
                        <button @click="showModal = false"
                                class="w-full py-3 bg-white border border-gray-200 text-gray-700 rounded-xl font-bold hover:bg-gray-50 transition-colors">
                            إغلاق
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection