@extends('admin.layout')

@section('content')
<div class="flex items-center justify-between mb-12">
    <div>
        <h1 class="text-4xl font-black text-gray-900 tracking-tighter uppercase mb-2 block">Team <span class="text-[#CC2128]">Management</span></h1>
        <p class="text-[10px] font-black uppercase tracking-[0.3em] text-gray-400 italic">Manage your expert engineers across 5 languages.</p>
    </div>

    <a href="{{ route('admin.team-members.create') }}" class="bg-gray-900 text-white px-8 py-4 font-black uppercase tracking-widest text-[10px] hover:bg-[#CC2128] transition-all transform hover:-translate-y-1 shadow-lg">
        Add New Member
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
    @foreach($teamMembers as $member)
    <div class="group bg-white border-b-8 {{ $member->is_active ? 'border-[#CC2128]' : 'border-gray-200 opacity-75' }} shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden relative">
        <!-- Status Overlay -->
        <div class="absolute top-4 right-4 z-10">
            <span class="inline-flex items-center px-4 py-2 text-[10px] font-black uppercase tracking-widest {{ $member->is_active ? 'bg-green-50 text-green-600' : 'bg-red-50 text-red-600' }} border border-current">
                <span class="w-1.5 h-1.5 rounded-full {{ $member->is_active ? 'bg-green-600' : 'bg-red-600' }} mr-2"></span>
                {{ $member->is_active ? 'Active' : 'Hidden' }}
            </span>
        </div>

        <!-- Image Body -->
        <div class="h-80 bg-gray-100 overflow-hidden relative">
            @if($member->image)
                <img src="{{ asset('storage/'.$member->image) }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            @else
                <div class="w-full h-full flex flex-col items-center justify-center space-y-4">
                    <svg class="w-16 h-16 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    <span class="text-[10px] font-black uppercase tracking-widest text-gray-400">NO IMAGE</span>
                </div>
            @endif
            
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-80 group-hover:opacity-60 transition-opacity"></div>
            
            <div class="absolute bottom-6 left-6 right-6">
                <div class="text-[10px] font-black uppercase tracking-[0.2em] text-[#CC2128] mb-1">{{ $member->t('designation') }}</div>
                <h3 class="text-xl font-black text-white uppercase tracking-tight leading-none truncate">{{ $member->t('name') }}</h3>
            </div>
        </div>

        <!-- Info & Actions -->
        <div class="p-6 space-y-4">
            <div class="flex items-center justify-between">
                <div class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Order: {{ $member->sort_order }}</div>
                <div class="flex -space-x-1.5">
                    @foreach(['en', 'bn', 'cn', 'korean', 'japan'] as $lang)
                        @php $field = "name_{$lang}"; @endphp
                        <div class="w-6 h-6 rounded-full border border-white flex items-center justify-center text-[7px] font-black uppercase {{ $member->$field ? 'bg-[#CC2128] text-white' : 'bg-gray-100 text-gray-300' }}" title="{{ $lang }}">
                            {{ substr($lang, 0, 1) }}
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                <a href="{{ route('admin.team-members.edit', $member) }}" class="text-[10px] font-black uppercase tracking-widest text-[#CC2128] hover:text-gray-900 transition-colors">Edit</a>
                <form action="{{ route('admin.team-members.destroy', $member) }}" method="POST" onsubmit="return confirm('Delete this team member?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-[10px] font-black uppercase tracking-widest text-red-600 hover:text-red-800 transition-colors">Delete</button>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="mt-8">
    {{ $teamMembers->links() }}
</div>
@endsection