@extends('layout.master')

@section('css')
    <style>
        .w3-badge,

        .w3-tag{
            background-color:#26b2e5;
            color:#000;
            cursor: pointer;
            margin-right: 5px !important;
            font-weight: bold;
            font-size: 20px;
            display:inline-block;
            padding-left:8px;
            padding-right:8px;
            padding-top: 4px;
            padding-bottom: 4px;

            text-align:center
        }
        .text_sm{
            font-size:15px !important;
        }
        .w3-badge
        {
            border-radius:50%
        }
        .fonts {
            font-size: 18px !important;
        }
        .element {
            pointer-events: none;
        }

        .nav-item {
            cursor: pointer;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #ffffff;
            font-weight: bold;
            background-color: #9abe2a;
            border-color: #9abe2a #9abe2a #9abe2a;
        }

        .card-title {
            margin-top: 5px !important;
        }
        .card{
            margin-bottom: 0px;
        }
        .fonts {
            font-size: 18px;
            ;
        }
        .card-icon{
            padding:5px !important; 
        }
        .content {
            margin-top: 15px !important;
        }

        .text-info {

            color: #26b2e5 !important;
        }
         .wraptext{
            width:150px;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 1; /* number of lines to show */
            line-clamp: 1; 
            -webkit-box-orient: vertical;
        }

    </style>
@stop
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="row m-2">
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.pinrequests') }}" title="Pins Requests">
                                            <div class="card-header card-header-info card-header-icon">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">lock</i>
                                                </div>
                                                <h4 class="card-title text_sm">PINs Requests</h4>
                                                <h3 class="card-title text-info text-right">{{ $pin_requests }} </h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.patients') }}" title="Patients">
                                            <div class="card-header card-header-info card-header-icon ">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">pregnant_woman</i>
                                                </div>
                                                <h4 class="card-title text_sm">Patients</h4>
                                                <h3 class="card-title text-info text-right">{{ $patient }} </h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.events') }}" title="Events">
                                            <div class="card-header card-header-info card-header-icon ">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">language</i>
                                                </div>
                                                <h4 class="card-title text_sm">Events</h4>
                                                <h3 class="card-title text-info text-right">{{ $totalevent }} </h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.associate') }}" title="Direct Associate">
                                            <div class="card-header card-header-info card-header-icon">
                                                <div class="card-icon">
                                                        <i class="text-white material-icons">public</i>
                                                </div>
                                                <h4 class="card-title text_sm">Direct Associate</h4>
                                                <h3 class="card-title text-info text-right">{{ $direct_assosiate_total }} </h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <div class="card-header card-header-info card-header-icon">
                                            <div class="card-icon">
                                                <i class="text-white material-icons">public</i>        
                                            </div>
                                            <h4 class="card-title" style="font-size:15px;">Indirect Associate</h4>
                                            <h3 class="card-title text-right text-info">{{ $indirect_assosiate_total }}</h3>
                                        </div>
                                    </div>
                                </div>
                        {{--    <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.pinshistory') }}" title="Total PINs">
                                            <div class="card-header card-header-info card-header-icon ">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">assignment</i>
                                                </div>
                                                <h4 class="card-title text_sm">Total PINs</h4>
                                                    <h3 class="card-title text-info text-right">{{ $totalpins }} </h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>  --}}
                                <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.pinshistory') }}" title="Used PINs/Total PINs">
                                            <div class="card-header card-header-info card-header-icon ">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">vpn_key</i>
                                                </div>
                                                <h4 class="card-title text_sm">PINs</h4>
                                                <h3 class="card-title text-right text-info"> {{ $this_month_used_pins }}/{{ $totalpins }}</h3>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                        {{--    <div class="col-lg-3 col-md-6 col-sm-6 ">
                                    <div class="card">
                                        <a href="{{ route('trainer.pinshistory') }}" title="Unused PINs">
                                            <div class="card-header card-header-info card-header-icon">
                                                <div class="card-icon">
                                                    <i class="text-white material-icons">vpn_key</i>
                                                </div>
                                                <h4 class="card-title text_sm">Unused PINs</h4>
                                                <h3 class="card-title text-right text-info">{{ $unused_pins }}</h3>
                                            </div>        
                                        </a>
                                    </div>
                                </div> --}}
                                
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@stop