{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

}}
{{!
    @template theme_remui/course_stats
}}

{{#iscoursestatsshow}}

<div id="wdm_course-stats" class="edw-stats-wrapper" data-course-id={{courseid}}>
	<div class="stat-block">
		<div class="inner">
			<div class="icon-container">
				<span class="edw-icon edw-icon-Group-user"></span>
			</div>
			<div class="info-container d-flex flex-column p-mb-d5">
				<span class="h-exbold-2 stats-enrolledusers"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
				<span class="h-semibold-6">{{#str}}enrolledusers, theme_remui{{/str}}</span>
			</div>
		</div>
	</div>
	<div class="stat-block">
		<div class="inner">
			<div class="icon-container">
				<span class="edw-icon edw-icon-Time"></span>
			</div>
			<div class="info-container d-flex flex-column p-mb-d5">
				<span class="h-exbold-2 stats-completed"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
				<span class="h-semibold-6">{{#str}}studentcompleted, theme_remui{{/str}}</span>
			</div>
		</div>
	</div>
	<div class="stat-block">
		<div class="inner">
			<div class="icon-container">
				<span class="edw-icon edw-icon-Inprogress"></span>
			</div>
			<div class="info-container d-flex flex-column p-mb-d5">
				<span class="h-exbold-2 stats-inprogress"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
				<span class="h-semibold-6">{{#str}}inprogress, theme_remui{{/str}}</span>
			</div>
		</div>
	</div>
	<div class="stat-block">
		<div class="inner">
			<div class="icon-container">
				<span class="edw-icon edw-icon-Yettostart"></span>
			</div>
			<div class="info-container d-flex flex-column p-mb-d5">
				<span class="h-exbold-2 stats-notstarted"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
				<span class="h-semibold-6">{{#str}}yettostart, theme_remui{{/str}}</span>
			</div>
		</div>
	</div>
	<div class="stats-mb-devices">
		<div class="stat-block">
			<div class="inner">
				<div class="icon-container">
					<span class="edw-icon edw-icon-Group-user"></span>
				</div>
				<div class="info-container d-flex flex-column p-mb-d5">
					<span class="h-exbold-2 stats-enrolledusers"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
					<span class="h-semibold-6">{{#str}}enrolledusers, theme_remui{{/str}}</span>
				</div>
			</div>
		</div>
		<div class="stat-block">
			<div class="inner">
				<div class="icon-container">
					<span class="edw-icon edw-icon-Inprogress"></span>
				</div>
				<div class="info-container d-flex flex-column p-mb-d5">
					<span class="h-exbold-2 stats-inprogress"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
					<span class="h-semibold-6">{{#str}}inprogress, theme_remui{{/str}}</span>
				</div>
			</div>
		</div>
	</div>
	<div class="stats-mb-devices">
		<div class="stat-block">
			<div class="inner">
				<div class="icon-container">
					<span class="edw-icon edw-icon-Time"></span>
				</div>
				<div class="info-container d-flex flex-column p-mb-d5">
					<span class="h-exbold-2 stats-completed"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
					<span class="h-semibold-6">{{#str}}studentcompleted, theme_remui{{/str}}</span>
				</div>
			</div>
		</div>
		<div class="stat-block">
			<div class="inner">
				<div class="icon-container">
					<span class="edw-icon edw-icon-Yettostart"></span>
				</div>
				<div class="info-container d-flex flex-column p-mb-d5">
					<span class="h-exbold-2 stats-notstarted"><img src="{{siteinnerloader}}" alt="loader image" height="30" width="30"></span>
					<span class="h-semibold-6">{{#str}}yettostart, theme_remui{{/str}}</span>
				</div>
			</div>
		</div>
	</div>
</div>

{{#js}}
	require(['jquery', 'core/ajax'], function($, Ajax) {
		$(document).ready(function(){

			function getUrlParameter(sParam) {
			    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
			    sURLVariables = sPageURL.split('&'),
			    sParameterName,
			    i;

			    for (i = 0; i < sURLVariables.length; i++) {
			        sParameterName = sURLVariables[i].split('=');

			        if (sParameterName[0] === sParam) {
			            return sParameterName[1] === undefined ? true : sParameterName[1];
			        }
			    }
			}

			let courseid = $("#wdm_course-stats").data('course-id');
			let service_name = 'theme_remui_get_course_stats';
			let cstats = Ajax.call([
			    {
			        methodname: service_name,
			        args: { courseid : courseid }
			    }
			]);
			cstats[0].done(function(response) {
			    // When course stats block is ready then render the respose value
			    $('.course-stats').ready(function() {
			        $.each(response, function(index, value) {
			            var courseStatsDiv = '#wdm_course-stats .stats-' + index;
			            $(courseStatsDiv).text(value);
			        })
			    });
			});
		});
	});
{{/js}}

{{/iscoursestatsshow}}