@extends('home::layouts.UserLayout')
@section('title')
    <title>{{env('WEBSITE_TITLE')}} | Team Reports</title>
@endsection

@section('content')
    <!--begin::Content-->
    <div class="content  d-flex flex-column flex-column-fluid" id="Sb_content">

        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class=" container-fluid ">
                <!--begin::Report-->
                <div class="d-flex">
                    <!-- begin:Team list -->
                    <div class="form-group">
                        <script>
                            var teamid = '';
                        </script>
                        <select class="form-control form-control-solid form-control-lg h-auto py-4 rounded-lg font-size-h6 teamSelectDiv"
                                onchange="changeTeamResponse(this)">
                            @if($teams['code']===200)
                                <option disabled>Select Team</option>
                                @foreach($teams['data']->teamSocialAccountDetails as $data)
                                    <option value="{{$data[0]->team_id}}">{{$data[0]->team_name}}</option>
                                @endforeach
                            @elseif($teams['code']===400)
                                <option value="Team 2">Some error ocured ,no team data</option>
                            @else
                                <option value="Team 2">Some error ocured ,no team data</option>
                            @endif
                        </select>

                    </div>
                    <!-- end:Team list -->
                    <div class="ml-auto">
                        <!-- datepicker -->
                        <div class="form-group">
                            <div class="input-icon team_Date_Range" id='team-daterange' style="width: 300px">
                                <input class="form-control form-control-solid h-auto py-4 rounded-lg font-size-h6"
                                       type="text" name="datepicker" autocomplete="off" id="team-daterange-input"
                                       placeholder="Select Date Range"/>
                                <span><i class="far fa-calendar-alt"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--begin::Teams-->
                <div class="card card-custom gutter-b" id="ss-Div">
                    <div class="card-body">
                        <!--begin::Top-->
                        <div class="d-flex">
                            <!--begin::Pic-->
                            <div class="flex-shrink-0 mr-7">
                                <div class="symbol symbol-50 symbol-lg-120">
                                    @if($teams['data']->teamSocialAccountDetails[0][0]->team_logo === 'www.socioboard.com' || $teams['data']->teamSocialAccountDetails[0][0]->team_logo === "www.NA.com" )
                                        <img id="teamImageLink"
                                             src="/media/logos/sb-icon.svg" alt="SB"/>
                                    @else
                                        <img id="teamImageLink"
                                             src="{{$teams['data']->teamSocialAccountDetails[0][0]->team_logo}}"
                                             alt="SB"/>
                                    @endif
                                </div>
                            </div>
                            <!--end::Pic-->

                            <!--begin: Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex align-items-center justify-content-between flex-wrap mt-2 card-stretch">
                                    <!--begin::User-->
                                    <div class="mr-3">
                                        <!--begin::Name-->
                                        <a href="team/{{$teams['data']->teamSocialAccountDetails[0][0]->team_id}}"
                                           id="teamName"
                                           class="d-flex align-items-center text-hover-primary font-size-h5 font-weight-bold mr-3">
                                            {{$teams['data']->teamSocialAccountDetails[0][0]->team_name}}
                                        </a>
                                        <!--end::Name-->

                                        <!--begin::Contacts-->
                                        <div class="d-flex flex-wrap my-2">
                                                        <span class="text-muted font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">
                                                            <span class="svg-icon svg-icon-md svg-icon-gray-500 mr-1">
                                                                <i class="fas fa-user fa-fw"></i>
                                                            </span>
                                                            TEAM
                                                        </span>
                                        </div>
                                        <!--end::Contacts-->
                                    </div>
                                    <div id="addToCart" class="btn btn-icon text-hover-info btn-sm  ml-5 px-5"
                                         title="Add to custom Reports"><i class="fa fa-plus fa-md"
                                                                          aria-hidden="true"></i>
                                        <span node-id="ss-Div_d-flex" class="ss addtcartclose"></span>
                                    </div>
                                    <span class="spinner spinner-primary spinner-center" id="ss-Div_d-flex" style="
    display: none;"></span>
                                    <!--begin::User-->

                                    <!--begin::Teams Actions Dropdown-->
                                    <div class="card-toolbar">
                                        <a href="team/{{$teams['data']->teamSocialAccountDetails[0][0]->team_id}}"
                                           id="viewTeam"
                                           class="btn btn-sm">
                                            View This Team
                                        </a>
                                    </div>
                                    <!--end::Teams Actions Dropdown-->
                                </div>
                                <!--end::Title-->

                                <!--begin::Content-->
                                <div class="d-flex align-items-center flex-wrap justify-content-between">
                                {{--                                    <!--begin::Description-->--}}
                                {{--                                    <div class="flex-grow-1 font-weight-bold py-2 py-lg-2 mr-5">--}}
                                {{--                                        <i class="fas fa-bell fa-fw"></i> 23 pending messages--}}
                                {{--                                    </div>--}}
                                <!--end::Description-->
                                </div>
                                <!--end::Content-->
                            </div>
                            <!--end::Info-->
                        </div>
                        <!--end::Top-->

                        <!--begin::Separator-->
                        <div class="separator separator-solid my-7"></div>
                        <!--end::Separator-->

                        <!--begin::Bottom-->
                        <div class="d-flex align-items-center flex-wrap team-members_Info_div">
                            <!--begin: Item-->
                            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1 ">
                                            <span class="mr-4">
                                                <i class="fas fa-user fa-2x text-info font-weight-bold"></i>
                                            </span>
                                <div class="d-flex flex-column teamMembersCounts">
                                    <span class="font-weight-bolder font-size-sm ">Team Members List</span>
                                    @if($memberDetails['code']=== 200)
                                        <span class="font-weight-bolder font-size-h5"
                                              id="invitedList">{{$memberDetails['data']->TeamMemberStats->teamMembersCount}}</span>
                                    @else
                                        <span class="font-weight-bolder font-size-h5">N/A</span>
                                    @endif
                                </div>
                            </div>
                            <!--end: Item-->

                            <!--begin: Item-->
                            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1">
                                            <span class="mr-4">
                                                <i class="fas fa-envelope fa-2x text-danger font-weight-bold"></i>
                                            </span>
                                <div class="d-flex flex-column invitePendingCounts">
                                    <span class="font-weight-bolder font-size-sm "
                                    >Invite Pending</span>
                                    @if($memberDetails['code']=== 200)
                                        <script>
                                            let socialProfileCount =                                         </script>
                                        <span class="font-weight-bolder font-size-h5"
                                              id="invitePending">{{$memberDetails['data']->TeamMemberStats->invitedList}}</span>
                                    @else
                                        <span class="font-weight-bolder font-size-h5">N/A</span>
                                    @endif


                                </div>
                            </div>
                            <!--end: Item-->

                            <!--begin: Item-->
                            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1">
                                            <span class="mr-4">
                                                <i class="fas fa-user fa-2x text-danger font-weight-bold"></i>
                                            </span>
                                <div class="d-flex flex-column leftFromTeamCounts">
                                    <span class="font-weight-bolder font-size-sm ">Left From Team</span>
                                    @if($memberDetails['code']=== 200)
                                        <span class="font-weight-bolder font-size-h5"
                                              id="invitees">{{$memberDetails['data']->TeamMemberStats->leftTeamMem}}</span>
                                    @else
                                        <span class="font-weight-bolder font-size-h5">N/A</span>
                                    @endif


                                </div>
                            </div>
                            <!--end: Item-->
                            <!--begin: Item-->
                            <div class="d-flex align-items-center flex-lg-fill my-1 teamMembersNamesDiv">
                                            <span class="mr-4">
                                                <i class="fas fa-user fa-2x text-info font-weight-bold"></i>
                                            </span>
                                <div class="symbol-group symbol-hover" id="memberProfileDetails">
                                    @if($members->code === 200)
                                        @if(count($members->data->memberProfileDetails)>0)
                                            @foreach($members->data->memberProfileDetails as $data)
                                                @if($data->invitation_accepted === 1 && $data->left_from_team === 0 )
                                                    <div class="symbol symbol-30 symbol-circle" onclick="return false"
                                                         id="members_name"
                                                         title="{{$data->first_name}} {{$data->last_name}}"
                                                    >
                                                        <img alt="Pic"
                                                             src="