@extends('layouts.admin')

@section('title', 'Manage Team Members')

@push('extra_head')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
<div class="container mx-auto max-w-6xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Manage Team</h1>
        <a href="{{ route('admin.team.create') }}" class="bg-brand-primary hover:bg-brand-accent text-white font-bold py-2.5 px-5 rounded-lg shadow-md shadow-brand-primary/20 transition flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Add Team Member
        </a>
    </div>

    <div class="bg-white shadow-sm rounded-xl border border-slate-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full leading-normal">
                <thead>
                    <tr>
                        <th class="px-5 py-4 border-b-2 border-slate-100/80 bg-slate-50 w-12 text-center text-xs font-bold text-slate-500 uppercase tracking-wider"></th>
                        <th class="px-5 py-4 border-b-2 border-slate-100/80 bg-slate-50 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Name</th>
                        <th class="px-5 py-4 border-b-2 border-slate-100/80 bg-slate-50 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Role</th>
                        <th class="px-5 py-4 border-b-2 border-slate-100/80 bg-slate-50 text-center text-xs font-bold text-slate-500 uppercase tracking-wider">Status</th>
                        <th class="px-5 py-4 border-b-2 border-slate-100/80 bg-slate-50 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100" id="sortable-list">
                    @forelse ($members as $member)
                    <tr data-id="{{ $member->id }}" class="hover:bg-slate-50/50 transition duration-150 bg-white group">
                        <td class="px-5 py-5 text-sm cursor-move text-slate-300 hover:text-slate-500">
                            <svg class="w-5 h-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>
                        </td>
                        <td class="px-5 py-5 text-sm">
                            <div class="flex items-center gap-4">
                                @if($member->image_path)
                                    <img src="{{ asset($member->image_path) }}" alt="{{ $member->name }}" class="w-10 h-10 rounded-full object-cover border border-slate-200">
                                @else
                                    <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-400 font-bold border border-slate-200">
                                        {{ substr($member->name, 0, 1) }}
                                    </div>
                                @endif
                                <div>
                                    <p class="text-slate-900 font-bold">{{ $member->name }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-5 text-sm">
                            <p class="text-slate-600 font-medium">{{ $member->role }}</p>
                        </td>
                        <td class="px-5 py-5 text-sm text-center">
                            <form action="{{ route('admin.team.toggle', $member) }}" method="POST" class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="inline-block px-3 py-1 text-xs font-bold rounded-full border transition-colors {{ $member->is_active ? 'bg-emerald-50 text-emerald-600 border-emerald-200 hover:bg-emerald-100' : 'bg-rose-50 text-rose-600 border-rose-200 hover:bg-rose-100' }}">
                                    {{ $member->is_active ? 'Active' : 'Inactive' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-5 py-5 text-sm text-right">
                            <div class="flex items-center justify-end gap-3 opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity">
                                <a href="{{ route('admin.team.edit', $member) }}" class="p-2 text-slate-400 hover:text-brand-primary bg-slate-50 hover:bg-brand-light rounded-lg transition" title="Edit">
                                    <svg class="w-4 h-4" 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"></path></svg>
                                </a>
                                <form method="POST" action="{{ route('admin.team.destroy', $member) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this team member?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-slate-400 hover:text-red-500 bg-slate-50 hover:bg-red-50 rounded-lg transition" title="Delete">
                                        <svg class="w-4 h-4" 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"></path></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-5 py-10 text-center text-slate-500 bg-white">
                            <div class="flex flex-col items-center justify-center">
                                <svg class="w-12 h-12 text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                                <p class="text-lg font-medium text-slate-900 mb-1">No team members yet</p>
                                <p class="text-sm">Get started by creating a new team member.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('extra_scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var el = document.getElementById('sortable-list');
        if (el) {
            var sortable = Sortable.create(el, {
                animation: 150,
                handle: '.cursor-move',
                ghostClass: 'bg-slate-100',
                onEnd: function () {
                    var order = sortable.toArray();
                    fetch('{{ route('admin.team.reorder') }}', {
                        method: 'POST',
                        headers: { 
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({ order: order })
                    })
                    .then(response => response.json())
                    .then(data => console.log('Order updated via Laravel API'))
                    .catch(error => console.error('Error:', error));
                }
            });
        }
    });
</script>
@endpush
