@extends('crm.layouts.app')

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

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Team Members</h1>
        <p class="mt-1 text-sm text-gray-500">Manage your studio's team members and their roles.</p>
    </div>
    <button onclick="openAddTeamMemberModal()" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <i class="fas fa-user-plus mr-2"></i>Add Team Member
    </button>
</div>

<!-- Team Members Table -->
<div class="mt-8 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-300">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Rate</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Joined</th>
                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                    <span class="sr-only">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 bg-white">
            @forelse($teamMembers as $member)
                <tr class="hover:bg-gray-50">
                    <td class="whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6">
                        <div class="flex items-center">
                            <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                <span class="text-sm font-medium text-indigo-600">
                                    {{ substr($member->name, 0, 1) }}
                                </span>
                            </div>
                            <div class="ml-4">
                                <div class="font-medium text-gray-900">{{ $member->name }}</div>
                                @if($member->role_description)
                                    <div class="text-sm text-gray-500">{{ $member->role_description }}</div>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $member->email }}</td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                        <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium
                            @if($member->getPrimaryRoleName() === 'Owner') bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-700/10
                            @elseif($member->getPrimaryRoleName() === 'Manager') bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10
                            @elseif($member->getPrimaryRoleName() === 'Artist') bg-green-50 text-green-700 ring-1 ring-inset ring-green-700/10
                            @elseif($member->getPrimaryRoleName() === 'Receptionist') bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-700/10
                            @else bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-700/10
                            @endif">
                            {{ $member->getPrimaryRoleName() }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        @if($member->hourly_rate)
                            ${{ number_format($member->hourly_rate, 2) }}/hr
                        @else
                            <span class="text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                        <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $member->is_active ? 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20' : 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20' }}">
                            {{ $member->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {{ $member->joined_at ? $member->joined_at->format('M j, Y') : 'N/A' }}
                    </td>
                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                        <div class="flex justify-end gap-x-3">
                            <!-- Edit -->
                            <button onclick="editTeamMember({{ $member->id }}, '{{ $member->name }}', '{{ $member->email }}', '{{ $member->getPrimaryRoleName() }}', '{{ $member->hourly_rate }}', '{{ $member->role_description }}', {{ $member->is_active ? 'true' : 'false' }})"
                                    class="text-indigo-600 hover:text-indigo-900 transition"
                                    title="Edit">
                                <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="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>
                            </button>

                            <!-- Toggle Active/Inactive -->
                            <form method="POST" action="{{ route('crm.team.toggle', $member) }}" class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit"
                                        class="text-{{ $member->is_active ? 'yellow' : 'green' }}-600 hover:text-{{ $member->is_active ? 'yellow' : 'green' }}-900 transition"
                                        title="{{ $member->is_active ? 'Deactivate' : 'Activate' }}">
                                    @if($member->is_active)
                                        <!-- Pause/Deactivate Icon -->
                                        <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="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    @else
                                        <!-- Play/Activate Icon -->
                                        <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    @endif
                                </button>
                            </form>

                            <!-- Delete -->
                            <form method="POST" action="{{ route('crm.team.remove', $member) }}" class="inline" onsubmit="return confirm('Are you sure you want to remove {{ $member->name }}?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="text-red-600 hover:text-red-900 transition"
                                        title="Remove">
                                    <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="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>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-3 py-12 text-center text-sm text-gray-500">
                        <i class="fas fa-users text-3xl mb-2 text-gray-400"></i>
                        <div class="font-medium text-gray-900">No team members found</div>
                        <div class="mt-1">Add your first team member to get started</div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Add Team Member Modal -->
<div id="addTeamMemberModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Add Team Member</h3>
                <button onclick="closeAddTeamMemberModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <form method="POST" action="{{ route('crm.team.add') }}">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                        <input type="text" name="name" required
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                        <input type="email" name="email" required
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Role</label>
                        <select name="role" required
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            <option value="">Select Role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Hourly Rate ($)</label>
                        <input type="number" name="hourly_rate" step="0.01" min="0" max="999.99"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Role Description (Optional)</label>
                        <input type="text" name="role_description" placeholder="e.g., Specializes in traditional tattoos"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeAddTeamMemberModal()" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        <i class="fas fa-user-plus mr-2"></i>Add Member
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Team Member Modal -->
<div id="editTeamMemberModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Edit Team Member</h3>
                <button onclick="closeEditTeamMemberModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <form id="editTeamMemberForm" method="POST">
                @csrf
                @method('PUT')
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                        <input type="text" name="name" id="edit_name" required
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                        <input type="email" name="email" id="edit_email" required
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Role</label>
                        <select name="role" id="edit_role" required
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Hourly Rate ($)</label>
                        <input type="number" name="hourly_rate" id="edit_hourly_rate" step="0.01" min="0" max="999.99"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Role Description</label>
                        <input type="text" name="role_description" id="edit_role_description"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label class="inline-flex items-center">
                            <input type="checkbox" name="is_active" id="edit_is_active" value="1"
                                   class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <span class="ml-2 text-sm text-gray-700">Active</span>
                        </label>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeEditTeamMemberModal()" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        <i class="fas fa-save mr-2"></i>Update Member
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<function_calls>
<script>
    function openAddTeamMemberModal() {
        document.getElementById('addTeamMemberModal').classList.remove('hidden');
    }

    function closeAddTeamMemberModal() {
        document.getElementById('addTeamMemberModal').classList.add('hidden');
    }

    function editTeamMember(id, name, email, role, hourlyRate, roleDescription, isActive) {
        document.getElementById('editTeamMemberForm').action = `/crm/team/${id}`;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_email').value = email;
        document.getElementById('edit_role').value = role;
        document.getElementById('edit_hourly_rate').value = hourlyRate || '';
        document.getElementById('edit_role_description').value = roleDescription || '';
        document.getElementById('edit_is_active').checked = isActive;

        document.getElementById('editTeamMemberModal').classList.remove('hidden');
    }

    function closeEditTeamMemberModal() {
        document.getElementById('editTeamMemberModal').classList.add('hidden');
    }

    // Close modals when clicking outside
    document.addEventListener('click', function(e) {
        if (e.target.id === 'addTeamMemberModal') {
            closeAddTeamMemberModal();
        }
        if (e.target.id === 'editTeamMemberModal') {
            closeEditTeamMemberModal();
        }
    });
</script>
@endpush
@endsection