production/Vue/Ajaxsituationbeneficiaire/index.php

<div class="row">
	<!-- Plafond Famille -->
	<div class="col-12 col-lg-6 mb-4">
		<div class="card shadow-sm h-100">
			<div class="d-none d-md-block">
				<div class="card-header bg-secondary py-2">
					<h6 class="mb-0 text-center text-light">
						<i class="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-users me-2"></i>
						<?= _("Dépenses familiales")." ".$_SESSION['exercieReference_C'] ?>
					</h6>
				</div>
			</div>
			<!-- Affichage mobile (cartes) -->
			<div class="d-md-none">
				<div class="card-header bg-dark py-2">
					<h6 class="mb-0 text-center text-light">
						<i class="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-users me-2"></i>
						<?= _("Dépenses familiales")." ".$_SESSION['exercieReference_C'] ?>
					</h6>
				</div>
			</div>
			
			<div class="card-body text-center">
				<?php
					$plafondGlobalFamille = $this->nettoyer($police['plafond']);
					$consommationGlobaleFamille = $this->nettoyer($police['consommation']);
					$niveauGlobalConsoFamille = ($consommationGlobaleFamille/$plafondGlobalFamille)*100;
					$soldeConsommation        = $this->nettoyer($police['soldeConsommation']);
				?>
				
				<div class="row mb-2 mt-2">
					<div class="col-4">
						<div class="rounded p-2 border border-primary">
							<small class="text-muted d-block"><?= _("Consommation") ?></small>
							<h6 class="text-primary mb-0"><?= format_N($consommationGlobaleFamille) ?></h6>
						</div>
					</div>
					<div class="col-4">
						<div class="rounded p-2 border border-success">
							<small class="text-muted d-block"><?= _("Plafond") ?></small>
							<h6 class="text-success mb-0"><?= format_N($plafondGlobalFamille) ?></h6>
						</div>
					</div>
					
					<div class="col-4">
						<div class="rounded p-2 border border-danger">
							<small class="text-muted d-block"><?= _("Solde") ?></small>
							<h6 class="text-danger mb-0"><?= format_N($soldeConsommation) ?></h6>
						</div>
					</div>
				</div>
				
				<div class="progress mb-3" >
					<div class="progress-bar <?= $niveauGlobalConsoFamille >= 80 ? 'bg-danger' : ($niveauGlobalConsoFamille >= 50 ? 'bg-warning' : 'bg-success') ?>" 
						 style="width: <?= min($niveauGlobalConsoFamille, 100) ?>%">
						<?= number_format($niveauGlobalConsoFamille, 1) ?>%
					</div>
				</div>
				
				<?php if($police['soldeConsommation']<="0") :?>
				<div class="alert alert-danger py-1 mb-0">
					<i class="fas fa-exclamation-triangle me-1"></i>
					<?= _("Plafond familial atteint!") ?>
				</div>
				<?php endif; ?>
			</div>
		</div>
	</div>

	<!-- Plafond Bénéficiaire -->
	<div class="col-12 col-lg-6 mb-4">
		<div class="card shadow-sm h-100">
		
			<div class="d-none d-md-block">
				<div class="card-header bg-secondary py-2">
					<h6 class="mb-0 text-center text-light">
						<i class="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-user me-2"></i>
						<?= _("Dépenses individuelles")." ".$_SESSION['exercieReference_C'] ?> 
					</h6>
				</div>
			</div>
			<!-- Affichage mobile (cartes) -->
			<div class="d-md-none">
				<div class="card-header bg-dark py-2">
					<h6 class="mb-0 text-center text-light">
						<i class="fa fa-file-invoice-dollar me-2"></i><i class="fas fa-user me-2"></i>
						<?= _("Dépenses individuelles")." ".$_SESSION['exercieReference_C'] ?> 
					</h6>
				</div>
			</div>
			
			<div class="card-body text-center">
				<?php
					$plafondGlobalBeneficiaire = $this->nettoyer($college['plafond']);
					$consommationGlobaleBenef = $this->nettoyer($college['consommation']);
					$niveauGlobalConsoBenef = ($consommationGlobaleBenef/$plafondGlobalBeneficiaire)*100;
					$soldeConsommation = $this->nettoyer($college['soldeConsommation']);
				?>
				
				<div class="row mb-2 mt-2">
					<div class="col-4">
						<div class="border rounded p-2 border-primary">
							<small class="text-muted d-block"><?= _("Consommation") ?></small>
							<h6 class="text-primary mb-0"><?= format_N($consommationGlobaleBenef) ?></h6>
						</div>
					</div>
					<div class="col-4">
						<div class="border rounded p-2 border-success">
							<small class="text-muted d-block"><?= _("Plafond") ?></small>
							<h6 class="text-success mb-0"><?= format_N($plafondGlobalBeneficiaire) ?></h6>
						</div>
					</div>
					<div class="col-4">
						<div class="rounded p-2 border border-danger">
							<small class="text-muted d-block"><?= _("Solde") ?></small>
							<h6 class="text-danger mb-0"><?= format_N($soldeConsommation) ?></h6>
						</div>
					</div>
				</div>
				
				<div class="progress mb-3">
					<div class="progress-bar <?= $niveauGlobalConsoBenef >= 80 ? 'bg-danger' : ($niveauGlobalConsoBenef >= 50 ? 'bg-warning' : 'bg-success') ?>" 
						 style="width: <?= min($niveauGlobalConsoBenef, 100) ?>%">
						<?= number_format($niveauGlobalConsoBenef, 1) ?>%
					</div>
				</div>
				
				<?php if($college['soldeConsommation']<="0") :?>
				<div class="alert alert-danger py-1 mb-0">
					<i class="fas fa-exclamation-triangle me-1"></i>
					<?= _("Plafond personnel atteint!") ?>
				</div>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>