<?php

$documents_statistics = get_field('documents_statistics');
$total_documents_count = 0;


foreach ($documents_statistics as $document_statistic) {
	$total_documents_count += intval($document_statistic['amount']);
}

foreach ($documents_statistics as $document_statistic) {
	$amount = intval($document_statistic['amount'] ?? 0);
	if (!$amount || $amount <= 0) continue;
	$document_statistic['percentage'] = intval($document_statistic['amount']) / $total_documents_count * 100;
}


?>

<section <?php echo get_block_wrapper_attributes(array('class' => 'statistiques-collections content-section ')); ?>>
	<div class="statistiques-collections__toolbar">
		<div role="tablist" aria-label="<?php esc_attr_e('Onglets', 'tab-group'); ?>" class="tablist">
			<button
				type="button"
				role="tab"
				aria-selected="true"
				aria-controls="tabpanel-0"
				tabindex="0"
				data-tab="0">
				Toutes nos collections

			</button>
			<?php foreach ($documents_statistics as $index => $document_statistic) : ?>
				<button
					type="button"
					role="tab"
					aria-selected="false"
					aria-controls="tabpanel-<?php echo esc_attr($index + 1); ?>"
					tabindex="-1"
					data-tab="<?php echo esc_attr($index + 1); ?>">
					<?php echo esc_html($document_statistic['name']); ?>
				</button>
			<?php endforeach; ?>

		</div>
	</div>
	<ul class="statistiques-collections__stats-items">
		<li class="statistiques-collections__stat-item" id="tabpanel-0" data-active="true">
			<div class="heading">
				<h3>Nos collection</h3>
			</div>

			<div class="amount-container-all" id="tabpanel-0" data-active="true">
				<p class="total-documents-count"><?php echo $total_documents_count ?> documents</p>
				<p class="total-documents-label">Dans nos collections</p>
			</div>


		</li>
		<?php foreach ($documents_statistics as $index => $document_statistic) : ?>
			<?php
			$amount = intval($document_statistic['amount'] ?? 0);
			if (!$amount || $amount <= 0) continue;
			$percentage = intval($document_statistic['amount']) / $total_documents_count * 100;
			?>
			<li class="statistiques-collections__stat-item" id="tabpanel-<?php echo esc_attr($index + 1); ?>" data-active="false">
				<div class="heading">
					<h3><?php echo esc_html($document_statistic['name']); ?></h3>
					<p class="total-documents-count"><?php echo esc_html($document_statistic['amount']); ?> <?php echo $document_statistic['name']  ?></p>
				</div>

				<div class="amount-container">
					<div class="percentage-bar" style="width: <?php echo esc_attr($percentage); ?>%;" data-percentage="<?php echo esc_attr($percentage); ?>"><?php echo esc_html($document_statistic['number']); ?></div>
					<p class="percentage-label"><?php echo round($percentage, 2); ?> % </p>
				</div>

				<p class="stat-item-description">
					<?php echo $document_statistic['description']; ?>
				</p>
			</li>
		<?php endforeach; ?>
	</ul>
	<div class="statistiques-collections__bg">

		<img src="<?php echo plugin_dir_url(__FILE__); ?>/apercu-collection-cover.webp" alt="Statistiques collections">
	</div>

</section>