@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">Technical Boxes</h5>
                <a href="{{ route('technical-box.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">Support Team</th>
                        <th scope="col">Logical Issue Responsible Persons</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($technicalBoxes as $item)
                            <tr>
                                <td>{{ $item->id }}</td>
                                <td>{{ $item->name }}</td>
                                <td>
                                    @php
                                        $teamNames = collect($item->support_team_id ?? [])->map(fn($id) => $supportTeams[$id] ?? '')->filter()->implode(', ');
                                    @endphp
                                    {{ $teamNames }}
                                </td>
                                <td>
                                    @php
                                        $names = [];
                                        foreach (($item->logical_issue_responsible_persons ?? []) as $employeeId) {
                                            $names[] = $employees[$employeeId] ?? $employeeId;
                                        }
                                    @endphp
                                    {{ implode(', ', $names) }}
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('technical-box.edit', $item->id) }}" class="btn btn-primary">
                                        Edit
                                    </a>


                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            {{ $technicalBoxes->links() }}
        </div>
    </div>
@endsection