@extends('layouts.admin')
@section('content')
<style type="text/css">
	.widget,
	.widget.widget-note,
	.widget-note {
		background-color: #f3fbf7;
		max-width: 100%;
		padding: 14px;
		margin: 35px 0;
		border-radius: 9px;
		overflow-wrap: break-word;
		border-left: 5px solid #5ac891;
		font-size: 1rem;
		color: rgba(0, 0, 0, .87);
	}

	.widget.widget-warning {
		background-color: #f2564d;
		border-left: 5px solid #6b0d08;
		color: white;
	}

	.widget.widget-important {
		background-color: #fef7ed;
		border-left: 5px solid #f3a12c;
	}

	.align-top {
		vertical-align: top !important;
		width: 30px;
		border-radius: 100%;
		height: 30px;
	}
</style>

<!-- page header -->
 <div class="page-header">
    <div class="page-header-left d-flex align-items-center">
        <div class="page-header-title">
            @isset($title)
            <h5 class="m-b-10">{{ $title }}</h5>
            @endisset
        </div>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
			<li class="breadcrumb-item">
               {{$title}}
            </li>
        </ul>
    </div>
    <div class="page-header-right ms-auto">
        <div class="page-header-right-items">
            <div class="d-flex d-md-none">
                <a href="javascript:void(0)" class="page-header-right-close-toggle">
                    <i class="feather-arrow-left me-2"></i>
                    <span>Back</span>
                </a>
            </div>
            <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                  <!-- <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal">
                           <i class="feather-plus me-2"></i>
                           <span>New Categories</span>
                        </a> -->
            </div>
        </div>
        <!-- <div class="d-md-none d-flex align-items-center">
            <a href="javascript:void(0)" class="page-header-right-open-toggle">
                <i class="feather-align-right fs-20"></i>
            </a>
        </div> -->
    </div>
</div>

<!-- end page header -->
<div class="main-content">
	<div class="row">
		<!-- [Invoices Awaiting Payment] start -->
		<div class="col-xxl-4 col-md-4">
			<div class="card stretch stretch-full">
				<div class="card-body">
					<div class="d-flex align-items-start justify-content-between mb-4">
						<div class="d-flex gap-4 align-items-center">
							<div class="avatar-text avatar-lg bg-gray-200">
								<i class="feather-users"></i>
							</div>
							<div>
								<div class="fs-4 fw-bold text-dark"><span class="counter"><span class="tuser">{{$total_users}}</span> </span></div>
								<h3 class="fs-13 fw-semibold text-truncate-1-line">Total Users</h3>
							</div>
						</div>
						<a href="#" class="">
							<i class="feather-chevron-right"></i>
						</a>
					</div>
					<div class="pt-4">
						<div class="d-flex align-items-center justify-content-between">
							<a href="javascript:void(0);" class="fs-12 fw-medium text-muted text-truncate-1-line">Active Users</a>
							<div class="w-100 text-end">
								@php
    $totalUsers = $total_active_candidates + $total_pending_candidates;
    $activePer = $totalUsers > 0
        ? ($total_active_candidates / $totalUsers) * 100
        : 0;
@endphp
								<span class="fs-11 text-muted">({{$activePer}}%)</span>
							</div>
						</div>
						<div class="progress mt-2 ht-3">
							<div class="progress-bar bg-primary" role="progressbar" style="width: {{$activePer}}%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [Invoices Awaiting Payment] end -->
		<!-- [Converted Leads] start -->
		<div class="col-xxl-4 col-md-4">
			<div class="card stretch stretch-full">
				<div class="card-body">
					<div class="d-flex align-items-start justify-content-between mb-4">
						<div class="d-flex gap-4 align-items-center">
							<div class="avatar-text avatar-lg bg-gray-200">
								<i class="feather-film"></i>
							</div>
							<div>
								<div class="fs-4 fw-bold text-dark"><span class="counter">{{$total_videos}}</span></div>
								<h3 class="fs-13 fw-semibold text-truncate-1-line">Total Videos</h3>
							</div>
						</div>
						<a href="javascript:void(0);" class="">
							<i class="feather-chevron-right"></i>
						</a>
					</div>
					<div class="pt-4">
					@php
    $activeVideoPer = $total_videos > 0
        ? ($total_active_videos / $total_videos) * 100
        : 0;

    $inactiveVideoPer = $total_videos > 0
        ? ($total_inactive_videos / $total_videos) * 100
        : 0;

    $fgVideoPer = $total_videos > 0
        ? ($total_flagged_videos / $total_videos) * 100
        : 0;
@endphp
						<div class="d-flex align-items-center justify-content-between">
							<a href="javascript:void(0);" class="fs-12 fw-medium text-muted text-truncate-1-line">Active {{ round($activeVideoPer) }}% </a>
							<div class="w-100 text-end">
								<span class="fs-11 text-muted">Flagged {{ round($fgVideoPer) }}%</span>
								<span class="fs-11 text-muted">Disabled {{ round($inactiveVideoPer) }}%</span>
							</div>
						</div>
						<div class="progress mt-2 ht-3">
							<div class="progress-bar bg-success" role="progressbar" style="width: {{ round($activeVideoPer) }}%"></div>
							<div class="progress-bar bg-warning" role="progressbar" style="width: {{ round($inactiveVideoPer) }}%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [Converted Leads] end -->
		<!-- [Projects In Progress] start -->
		<div class="col-xxl-4 col-md-4">
			<div class="card stretch stretch-full">
				<div class="card-body">
					<div class="d-flex align-items-start justify-content-between mb-4">
						<div class="d-flex gap-4 align-items-center">
							<div class="avatar-text avatar-lg bg-gray-200">
								<i class="feather-user-check"></i>
							</div>
							<div>
								@php
								$totalEngagement=$total_likes+ $total_comments+ $total_views;
								$likePer=0;
								$commentPer=0;
								 @endphp

								@if($totalEngagement>0)
								@php $likePer=($total_likes/$totalEngagement) * 100;
								$commentPer=($total_comments/$totalEngagement) * 100;
								@endphp
								@endif
								<div class="fs-4 fw-bold text-dark"><span class="counter">{{$totalEngagement}}</span></div>
								<h3 class="fs-13 fw-semibold text-truncate-1-line">User Engagement</h3>
							</div>
						</div>
						<a href="#" class="">
							<i class="feather-chevron-right"></i>
						</a>
					</div>
					<div class="pt-4">
						<div class="d-flex align-items-center justify-content-between">
							<a href="#" class="fs-12 fw-medium text-muted text-truncate-1-line">{{$total_likes}} Likes </a>
							<div class="w-100 text-end">
								<span class="fs-11 text-dark">{{$total_comments}} Comments</span>
							</div>
							<div class="w-100 text-end">
								<span class="fs-11 text-muted">{{$total_views}} Views</span>
							</div>
						</div>
						<div class="progress mt-2 ht-3">
							<div class="progress-bar bg-primary" role="progressbar" style="width: {{$likePer}}%"></div>
							<div class="progress-bar bg-warning" role="progressbar" style="width: {{$commentPer}}%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [Projects In Progress] end -->


		<!-- [Registration] start -->
		<div class="col-xxl-8">
			<div class="card stretch stretch-full">
				<div class="card-header">
					<h5 class="card-title">Registration Analytics</h5>
				</div>
				<div class="card-body custom-card-action p-0">
					<div id="payment-records-chart"></div>
				</div>
			</div>
		</div>
		<!-- [Registration] end -->

		<!-- [version] start -->
		<div class="col-xxl-4">
			<div class="card stretch stretch-full overflow-hidden">
				<div class="bg-primary text-white">
					<div class="p-5">
						<div class="text-start">
							<h4 class="text-reset">{{$current_version}}</h4>
							<p class="text-reset m-0 fs-20">Current Version</p>
						</div>
					</div>
				</div>

				<div class="bg-success text-white">
					<div class="p-5">
						<div class="text-start">
							<h4 class="text-reset">{{$latest_version}}</h4>
							<p class="text-reset m-0 fs-20">Latest Version</p>
						</div>
					</div>
				</div>
				@if($current_version != $latest_version)
				<a href="javascript:void(0);" class="card-footer  text-uppercase text-center py-4 fs-16" data-bs-toggle="modal" data-bs-target="#exampleModal">Updates Now</a>
				@else
				<a href="javascript:void(0);" class="card-footer  text-uppercase text-center py-4 fs-16">No
					Updates Available</a>
				@endif
			</div>
		</div>
		<!-- [version] end !-->



		<!-- [active candidate] start -->
		<div class="col-xxl-6">
			<div class="card stretch stretch-full">
				<div class="card-header">
					<h5 class="card-title">Active Candidates</h5>
				</div>
				<div class="card-body custom-card-action p-0">
					<div class="table-responsive">
						<table class="table table-hover mb-0">
							<thead>
								<tr class="border-b">
									<th scope="row">Users</th>
									<th>Username</th>
									<th>Date</th>
								</tr>
							</thead>
							<tbody>
															</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- Active Candidates end -->

		<!-- Inactive Candidates end -->

		<div class="col-xxl-6">
			<div class="card stretch stretch-full">
				<div class="card-header">
					<h5 class="card-title">Inactive Candidates</h5>
				</div>
				<div class="card-body custom-card-action p-0">
					<div class="table-responsive">
						<table class="table table-hover mb-0">
							<thead>
								<tr class="border-b">
									<th scope="row">Users</th>
									<th>Username</th>
									<th>Date</th>
								</tr>
							</thead>
							<tbody>
															</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- Inactive Candidates end -->

	</div>
</div>
@endsection
@push('scripts')
<script>
	$(document).ready(function() {
		new ApexCharts(document.querySelector("#payment-records-chart"), {
			chart: {
				height: 300,
				width: "100%",
				stacked: !1,
				toolbar: {
					show: !1
				}
			},
			stroke: {
				width: [1, 2, 3],
				curve: "smooth",
				lineCap: "round"
			},
			plotOptions: {
				bar: {
					endingShape: "rounded",
					columnWidth: "30%"
				}
			},
			colors: ["#3454d1", "#a2acc7", "#E1E3EA"],
			series: [{
					name: "Users",
					type: "bar",
					data: [