@extends('layouts.app')

@section('content')

    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="#">

                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-purple">
                        <i class="fas fa-th-list"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
{{--                            <div class="text-right">--}}
{{--                                <h3 class="font-light mb-0">--}}
{{--                                    {{ count($tickets->pending) + count($tickets->opened) + count($tickets->closed) + count($tickets->escalated) +count($tickets->validated) }}--}}
{{--                                </h3>--}}
{{--                                <span class="text-muted">Total Tickets</span>--}}
{{--                            </div>--}}
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{ number_format($tickets->pending + $tickets->opened + $tickets->closed + $tickets->escalated + $tickets->validated) }}
                                </h3>
                                <span class="text-muted">Total Tickets</span>
                            </div>

                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('tickets.opened.view') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-green">
                        <i class="fas fa-folder-open"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{ number_format($tickets->opened) }}
                                </h3>
                                <span class="text-muted">Open Tickets</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('tickets.closed.view') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-cyan">
                        <i class="fas fa-folder"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{ number_format($tickets->closed) }}
                                </h3>
                                <span class="text-muted">Closed Tickets</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('tickets.pending.view') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-orange">
                        <i class="fas fa-question"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{ number_format($tickets->pending) }}
                                </h3>
                                <span class="text-muted">Pending Tickets</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('tickets.escalated.view') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-cyan">
                        <i class="fas fa-share"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{ number_format($tickets->escalated) }}
                                </h3>
                                <span class="text-muted">Escalated Tickets</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('tickets.validated.view') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-green">
                        <i class="fas fa-check-double"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{number_format($tickets->validated) }}
                                </h3>
                                <span class="text-muted">Validated Tickets</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {{-- <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('alerts.all') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-red">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{number_format($tickets->alerts) }}
                                </h3>
                                <span class="text-muted">Total Alerts</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div> --}}
        {{-- <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('alerts.all') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-red">
                        <i class="fas fa-folder"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{number_format($tickets->alerts_closed) }}
                                </h3>
                                <span class="text-muted">Alerts Closed</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div> --}}
        {{-- <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <a class="text-dark" href="{{ route('alerts.all') }}">
                <div class="card card-statistic-1">
                    <div class="card-icon l-bg-red">
                        <i class="fas fa-question"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="padding-20">
                            <div class="text-right">
                                <h3 class="font-light mb-0">
                                    {{number_format($tickets->alerts_pending) }}
                                </h3>
                                <span class="text-muted">Alerts Pending</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div> --}}
    </div>

    <div class="border border-success bg-secondary rounded">
        <div class=" bg-success py-3 pl-3">
            <h5 class="text-light">Tickets Count By Priority</h5>
        </div>
        <div class="px-3 pt-5">
            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="card bg-danger py-3">
                        <div class="card-statistic-4">
                            <div class="align-items-center justify-content-between">
                                <div class="row text-center">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">CRITICAL :</h4>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">{{ number_format($tickets->critical) }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="card bg-warning py-3">
                        <div class="card-statistic-4">
                            <div class="align-items-center justify-content-between">
                                <div class="row text-center">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-dark">MAJOR :</h4>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-dark">{{ number_format($tickets->major) }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="card bg-dark py-3">
                        <div class="card-statistic-4">
                            <div class="align-items-center justify-content-between">
                                <div class="row text-center">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">MINOR :</h4>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">{{ number_format($tickets->minor) }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="card bg-info py-3">
                        <div class="card-statistic-4">
                            <div class="align-items-center justify-content-between">
                                <div class="row text-center">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">WARNING:</h4>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                                        <h4 class="text-light">{{ number_format($tickets->warning) }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection