@extends('layouts.app')
@section('content')
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Dashboard</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <!--<ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)"></a></li>
            <li class="breadcrumb-item active"></li>
        </ol>-->
    </div>

</div>

<div class="container-fluid">

    <div class="card-group" >
        <div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-music text-inverse"></i></h2>
                        <h3 class="">{{count($therapy)}}</h3>
                        <h6 class="card-subtitle">Therapy</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-check text-inverse"></i></h2>
                        <h3 class="">{{count($paymentsuccess)}}</h3>
                        <h6 class="card-subtitle">Payment Completed</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" style="margin: 5px">
        <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-times text-inverse"></i></h2>
                        <h3 class="">{{count($paymentpending)}}</h3>
                        <h6 class="card-subtitle">Payment Pending</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-times text-inverse"></i></h2>
                        <h3 class=""></h3>
                        <h6 class="card-subtitle">Cancel Reservations</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-check text-inverse"></i></h2>
                        <h3 class=""></h3>
                        <h6 class="card-subtitle">Complete Reservations</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
-->
</div>
<div class="card-group" >



        <div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-user text-inverse"></i></h2>
                        <h3 class="">{{count($active_users)}}</h3>
                        <h6 class="card-subtitle">Active Users</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin: 5px">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h2 class="m-b-0 pull-right"><i class="fa fa-user-times text-inverse"></i></h2>
                        <h3 class="">{{count($inactive_users)}}</h3>
                        <h6 class="card-subtitle">Inactive Users</h6></div>
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin: 5px;visibility: hidden;">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">

                        <h3 class=""></h3>
                        <h6 class="card-subtitle"></h6></div>
                    <div class="col-12">
                        <div class="progress">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    </div>
</div>
@endsection