@extends('layouts.portal.app')
	@section('content') 
		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="row g-6">
					@if(Session::has('errorResponse'))  
						<div class="col-md-12">
							<div class="temporary-alert alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
						</div>
					@endif

					@if((Auth::user()->hasRole('Administrator')) || (!Auth::user()->hasRole('Administrator') && $activeCompany && count($activeCompany->companyRouters) > 0))
						<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
						<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

						<div class="col-md-12 mb-3">
							<div class="card card-border-shadow-success h-100" style="padding: 1%;">
								<div class="">
									@if((Auth::user()->hasRole('Administrator') && $activeCompany != "") || ($activeCompany != "" && count($activeCompany->companyRouters) > 0) && $activeCompanyRouter != "")
									    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start text-success">
									        <div> <i class="fa fa-info-circle"></i> {{ $activeCompanyRouter->name }} is the active router </div>

								        	@php $router = \App\Models\CompanyRouter::whereId($activeCompanyRouter->id)->first(); @endphp

								        	@if($router->hotspot_anti_sharing_enabled == 0)
									            <div class="mb-2 mb-lg-0">
									                <a href="{{ $router->id }}" status="1" class="btn btn-xs btn-outline-primary update-hotspot-anti-sharing"> <i class="ti ti-router-off me-2"></i> Enable Hotspot Anti-Sharing </a> 
									            </div>
									        @else
									        	<div class="mb-2 mb-lg-0">
									                <a href="{{ $router->id }}" status="0" class="btn btn-xs btn-outline-warning update-hotspot-anti-sharing"> <i class="ti ti-router me-2"></i> Disable Hotspot Anti-Sharing </a> 
									            </div>
									        @endif

									        @if(Auth::user()->hasRole('Administrator') && $activeCompany != "")
												<label class="mb-2 mr-3 ms-3"> <a href="{{ url('reset-account') }}" class="btn btn-xs btn-outline-danger disabled-btn"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-restore"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3.06 13a9 9 0 1 0 .49 -4.087" /><path d="M3 4.001v5h5" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg> Reset Account </a> </label> 
											@endif
									    </div>
									@endif

									@if(Auth::user()->hasRole('Administrator') && $activeCompany == "")
										@if(Auth::user()->hasRole('Administrator'))
											<label class="mr-3 ms-3"> <a href="javascript:;" class="create-user disabled-btn"> <i class="tf-icons ti ti-components"></i> Add User </a> </label> 

											<label class="mr-3 ms-3"> <a href="{{ url('certificate-keys') }}" class="disabled-btn"> <i class="tf-icons ti ti-components"></i> Keys </a> </label> 

											<label class="mr-3 ms-3"> <a href="javascript:;" class="disabled-btn create-potential-customer"> <i class="tf-icons ti ti-components"></i> Add Potential Customer </a> </label> 
										@endif
									@elseif(count($activeCompany->ActiveCompanyRouters) > 1)
										@foreach($activeCompany->ActiveCompanyRouters as $companyRouter)
											<label class="mb-2 mr-3 ms-3"> <a href="{{ url('company-router-profile/'.$companyRouter->id) }}" class="select-company-router @if($companyRouter->id == $activeCompanyRouter->id) text-danger @endif"> <i class="tf-icons ti ti-wifi"></i> {{ $companyRouter->name }} </a> </label> 
										@endforeach
									@endif
								</div>
							</div>
						</div>
					@endif

					@if(Auth::user()->hasRole('Administrator') && $activeCompany == "")
						<div class="col-lg-3 col-sm-6 mb-3">
						    <div class="border card card-border-shadow-success">
						        <div class="card-body1" style="padding: 5%;">
						            <div class="d-flex align-items-center mb-2">
						                <div class="avatar me-1">
						                    <span class="avatar-initial rounded bg-label-success">
						                        <i class="ti ti-currency-dollar ti-28px text-warning"></i>
						                    </span>
						                </div>

						                <h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalInvoiceAmount, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg> </span>

										        <span style="display: none;"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24"  fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg> </span>
										    </a>
										</h6>
						            </div>

						            <p class="mb-1">Exp. Routers Income</p>
						        </div>
						    </div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalInvoieIncome, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg> </span>

										        <span style="display: none;"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24"  fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Amount Paid </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($smsIncome, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg> </span>

										        <span style="display: none;"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24"  fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> SMS Income </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalInvoiceBalance, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg> </span>

										        <span style="display: none;"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24"  fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Total Balance </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalCommission, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6 c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg> </span>

											    <span class="hide" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye-off"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327 c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" /> </svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Total Comm/Expenses </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalPaidCommission, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6 c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg> </span>

											    <span class="hide" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye-off"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327 c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" /> </svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Paid Commission </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalCommissionBalance, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6 c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg> </span>

											    <span class="hide" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye-off"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327 c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" /> </svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Commission Balance </p>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-sm-6 mb-3">
							<div class="border card card-border-shadow-success">
								<div class="card-body1" style="padding: 5%;">
									<div class="d-flex align-items-center mb-2">
										<div class="avatar me-1">
											<span class="avatar-initial rounded bg-label-success"> <i class="ti ti-currency-dollar ti-28px text-warning"></i> </span>
										</div>

										<h6 class="mb-0 d-flex align-items-center justify-content-between w-100">
										    <span class="invoice-amount" style="font-size: 13px" data-amount="Tsh {{ number_format($totalNet, 2) }}"> Tsh XXXX </span>

										    <a href="javascript:void(0);" onclick="toggleAmount(this)" class="text-success">
										        <span class="show"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6 c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg> </span>

											    <span class="hide" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-eye-off"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327 c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" /> </svg> </span>
										    </a>
										</h6>
									</div>

									<p class="mb-1"> Net Income </p>
								</div>
							</div>
						</div>

						<div class="col-xxl-6 col-xl-6 col-lg-6 col-sm-6 mb-3">
							<div class="card card-danger card-border-shadow-success">
								<div style="padding-left: 20px; text-align: center;"> <span> Company Routers Status Distribution </span> </div>

							    <div style="display: flex; align-items: center; flex-wrap: wrap;">
							        <div style="flex: 1; padding-left: 20px; padding-right: 20px;">
							            <div style="display: flex; flex-direction: column; gap: 10px;">
							                <div><span style="display: inline-block; width: 20px; height: 10px; background-color: #2b5797; margin-right: 10px;"></span> Active </div>
							                <div><span style="display: inline-block; width: 20px; height: 10px; background-color: #B58424; margin-right: 10px;"></span> Inactive </div>
							                <div><span style="display: inline-block; width: 20px; height: 10px; background-color: #b91d47; margin-right: 10px;"></span> Expired </div>
							            </div>
							        </div>

							        <!-- Chart -->
							        <div style="flex: 1; padding-left: 20px; padding-right: 20px; padding-bottom: 10px;">
							            <canvas id="chart1" style="width:100%; height: 180px;"></canvas>
							        </div>
							    </div>

							    <script>
							        var yValues = [{{ $activeCompanyRouters }}, {{ $inactiveCompanyRouters }}, {{ $expiredCompanyRouters }}];
							        var barColors = ["#2b5797", "#B58424", "#b91d47"];
							        var labels = ["Active", "Inactive", "Expired"];

							        new Chart("chart1", {
							            type: "pie",
							            data: {
							            	labels: labels,
							                datasets: [{
							                    backgroundColor: barColors,
							                    data: yValues
							                }]
							            },
							            
							            options: {
								            plugins: {
								                legend: {
								                    display: false 
								                },
								                tooltip: {
								                    enabled: true,
								                    callbacks: {
								                        label: function(context) 
								                        {
								                            const label = context.label || '';
								                            const value = context.raw;
								                            return `${label}: ${value}`;
								                        }
								                    }
								                }
								            }
								        }
							        });
							    </script>
							</div>
						</div>

						<div class="col-xxl-6 col-xl-6 col-lg-6 col-sm-6 mb-3">
							<div class="card card-danger card-border-shadow-success">
								<div style="padding-left: 20px; text-align: center;"> <span> Companies Status Distribution </span> </div>

							    <div style="display: flex; align-items: center; flex-wrap: wrap;">
							        <div style="flex: 1; padding-left: 20px; padding-right: 20px;">
							            <div style="display: flex; flex-direction: column; gap: 10px;">
							                <div><span style="display: inline-block; width: 20px; height: 10px; background-color: #2b5797; margin-right: 10px;"></span> Active </div>

							                <div><span style="display: inline-block; width: 20px; height: 10px; background-color: #b91d47; margin-right: 10px;"></span> Inactive </div>
							            </div>
							        </div>

							        <div style="flex: 1; padding-left: 20px; padding-right: 20px; padding-bottom: 10px;">
							            <canvas id="chart2" style="width:100%; height: 180px;"></canvas>
							        </div>
							    </div>

							    <script>
							        var yValues = [{{ $activeCompanies }}, {{ $inactiveCompanies }}];
							        var barColors = ["#2b5797", "#b91d47"];
							        var labels = ["Active", "Inactive"];

							        new Chart("chart2", {
							            type: "pie",
							            data: {
							            	labels: labels,
							                datasets: [{
							                    backgroundColor: barColors,
							                    data: yValues
							                }]
							            },
							            options: {
								            plugins: {
								                legend: {
								                    display: false 
								                },
								                tooltip: {
								                    enabled: true,
								                    callbacks: {
								                        label: function(context) 
								                        {
								                            const label = context.label || '';
								                            const value = context.raw;
								                            return `${label}: ${value}`;
								                        }
								                    }
								                }
								            }
								        }
							        });
							    </script>
							</div>
						</div>

						<div class="col-xxl-12 col-xl-12 col-lg-12 mb-3">
						    <div class="card card-danger card-border-shadow-success">
							    <canvas id="monthlyRoutersChart" style="width:100%; height:300px;"> </canvas>
							    <script>
							    	var monthlyLabels = {!! json_encode($monthLabels) !!};
									var monthlyData = {!! json_encode($monthlyRouterCounts) !!};

									new Chart("monthlyRoutersChart", {
									    type: "bar",
									    data: {
									        labels: monthlyLabels,
									        datasets: [{
									            label: "Routers Added",
									            backgroundColor: "#2b5797",
									            borderColor: "#1d3f73",
									            borderWidth: 1,
									            data: monthlyData
									        }]
									    },

									    options: {
									        plugins: {
									            title: {
									                display: true,
									                text: "Monthly Router Onboarding ({{ now()->year }})",
									                font: {
									                    size: 13
									                }
									            },
									            legend: {
									                display: false
									            }
									        },
									        scales: {
									            y: {
									                beginAtZero: true,
									                title: {
									                    display: true,
									                    text: "Count"
									                }
									            },
									            x: {
									                title: {
									                    display: true,
									                    text: "Month"
									                }
									            }
									        }
									    }
									});
							    </script>
							</div>
						</div>

						<div class="col-xxl-12 col-xl-12 col-lg-12 mb-3">
						    <div class="card card-danger card-border-shadow-success">
						        <canvas id="chart3" style="width:100%; height: 400px;"></canvas>

						        <script>
						            var xValues = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];