@extends('layouts.view')
@section('content')

    <link href="{{ asset('plugins/jvectormap/jquery-jvectormap-2.0.2.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/fullcalendar/packages/core/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/daygrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/bootstrap/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/timegrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/list/main.css') }}" rel="stylesheet" />
    <!-- Page Content-->
    <style>
        .file-box-content{
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
            margin-bottom: 3px !important;
        }
        .file-box-content:hover{
            -webkit-transform: translatey(-8px);
            transform: translatey(-8px);
        }

    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <h4 class="page-title">Ai engine progress</h4>
                </div><!--end page-title-box-->
            </div><!--end col-->
        </div>
        <div class="row">
            <div class="col-lg-2 "></div>
            <div class="col-lg-4 file-box-content">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <i class="text-success far fa-check-circle"></i>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-left">
                                <div class="ml-2">
                                    <p class="mb-1 text-muted">Analyzed files</p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold"
                                    >{{$parsed}} File

                                    </h3>
                                </div>
                            </div>
                        </div>
                                                <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-success"
                                 role="progressbar" style="width:{{$t}}%;" aria-valuenow="{{$t}}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div>

            <div class="col-lg-4 file-box-content">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3 align-self-center">
                                <div class="icon-info">
                                    <i class="la la-spinner text-danger la-spin progress-icon-spin"></i>
                                </div>
                            </div>
                            <div class="col-9 align-self-center text-left">
                                <div class="ml-2">
                                    <p class="mb-1 text-muted">Analyzing in progress</p>
                                    <h3 class="mt-0 mb-1 font-weight-semibold"
                                    >{{$none_parsed}} File

                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div
                                    class="progress-bar bg-danger"

                                    role="progressbar" style="width: {{$t2}}%;" aria-valuenow="{{$t2}}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div> <div class="col-lg-2 "></div><!--end col-->
        </div><!--end row-->

    </div><!--end row-->

@endsection