@extends('layouts.app')

@section('title', 'All Teams')

@push('css')
@endpush

@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
    <x-messages />
    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manange Team</h4>
            <a type="button" href="{{ route('settings.user-management.teams.create') }}"
                class="btn btn-sm btn-rounded btn-primary">New
                Team</a>
        </x-slot:title>
        <div class="table-responsive">
            <x-table id="example3" :headers="['Team Name', 'Team Lead Name', 'Team Role', 'Total Members','Action']">
                @forelse ($teams as $team)
                <tr>
                    <td>{{ $team['team_name'] }}</td>
                    <td>{{ isset($team['team_lead']) ? $team['team_lead']['f_name'] ." ".$team['team_lead']['l_name'] :
                        '' }} </td>
                    <td><span class="badge bg-primary">{{ $team['role_name'] ?? ''}}</span></td>
                    <td>
                        @forelse($team['team_members'] as $member)
                        @isset($member['user'])
                        <span class="badge bg-info me-1">
                            {{ $member['user']['f_name'] ?? '' }} {{ $member['user']['l_name'] ?? '' }}
                        </span>
                        @endisset
                        @empty
                        No members
                        @endforelse
                    </td>
                    <td class="d-flex justify-content-center">
                        <div class="d-flex">
                            <a href="{{ route('settings.user-management.teams.edit', ['team' => $team['id']]) }}"
                                class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
                            <button data-id="{{ $team['id'] }}"
                                data-url="{{ route('settings.user-management.teams.destroy', ['team' => $team['id']]) }}"
                                class="btn btn-danger shadow btn-xs sharp teamDeleteButton"><i
                                    class="fa fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                @empty
                @endforelse
            </x-table>
        </div>
    </x-row-card>
</x-content-body>
@endsection


@push('js')
<script src="{{ asset('assets/js/custom/settings/team.js') }}"></script>
@endpush