@extends('backend.layouts.master')

@section('styles')
	<style>
		p {
			line-height: 1.5;
			font-size: 11px;
			text-align: justify;
			margin-bottom: 12px
		}

		ul>li {
			line-height: 1.5;
			font-size: 11px;
			text-align: justify;
			margin-bottom: 6px
		}

		.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;
		}

		@media print {
			body * {
				display: none;
			}

			#printableArea,
			#printableArea * {
				display: block;
			}
		}
	</style>
@endsection

@section('content')
	<div class="content">
		@if ($individual)
			<!-- Edit mode -->
			<div id="individual-dashboard" class="main-content">
				<div class="block justify-between page-header sm:flex">
					<div>
						<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 }}</h3>
					</div>
					<div>
						@if (session('status'))
							@include('backend.crm.individuals.components.alert-status')
						@endif
					</div>
				</div>
				<div class="grid grid-cols-12 gap-x-6">
					<div class="col-span-12 lg:col-span-2">
						<div class="box">
							<div class="box-body pt-6">
								@include('backend.crm.individuals.components.sidebar')
							</div>
						</div>
					</div>
					<div class="col-span-12 lg:col-span-10">

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

							<div class="box-header flex justify-between">

								<span class="ti-btn text-xs py-1 font-semibold">Rezultati testa primerenosti</span>

								@if ($individual->lastactiveResult->pdf_link)
									<!-- Delete PDF link -->
									<a href="{{ route('crm.results.pdf_delete', [$individual]) }}"
										class="inline-flex items-center px-3 py-1 badge rounded-sm bg-danger/10 text-red-500 hover:bg-danger hover:text-white">
										Obriši PDF
									</a>
								@else
									<!-- Create PDF link -->

									<a href="{{ route('crm.results.pdf', $individual) }}"
										class="inline-flex items-center px-3 py-1 badge rounded-sm bg-secondary/10 hover:bg-secondary text-secondary hover:text-white">
										Kreiraj PDF
									</a>
								@endif

							</div>

							<div class="box-body" id="printableArea">

								@if ($individual->lastactiveResult->pdf_link)
									<iframe src="{{ Storage::disk('public')->url($individual->lastactiveResult->pdf_link) . '?v=' . time() }}"
										style="border: none;" width="100%" height="600">
									</iframe>
								@else
									<!-- Start::row-1 -->
									<div class="grid grid-cols-12 gap-x-5">
										<div class="col-span-12 md:col-span-6 xxl:col-span-4">
											<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 class="text-sm font-semibold mb-0">
																			I 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 id="main" class="echart-charts"></div>
												</div>
											</div>
										</div>
										<div class="col-span-12 md:col-span-6 xxl:col-span-4">
											<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 class="text-sm font-semibold mb-0">
																			II 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 id="chart-container2" class="echart-charts"></div>
												</div>
											</div>
										</div>
										<div class="col-span-12 md:col-span-6 xxl:col-span-4">
											<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 class="text-sm font-semibold mb-0">
																			III 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 id="chart-container3" class="echart-charts"></div>
												</div>
											</div>
										</div>
									</div>
									<!-- End::row-1 -->

									<!-- Start::row-2 -->
									<div class="grid grid-cols-12 gap-x-5">
										<div class="col-span-12 lg:col-span-12 xxl:col-span-6">
											<div class="box">
												<div id="Assets-cart" class="Assets-cart"></div>
											</div>
										</div>
										<div class="col-span-12 lg:col-span-12 xxl:col-span-6">
											<div class="box">
												<div id="Liabilities-Equity-chart" class="Assets-cart"></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">
														Ukupna imovina
													</div>
													<a aria-label="anchor" class="hs-collapse-toggle inline-flex items-center gap-x-2"
														href="javascript:void(0);" id="hs-show-hide-collapse" data-hs-collapse="#G6G7">
														<p class="box-title text-success dark:text-white/80 !font-normal">
															{{ number_format($individual->lastActiveResult->results_nda['G6']['total']) }}€
														</p>
														<i class="hs-collapse-open:rotate-180 ri-arrow-up-s-line text-lg"></i>
													</a>
												</div>
												<div class="hs-collapse w-full overflow-hidden transition-[height] duration-300 hidden" 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-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 class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																					{{ $item['question_text'] }}
																				</p>
																			</div>
																			<div class="block text-end">
																				<p class="text-sm text-success dark:text-white/80 !font-normal">
																					{{ 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">
														Ukupne obaveze
													</div>
													<a aria-label="anchor" class="hs-collapse-toggle inline-flex items-center gap-x-2"
														href="javascript:void(0);" id="hs-show-hide-collapse" data-hs-collapse="#G6G7">
														<p class="box-title text-success dark:text-white/80 !font-normal">
															{{ number_format($individual->lastActiveResult->results_nda['G7']['total']) }}€
														</p>
														<i class="hs-collapse-open:rotate-180 ri-arrow-up-s-line text-lg"></i>
													</a>
												</div>
												<div class="hs-collapse w-full overflow-hidden transition-[height] duration-300 hidden" 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-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 class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																					{{ $item['question_text'] }}
																				</p>
																			</div>
																			<div class="block text-end">
																				<p class="text-sm text-success dark:text-white/80 !font-normal">
																					{{ number_format($item['total']) }}€
																				</p>
																			</div>
																		</div>
																	</a>
																</li>
															@endforeach
														</ul>
													</div>
												</div>
											</div>
										</div>

									</div>
									<!-- End::row-2 -->

									<!-- 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 class="text-sm font-semibold mb-0">
																			Neto bogatstvo:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			Net Worth</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Odnos duga i imovine:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			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 class="text-sm font-semibold mb-0">
																			Rang odnosa duga i imovine:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			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 class="text-sm font-semibold mb-0">
																			Ukupan prihod:</p> <!-- G9-->
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			Total Income</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Osnovni troškovi:</p> <!-- G11-->
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			Basic Expences</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Diskrecioni troškovi:</p> <!-- G12-->
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			Discretionary expenses</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Trenutna štednja:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">
																			Current savings</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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">
																		Krizni fond <!--Emergency Fund (MM allocation)-->
																	</h3>
																	<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
																		data-hs-overlay="#mm-vs-stednja">
																		<span class="sr-only">Close</span>
																		<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<path
																				d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
																				fill="currentColor"></path>
																		</svg>
																	</button>
																</div>
																<div class="ti-modal-body">
																	<p class="mt-1 text-gray-800 dark:text-white/70">
																		<img src="{{ asset('images/mm-vs-stednja.png') }}" alt="">
																	</p>
																</div>
																<div class="ti-modal-footer">
																	<button type="button"
																		class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
																		data-hs-overlay="#mm-vs-stednja">
																		Close
																	</button>
																</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 class="text-sm font-semibold mb-0">
																			Likvidna imovina:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">Liquid assets</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">
																			{{ 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 class="text-sm font-semibold mb-0">
																			Krizni fond<!--Emergency Fund (MM allocation)-->: <i class="ti ti-info-circle"></i>
																		</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">Emergency Fund (MM allocation)
																		</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Ulaganje u AIF<!--AIF TAX allocation-->:
																		</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">AIF TAX allocation</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">€
																			{{ 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 class="text-sm font-semibold mb-0">
																			Inicijalni investicioni potencijal:
																		</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">Initial investment potential</p>
																	</div>
																	<div class="block text-end">
																		<span class="text-sm text-success font-semibold">
																			{{ 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">Udeo rashoda u ukupnim prihodima<!--Expences-to-Total Income Ratio--></h5>
														<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">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 class="text-sm font-semibold mb-0">
																			Osnovni troškovi / Prihod<!--Basic Expenses / Income-->:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">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 class="text-sm font-semibold mb-0">
																			Diskrecioni troškovi / Prihod<!--Discretionary Expenses / Income-->:</p>
																		<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">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 class="text-sm font-semibold mb-0">
																				Trenutna stopa štednje<!--Current Savings Rate-->:</p>
																			<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">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 class="text-sm font-semibold mb-0">
																				Potencijalni iznos štednje (mesečno)<!--Potential savings amount
																							(monthly)-->:</p>
																			<p class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Potential savings amount
																				(monthly)</p>
																			<p class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">
																				{{-- 	
																			
																				{{ $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-sm text-success font-semibold">

																				{{ 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 class="text-sm font-semibold mb-0">
																				Trenutna stopa štednje<!--Current Savings Rate-->:</p>
																			<p class="text-sm text-gray-400 dark:text-white/80 mb-0 !font-normal">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 class="text-sm font-semibold mb-0">
																				Potencijalni iznos štednje (mesečno)<!--Potential savings amount
																							(monthly)-->:</p>
																			<p class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">Potential savings amount
																				(monthly)</p>
																			<p class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal">
																				{{-- 	
																			
																				{{ $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-sm text-success font-semibold">

																				{{ 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 class="col-span-12 md:col-span-6 xxl:col-span-8">
											<div class="box">
												<div class="box-body">
													@if ($individual->lastActiveResult->results_nda)
														<div id="sunburst" class="pie"></div>
													@endif
												</div>
											</div>
										</div>

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

							</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: [140, 180],
						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: [140, 180],
						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>

	@if (app()->runningInConsole())
		<script>
			(function() {
				var tries = 0;
				var maxTries = 50; // e.g. 5 seconds
				var interval = setInterval(function() {
					var printable = document.querySelector("#printableArea");
					if (printable || tries >= maxTries) {
						clearInterval(interval);
						if (printable) {
							var clone = printable.cloneNode(true);
							document.body.innerHTML = '';
							document.body.appendChild(clone);
						}
					}
					tries++;
				}, 100);
			})();
		</script>
	@endif
@endsection