@extends('layouts.app')
@section('titlePage', 'Manage Page')
@section('content')
<script>  
    document.getElementById("ktss-0").classList.add("active");
</script>
@php
    $brand_color = $dataConfigs['brand'] ?? 'default';
@endphp
<link rel="stylesheet" href="{{asset('assets/plugins/pnotify/css/pnotify.custom.min.css')}}">
<div class="page-wrapper">
	<!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
        <span class="main-content-title text-primary mg-b-0 mg-b-lg-1">DASHBOARD</span>
        </div>
        <div class="justify-content-center mt-2">
            <ol class="breadcrumb breadcrumb-style3">
                <li class="breadcrumb-item tx-15"><a href="javascript:void(0)">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Analytics</li>
            </ol>
        </div>
    </div>
	<!-- /breadcrumb -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-xl-12">
            @if(session()->has('message.level'))
                <div class="mt-2 alert alert-{{session('message.level')}} alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {!! session('message.content') !!}
                </div>
            @endif
			<div class="card">

				<div class="card-body">
                    <div class="row">
                        <!-- product profit start -->
                       
                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Staffs</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$countStaff ?? 0}}</h5>
                                                <p class="mb-0"><span class="badge badge-success-transparent">+2.31%</span><span class="tx-muted ms-2 tx-12">last month</span></p>
                                            </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-primary-transparent">
                                                <i class="fa fa-users tx-primary"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Students</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$countStudent ?? 0}}</h5>
                                                <p class="mb-0"><span class="badge badge-success-transparent">+2.31%</span><span class="tx-muted ms-2 tx-12">last month</span></p>
                                            </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-orange-transparent">
                                                <i class="fa fa-users tx-orange"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Total Questions</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$countQuestion ?? 0}}</h5>
                                                <p class="mb-0"><span class="badge badge-success-transparent">+2.31%</span></p>
                                            </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-secondary-transparent">
                                                <i class="fa fa-globe tx-secondary"></i>
                                            </div>
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Total Test</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$countTest ?? 0}}</h5>
                                                <p class="mb-0"><span class="badge badge-success-transparent">+2.31%</span><span class="tx-muted ms-2 tx-12">last month</span></p>
                                            </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-secondary-transparent">
                                                <i class="fa fa-wallet tx-success"></i>
                                            </div>
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- product profit end -->

                              
                            <div class="col-xl-12">
									<div class="card">
										<div class="card-header">
											<div class="card-title text-primary">Material Chart</div>
										</div>
										<div class="card-body">
											<div id="chartA"></div>
										</div>
									</div>
								</div>

                                <div class="col-xl-4 col-lg-4">
									<div class="card">
										<div class="card-header">
											<div class="card-title">
												Staff Status
											</div>
										</div>
										<div class="card-body">
											<ul class="sales-session mb-0">
												<li>
													<div class="d-flex justify-content-between">
														<h6> Active </h6>
														<p class="font-weight-semibold mb-2 counter">{{$countStaffActive ?? 0}} </p>
													</div>
                                                    <div class="progress-bar-custom progress-bar-custom-success mb-3">
                                                        <div class="progress-custom fill-1 progress-success wd-105">
                                                            <div class="glow glow-success"></div>
                                                        </div>
                                                    </div>
													
												</li>
												
												<li>
													<div class="d-flex justify-content-between">
														<h6>Deactive</h6>
														<p class="font-weight-semibold mb-2 counter">{{$countStaffDeactivated ?? 0}} </p>
													</div>
                                                    <div class="progress-bar-custom progress-bar-custom-orange mb-3">
                                                        <div class="progress-custom fill-1 progress-orange wd-105">
                                                            <div class="glow glow-orange"></div>
                                                        </div>
                                                    </div>
												</li>
												
											</ul>
										</div>
									</div>
								</div>

                                <div class="col-xl-4 col-lg-4">
									<div class="card">
										<div class="card-header">
											<div class="card-title">
												Students Status
											</div>
										</div>
										<div class="card-body">
											<ul class="sales-session mb-0">
                                            <li>
													<div class="d-flex justify-content-between">
														<h6>Invited</h6>
														<p class="font-weight-semibold mb-2 counter">{{$countStudentInvited ?? 0}}</p>
													</div>
                                                    <div class="progress-bar-custom progress-bar-custom-primary">
                                                        <div class="progress-custom fill-1 progress-primary wd-105">
                                                            <div class="glow glow-primary"></div>
                                                        </div>
                                                    </div>
												</li>
												<li>
													<div class="d-flex justify-content-between">
														<h6> Joined </h6>
														<p class="font-weight-semibold mb-2 counter">{{$countStudentJoined ?? 0}} </p>
													</div>
													<div class="progress-bar-custom progress-bar-custom-success mb-3">
                                                        <div class="progress-custom fill-1 progress-success wd-105">
                                                            <div class="glow glow-success"></div>
                                                        </div>
                                                    </div>
												</li>
												
												<li>
													<div class="d-flex justify-content-between">
														<h6>Deactivated</h6>
														<p class="font-weight-semibold mb-2 counter">{{$countStudentDeactivated ?? 0}} </p>
													</div>
													<div class="progress-bar-custom progress-bar-custom-orange mb-3">
                                                        <div class="progress-custom fill-1 progress-orange wd-105">
                                                            <div class="glow glow-orange"></div>
                                                        </div>
                                                    </div>
												</li>
												
											</ul>
										</div>
									</div>
								</div>
                                <div class="col-xl-4 col-lg-4">
									<div class="card">
										<div class="card-header">
											<div class="card-title">
												Test Status
											</div>
										</div>
										<div class="card-body">
											<ul class="sales-session mb-0">
												<li>
													<div class="d-flex justify-content-between">
														<h6> Total Created </h6>
														<p class="font-weight-semibold mb-2 counter">{{$countTest ?? 0}} </p>
													</div>
                                                    <div class="progress-bar-custom progress-bar-custom-success mb-3">
                                                        <div class="progress-custom fill-1 progress-success wd-105">
                                                            <div class="glow glow-success"></div>
                                                        </div>
                                                    </div>
												</li>
												
												<li>
													<div class="d-flex justify-content-between">
														<h6>Total Attempted</h6>
														<p class="font-weight-semibold mb-2 counter">{{count($countTestAttempted) ?? 0}} </p>
													</div>
													<div class="progress-bar-custom progress-bar-custom-primary">
                                                        <div class="progress-custom fill-1 progress-primary wd-105">
                                                            <div class="glow glow-primary"></div>
                                                        </div>
                                                    </div>
												</li>
												
											</ul>
										</div>
									</div>
                            </div> 
                    <div class="row">
                    <div class="card-title">Test Performance</div>
                        <div class="table-responsive dt-responsive">
                            <div id="dt-ajax-array_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="dt-ajax-array" class="table table-bordered text-nowrap border-bottom">
                                            <thead>
                                                <tr role="row">
                                                    <th>Category</th>
                                                    <th>Title</th>
                                                    <th>Name</th>
                                                    <th>USN</th>
                                                    <th>Campus</th>
                                                    <th>Degree</th>
                                                    <th>Department</th>
                                                    <th>Batch</th>
                                                    <th>Section</th>
                                                    <th>Maximum Marks</th>
                                                    <th>Student score</th>
                                                    <th>Remarks</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @foreach ($latestResult as $value)
                                                <tr>
                                                    <td>{{ $value->test->category->category ?? 'None' }}</td>
                                                    <td>{{ $value->test->title ?? null }}</td>
                                                    <td>{{ $value->student->fullname ?? null }}</td>
                                                    <td>{{ $value->student->registration_number ?? null }}</td>
                                                    <td>{{ $value->student->campus->campus_title ?? null }}</td>
                                                    <td>{{ $value->student->degree->deg_spc_title ?? null }}</td>
                                                    <td>{{ $value->student->department->d_name ?? null }}</td>
                                                    <td>{{ $value->student->batch->batch_title ?? null }}</td>
                                                    <td>{{ $value->student->section->title ?? null }}</td>
                                                    <td>{{ $value->total_marks }}</td>
                                                    <td>{{ $value->marks_obtained ?? 0}}</td>
                                                    <td>{{ !empty($remarksMap[$value->test_id.'_'.$value->student_id]) ? $remarksMap[$value->test_id.'_'.$value->student_id]->remarks : '' }}</td>
                                                    <td><span class="label label-success">Attempted</span></td>
                                              
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
	<!-- [ Main Content ] end -->
</div>

@endsection
@section('script')
<script src="{{asset('assets/plugins/pnotify/js/pnotify.custom.min.js')}}"></script>
<script src="{{asset('assets/plugins/pnotify/js/notify-event.js')}}"></script>
@php

$dat = user()->client_end_date;
$date2=date_create(user()->client_end_date);
$date1=date_create(date("Y-m-d"));
$diff=date_diff($date1,$date2);
$days = $diff->format("%a");
@endphp
@if (is_client()) 
    @if($days < 20)
        <script>
            @if($days > 1){
                new PNotify({
                    title: `<a href="">Dear {{user()->client_org_name}}</a>`,
                    text: 'Enjoying our Service..! You are left with {{$days}} days.',
                    type: 'success'
                })
            }
                @elseif($days < 1){
                    new PNotify({
                        title: `<a href="">Dear {{user()->client_org_name}}</a>`,
                        text: 'Enjoying our Service..! Today is the last day.',
                        type: 'success'
                    })
                }
            @endif
        </script>
    @endif
@endif
@php 
    $colorCode1 =  'var(--primary-bg-color)';
    $colorCode2 = 'var(--secondary)';;
    $colorCode3 = ($brand_color == 'default') ? '#FFC0CB' : '#004225';
    $colorCode4 = ($brand_color == 'default') ? '#00FF00' : '#800000';
	
@endphp
<!-- Apexchart js -->
<script>
//Sales Chart
var options = {
	series: [{
		name: 'Tests',
		type: 'column',
		data: {{$testCountMonth}},
	}, {
		name: 'Assignment',
		type: 'column',
		data: {{$assignCountMonth}}
	},
    {
		name: 'Course',
		type: 'line',
		data: {{$courseCountMonth}}
	},
    {
		name: 'Test Series',
		type: 'column',
		data: {{$testSeriesCountMonth}}
	},
    {
		name: 'Study Guide',
		type: 'line',
		data: {{$courseCountMonth}}
	},

    
   
	],
	chart: {
		height: 350,
		type: 'line',
        fontFamily: 'poppins, sans-serif',
		stacked: false
	},
	grid: {
		borderColor: '#f2f6f7',
	},
	dataLabels: {
		enabled: false
	},
	stroke: {
		width: [1, 1, 4],
	},
	title: {
		text: undefined,
		align: 'left',
		offsetX: 210
	},
	xaxis: {
        
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug','Sep','Oct','Nov','Dec'],
		axisBorder: {
			color: 'rgba(119, 119, 142, 0.05)',
			offsetX: 0,
			offsetY: 0,
		},
		axisTicks: {
			color: 'rgba(119, 119, 142, 0.05)',
			width: 10,
			offsetX: 0,
			offsetY: 0
		},
	},
	
	tooltip: {
		enabled: true,
	},
	colors: ['{{$colorCode1}}', "{{$colorCode2}}", "{{$colorCode4}}",'{{$colorCode3}}','#FF0000'],
	legend: {
		position: 'top',
		offsetX: 40
	}, stroke: {
		width: [0, 0, 1.5],
		curve: 'smooth',
		dashArray: [0, 0, 2],
	},
	plotOptions: {
		bar: {
			columnWidth: "65%",
			borderRadius: 5
		}
	},
};
var chart1 = new ApexCharts(document.querySelector("#chartA"), options);
chart1.render();
function chartA() {
	chart1.updateOptions({
		colors: [`rgb(${myVarVal})`, `rgba(${myVarVal}, 0.4)`, "#fd7e14"],
	})
}

$(function () {
	$('#vmap').vectorMap({
		map: 'world_en',
		scaleColors: ['#e8e8e8', '#ffffff'],
		normalizeFunction: 'polynomial',
		// hoverColor: true,
		hoverColor: '#4eb6d0',
		regionStyle: {
			initial: {
				fill: '#f2f2f2'
			}
		},
		markerStyle: {
			initial: {
				r: 6,
				'fill': '#4ac9bd',
				'fill-opacity': 0.9,
				'stroke': '#fff',
				'stroke-width': 9,
				'stroke-opacity': 0.2
			},
			hover: {
				'stroke': '#fff',
				'fill-opacity': 1,
				'stroke-width': 1.5
			}
		},
		backgroundColor: 'transparent',
		markers: [{
			latLng: [-15.793889, -47.882778],
			name: 'Brazil'
		}, {
			latLng: [-35.473469, 149.012375],
			name: 'Australia'
		}, {
			latLng: [61.5240, 105.3188],
			name: 'Russia'
		},]
	});
});


</script>
@endsection