@extends('Training::layouts.app')

@push('css')
    <style>
        .trainee_card {
            border-radius: 8px;
            box-shadow: 0px 4px 10px -1px #a3a3a3bf;
            border: 0 none;
            overflow: hidden;
        }

        .side_icon {
            height: 52px;
            width: 52px;
            font-size: 28px;
            font-weight: 700;
            background-color: #f4f7fa;
            text-align: center;
            border-radius: 50%;
        }

        .user_loggedin {
            border: 1px solid #2d499a;
            padding: 3px 0;
            border-radius: 4px;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-md-12">
            <h3 class="main_question mb-5">
                <button type="button" name="button" class="btn btn-primary">
                    <i class="las la-tachometer-alt"></i>
                </button>
                Trainee Dashboard
            </h3>
        </div>
        <div class="col-lg-4">
            <div class="card trainee_card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <a href="{{ route('training.courses.index') }}">
                                <p class="text-dark font-weight-bold">Total Courses</p>
                                <h3 class="text-primary">{{ $courseCount }}</h3>
                                <p class="mb-0 text-muted"><span
                                        class="text-success font-weight-bold">{{ $courseCompletedCount }}</span> Course
                                    Complete</p>
                            </a>
                        </div>
                        <div class="d-flex justify-content-center align-items-center side_icon">
                            <i class="las la-certificate text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card trainee_card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <a href="{{ route('training.classes.index') }}">
                                <p class="text-dark font-weight-bold">Total Classes</p>
                                <h3 class="text-primary">{{ $classCount }}</h3>
                                <p class="mb-0 text-muted"><span
                                        class="text-success font-weight-bold">{{ $classCompletedCount }}</span> Classes
                                    Complete</p>
                            </a>
                        </div>
                        <div class="d-flex justify-content-center align-items-center side_icon">
                            <i class="las la-school text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card trainee_card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <a href="{{ route('training.tests.index') }}">
                                <p class="text-dark font-weight-bold">Total Exam Schedules</p>
                                <h3 class="text-primary">{{ $testCount }}</h3>
                                <p class="mb-0 text-muted"><span
                                        class="text-success font-weight-bold">{{ $testCompletedCount }}</span> Exam
                                    Complete</p>
                            </a>
                        </div>
                        <div class="d-flex justify-content-center align-items-center side_icon">
                            <i class="las la-graduation-cap text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
@endsection