259 lines
10 KiB
PHP
Executable File
259 lines
10 KiB
PHP
Executable File
<style>
|
|
.container {
|
|
max-width: 1200px;
|
|
margin-top: 50px;
|
|
}
|
|
.card {
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card-body {
|
|
padding: 2rem;
|
|
}
|
|
.card-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
.btn {
|
|
border-radius: 30px;
|
|
padding: 12px 24px;
|
|
font-weight: bold;
|
|
}
|
|
.btn-outline-primary {
|
|
color: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
.btn-outline-primary:hover {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.btn-outline-success {
|
|
color: #28a745;
|
|
border-color: #28a745;
|
|
}
|
|
.btn-outline-success:hover {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.btn-outline-secondary {
|
|
color: #6c757d;
|
|
border-color: #6c757d;
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
.progress-bar {
|
|
font-size: 1rem;
|
|
border-radius: 20px;
|
|
}
|
|
.table-striped tbody tr:nth-child(odd) {
|
|
background-color: #f9fafb;
|
|
}
|
|
.table th, .table td {
|
|
vertical-align: middle;
|
|
}
|
|
.table thead th {
|
|
background-color: #e9ecef;
|
|
font-weight: bold;
|
|
}
|
|
.header-text {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #343a40;
|
|
margin-bottom: 30px;
|
|
}
|
|
.modal-header {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.modal-body {
|
|
background-color: #ffffff;
|
|
}
|
|
.modal-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
.input-group-text {
|
|
background-color: #f1f3f5;
|
|
}
|
|
.input-group .form-control {
|
|
border-left: none;
|
|
}
|
|
.input-group-text {
|
|
font-size: 1.1rem;
|
|
}
|
|
.modal-body .fas {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.large-text {
|
|
font-size: 24px; /* ou la taille que vous préférez */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
.modal-dialog {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<legend><?= _("ESPACE Abonnement")?></legend>
|
|
|
|
<?php
|
|
$nbAssuresActifs = $this->nettoyer($assuresActifs['nbAssuresActifs']);
|
|
$mtMensuel = $this->nettoyer($assuresActifs['mtMensuel']);
|
|
|
|
$actif = $this->nettoyer($paramsSaas['actif']);
|
|
$delaiUsage = $this->nettoyer($paramsSaas['delaiUsageSaas']);
|
|
?>
|
|
|
|
<!-- Cartes d'information principales -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card shadow-lg h-100 d-flex flex-column">
|
|
<div class="card-body text-center flex-grow-1 d-flex flex-column justify-content-between">
|
|
<h5 class="card-title text-secondary"><?= _("Populations")?></h5>
|
|
<div class="my-3 d-flex justify-content-center align-items-center" style="font-size: 24px; font-weight: bold; color: #28a745;">
|
|
<?= format_N($nbAssuresActifs); ?>
|
|
<i class="ms-2 bi bi-people-fill"></i>
|
|
</div>
|
|
<p><?= _("Prix unitaire")?> : <?= format_N($mtMensuel)." ".$_SESSION['devise_C']?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card shadow-lg h-100 d-flex flex-column">
|
|
<div class="card-body text-center flex-grow-1 d-flex flex-column justify-content-between">
|
|
<h5 class="card-title text-secondary"><?= _("Redevance")?></h5>
|
|
<div class="my-3 d-flex justify-content-center align-items-center" style="font-size: 24px; font-weight: bold;">
|
|
<strong><?= _("Minimum")?></strong>
|
|
</div>
|
|
<p><?= format_N($paramsSaas['redevanceMinimum']) . " " . $_SESSION['devise_C'] ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card shadow-lg h-100 d-flex flex-column">
|
|
<div class="card-body text-center flex-grow-1 d-flex flex-column justify-content-between">
|
|
<h5 class="card-title text-secondary"><?= _("Statut")?></h5>
|
|
<p class="my-3 large-text"><strong><?= ($actif== "1") ? _("Actif") : _("Inactif"); ?></strong></p>
|
|
<p><?= _("Expiration")?> :<?= dateLang($delaiUsage, $_SESSION['lang'])?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card shadow-lg h-100 d-flex flex-column">
|
|
<div class="card-body text-center flex-grow-1 d-flex flex-column justify-content-between">
|
|
<h5 class="card-title text-secondary"><?= _("Paiement")?></h5>
|
|
<button class="btn btn-outline-success w-100 mt-auto py-3 fs-4" onClick="javascript:facture_impayees_abonnement();">
|
|
<i class="fas fa-wallet"></i> <?= _("Paiement")?>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section des factures -->
|
|
<div class="card shadow-lg mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="card-title text-secondary"><?= _("Dernières Factures")?></h5>
|
|
<div class="d-flex align-items-center">
|
|
<label for="periode-select" class="me-2 fw-bold"><?= _("Filtrer par exercice")?> :</label>
|
|
<select class="form-select form-select-sm w-auto" id="codeExercice" NAME="codeExercice"
|
|
onchange="javascript:filtre_facture_abonnement();">
|
|
<?php liste_options($exercice, $_SESSION['codeExercice_C']); ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive" id="div_facture">
|
|
<?php require "Vue/Ajaxlistefacturesabonnement/index.php";?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton modal caché -->
|
|
<button class="sr-only" data-bs-toggle="modal" data-bs-target="#rechargeModal" id="btn_modal">
|
|
<?= _("Modal")?>
|
|
</button>
|
|
|
|
<!-- Modal de paiement -->
|
|
<div class="modal fade" id="rechargeModal" tabindex="-1" aria-labelledby="rechargeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content shadow-lg rounded-4">
|
|
<div class="modal-header bg-primary text-white border-bottom-0">
|
|
<h5 class="modal-title" id="rechargeModalLabel"><?= _("Paiement des factures impayées")?></h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="step" id="step-1">
|
|
<div class="table-responsive" id="div_impayees">
|
|
<!-- Content for unpaid bills -->
|
|
</div>
|
|
<button class="btn btn-primary w-100 mt-4" id="next-to-step-2" onClick="javascript:affiche_montant_a_payer_saas();"><?= _("Suivant")?> →</button>
|
|
</div>
|
|
|
|
<div class="step d-none" id="step-2">
|
|
<h5 class="mb-4"><?= _("Récapitulatif de votre paiement")?></h5>
|
|
|
|
<div id="div_recap"></div>
|
|
|
|
<button class="btn btn-secondary position-absolute top-0 end-0 m-3" id="back-to-step-1">
|
|
<i class="fas fa-arrow-left me-2"></i> <?= _("Précédent")?>
|
|
</button>
|
|
|
|
<!--
|
|
<script src="https://www.paypal.com/sdk/js?client-id=AYKQSacVDXeiEnozWgq53c0xsdyWXmoUuMS49_UTeLppAlKxy2XVQtWTDp4sCX_EWyvDuXKQ5mFDLqov¤cy=EUR"></script>
|
|
<div id="paypal-button-container"></div>
|
|
-->
|
|
|
|
<div class="d-flex justify-content-center mt-4">
|
|
<button class="btn btn-success w-50" onclick="javascript:proceder_paiement_saas();"><?= _("Procéder au paiement")?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const nextToStep2 = document.getElementById("next-to-step-2");
|
|
const backToStep1 = document.getElementById("back-to-step-1");
|
|
|
|
if (nextToStep2) {
|
|
nextToStep2.addEventListener("click", function() {
|
|
const selectedBills = document.querySelectorAll(".bill-checkbox:checked");
|
|
if (selectedBills.length === 0) {
|
|
v_msg = "Veuillez sélectionner au moins une facture avant de continuer!";
|
|
v_msgEng = "Please select at least one invoice before continuing!";
|
|
alert_ebene(v_msg, v_msgEng);
|
|
|
|
return;
|
|
}
|
|
|
|
document.getElementById("step-1").classList.add("d-none");
|
|
document.getElementById("step-2").classList.remove("d-none");
|
|
});
|
|
}
|
|
|
|
if (backToStep1) {
|
|
backToStep1.addEventListener("click", function() {
|
|
document.getElementById("step-2").classList.add("d-none");
|
|
document.getElementById("step-1").classList.remove("d-none");
|
|
});
|
|
}
|
|
});
|
|
</script>
|