@extends('layouts.admin')

@section('header')
    Team
@endsection

@section('content')
    <div class="space-y-8">
        <!-- Header Section -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Team Members</h1>
                    <p class="text-gray-600 mt-1">Manage your company's team members</p>
                </div>
                <div class="flex items-center space-x-3">
                    <!-- Search Bar -->
                    <div class="relative">
                        <input type="text" 
                               placeholder="Search team members..." 
                               class="pl-10 pr-4 py-2.5 w-64 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200"
                               id="team-search-input">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                    </div>
                    
                    <!-- Create Button -->
                    <a href="{{ route('admin.team.create') }}" 
                       class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm font-medium rounded-lg hover:from-red-700 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 shadow-sm hover:shadow-md transition-all duration-200">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Add Team Member
                    </a>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-rose-100 rounded-lg">
                        <svg class="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-2xl font-bold text-gray-900">{{ $teamMembers->total() ?? 0 }}</p>
                        <p class="text-sm text-gray-500">Total Team Members</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-green-100 rounded-lg">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-2xl font-bold text-gray-900">{{ $teamMembers->where('is_published', true)->count() ?? 0 }}</p>
                        <p class="text-sm text-gray-500">Published</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-purple-100 rounded-lg">
                        <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-2xl font-bold text-gray-900">{{ $teamMembers->where('is_featured', true)->count() ?? 0 }}</p>
                        <p class="text-sm text-gray-500">Featured</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex flex-wrap items-center gap-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm font-medium text-gray-700">Filter:</span>
                </div>
                <button data-filter="all" 
                        class="px-4 py-2 text-sm font-medium bg-rose-100 text-rose-700 rounded-lg hover:bg-rose-200 focus:outline-none focus:ring-2 focus:ring-rose-500 transition-all duration-200">
                    All
                </button>
                <button data-filter="published" 
                        class="px-4 py-2 text-sm font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200">
                    Published
                </button>
                <button data-filter="draft" 
                        class="px-4 py-2 text-sm font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200">
                    Drafts
                </button>
                <button data-filter="featured" 
                        class="px-4 py-2 text-sm font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200">
                    Featured
                </button>
            </div>
        </div>

        <!-- Team Members Grid/List -->
        @if($teamMembers->count() > 0)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">Team Members</h3>
                        <div class="flex items-center space-x-2">
                            <button class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none" id="view-grid">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                                </svg>
                            </button>
                            <button class="p-1 text-gray-700 hover:text-gray-900 focus:outline-none" id="view-list">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="divide-y divide-gray-200">
                    @foreach($teamMembers as $member)
                        <div class="team-member-row" 
                             data-status="{{ $member->is_published ? 'published' : 'draft' }}"
                             data-featured="{{ $member->is_featured ? 'true' : 'false' }}">
                            <div class="p-6">
                                <div class="flex flex-col sm:flex-row sm:items-center">
                                    <div class="flex items-center flex-grow">
                                        <!-- Image -->
                                        <div class="flex-shrink-0">
                                            <div class="relative h-16 w-16 rounded-full overflow-hidden bg-gray-100 border border-gray-200">
                                                @if($member->image)
                                                    <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}" class="h-full w-full object-cover">
                                                @else
                                                    <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                                    </svg>
                                                @endif
                                                <div class="absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-white {{ $member->is_published ? 'bg-green-400' : 'bg-gray-400' }}"></div>
                                            </div>
                                        </div>
                                        
                                        <!-- Details -->
                                        <div class="ml-4 flex-grow">
                                            <div class="flex items-center">
                                                <h4 class="text-lg font-medium text-gray-900">{{ $member->name }}</h4>
                                                @if($member->is_featured)
                                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">Featured</span>
                                                @endif
                                                @if(!$member->is_published)
                                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Draft</span>
                                                @endif
                                            </div>
                                            <p class="text-sm text-gray-600 mt-1">{{ $member->position }}</p>
                                            <p class="text-sm text-gray-500 mt-1 line-clamp-1">{{ Str::limit($member->bio, 100) }}</p>
                                        </div>
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="mt-4 sm:mt-0 flex items-center space-x-3">
                                        <a href="{{ route('admin.team.edit', $member) }}" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-rose-500">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                            Edit
                                        </a>
                                        <form action="{{ route('admin.team.destroy', $member) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this team member?');" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500">
                                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $teamMembers->links() }}
                </div>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
                <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-1">No team members yet</h3>
                <p class="text-gray-500 mb-6">Get started by adding your first team member</p>
                <a href="{{ route('admin.team.create') }}" 
                   class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm font-medium rounded-lg hover:from-red-700 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 shadow-sm hover:shadow-md transition-all duration-200">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Add Team Member
                </a>
            </div>
        @endif
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Search functionality
            const searchInput = document.getElementById('team-search-input');
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase().trim();
                const teamMemberRows = document.querySelectorAll('.team-member-row');
                
                teamMemberRows.forEach(row => {
                    const name = row.querySelector('h4').textContent.toLowerCase();
                    const position = row.querySelector('p').textContent.toLowerCase();
                    const bio = row.querySelectorAll('p')[1]?.textContent.toLowerCase();
                    
                    if (name.includes(searchTerm) || 
                        position.includes(searchTerm) || 
                        bio.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });

            // Filter functionality
            const filterButtons = document.querySelectorAll('[data-filter]');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const filter = this.dataset.filter;
                    const teamMemberRows = document.querySelectorAll('.team-member-row');
                    
                    // Update active state
                    filterButtons.forEach(btn => {
                        btn.classList.remove('bg-rose-100', 'text-rose-700');
                        btn.classList.add('bg-gray-100', 'text-gray-700');
                    });
                    this.classList.remove('bg-gray-100', 'text-gray-700');
                    this.classList.add('bg-rose-100', 'text-rose-700');
                    
                    // Filter team members
                    teamMemberRows.forEach(row => {
                        const status = row.dataset.status;
                        const featured = row.dataset.featured;
                        
                        let showRow = true;
                        
                        switch (filter) {
                            case 'published':
                                showRow = status === 'published';
                                break;
                            case 'draft':
                                showRow = status === 'draft';
                                break;
                            case 'featured':
                                showRow = featured === 'true';
                                break;
                            case 'all':
                            default:
                                showRow = true;
                                break;
                        }
                        
                        row.style.display = showRow ? '' : 'none';
                    });
                });
            });

            // View toggle
            const viewGrid = document.getElementById('view-grid');
            const viewList = document.getElementById('view-list');
            const teamList = document.querySelector('.divide-y');
            
            viewGrid.addEventListener('click', function() {
                viewGrid.classList.add('text-gray-700');
                viewGrid.classList.remove('text-gray-500');
                viewList.classList.add('text-gray-500');
                viewList.classList.remove('text-gray-700');
                
                // Add grid view classes
                teamList.classList.add('grid', 'grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-3', 'gap-4', 'p-4');
                teamList.classList.remove('divide-y');
                
                // Update each row for grid view
                document.querySelectorAll('.team-member-row').forEach(row => {
                    row.classList.add('border', 'border-gray-200', 'rounded-lg');
                });
            });
            
            viewList.addEventListener('click', function() {
                viewList.classList.add('text-gray-700');
                viewList.classList.remove('text-gray-500');
                viewGrid.classList.add('text-gray-500');
                viewGrid.classList.remove('text-gray-700');
                
                // Remove grid view classes
                teamList.classList.remove('grid', 'grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-3', 'gap-4', 'p-4');
                teamList.classList.add('divide-y');
                
                // Update each row for list view
                document.querySelectorAll('.team-member-row').forEach(row => {
                    row.classList.remove('border', 'border-gray-200', 'rounded-lg');
                });
            });
        });
    </script>
    @endpush
@endsection