@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Support Teams</h5>
                <a href="{{ route('support-team.create') }}" class="btn btn-primary">Add New</a>
            </div>

            <div class="table-responsive">
                <table id="dataTable" class="display">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Name</th>
                            <th scope="col">Team Lead</th>
                            <th scope="col">Team members</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($supportTeams as $item)
                            <tr>
                                <td>{{ $item->id }}</td>
                                <td>{{ $item->name }}</td>
                                <td>{{ $item->teamLead->name ?? '' }}</td>
                                <td>
                                    @foreach (($item->employees_id ?? []) as $employeeId)
                                        <span class="badge badge-primary">
                                            {{ $employees[$employeeId] ?? $employeeId }}
                                        </span>
                                    @endforeach
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('support-team.edit', $item->id) }}" class="btn btn-primary">Edit</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
       
    </div>
@endsection