@extends('admin.layouts.admin')
@section('title', 'إضافة عضو فريق')

@section('content')
<div class="max-w-2xl mx-auto">

    <div class="flex items-center gap-3 mb-8">
        <a href="{{ route('admin.team.index') }}" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-gray-500 hover:text-teal-600 shadow-sm border border-gray-100 transition">
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">إضافة عضو جديد</h2>
            <p class="text-gray-500 text-sm">أضف فرداً جديداً لفريق عمل الشركة</p>
        </div>
    </div>

    <form action="{{ route('admin.team.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
            
            {{-- رفع الصورة --}}
            <div class="mb-8">
                <label class="block text-sm font-bold text-gray-700 mb-4">صورة العضو</label>
                <div class="flex items-center gap-6">
                    <div id="image-preview" class="w-32 h-32 rounded-2xl bg-gray-50 border-2 border-dashed border-gray-200 flex items-center justify-center overflow-hidden">
                        <i class="fa-solid fa-camera text-gray-300 text-3xl"></i>
                    </div>
                    <div class="flex-1">
                        <input type="file" name="image" id="image-input" class="hidden" accept="image/*" onchange="previewImage(event)">
                        <button type="button" onclick="document.getElementById('image-input').click()" 
                                class="w-full py-3 border-2 border-teal-100 rounded-xl text-teal-600 font-bold hover:bg-teal-50 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-upload"></i>
                            اختر صورة
                        </button>
                        <p class="text-xs text-gray-400 mt-2 text-right">يفضل صورة مربعة (1:1) وبجودة عالية</p>
                    </div>
                </div>
                @error('image') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
            </div>

            <hr class="mb-8 border-gray-50">

            {{-- الاسم --}}
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">اسم العضو <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" placeholder="الاسم الكامل"
                       class="w-full px-5 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-teal-500 focus:outline-none transition" required>
                @error('name') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
            </div>

            {{-- الوصف (المسمى الوظيفي) --}}
            <div class="mb-2">
                <label class="block text-sm font-bold text-gray-700 mb-2">الوصف / المسمى الوظيفي <span class="text-red-500">*</span></label>
                <input type="text" name="description" value="{{ old('description') }}" placeholder="مثال: المدير التنفيذي أو مبرمج تطبيقات"
                       class="w-full px-5 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-teal-500 focus:outline-none transition" required>
                @error('description') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
            </div>
        </div>

        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-4 rounded-xl transition shadow-md flex items-center justify-center gap-2">
            <i class="fa-solid fa-user-check"></i>
            حفظ العضو
        </button>

    </form>
</div>

<script>
    function previewImage(event) {
        const reader = new FileReader();
        const preview = document.getElementById('image-preview');
        reader.onload = function() {
            preview.innerHTML = `<img src="${reader.result}" class="w-full h-full object-cover">`;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endsection