@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/selectize/selectize.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')

<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">Team Members</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row" id="graph-wrapper">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-2"></h4>
                    <ul class="nav nav-pills navtab-bg nav-justified" role="tablist">
                        @php
                        $firstdone = true;
                        @endphp
                        @foreach($teams as $team)
                        <li class="nav-item" role="presentation">
                            <a href="#tab-{{$team->team_details->id}}" data-bs-toggle="tab" aria-expanded="false" class="nav-link {{$firstdone ? 'active':''}}" aria-selected="true" role="tab">
                                {{$team->team_details->name}}
                            </a>
                        </li>
                        @php
                        $firstdone = false;
                        @endphp
                        @endforeach
                    </ul>

                    <div class="tab-content">
                        @php
                        $firstdone = true;
                        @endphp
                        @foreach($teams as $team)
                        <div class="tab-pane {{$firstdone ? 'active':''}}" id="tab-{{$team->team_details->id}}" role="tabpanel">
                            <h4>{{$team->team_details->name}}</h4>
                            <p>{{$team->team_details->description}}</p>
                            <div class="table-responsive">
                                <table class="table table-borderless table-nowrap table-hover table-centered m-0">

                                    <thead class="table-light">
                                        <tr>
                                            <th>Name</th>
                                            <th>Employee Code</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($team->players as $player)
                                        <tr>
                                            <td><h5 class="m-0 fw-normal">{{$player->name}}</h5></td>
                                            <td>{{$player->employee_code}}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @php
                        $firstdone = false;
                        @endphp
                        @endforeach
                    </div>


                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

</div> <!-- container -->

@endsection

@section('script')
<!-- third party js -->

<!-- third party js ends -->




@endsection