@extends('backend.layouts.master_pdf')
@section('styles')
	<style>
		body {
			background-color: #ffffff;
		}

		p {
			line-height: 1.5;
			font-size: 12px;
			text-align: justify;
			margin-bottom: 12px;
			color: #000000 !important;
		}


		ul>li {
			line-height: 1.5;
			font-size: 12px;
			text-align: justify;
			margin-bottom: 6px;
			color: #000000 !important;
		}

		.pagebreak {
			break-after: page
		}

		.Assets-cart {
			height: 46rem;
		}

		.pie {
			height: 36rem;
		}

		#chart-container {
			position: relative;
			height: 300px;
			overflow: hidden;
		}

		/* Center the chart container */
		#main {
			width: 160px;
			height: 160px;
			margin: 81px auto;
		}

		* {
			-webkit-print-color-adjust: exact !important;
			color-adjust: exact !important;
			print-color-adjust: exact !important;
		}

		/* Ensure Puppeteer uses your print styles */
		@media print {
			body * {
				display: none;
			}

			.page-break {
				display: block;
				page-break-before: always;
				/* before this element */
				break-before: page;
				/* newer spec */
			}
		}
	</style>
@endsection

@section('content')
	<div class="content  mt-0 pt-0">
		@if ($individual)
			<!-- Edit mode -->
			<div id="individual-dashboard" class="main-content mt-0 pt-0">

				<div class="box border-0 shadow-none pb-6">
					<svg width="25%" enable-background="new 0 0 3627 701" version="1.1" viewBox="0 0 3627 701" xml:space="preserve"
						xmlns="http://www.w3.org/2000/svg">
						<style type="text/css">
							.st0 {
								fill: none;
							}
						</style>
						<rect class="st0" x=".2" width="499.6" height="701">
						</rect>
						<path
							d="m480.4 178.2c11.6-3.9 3.9-19.4 1.9-32.9 1.9 3.9 13.6 11.6 15.5 15.5v-13.6c-1.9-9.7-7.7-19.4-15.5-27.1 7.7-3.9 7.7 0 15.5 0-11.6-29-34.9-1.9-52.3-5.8-11.6 0-21.3 1.9-29 15.5 0 1.9-21.3 38.7-29 52.3 5.8 11.6 17.4 13.6 29 15.5 9.7-17.4 9.7-25.2 19.4-42.6 1.9 13.6 11.6 34.9 31 31-1.9-1.9-7.7-9.7-9.7-15.5-3.9-9.7-3.9-19.4 0-17.4 15.5 5.7 23.2 5.7 23.2 25.1zm-139.4-145.3c7.7 0 13.6 3.9 13.6 5.8 0 3.9-5.8 5.8-13.6 5.8-7.7 0-13.6-1.9-13.6-5.8 0.1-1.9 5.9-5.8 13.6-5.8zm73.6 27.1c5.8 0 11.6-1.9 15.5-1.9 9.7-1.9 19.4-1.9 32.9 3.9 7.7 3.9 17.4 3.9 29 5.8-13.6 11.6-52.3-3.9-58.1 1.9-13.6 11.6-13.6 31 1.9 34.9-7.7-5.8-11.6-15.5 9.7-25.2 11.6-3.9 40.7 13.6 52.3 15.5v-40.7c-17.4 0-23.2 0-36.8-3.9 15.5 0 29-9.7 36.8-21.3v-25.1c-5.8 15.5-32.9 21.3-38.7 0 1.9 29 7.7 32.9-31 50.3-3.8 2-9.6 3.9-13.5 5.8zm-151 573.2c-3.9 7.7-7.7 15.5-15.5 25.2l-15.5 15.5c-5.8 3.9-11.6 7.7-17.4 11.6-9.7 1.9-17.4 3.9-27.1 3.9-17.4 1.9-34.9-3.9-50.3-15.5-15.5-9.7-27.1-25.2-32.9-44.5-9.7-34.9 0-62 9.7-93 7.7-25.2 15.5-50.3 15.5-60s-1.9-19.4-5.8-29c-19.4-38.7-135.6-38.7-50.3 114.3-9.7-1.9-21.3-5.8-32.9-13.6-9.7-5.8-17.4-13.6-23.2-25.2-8-11.7-11.9-25.2-13.8-38.8-1.9-5.8-1.9-9.7-1.9-13.6 0-9.7 1.9-19.4 5.8-29 3.9-11.6 13.6-27.1 25.2-38.7 40.6-38.7 102.5-25.2 125.8 25.2 7.7 13.6 11.6 31 11.6 48.4 0 15.5-7.7 44.5-17.4 73.6-5.8 19.4-15.5 44.5-9.7 63.9s23.2 32.9 44.5 31c21.3 0 38.7-19.4 38.7-42.6 1.9-9.7-9.7-29-19.4-46.5-19.3-36.8-17.3-56.2-1.8-106.5 5.8-23.2 11.6-38.7 23.2-63.9 15.5-21.3 104.6-69.7 127.8-73.6 21.3-3.9 42.6-3.9 52.3 17.4 21.3 46.5-19.4 79.4-48.4 87.1-15.5 3.9-29 7.7-32.9 15.5 0 3.9 1.9 7.7 3.9 7.7 0 0 27.1-11.6 31-11.6 21.3-5.8 122-56.2 135.6-19.4v15.5c-5.8 1.9-13.6-5.8-23.2-3.9 11.6 7.7 19.4 13.6 15.5 32.9-7.7-13.6-19.4-17.4-34.9-17.4 23.2 5.8 27.1 40.7 5.8 40.7 11.6-17.4-11.6-21.3-25.2-25.2-11.6-3.9-114.3 23.2-127.8 31-5.8 0-13.6-3.9-17.4-9.7-13.6-13.6-7.7-32.9-3.9-50.3-1.9 3.9-29 38.7-40.7 60-29.1 46.6 38.7 83.3 17.4 151.1zm-89.1-110.4c-5.8 23.2-36.8 85.2 1.9 104.6 9.7 3.9 36.8 0 38.7-42.6-1.9 0-11.6 32.9-32.9 31-19.3-3.9-11.6-75.5-7.7-93zm-73.6 21.3c0-15.5 17.4-50.3 11.6-75.5-7.7-34.9-67.8-34.9-60 17.4 1.9 0 13.6-36.8 34.9-29 17.4 5.8 17.4 27.1 13.5 87.1zm245.9-54.2c21.3 3.9 67.8 25.2 87.1 36.8 5.8 3.9 31 19.4 42.6 23.2-50.3 15.5-139.4-50.3-141.4-50.3 21.3 36.8 38.7 46.5 83.3 62 21.3 5.8 44.5 11.6 75.5 21.3 1.9-7.7 3.9-13.6 3.9-21.3v-27.1c-29-7.7-48.4-7.7-65.8-21.3 13.6 3.9 56.2 3.9 65.8-5.8v-32.9c-17.4 21.3-38.7 23.2-46.5 23.2-27.1 0-34.9-9.7-25.2-29-28.9 11.5-52.2 15.4-79.3 21.2zm-92.9 29.1c17.4 9.7 79.4 145.2 98.8 156.9 11.6-7.7-34.9-46.5-38.7-71.6-3.9-21.3 7.7-36.8 31-7.7-44.5-17.4 29 65.8 40.7 79.4-17.4 5.8-34.9 9.7-52.3 13.6-5.8-7.7-13.6-29-17.4-32.9-3.9-7.7-1.9-13.6-13.6-15.5 5.8 11.6 13.6 40.7 5.8 52.3-19.4 1.9-38.7 3.9-58.1 3.9h-19.4c40.7-23.2 54.2-58.1 52.3-94.9-2-29.3-17.5-58.4-29.1-83.5zm-160.8 44.5c-3.9 3.9-5.8 9.7-9.7 13.6-3.9 9.7-9.7 17.4-25.2 23.2-7.7 3.9-15.5 9.7-25.2 17.4-1.9-21.3 23.2-25.2 21.3-36.8-3.9-19.4-34.9-38.7-42.6-32.9 11.6 0 29 9.7 25.2 34.9-3.9 11.6-19.4 9.7-27.1 15.5 7.7 13.6 17.4 27.1 31 38.7 19.4-17.4 13.6-25.2 38.7-31-7.7 9.7-23.2 34.9-13.6 46.5 15.5 9.7 34.9 17.4 54.2 25.2-29-31-38.7-56.2-31-100.7 2.1-3.9 2.1-9.7 4-13.6zm327.3-242s7.7 13.6 21.3 23.2c15.5 11.6 38.7 21.3 46.5 25.2-21.3 5.8-54.2-21.3-54.2-21.3 1.9 1.9 3.9 15.5-3.9 27.1-1.9 5.8-11.6 17.4-15.5 19.4 38.7-7.7 36.8-13.6 83.3-7.7v-27.1c-11.6-1.9-13.6-3.9-21.3-9.7 5.8 1.9 15.5 1.9 21.3 0v-19.4c-9.7 3.9-38.7 13.6-32.9 0-11.7 3.8-33-11.7-44.6-9.7zm-23.2-52.3c0 9.7-7.7 23.2-11.6 31-3.9-3.9-23.2 0-31 0-32.9 5.8-83.3 38.7-112.3 60-3.9 1.9-7.7 5.8-9.7 7.7 1.9-5.8 3.9-11.6 5.8-17.4 5.8-9.7 60-120.1 58.1-123.9-3.9 1.9-9.7 3.9-13.6 5.8 0-9.7 0-19.4 1.9-27.1-9.7 0-7.7-1.9-19.4 7.7 0-11.6 1.9-21.3 3.9-32.9-7.7 1.9-13.6 1.9-19.4 5.8 3.9-21.3 7.7-29 11.6-40.7-7.7 1.9-13.6 0-19.4 0 7.7-17.4 11.6-17.4 17.4-34.9-5.8 0-13.6-13.6-19.4-15.5 7.7-5.8 15.5-13.6 19.4-23.2-1.9-3.9-11.6-13.6-15.5-17.4 9.7-3.9 15.5-5.8 23.2-9.7-13.3-17.4-13.3-11.6-17.2-40.6h67.8c1.9 0 3.9 9.7 11.6 17.4v-17.4c3.9 1.9 15.5 11.6 19.4 15.5 1.9-7.7 0-9.7 3.9-15.5 9.7 13.6 9.7 15.5 25.2 11.6 21.3-3.9 19.4-9.7 23.2-11.6h13.6c1.9 15.5 3.9 36.8-1.9 50.3-7.7-9.7-3.9-5.8-7.7-11.6-1.9 3.9-5.8 7.7-7.7 11.6-1.9-1.9-5.8-3.9-7.7-5.8-9.7 9.7-15.5 7.7-21.3 17.4 11.6 3.9 15.5 9.7 25.2 0 1.9 3.9 3.9 5.8 5.8 9.7 3.9-3.9 7.7-7.7 11.6-9.7 1.9 21.3 1.9 29-9.7 44.5-1.9-7.7-1.9-5.8-5.8-13.6-7.7 9.7-7.7 13.6-17.4 15.5 1.9-5.8 3.9-7.7 3.9-15.5-9.7-5.8-9.7-1.9-19.4 3.9-11.6 5.8-42.6-13.6-44.5-27.1 0-1.9-1.9-3.9-3.9-3.9s-3.9 3.9-3.9 5.8c1.9 15.5 21.3 29 31 34.9 1.9 44.5 25.2 58.1 34.9 71.6 5.8 21.3 27.1 25.2 42.6 27.1 9.7 1.9 32.9 1.9 38.7 5.8 11.6 7.7 38.7 29 40.7 52.3v21.3c-1.9-3.9-7.7-11.6-9.7-15.5-3.9 13.6 13.6 42.6-11.6 48.4 5.8-25.2 1.9-31-5.8-46.5 1.9 19.4-1.9 50.3-23.2 40.7 9.7-13.6 9.7-9.7 1.9-50.3-7.7 0-15.5 27.1-13.6 40.7-25.2-32.9 5.8-40.7-3.9-56.2-5.8-5.8-73.6 19.4-83.3 23.2-1.9 1.9-3.9 5.8-1.9 9.7 1.9 5.8 38.7-13.6 50.3-15.5l-0.2 2.1zm-216.9 216.9s1.9-7.7 1.9-9.7c0-29-9.7-58.1-31-79.4l-7.7-7.7c0 1.9 46.5-81.3 50.3-96.8 1.9-1.9 1.9-5.8 0-5.8-13.6-9.7-65.8 81.3-77.5 87.1-21.3-7.7-46.5-5.8-67.8 3.9-17.4 7.7-31 21.3-40.7 36.8-1.9 3.9-3.9 7.7-5.8 11.6v-44.5c0-27.1 131.7-135.6 158.8-156.9 1.9-1.9 0-5.8-1.9-7.7-13.5-13.7-139.3 69.6-156.8 87v-71.6c54.2-38.7 83.3-58.1 147.2-89.1 1.9-1.9 3.9-3.9 1.9-7.7-3.8-13.6-135.5 36.7-149.1 40.6v-62c58.1-21.3 94.9-31 151-48.4 1.9 0 3.9-3.9 1.9-5.8 0-3.9-1.9-5.8-3.9-3.9-58.1-1.9-94.9 3.9-149.1 0v-52.3h214.9c-7.7 56.2-23.2 242.1 60 247.9-15.5 27.1-38.7 81.3-44.5 94.9-9.7 21.3-19.4 42.6-25.2 62-3.7 13.5-21.1 65.8-26.9 77.5zm131.7 7.7c27.1 50.3 56.2 67.8 106.5 79.4 27.1 5.8 58.1 15.5 48.4 54.2-1.9 1.9-5.8 3.9-7.7 5.8 0-1.9-3.9-19.4-3.9-23.2-1.9-11.6-5.8-9.7-7.7-7.7-5.8 3.9 0 7.7 1.9 21.3 0 7.7-1.9 17.4-5.8 23.2-1.9-5.8-11.6-36.8-17.4-32.9-7.7 5.8 15.5 29-3.9 44.5-1.9-31-9.7-21.3-27.1-32.9-9.7 9.7 5.8 29 7.7 42.6-32.9-15.5-32.9-46.5-34.9-54.2-5.8-17.4-19.4-32.9-32.9-42.6-5.8-5.8-67.8-56.2-81.3-67.8-3.9-13.6 9.7-32.9 21.3-44.5 1.9 15.4 17.4 38.7 36.8 34.8zm405.7-61.5h-115.2v-177.2h115.2v21.6h-92.2v47.6h92.2v21.6h-92.2v64.8h92.2zm174.3-13c-4.3 1.4-8.6 2.9-13 4.3-2.9 1.4-7.2 4.3-13 5.8-5.8 1.4-10.1 2.9-15.8 4.3-5.8 0-11.5 1.4-18.7 1.4-13 0-24.5-2.9-34.6-5.8-10.1-4.3-20.2-8.6-27.4-17.3-7.2-7.2-13-17.3-17.3-28.8s-7.2-24.5-7.2-38.9c0-15.8 2.9-27.4 5.8-38.9 4.3-11.5 10.1-21.6 18.7-28.8 7.2-8.6 15.8-14.4 27.4-18.7 10.1-2.9 21.6-5.8 34.6-5.8 10.1 0 18.7 1.4 28.8 4.3 8.6 1.4 20.2 5.8 31.7 11.5v27.4h-2.9c-8.6-7.2-18.7-13-28.8-17.3-8.6-2.9-18.7-5.8-30.2-5.8-8.6 0-17.3 1.4-24.5 4.3s-13 7.2-18.7 14.4c-5.8 5.8-10.1 13-13 21.6s-4.3 18.7-4.3 31.7c0 11.5 1.4 23 5.8 31.7 2.9 8.6 7.2 15.8 13 21.6 4.3 5.8 11.5 10.1 18.7 13s15.8 4.3 23 4.3c11.5 0 21.6-2.9 31.7-5.8 10.1-4.3 18.7-10.1 27.4-17.3h2.9v27.6zm144.1 13h-110.9v-177.2h23v155.6h87.9zm138.3 0h-115.3v-177.2h115.3v21.6h-92.2v47.6h92.2v21.6h-92.2v64.8h92.2zm174.2-13c-4.3 1.4-8.6 2.9-13 4.3-2.9 1.4-7.2 4.3-13 5.8-4.3 1.4-10.1 2.9-15.8 4.3-5.8 0-11.5 1.4-18.7 1.4-13 0-24.5-2.9-34.6-5.8-10.1-4.3-20.2-8.6-27.4-17.3-7.2-7.2-13-17.3-17.3-28.8s-7.2-24.5-7.2-38.9c0-15.8 2.9-27.4 7.2-38.9 2.9-11.5 8.6-21.6 17.3-28.8 7.2-8.6 15.8-14.4 27.4-18.7 10.1-2.9 21.6-5.8 34.6-5.8 10.1 0 18.7 1.4 28.8 4.3 8.6 1.4 20.2 5.8 31.7 11.5v27.4h-2.9c-8.6-7.2-18.7-13-28.8-17.3-8.6-2.9-18.7-5.8-30.2-5.8-8.6 0-17.3 1.4-24.5 4.3s-13 7.2-18.7 14.4c-5.8 5.8-10.1 13-13 21.6s-4.3 18.7-4.3 31.7c0 11.5 1.4 23 5.8 31.7 2.9 8.6 7.2 15.8 13 21.6s11.5 10.1 18.7 13 15.8 4.3 23 4.3c11.5 0 21.6-2.9 31.7-5.8 10.1-4.3 18.7-10.1 27.4-17.3h2.9v27.6zm158.5-142.6h-63.4v155.6h-23v-155.6h-63.4v-21.6h149.8zm85 155.6h-69.2v-18.7h23.1v-139.7h-23.1v-18.8h69.2v18.8h-23.1v139.7h23.1zm175.7-13c-4.3 1.4-8.6 2.9-11.5 4.3-4.3 1.4-8.6 4.3-14.4 5.8-4.3 1.4-10.1 2.9-15.8 4.3-4.3 0-11.5 1.4-17.3 1.4-13 0-24.5-2.9-36-5.8-10.1-4.3-18.7-8.6-25.9-17.3-8.6-7.2-14.4-17.3-18.7-28.8s-5.8-24.5-5.8-38.9c0-15.8 1.4-27.4 5.8-38.9 4.3-11.5 10.1-21.6 17.3-28.8 8.6-8.6 17.3-14.4 27.4-18.7 11.5-2.9 23-5.8 36-5.8 8.6 0 18.7 1.4 27.4 4.3 10.1 1.4 20.2 5.8 31.7 11.5v27.4h-1.4c-10.1-7.2-20.2-13-28.8-17.3-10.1-2.9-20.2-5.8-30.2-5.8s-17.3 1.4-24.5 4.3-13 7.2-18.7 14.4c-5.8 5.8-10.1 13-13 21.6s-4.3 18.7-4.3 31.7c0 11.5 1.4 23 4.3 31.7 4.3 8.6 8.6 15.8 13 21.6 5.8 5.8 11.5 10.1 20.2 13 7.2 2.9 14.4 4.3 23 4.3 11.5 0 21.6-2.9 31.7-5.8 10.1-4.3 18.7-10.1 27.4-17.3h1.4v27.6zm171.4 13h-24.5l-17.3-49h-76.3l-17.3 49h-23l63.4-177.2h31.7l63.3 177.2zm-48.9-70.6-30.2-85-31.7 85h61.9zm296.7 57.6c-4.3 1.4-7.2 2.9-11.5 4.3-2.9 1.4-8.6 4.3-13 5.8-5.8 1.4-10.1 2.9-15.8 4.3-5.8 0-13 1.4-18.7 1.4-13 0-24.5-2.9-34.6-5.8-11.5-4.3-20.2-8.6-27.4-17.3-8.6-7.2-14.4-17.3-18.7-28.8s-5.8-24.5-5.8-38.9c0-15.8 1.4-27.4 5.8-38.9 4.3-11.5 10.1-21.6 18.7-28.8 7.2-8.6 15.8-14.4 25.9-18.7 11.5-2.9 23-5.8 36-5.8 8.6 0 18.7 1.4 27.4 4.3 10.1 1.4 20.2 5.8 31.7 11.5v27.4h-1.4c-10.1-7.2-18.7-13-28.8-17.3-10.1-2.9-20.2-5.8-30.2-5.8-8.6 0-17.3 1.4-24.5 4.3s-13 7.2-18.7 14.4c-5.8 5.8-10.1 13-13 21.6s-4.3 18.7-4.3 31.7c0 11.5 1.4 23 4.3 31.7 4.3 8.6 8.6 15.8 13 21.6 5.8 5.8 13 10.1 20.2 13s14.4 4.3 23 4.3c11.5 0 21.6-2.9 31.7-5.8 10.1-4.3 18.7-10.1 27.4-17.3h1.4v27.6zm172.8 13h-25.9l-17.3-49h-76.3l-17.3 49h-23l63.4-177.2h31.7l64.7 177.2zm-50.4-70.6-30.2-85-31.7 85h61.9zm191.6-53.3c0 8.6-1.4 15.8-4.3 21.6-2.9 7.2-5.8 13-11.5 17.3-5.8 7.2-13 11.5-21.6 14.4-7.2 2.9-18.7 4.3-30.2 4.3h-24.5v66.3h-23v-177.2h47.5c11.5 0 20.2 1.4 27.4 2.9 7.2 1.4 13 4.3 18.7 8.6 7.2 4.3 13 10.1 15.8 17.3 4.3 5.8 5.7 14.4 5.7 24.5zm-24.5 1.5c0-7.2-1.4-11.5-2.9-15.8-2.9-4.3-5.8-8.6-10.1-11.5-4.3-1.4-8.6-4.3-13-4.3-4.3-1.4-10.1-2.9-18.7-2.9h-23v70.6h20.2c10.1 0 17.3-1.4 23-2.9 5.8-1.4 10.1-4.3 14.4-7.2 4.3-4.3 5.8-8.6 7.2-13s2.9-8.7 2.9-13zm116.7 122.4h-69.1v-18.7h23v-139.7h-23v-18.8h69.1v18.8h-21.6v139.7h21.6zm165.6-155.6h-61.9v155.6h-24.5v-155.6h-61.9v-21.6h148.3zm148.4 155.6h-24.5l-17.3-49h-76.3l-17.3 49h-23l63.4-177.2h31.7l63.3 177.2zm-49-70.6-31.7-85-30.2 85h61.9zm187.3 70.6h-110.9v-177.2h23v155.6h87.9zm208.9 0h-21.6v-14.4c-1.4 1.4-4.3 2.9-8.6 5.8-2.9 1.4-5.8 4.3-8.6 5.8-4.3 1.4-8.6 2.9-13 4.3-5.8 1.4-10.1 1.4-17.3 1.4-11.5 0-21.6-4.3-30.2-11.5-8.6-8.6-11.5-18.7-11.5-30.2 0-10.1 1.4-18.7 5.8-24.5 4.3-5.8 10.1-11.5 18.7-14.4 7.2-4.3 17.3-5.8 28.8-7.2s23-2.9 36-2.9v-4.3c0-4.3-1.4-8.6-2.9-11.5-1.4-4.3-4.3-5.8-7.2-8.6-2.9-1.4-7.2-2.9-11.5-2.9-4.3-1.4-8.6-1.4-14.4-1.4s-11.5 1.4-18.7 2.9c-7.2 1.4-14.4 2.9-23 5.8v-21.6c4.3-1.4 10.1-2.9 18.7-4.3 7.2-1.4 15.8-1.4 23-1.4 10.1 0 18.7 0 24.5 1.4 7.2 1.4 13 4.3 18.7 8.6 4.3 2.9 8.6 7.2 11.5 13 1.4 5.8 2.9 13 2.9 21.6v90.5zm-21.6-33.1v-37.5c-7.2 1.4-14.4 1.4-24.5 2.9-8.6 0-15.8 1.4-21.6 2.9-5.8 1.4-11.5 4.3-14.4 8.6-4.3 2.9-5.8 8.6-5.8 15.8s1.4 13 5.8 17.3c4.3 2.9 11.5 5.8 21.6 5.8 7.2 0 14.4-1.4 20.2-4.3 7.1-4.3 12.9-7.2 18.7-11.5zm100.8 33.1h-27.4v-34.6h27.4zm158.4 0h-21.6v-14.4c-7.2 5.8-13 10.1-20.2 13s-14.4 4.3-23 4.3c-15.8 0-27.4-5.8-37.5-18.7-8.6-11.5-13-28.8-13-50.4 0-10.1 1.4-20.2 4.3-28.8s7.2-17.3 13-23 11.5-10.1 18.7-13 14.4-5.8 21.6-5.8 13 1.4 18.7 2.9c5.8 1.4 11.5 4.3 17.3 7.2v-57.6h21.6v184.3zm-21.6-33.1v-74.9c-5.8-2.9-11.5-5.8-15.8-5.8-5.8-1.4-10.1-1.4-15.8-1.4-13 0-21.6 4.3-28.8 13-7.2 8.6-10.1 20.2-10.1 36s1.4 27.4 7.2 36 14.4 11.5 25.9 11.5c5.8 0 13-1.4 18.7-4.3 7.2-1.5 13-5.8 18.7-10.1zm102.3 33.1h-28.8v-34.6h28.8z"
							fill="#D1AC68"></path>

					</svg>
				</div>

				<div style="text-align: center;">
					<h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
						{{ $individual->first_name }} {{ $individual->last_name }} - Rezultati testa primerenosti</h3>
				</div>
				<div class="grid grid-cols-12 gap-x-6">
					<div class="col-span-12 lg:col-span-10">

						<div class="box border-0 shadow-none mb-0">

							<div class="box-body">

								<!-- Start::row-1 -->
								<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
									<tr>
										<td style="vertical-align: top; padding: 10px; width: 33%;">
											{{-- Column 1 --}}
											<div class="box overflow-hidden">
												<div class="box-body">
													<ul class="flex flex-col">
														<li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 16px">
																			Opšte informacije o klijentu <!--G1--></p>
																		<p class="text-left text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">General information
																			about the client</p>
																	</div>
																	<div class="block text-end">
																		<span
																			class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['G1']['ratio'] * 100, 2) }}%</span>
																		<p class="text-xs text-gray-400 dark:text-white/80 !font-normal">
																			{{ now()->format('d.m.Y') }}</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
													<div style="display: flex; justify-content: center;">
														<div id="main" class="echart-charts" style="width: 160px; height: 160px;">
														</div>
													</div>
												</div>
											</div>
										</td>
										<td style="vertical-align: top; padding: 10px; width: 33%; text-align: center !important;">
											{{-- Column 2 --}}
											<div class="box overflow-hidden">
												<div class="box-body">
													<ul class="flex flex-col">
														<li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 16px">
																			Iskustvo <!--G2--></p>
																		<p class="text-left text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Experience</p>
																	</div>
																	<div class="block text-end">
																		<span
																			class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['G2']['ratio'] * 100, 2) }}%</span>
																		<p class="text-xs text-gray-400 dark:text-white/80 !font-normal">
																			{{ now()->format('d.m.Y') }}</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
													<div style="display: flex; justify-content: center;">
														<div id="chart-container2" class="echart-charts" style="width: 160px; height: 320px;">
														</div>
													</div>
												</div>
											</div>
										</td>
										<td style="vertical-align: top; padding: 10px; width: 33%;  text-align: center !important;">
											{{-- Column 3 --}}
											<div class="box overflow-hidden">
												<div class="box-body">
													<ul class="flex flex-col">
														<li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 16px">
																			Spremnost za preuzimanje rizika <!--G3--></p>
																		<p class="text-left text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Willingness to take
																			risks</p>
																	</div>
																	<div class="block text-end">
																		<span
																			class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['G3']['ratio'] * 100, 2) }}%</span>
																		<p class="text-xs text-gray-400 dark:text-white/80 !font-normal">
																			{{ now()->format('d.m.Y') }}</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
													<div style="display: flex; justify-content: center;">
														<div id="chart-container3" class="echart-charts" style="width: 160px; height: 320px;">
														</div>
													</div>
												</div>
											</div>
										</td>
									</tr>
								</table>

								<!-- Start::row-1 -->
								<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
									<tr>
										<td style="vertical-align: top; padding: 10px; width: 50%;">
											<div class="box overflow-hidden">
												<div class="box-body">
													<ul class="flex flex-col">
														<li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 16px">Imovina</p>
																		<p class="text-left text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Assets</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>

													<!-- wrapper around your chart -->
													<div id="chart-wrapper-Assets-cart" style="width: 600px; height: 450px; margin: 0 auto;">
														<div id="Assets-cart" class="echart-charts" style="width: 100%; height: 100%;"></div>
													</div>
												</div>
											</div>
										</td>

										<td style="vertical-align: top; padding: 10px; width: 50%; text-align: center !important;">
											<div class="box overflow-hidden">
												<div class="box-body">
													<ul class="flex flex-col">
														<li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 16px">Obaveze + Neto bogatstvo</p>
																		<p class="text-left text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Liabilities + Net
																			worth
																		</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>

													<!-- wrapper around your second chart -->
													<div id="chart-wrapper-Liabilities-Equity-chart" style="width: 600px; height: 450px; margin: 0 auto;">
														<div id="Liabilities-Equity-chart" class="echart-charts" style="width: 100%; height: 100%;"></div>
													</div>
												</div>
											</div>
										</td>
									</tr>
								</table>

								<!-- End::row-1 -->

								<!-- Start::row-2 -->
								<div class="grid grid-cols-12 gap-x-5">
									<div class="col-span-12 lg:col-span-6 xxl:col-span-6">
										<div class="box">
											<div class="box-header flex justify-between">
												<div class="box-title my-auto" style="font-size: 18px; line-height: 22px">
													Ukupna imovina
												</div>

											</div>
											<div class="hs-collapse w-full overflow-hidden transition-[height] duration-300" id="G6G7"
												aria-labelledby="hs-show-hide-collapse">
												<div class="box-body">
													<ul class="flex flex-col">
														@foreach ($individual->lastActiveResult->results_nda['G6']['breakdown'] as $item)
															<li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white">
																<a href="javascript:void(0);" class="w-full">
																	<div class="flex items-center">
																		<div class="flex-auto ltr:ml-2 rtl:mr-2">
																			<p style="font-size: 16px; line-height: 18px">
																				{{ $item['question_text'] }}
																			</p>
																		</div>
																		<div class="block text-end">
																			<p class="!text-success" style="font-size: 16px; line-height: 18px">
																				{{ number_format($item['total']) }}€
																			</p>
																		</div>
																	</div>
																</a>
															</li>
														@endforeach

													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="col-span-12 lg:col-span-6 xxl:col-span-6">
										<div class="box">
											<div class="box-header flex justify-between">
												<div class="box-title my-auto" style="font-size: 18px; line-height: 22px">
													Ukupne obaveze
												</div>

											</div>
											<div class="hs-collapse w-full overflow-hidden transition-[height] duration-300" id="G6G7"
												aria-labelledby="hs-show-hide-collapse">
												<div class="box-body">
													<ul class="flex flex-col">
														@foreach ($individual->lastActiveResult->results_nda['G7']['breakdown'] as $item)
															<li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white">
																<a href="javascript:void(0);" class="w-full">
																	<div class="flex items-center">
																		<div class="flex-auto ltr:ml-2 rtl:mr-2">
																			<p style="font-size: 16px; line-height: 18px">
																				{{ $item['question_text'] }}
																			</p>
																		</div>
																		<div class="block text-end">
																			<p class="!text-success" style="font-size: 16px; line-height: 18px">
																				{{ number_format($item['total']) }}€
																			</p>
																		</div>
																	</div>
																</a>
															</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
									</div>

								</div>
								<!-- End::row-2 -->
								<p>&nbsp;</p>
								<!-- Start::row-3 -->
								<div class="grid grid-cols-12 gap-x-5">

									<div class="col-span-12 lg:col-span-6 xxl:col-span-4">
										<div class="box">
											<div class="box-body">
												<ul class="flex flex-col">
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 16px" class="my-0 py-0 mb-1">
																		Neto bogatstvo:</p>
																	<p class="text-sm my-0 py-0">
																		Net Worth</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['NetWorth'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br> &nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 16px" class="my-0 py-0 mb-1">
																		Odnos duga i imovine:</p>
																	<p class="text-sm my-0 py-0">
																		Debt to Assets Ratio</p>
																</div>
																<div class="block text-end">
																	<span
																		class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['DebtToAssetsRatio'] * 100, 2) }}%</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 16px" class="my-0 py-0 mb-1">
																		Rang odnosa duga i imovine:</p>
																	<p class="text-sm my-0 py-0">
																		Debt to Assets Score</p>
																</div>
																<div class="block text-end">
																	<span
																		class="text-sm text-success font-semibold">{{ $individual->lastActiveResult->results_nda['DebtToAssetsScore'] }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="box">
											<div class="box-body">
												<ul class="flex flex-col">
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Ukupan prihod:</p> <!-- G9-->
																	<p class="text-sm my-0 py-0">
																		Total Income</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['Income']['total'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Osnovni troškovi:</p> <!-- G11-->
																	<p class="text-sm my-0 py-0">
																		Basic Expences</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['BasicExpenses']['total'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Diskrecioni troškovi:</p> <!-- G12-->
																	<p class="text-sm my-0 py-0">
																		Discretionary expenses</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-2 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Trenutna štednja:</p>
																	<p class="text-sm my-0 py-0">
																		Current savings</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['NetIncome'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>

												</ul>

												<div id="mm-vs-stednja" class="hs-overlay ti-modal hidden" aria-overlay="true" tabindex="-1">
													<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !m-0 !max-w-full !w-full">
														<div class="ti-modal-content !rounded-none">
															<div class="ti-modal-header">
																<h3 class="ti-modal-title" class="my-0 py-0 mb-1">
																	Krizni fond <!--Emergency Fund (MM allocation)-->
																</h3>
															</div>
														</div>
													</div>
												</div>

											</div>
										</div>
										<div class="box">
											<div class="box-body">
												<ul class="flex flex-col">
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Likvidna imovina:</p>
																	<p class="text-sm my-0 py-0">Liquid assets</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >
																		{{ number_format($individual->lastActiveResult->results_nda['G6']['breakdown'][0]['total'] + $individual->lastActiveResult->results_nda['G6']['breakdown'][1]['total'], 2) }}
																	</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full" data-hs-overlay="#mm-vs-stednja">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Krizni fond<!--Emergency Fund (MM allocation)-->:
																	<p class="text-sm my-0 py-0">Emergency Fund (MM allocation)
																	</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['EmergencyFund'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Ulaganje u AIF<!--AIF TAX allocation-->:
																	</p>
																	<p class="text-sm my-0 py-0">AIF TAX allocation</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >€
																		{{ number_format($individual->lastActiveResult->results_nda['TAX']['total'], 2) }}</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Inicijalni investicioni potencijal:
																	</p>
																	<p class="text-sm my-0 py-0">Initial investment potential</p>
																</div>
																<div class="block text-end">
																	<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >
																		{{ number_format($individual->lastActiveResult->results_nda['G6']['breakdown'][0]['total'] + $individual->lastActiveResult->results_nda['G6']['breakdown'][1]['total'] - $individual->lastActiveResult->results_nda['EmergencyFund'] - $individual->lastActiveResult->results_nda['TAX']['total'], 2) }}
																	</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>

												</ul>

											</div>
										</div>
										<div class="box overflow-hidden">
											<div class="box-header">
												<div class="">
													<h5 class="box-title my-auto" class="my-0 py-0 mb-1">Udeo rashoda u ukupnim prihodima<!--Expences-to-Total Income Ratio--></h5>
													<p class="text-sm my-0 py-0">Expences-to-Total Income Ratio</p>
												</div>
											</div>
											<div class="box-body">
												<ul class="flex flex-col mt-3">
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Osnovni troškovi / Prihod<!--Basic Expenses / Income-->:</p>
																	<p class="text-sm my-0 py-0">Basic Expenses / Income</p>
																</div>
																<div class="block text-end">
																	<span
																		class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['PotentialForSavings']['BasicExpensesRatio'] * 100, 2) }}%</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>
													<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
														<a href="javascript:void(0);" class="w-full">
															<div class="flex items-center">
																<div class="flex-auto ltr:ml-2 rtl:mr-2">
																	<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																		Diskrecioni troškovi / Prihod<!--Discretionary Expenses / Income-->:</p>
																	<p class="text-sm my-0 py-0">Discretionary Expenses / Income
																	</p>
																</div>
																<div class="block text-end">
																	<span
																		class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['PotentialForSavings']['DiscretionaryExpensesRatio'] * 100, 2) }}%</span>
																	<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																		<br>&nbsp;</span>
																</div>
															</div>
														</a>
													</li>

													@if ($individual->lastActiveResult->stedne_navike)
														<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																			Trenutna stopa štednje<!--Current Savings Rate-->:</p>
																		<p class="text-sm my-0 py-0">Current Savings Rate</p>
																	</div>
																	<div class="block text-end">
																		<span
																			class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['PotentialForSavings']['NetIncomeRatio'] * 100, 2) }}%</span>
																		<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																			<br>&nbsp;</span>
																	</div>
																</div>
															</a>
														</li>

														<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																			Potencijalni iznos štednje (mesečno)<!--Potential savings amount
																								(monthly)-->:</p>
																		<p class="text-xs my-0 py-0">Potential savings amount
																			(monthly)</p>
																		<p class="text-xs my-0 py-0">
																			{{-- 	
																		
																			{{ $individual->lastActiveResult->results_nda['NetIncome'] }}
																			+ (
																			{{ $individual->lastActiveResult->stedne_navike / 100 }}
																			*
																			{{ $individual->lastActiveResult->results_nda['Income']['total'] }})
																		</p>
																		--}}
																	</div>
																	<div class="block text-end">
																		<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >

																			{{ number_format(
																			    $individual->lastActiveResult->results_nda['NetIncome'] +
																			        ($individual->lastActiveResult->stedne_navike / 100) *
																			            $individual->lastActiveResult->results_nda['Income']['total'],
																			    2,
																			) }}

																		</span>
																		<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																			<br>&nbsp;</span>
																	</div>
																</div>
															</a>
														</li>
													@endif

													@if ($individual->lastActiveResult->stedne_navike == 0)
														<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																			Trenutna stopa štednje<!--Current Savings Rate-->:</p>
																		<p class="text-sm my-0 py-0">Current Savings Rate</p>
																	</div>
																	<div class="block text-end">
																		<span
																			class="text-sm text-success font-semibold">{{ number_format($individual->lastActiveResult->results_nda['PotentialForSavings']['NetIncomeRatio'] * 100, 2) }}%</span>
																		<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																			<br>&nbsp;</span>
																	</div>
																</div>
															</a>
														</li>

														<li class="p-0 mb-3 ti-list-group border-0 text-gray-800 dark:text-white">
															<a href="javascript:void(0);" class="w-full">
																<div class="flex items-center">
																	<div class="flex-auto ltr:ml-2 rtl:mr-2">
																		<p style="font-size: 16px; line-height: 14px" class="my-0 py-0 mb-1">
																			Potencijalni iznos štednje (mesečno)<!--Potential savings amount
																								(monthly)-->:</p>
																		<p class="text-xs my-0 py-0">Potential savings amount
																			(monthly)</p>
																			{{-- 	
																				<p class="text-xs my-0 py-0">
																			
																				{{ $individual->lastActiveResult->results_nda['NetIncome'] }}
																				+ (
																				{{ $individual->lastActiveResult->stedne_navike / 100 }}
																				*
																				{{ $individual->lastActiveResult->results_nda['Income']['total'] }})
																				</p>
																			--}}
																	</div>
																	<div class="block text-end">
																		<span class="text-success font-semibold" style="font-size: 16px; line-height: 16px"  >

																			{{ number_format($individual->lastActiveResult->results_nda['NetIncome'], 2) }}

																		</span>
																		<span class="text-sm text-gray-400 dark:text-white/80 !font-normal">
																			<br>&nbsp;</span>
																	</div>
																</div>
															</a>
														</li>
													@endif

												</ul>
											</div>

										</div>
									</div>

								</div>

								<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">

									<tr>
										<td style="vertical-align: top; padding: 10px; width: 100%; text-align: center;">
											<div class="box">
												<div class="box-body">
													<div id="chart-wrapper-sunburst" style="width: 600px; height: 600px; margin: 0 auto;">
														<div id="sunburst" class="pie" style="width: 100%; height: 100%;"></div>
													</div>
												</div>
											</div>
										</td>
									</tr>

								</table>

								<!-- End::row-3 -->
							</div>
						</div>
					</div>
				</div>
			</div>
		@endif
	</div>
@endsection

@section('scripts')
	<script src="{{ asset('build/backend/assets/libs/echarts/echarts.min.js') }}"></script>

	<script>
		document.addEventListener('DOMContentLoaded', () => {
			const dom = document.getElementById('chart-container2');
			const myChart = echarts.init(dom, null, {
				renderer: 'svg'
			});

			// normalized 0–1 ratio
			const g2Value = {{ number_format($individual->lastActiveResult->results_nda['G2']['ratio'], 2) }};

			// your SVG bulb path
			const bulbPath = 'path://' +
				'M416.321,171.943c0-97.8-82.2-176.9-181-171.7c-89.5,5.2-160.3,79.1-162.4,168.6' +
				'c0,44.7,16.6,86.3,45.8,118.6c47.7,51.1,41.6,110.3,41.6,110.3' +
				'c0,11.4,9.4,20.8,20.8,20.8h126.9c11.4,0,20.8-9.4,21.8-20.8' +
				'c0,0-7-57.7,40.6-109.2C399.621,257.243,416.321,215.643,416.321,171.943z ' +
				'M288.321,377.943h-87.4c-2.1-42.7-20.8-84.3-51-116.5' +
				'c-22.9-25-34.3-57.2-34.3-90.5c1-68.7,54.1-124.8,122.8-129' +
				'c74.9-4.2,137.3,56.2,137.3,130c0,32.3-12.5,64.5-35.4,88.4' +
				'C309.121,293.643,290.421,335.243,288.321,377.943z ' +
				'M281.021,447.643h-73.9c-11.4,0-20.8,9.4-20.8,20.8' +
				's9.4,20.8,20.8,20.8h73.9c11.4,0,20.8-9.4,20.8-20.8' +
				'C301.821,457.043,292.521,447.643,281.021,447.643z';

			const option = {
				tooltip: {
					trigger: 'item',
					formatter: `Iskustvo: ${(g2Value * 100).toFixed(0)}%`
				},
				xAxis: {
					show: false,
					data: ['']
				},
				yAxis: {
					show: false,
					min: 0,
					max: 1
				},
				grid: {
					left: '30%',
					right: '30%',
					top: '25%',
					bottom: '25%'
				},
				series: [
					// 1) fill series (clipped)
					{
						type: 'pictorialBar',
						symbol: bulbPath,
						symbolPosition: 'start',
						symbolSize: [120, 150],
						symbolBoundingData: 1,
						symbolClip: true,
						itemStyle: {
							color: '#FFD700'
						},
						label: {
							show: true,
							position: 'inside',
							formatter: params => `${(params.value * 100).toFixed(0)}%`,
							fontSize: 20,
							color: '#333'
						},
						data: [g2Value],
						z: 1
					},
					// 2) outline series (always full, transparent fill + stroke)
					{
						type: 'pictorialBar',
						symbol: bulbPath,
						symbolPosition: 'start',
						symbolSize: [120, 150],
						symbolBoundingData: 1,
						symbolClip: false,
						itemStyle: {
							color: 'none',
							borderColor: '#333',
							borderWidth: 2
						},
						data: [1],
						silent: true,
						z: 2
					}
				]
			};

			myChart.setOption(option);
			window.addEventListener('resize', () => myChart.resize());
		});
	</script>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
			// ------------------------------------------------------------
			// 1) Helper functions (reused across charts)
			// ------------------------------------------------------------

			function initializeGauge(containerId, value, name) {
				const dom = document.getElementById(containerId);
				if (!dom) return null;

				const chart = echarts.init(dom);
				const option = {
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						center: ['50%', '66%'],
						radius: '100%',
						min: 0,
						max: 1,
						splitNumber: 8,
						axisLine: {
							lineStyle: {
								width: 6,
								color: [
									[0.25, '#FF6E76'],
									[0.5, '#FDDD60'],
									[0.75, '#58D9F9'],
									[1, '#7CFFB2']
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '12%',
							width: 20,
							offsetCenter: [0, '-60%'],
							itemStyle: {
								color: 'auto'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						title: {
							offsetCenter: [0, '-10%'],
							fontSize: 15
						},
						detail: {
							fontSize: 20,
							offsetCenter: [0, '-30%'],
							formatter: val => `${Math.round(val * 100)}%`,
							color: 'inherit'
						},
						data: [{
							value,
							name
						}]
					}]
				};
				chart.setOption(option);
				window.addEventListener('resize', () => chart.resize());
				return chart;
			}

			function initChart(containerId, rawData, categories, seriesNames, legendPosition = 'right') {
				const dom = document.getElementById(containerId);
				if (!dom) return null;

				const chart = echarts.init(dom);

				// Compute sums so we can convert absolute values into percentages per category
				const totalData = rawData[0].map((_, i) =>
					rawData.reduce((sum, row) => sum + row[i], 0)
				);

				// Build each stacked series
				const series = rawData.map((dataRow, sid) => ({
					name: seriesNames[sid] || `Series ${sid + 1}`,
					type: 'bar',
					stack: 'total',
					barWidth: '30%',
					label: {
						show: true,
						formatter: params => `${(params.value * 100).toFixed(1)}%`
					},
					data: dataRow.map((d, did) => totalData[did] <= 0 ? 0 : d / totalData[did])
				}));

				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: params => {
							let html = `${params[0].name}<br/>`;
							for (const param of params) {
								// Show each portion in percentage
								html += `${param.seriesName}: ${(param.value * 100).toFixed(1)}%<br/>`;
							}
							return html;
						}
					},
					legend: {
						selectedMode: false,
						data: seriesNames,
						[legendPosition]: '5%',
						top: 'center',
						orient: 'vertical',
						textStyle: {
							fontSize: 10
						},
						itemGap: 10
					},
					grid: {
						left: legendPosition === 'left' ? 80 : 60,
						right: legendPosition === 'right' ? 80 : 60,
						top: 50,
						bottom: 50
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 1,
						axisLabel: {
							formatter: value => `${(value * 100).toFixed(0)} %`,
							fontSize: 10
						}
					},
					xAxis: {
						type: 'category',
						data: categories,
						axisLabel: {
							fontSize: 10
						}
					},
					series
				};

				chart.setOption(option);
				window.addEventListener('resize', () => chart.resize());
				return chart;
			}

			// ------------------------------------------------------------
			// 2) Now initialize each chart IMMEDIATELY
			// ------------------------------------------------------------

			// A) “main” chart
			(function initMainChart() {
				const el = document.getElementById('main');
				if (!el) return;
				const chart = echarts.init(el);

				// Define the color scale and get the ratio from Blade
				const colorScale = ['#FF0000', '#FF7F00', '#FFFF00', '#7FFF00', '#00FF00'];
				const score =
					{{ number_format($individual->lastActiveResult->results_nda['G1']['ratio'], 2) }};

				function getColorIndex(s) {
					if (s <= 0.25) return 0;
					else if (s <= 0.5) return 1;
					else if (s <= 0.75) return 2;
					else if (s < 1) return 3;
					return 4;
				}

				function getColor(s) {
					return colorScale[getColorIndex(s)];
				}

				const dataset = [{
					id: 'path1',
					pathData: "M19.75,15.67a6,6,0,1,0-7.51,0A11,11,0,0,0,5,26v1H27V26A11,11,0,0,0,19.75,15.67ZM12,11a4,4,0,1,1,4,4A4,4,0,0,1,12,11ZM7.06,25a9,9,0,0,1,17.89,0Z"
				}];

				const option = {
					xAxis: {
						show: false
					},
					yAxis: {
						show: false
					},
					series: [{
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							const data = dataset[params.dataIndex];
							return {
								type: 'path',
								shape: {
									pathData: data.pathData
								},
								style: {
									fill: getColor(score)
								},
								left: 'center',
								top: 'center',
								scale: [5.5, 5.5]
							};
						},
						data: dataset
					}],
					tooltip: {
						trigger: 'item',
						formatter: () => `Opšte informacije<br>o klijentu: ${score*100}%`
					}
				};

				chart.setOption(option);
				window.addEventListener('resize', () => chart.resize());
			})();

			// B) Gauge charts (G2, G3)
			(function initGaugeCharts() {
				// G2
				// initializeGauge(
				//     'chart-container2',
				//     {{ number_format($individual->lastActiveResult->results_nda['G2']['ratio'], 2) }},
				//     'G2'
				// );

				// G3
				initializeGauge(
					'chart-container3',
					{{ number_format($individual->lastActiveResult->results_nda['G3']['ratio'], 2) }},
					' '
				);
			})();

			// C) Bar charts (updated)
			function initChart(id, data, seriesNames, categoryNames, orient) {
				const colorMap = {
					'Assets-cart': [
						'#5470C6', '#91CC75', '#FAC858',
						'#EE6666', '#73C0DE', '#3BA272',
						'#FC8452'
					],
					'Liabilities-Equity-chart': [
						'#5470C6', '#EE6666', '#91CC75',
						'#FAC858', '#3BA272', '#FC8452'
					]
				};

				// 1) compute total & pctData
				const total = data.reduce((sum, arr) => sum + arr[0], 0);
				const pctData = data.map(arr =>
					arr.map(raw => ({
						value: (raw / total) * 100,
						raw
					}))
				);

				// 2) init chart
				const chart = echarts.init(document.getElementById(id));
				let hoveredSeriesIndex = null;
				chart.on('mouseover', params => {
					if (params.componentType === 'series') hoveredSeriesIndex = params.seriesIndex;
				});
				chart.on('mouseout', () => hoveredSeriesIndex = null);

				// 3) build each series *with its fixed color*
				const allSeries = seriesNames.map((name, idx) => ({
					name,
					type: 'bar',
					stack: 'total',
					barWidth: '40%',
					itemStyle: {
						color: (colorMap[id] || [])[idx] // ← fixed color per original index
					},
					emphasis: {
						focus: 'series',
						label: {
							fontWeight: 'bold'
						}
					},
					data: pctData[idx],
					label: {
						show: true,
						position: 'inside',
						formatter: p => `${p.value.toFixed(1)}%`
					}
				}));

				// 4) reverse stacking order
				const reversedSeries = allSeries.slice().reverse();

				chart.setOption({
					color: [], // we use per-series itemStyle, so leave this empty
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: params => {
							// sort back into original seriesNames order
							const sorted = params.slice().sort((a, b) =>
								seriesNames.indexOf(a.seriesName) - seriesNames.indexOf(b.seriesName)
							);
							return sorted.map(p => {
								const line =
									`${p.marker}${p.seriesName}: ${p.data.raw.toLocaleString()}`;
								return (p.seriesIndex === hoveredSeriesIndex) ?
									`<strong>${line}</strong>` :
									line;
							}).join('<br/>');
						}
					},
					legend: {
						data: seriesNames, // stays original
						orient: 'vertical',
						top: 'middle',
						right: '10%'
					},
					grid: {
						left: '3%',
						right: '25%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: categoryNames,
						position: orient
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value}%'
						}
					},
					series: reversedSeries
				});
			}

			// C) Bar charts (exactly as before, no change here)
			(function initBarCharts() {
				initChart(
					'Assets-cart',
					[
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][0]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][1]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][4]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][3]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][5]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][2]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G6']['breakdown'][6]['total'] }}]
					],
					[
						'Gotovina i štednja',
						'Finansijski instrumenti',
						'Pokretne stvari',
						'Privatna penzija',
						'Poslovni udeli',
						'Nekretnine',
						'Ostala imovina'
					],
					['Imovina'],
					'right'
				);

				initChart(
					'Liabilities-Equity-chart',
					[
						[{{ $individual->lastActiveResult->results_nda['NetWorth'] }}],
						[{{ $individual->lastActiveResult->results_nda['G7']['breakdown'][1]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G7']['breakdown'][3]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G7']['breakdown'][2]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G7']['breakdown'][0]['total'] }}],
						[{{ $individual->lastActiveResult->results_nda['G7']['breakdown'][4]['total'] }}]
					],
					[
						'Neto bogatstvo',
						'Kreditne kartice',
						'Porodični dugovi',
						'Drugi krediti',
						'Hipoteka',
						'Ostale obaveze'
					],
					['Obaveze + Neto bogatstvo'],
					'right'
				);
			})();



			// D) Sunburst chart #1
			(function initSunburst() {
				const el = document.getElementById('sunburst');
				if (!el) return;
				const myChart = echarts.init(el, null, {
					renderer: 'svg',
					useDirtyRect: false
				});

				// Precompute the total of all top-level nodes.
				// Adjust these expressions to match your actual data.
				const totalSunburst =
					{{ $individual->lastActiveResult->results_nda['BasicExpenses']['total'] +
					    $individual->lastActiveResult->results_nda['NetIncome'] +
					    $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'] }};

				const option = {
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							if (params.treePathInfo && params.treePathInfo.length > 1) {
								// For child nodes, compute percentage relative to the parent.
								let parent = params.treePathInfo[params.treePathInfo.length - 2];
								let percent = (params.value / parent.value * 100).toFixed(2);
								return params.name + ': ' + params.value + ' (' + percent + '%)';
							} else {
								// For top-level nodes, compute percentage relative to the overall total.
								let percent = (params.value / totalSunburst * 100).toFixed(2);
								return params.name + ': ' + params.value + ' (' + percent + '%)';
							}
						}
					},
					series: {
						type: 'sunburst',
						radius: [0, '90%'],
						label: {
							rotate: 'radial',
							formatter: function(params) {
								// Similar logic as tooltip to compute percentage.
								if (params.treePathInfo && params.treePathInfo.length > 1) {
									let parent = params.treePathInfo[params.treePathInfo.length - 2];
									let percent = (params.value / parent.value * 100).toFixed(2);
									return params.name + '\n' + percent + '%';
								} else {
									let percent = (params.value / totalSunburst * 100).toFixed(2);
									return params.name + '\n' + percent + '%';
								}
							}
						},
						data: [{
								name: 'Osnovni troškovi',
								value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['total'] }},
								itemStyle: {
									color: '#fac858'
								},
								children: [{
										name: 'stanovanje',
										value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][0]['total'] }},
										itemStyle: {
											color: '#fac858cc'
										}
									},
									{
										name: 'prevoz',
										value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][1]['total'] }},
										itemStyle: {
											color: '#fac858cc'
										}
									},
									{
										name: 'hrana',
										value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][2]['total'] }},
										itemStyle: {
											color: '#fac858cc'
										}
									},
									{
										name: 'osiguranje',
										value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][3]['total'] }},
										itemStyle: {
											color: '#fac858cc'
										}
									}
								]
							},
							{
								name: 'Štednja',
								value: {{ $individual->lastActiveResult->results_nda['NetIncome'] }},
								itemStyle: {
									color: '#9fe080'
								}
							},
							{
								name: 'Diskrecioni troškovi',
								value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'] }},
								itemStyle: {
									color: '#ff9a9a'
								},
								children: [{
										name: 'obrazovanje',
										value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][0]['total'] }},
										itemStyle: {
											color: '#ff9a9acc'
										}
									},
									{
										name: 'zabava',
										value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][1]['total'] }},
										itemStyle: {
											color: '#ff9a9acc'
										}
									},
									{
										name: 'drugi troškovi',
										value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][2]['total'] }},
										itemStyle: {
											color: '#ff9a9acc'
										}
									}
								]
							}
						]
					}
				};

				myChart.setOption(option);
				window.addEventListener('resize', () => myChart.resize());
			})();
		});
	</script>
@endsection