@extends('layouts.admin')
@section('content')
@section('styles')
<style>
h3
{
    line-height: 2rem;
    padding: 20px;
    text-align: left;
    font-size: 20px;
}
.flex-body
{
    display: flex;
    gap: 28px;
    align-items: center;
    text-decoration:none;
    color:#fff;
}
.flex-body:hover
{
    text-decoration:none;
    color:#fff;
}
.fa
{
    font-size: 36px;
}
a:hover {
    color: inherit; 
     text-decoration: none;
}
</style>
@endsection

<div class="content">
    <div class="row">
        @if(auth()->user()->can('nomination_list',$courseRole) && auth()->user()->roles()->first()->title != 'Admin')


        <div class="col-lg-3">
            <a href="#">
            <div class="card">
                <div class="card-body" style="background: #45963e;color: #fff;">
                   
                        <h2 style="font-size: 32px;">{{$total_trainee_approve}}</h2>
                        <p style="font-size: 15px;font-weight:600;">Total Trainee Approved</p>
                   
                </div>
            </div>
        </a>
        </div>
        @endif
        @if(auth()->user()->can('trainer_evaluation',$courseRole) && auth()->user()->roles()->first()->title != 'Admin')
        <div class="col-lg-3">
            <a href="{{url('/all-courses')}}">
            <div class="card">
                <div class="card-body" style="background: #00B297;color: #fff;">
                   
                        <h2 style="font-size: 32px;">{{$course_taken}}</h2>
                        <p style="font-size: 15px;">Course Taken</p>
                   
                </div>
            </div>
        </a>
        </div>
       @endif
        @can('dashboard_report',$courseRole)
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body" style="background: #00B297;color: #fff;">
                    <a class="flex-body" href="#">
                        <i class="fa fa-area-chart"></i>
                        <h3>Training Need Analysis</h3> 
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body" style="background: #DC3545;color: #fff;"> 
                    <a class="flex-body" href="#">
                        <i class="fa fa-file-text-o "></i>
                        <h3>Resource Convergence</h3> 
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body" style="background: #0866C6;color: #fff;">
                    <a class="flex-body" href="#">
                        <i class="fa fa-cube"></i>
                        <h3>Training Management</h3> 
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body" style="background: #19B159;color: #fff;">
                    <a class="flex-body" href="#">
                        <i class="fa fa-pencil-square-o"></i>
                        <h3>Training Evaluation</h3> 
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body" style="background: #FF9B21;color: #fff;">
                    <a class="flex-body" href="#">
                        <i class="fa fa-calendar-o"></i>
                        <h3>Training Delivery</h3> 
                    </a>
                </div>
            </div>
        </div>
        @endcan
        </div>
        @can('dashboard_report',$courseRole)
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="canvas" height="280" width="600"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="line" height="280" width="600"></canvas>
                    </div>
                </div>
            </div>
            {{-- <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="pie" height="280" width="600"></canvas>
                    </div>
                </div>
            </div> --}}
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">
                        <b>Top Traineer</b>
                    </div>
                    <div class="card-body">
                       <table class="table">
                           <thead>
                            <tr>
                                <th>
                                    Traineer Name
                                </th>
                                <th>
                                    Organizaion
                                </th>
                                <th>
                                   Course Taken
                                </th>
                            </tr>
                           </thead>
                           <tbody>
                            <tr>
                                <td>
                                    MD Hasibur Rahman
                                </td>
                                <td>
                                    Dhaka University
                                </td>
                                <td>
                                    10
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Hasib Ullah
                                </td>
                                <td>
                                   Buet
                                </td>
                                <td>
                                    10
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Neyamat Hasan
                                </td>
                                <td>
                                    Dhaka University
                                </td>
                                <td>
                                    10
                                </td>
                            </tr>
                            
                           </tbody>
                       </table>
                    </div>
                </div>
            </div>
   
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header text-center">
                            <b>Top Trainee</b>
                        </div>
                        <div class="card-body">
                           <table class="table">
                               <thead>
                                <tr>
                                    <th>
                                        Trainee Name
                                    </th>
                                    <th>
                                        Organizaion
                                    </th>
                                    <th>
                                       Last Course AVG marks
                                    </th>
                                </tr>
                               </thead>
                               <tbody>
                                <tr>
                                    <td>
                                        MD Imtiaz Ahmed
                                    </td>
                                    <td>
                                        PDB
                                    </td>
                                    <td>
                                        100%
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Borhan Uddin
                                    </td>
                                    <td>
                                       BREB
                                    </td>
                                    <td>
                                        87%
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Md azmaeen 
                                    </td>
                                    <td>
                                        PGCB
                                    </td>
                                    <td>
                                        84%
                                    </td>
                                </tr>
                                
                               </tbody>
                           </table>
                        </div>
                    </div>
            
        </div>
    </div>
    @endcan
</div>
@endsection
@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    var year = ;
    var user = ;
    var week = ['02-march','03-march','04-march','05-march','06-march','07-march','08-march']
    var resource = ['10','23','12','45','34','90','34']
    var barChartData = {
        labels: year,
        datasets: [{
            label: 'Trainee',
            backgroundColor: "#0866C6",
            data: user
        }]
    };
    var lineChartData = {
        labels: week,
        datasets: [{
            label: 'Resource',
            backgroundColor: "#00B297",
            data: resource
        }]
    };
    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        var linectx = document.getElementById("line").getContext("2d");
        window.myBar = new Chart(linectx, {
            type: 'line',
            data: lineChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: '#c1c1c1',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: 'Resources uploaded this week'
                }
            }});
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {

                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: '#c1c1c1',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: 'Yearly Trainee Passed'
                }
            }
        });
    };
</script>

@endsection