@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">تعديل بيانات: {{ $team->name }}</p>
        </div>
    </div>

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

        <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">
                        @if($team->image)
                            <img src="{{ Storage::url($team->image) }}" class="w-full h-full object-cover">
                        @else
                            <i class="fa-solid fa-camera text-gray-300 text-3xl"></i>
                        @endif
                    </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-sync"></i>
                            تغيير الصورة
                        </button>
                    </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', $team->name) }}"
                       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', $team->description) }}"
                       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-save"></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