<style>
    .nav-link {
        color: #ffcc00;
    }

    .username {
        color: #FFD700;
    }

    .nav > li {
        position: relative;
        display: inline-flex !important;
    }

    .badge {
        color: #000 !important;
        padding: 3px 5px !important;
        font-size: 15px !important;
    }

    .card.card-widget.widget-user-2 {
        margin-bottom: 20px;
    }
    .user-widget-head-info {
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
        margin-bottom: 20px;
    }

    .user-widget-head-info .user_details * {
        margin: 0;
        color: #00b2c1;
        text-align: center;
    }
    .widget-user-2 .widget-user-header h5,.widget-user-2 .widget-user-header p {
        text-align: center;
        margin: 0;
        color: #00b2c1;
    }

    .user-widget-head-info .user_details p{
        text-align:left;
        margin-top:5px
    }

    .card.card-widget.widget-user-2 .card-footer {
        background: linear-gradient(135deg, #26AFBF, #152C65) !important;
        border-radius: 0 0 8px 8px;
        padding:10px;
    }

    .card.card-widget.widget-user-2 .card-footer a.nav-link {
        color: #fff;
    }

    .card.card-widget.widget-user-2 .card-footer a.nav-link span {
        background: #fff;
        color: #00b2c1 !important;
    }


    .user-widget-head-info .user_details h3 {
        font-weight: bold;
    }
    .widget-user-2 .widget-user-header{
        border-radius: 8px !important;
    }
    h4.team_head_name {
        background: #fff;
        border-width: 4px;
        border-style: solid;
    }

</style>
<section class="content">
@if(\Auth::user()->details->team_lead == 1 )
    <div class="col-md-12">
        <h4 class="team_head_name" style="text-align: center; padding: 20px; color: #28b8da; border-radius: 10px">Team Performance Metrics</h4>
    </div>
@else
        <div class="col-md-12">
            <h4 class="team_head_name" style="text-align: center; padding: 20px; color: #28b8da; border-radius: 10px">My Performance Metrics</h4>
        </div>
    @endif
    <div class="row">
        <?php
        if(isset($user2) && (is_array($user2) == 1)){

        for ($i = 0; $i < count($user2); $i++) { ?>
        <div class="col-md-4">
            <!-- Widget: user widget style 2 -->
            <div class="card card-widget widget-user-2">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-warning">
                    <div class="user-widget-head-info">
{{--                        <div class="widget-user-image">--}}
{{--                            <img class="img-circle elevation-2"--}}
{{--                                 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDJzEaxLN-jGRYYUO65pWu7Q9GXoNt4LUSSA&usqp=CAU"--}}
{{--                                 alt="User Avatar">--}}
{{--                        </div>--}}

                        <div class="user_details">
                            <small class="widget-user-username">{{$user2[$i]->name}}</small>
{{--                            <p>Employee Id:{{$user2[$i]->id}}</p>--}}
                        </div>
                    </div>
                    <!-- /.widget-user-image -->
                    {{--<h3 class="widget-user-username">leena</h3>--}}

                    <h5 class="widget-user-desc">Monthly Target:{{$user2[$i]->details->target}}</h5>
{{--                    <p>This record is of month {{Date('m')}}</p>--}}
                </div>

                <div class="card-footer p-0">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                All Leads <span
                                        class="float-right badge bg-primary">{{$total_user2[$i]['all_leads']}}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                Lead Owned <span
                                        class="float-right badge bg-primary">{{$total_user2[$i]['lead_owned']}}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                Paid <span class="float-right badge bg-success">{{$total_user2[$i]['paid']}}</span>
                            </a>
                        </li>
{{--                        <li class="nav-item">--}}
{{--                            <a href="#" class="nav-link">--}}
{{--                                Stripe Pay <span class="float-right badge bg-info">{{$total_user2[$i]['stripe']}}</span>--}}
{{--                            </a>--}}
{{--                        </li>--}}
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                follow up <span
                                        class="float-right badge bg-success">{{$total_user2[$i]['followup']}}</span>
                            </a>
                        </li> <li class="nav-item">
                            <a href="#" class="nav-link">
                                Invalid <span
                                        class="float-right badge bg-success">{{$total_user2[$i]['InvalidLead']}}</span>
                            </a>
                        </li> <li class="nav-item">
                            <a href="#" class="nav-link">
                                CLose Lost <span
                                        class="float-right badge bg-success">{{$total_user2[$i]['Close-lost']}}</span>
                            </a>
                        </li>

                        <li class="nav-item">
{{--                            <a href="#" class="nav-link">--}}
{{--                                Total Achieved <span--}}
{{--                                        class="float-right badge bg-danger">${{$xx_display[$i]}}/${{$user2[$i]->details->target}}</span>--}}
{{--                            </a> --}}
                            <a href="#" class="nav-link">
                                Total Achieved <span
                                        class="float-right badge bg-danger">${{$xx_display[$i]}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /.widget-user -->
        </div>

        <?php } }else { ?>
        <div class="col-md-12">
            <!-- Widget: user widget style 2 -->
            <div class="card card-widget widget-user-2">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="row">
                    <div class="col-md-6 p-md-3">
                        <div class="widget-user-header bg-warning">
                            <div class="user-widget-head-info">
                                <div class="widget-user-image">
                                    <img class="img-circle elevation-2"
                                         src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDJzEaxLN-jGRYYUO65pWu7Q9GXoNt4LUSSA&usqp=CAU"
                                         alt="User Avatar">
                                </div>
                                <div class="user_details">
                                    <h3 class="widget-user-username">{{$user2->name}}</h3>
                                    <h5 class="widget-user-desc">Monthly Target:{{$user2->details->target}}</h5>

                                </div>
                            </div>

                            <!-- /.widget-user-image -->
                            {{--<h3 class="widget-user-username">leena</h3>--}}
                            <p style="margin-left: -5px">Employee Id:{{$user2->id}}</p>
                            <p>This record is of month {{Date('m')}}/{{Date('Y')}}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card-footer p-0"
                             style="height: 230px; background: #222222; border-top-left-radius: 10px;border-top-right-radius: 10px;">
                            <ul class="nav flex-column" style="background: #222222; padding: 5px;border-top-right-radius: 10px;
    border-top-left-radius: 10px;">

                                <span style="color: #1b99c8  ;">Monthly Lead(s) Stats:</span>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Lead Owned <span
                                                class="float-right badge bg-primary">{{$total_user2['lead_owned']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        All Lead <span
                                                class="float-right badge bg-primary">{{$total_user2['all_leads']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Stripe Pay <span
                                                class="float-right badge bg-info">{{$total_user2['stripe']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Paid/Won <span
                                                class="float-right badge bg-success">{{$total_user2['paid']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Follow Up <span
                                                class="float-right badge bg-danger">{{$total_user2['followup']}}</span>
                                    </a>
                                </li>
                            </ul>
                            <!-- 2 -->
                            <ul class="nav flex-column" style="background: #222222; padding: 5px">
                                <span style="color: #1b99c8  ;">Monthly Target Stats:</span>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        No.Of Payment(s) <span
                                                class="float-right badge bg-primary">{{$total_user2['lead_owned']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        No.Of Paid Payment(s) <span
                                                class="float-right badge bg-info">{{$total_user2['stripe']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Best Performing site for you <span
                                                class="float-right badge bg-success">{{$total_user2['paid']}}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Total Earning <span
                                                class="float-right badge bg-danger">${{$xx_display}}/${{$user2->details->target}}</span>
                                    </a>
                                </li>

                            </ul>
                            {{--<ul class="nav flex-column" style="background: #222222; padding: 5px">--}}
                            {{--<li class="nav-item">--}}
                            {{--<label></label>--}}
                            {{--<select class="form-control" style="border-radius: 10px">--}}
                            {{--<option>Previous Target</option>--}}
                            {{--<option>medium</option>--}}
                            {{--<option>large</option>--}}
                            {{--</select>--}}
                            {{--</li>--}}
                            {{--</ul>--}}
                        </div>
                    </div>
                </div>


            </div>
            <!-- /.widget-user -->
        </div>

        <?php } ?>

    </div>

</section>