@extends('backend.layouts.app')

@section('title', app_name() . ' | ' . __('strings.backend.dashboard.title'))

@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <strong>@lang('strings.backend.dashboard.welcome') {{ $logged_in_user->name }}!</strong>
                </div><!--card-header-->
                <div class="card-body">
                    <div class="row">
                        <!-- <div class="col-md-3"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <canvas id="stats-doughnut-chart" height="172" width="172" class="chartjs-render-monitor" style="display: block; height: 192px; width: 192px;"></canvas>
                        </div> -->
                        <div class="col-md-9">
                            <div class="row">
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="card level-card level-all ">
                                            <div class="card-header">
                                                <span class="level-icon"><i class="fa fa-users"></i></span> Users
                                            </div>
                                            <div class="card-body">
                                                {{$users}} entries
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: {{$users}}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="card level-card level-emergency level-empty">
                                            <div class="card-header">
                                                <span class="level-icon"><i class="fa fa-cogs"></i></span> Service Providers
                                            </div>
                                            <div class="card-body">
                                                {{$serviceproviders}} entries
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: {{$serviceproviders}}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="card level-card level-alert level-empty">
                                            <div class="card-header">
                                                <span class="level-icon"><i class="fa fa-file"></i></span> Cms
                                            </div>
                                            <div class="card-body">
                                                {{$cms}} entries
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: {{$cms}}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="card level-card level-critical level-empty">
                                            <div class="card-header">
                                                <span class="level-icon"><i class="fa fa-cart-plus"></i></span> Services
                                            </div>
                                            <div class="card-body">
                                                {{$services}} entries
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: {{$services}}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="card level-card level-critical level-empty">
                                            <div class="card-header">
                                                <span class="level-icon"><i class="fa fa-list-alt"></i></span> Quotations
                                            </div>
                                            <div class="card-body">
                                                {{$quotations}} entries
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: {{$quotations}}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div><!--card-body-->
            </div><!--card-->
        </div><!--col-->
    </div><!--row-->
@endsection
        <style>
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        padding-top: 0;
        margin-bottom: 0;
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #f5f5f5;
    }

    .stack-content {
        background-color: #F6F6F6;
        color: #AE0E0E;
        font-family: consolas, Menlo, Courier, monospace;
        font-size: 12px;
        font-weight: 400;
        white-space: pre-line;
        max-width: 0;
        overflow-x: auto;

    }

    .level-card {
        color: #FFF;
    }

    .level-card .progress {
        background: rgba(0,0,0,0.2);
        height: 2px;
        margin-top: 10px;
    }

    .level-card .progress .progress-bar {
        background: #fff;
    }

    .level-card .card-header {
        line-height: 1.5em;
        font-size: 1em;
    }

    .level-card .card-header .level-icon {
        font-size: 1.5em;
    }

    .level-card .card-body {
        font-size: 1em;
    }

    .level {
        font-size: .875em;
        line-height: 1em;
        color: #fff;
    }

    .level-none {
        background-color: none;
        color: #AAA;
    }

    .level-all,
    .level-emergency,
    .level-alert,
    .level-critical,
    .level-error,
    .level-warning,
    .level-notice,
    .level-info,
    .level-debug,
    {
        color: #FFF;
    }

    .label-env {
        font-size: .85em;
    }

    .level-all, .level.level-all {
        background-color: #8A8A8A;
    }

    .level-all .card-header {
        background-color: #8A8A8A;
    }

    .level-emergency, .level.level-emergency {
        background-color: #B71C1C;
    }

    .level-emergency .card-header {
        background-color: #B71C1C;
    }

    .level-alert, .level.level-alert {
        background-color: #D32F2F;
    }

    .level-alert .card-header {
        background-color: #D32F2F;
    }

    .level-critical, .level.level-critical {
        background-color: #F44336;
    }

    .level-critical .card-header {
        background-color: #F44336;
    }

    .level-error, .level.level-error {
        background-color: #FF5722;
    }

    .level-error .card-header {
        background-color: #FF5722;
    }

    .level-warning, .level.level-warning {
        background-color: #FF9100;
    }

    .level-warning .card-header {
        background-color: #FF9100;
    }

    .level-notice, .level.level-notice {
        background-color: #4CAF50;
    }

    .level-notice .card-header {
        background-color: #4CAF50;
    }

    .level-info, .level.level-info {
        background-color: #1976D2;
    }

    .level-info .card-header {
        background-color: #1976D2;
    }

    .level-debug, .level.level-debug {
        background-color: #90CAF9;
    }

    .level-debug .card-header {
        background-color: #90CAF9;
    }

    .level-empty, .level.level-empty {
        background-color: #D1D1D1;
    }

    .level-empty .card-header {
        background-color: #D1D1D1;
    }

    .label-env, .label.label-env {
        background-color: #6A1B9A;
    }

    .badge-env {
        background-color: #6A1B9A;
        font-size: .875em;
    }

    .list-group-item.disabled,
    .list-group-item:disabled {
        background-color: #eee;
        color: #777;
        cursor: not-allowed;

    }
    .card-body{
        color: #000;
    }
</style>