newdesigngestionnaire/Vue/Ajaxpaysterritoire/index.php
2026-04-10 09:34:34 +00:00

113 lines
5.9 KiB
PHP
Executable File

<div id="div_garant" class="animate__animated animate__fadeIn">
<div class="row g-4">
<div id="div_sans_territoire" class="col-md-5">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white py-3 border-bottom-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="mb-0 fw-bold text-uppercase text-primary small">
<i class="fas fa-external-link-alt me-2"></i><?= _("Pays hors du territoire") ?>
</h6>
<button type="button" class="btn btn-primary btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="javascript:ajouter_tous_pays_territoire();">
<?= _("Ajouter tous") ?> <i class="fas fa-angle-double-right ms-1"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0 datatable-inter compact" style="font-size: 9.5pt; width: 100%;">
<thead class="table-light">
<tr>
<th class="ps-3"><?= _("Désignation Pays") ?></th>
<th class="text-center" width="60px"><?= _("Action") ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($pays_sans_territoire as $v):
$codePays = $v['codePays'];
$pays = est_anglophone() ? $v['paysEng'] : $v['pays'];
?>
<tr>
<td class="ps-3 fw-medium text-dark"><?= $pays ?></td>
<td class="text-center">
<button type="button" class="btn btn-outline-primary btn-xs rounded-circle shadow-none"
onClick="javascript:ajouter_un_pays_territoire('<?=$codePays?>');" title="<?= _("Ajouter") ?>">
<i class="fas fa-arrow-right"></i>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="div_avec_seuil" class="col-md-7">
<div class="card border-0 shadow-sm border-start border-success border-4">
<div class="card-header bg-white py-3 border-bottom-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="mb-0 fw-bold text-uppercase text-success small">
<i class="fas fa-check-circle me-2"></i><?= _("Pays du territoire") ?>
</h6>
<button type="button" class="btn btn-danger btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="javascript:retirer_tous_pays_territoire();">
<i class="fas fa-angle-double-left me-1"></i> <?= _("Retirer tous") ?>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0 datatable-inter compact" style="font-size: 9.5pt; width: 100%;">
<thead class="table-light">
<tr>
<th class="text-center" width="60px"><?= _("Action") ?></th>
<th class="ps-3"><?= _("Désignation Pays") ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($pays_avec_territoire as $v):
$id = $v['id'];
$pays = est_anglophone() ? $v['paysEng'] : $v['pays'];
?>
<tr>
<td class="text-center">
<button type="button" class="btn btn-outline-danger btn-xs rounded-circle shadow-none"
onClick="javascript:retirer_un_pays_territoire('<?=$id?>');" title="<?= _("Retirer") ?>">
<i class="fas fa-arrow-left"></i>
</button>
</td>
<td class="ps-3 fw-bold text-primary"><?= $pays ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Style pour les boutons circulaires de transfert */
.btn-xs {
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
/* Hover effect sur les cartes de pays */
.card:hover {
transform: translateY(-2px);
transition: transform 0.2s ease-in-out;
}
/* Ajustement DataTables pour ces tableaux compacts */
.compact.dataTable tbody td {
padding: 8px 4px !important;
}
</style>