newdesigngestionnaire/Vue/Ajaxtbajouterpointvente/index.php
2026-03-14 13:15:01 +00:00

128 lines
6.4 KiB
PHP
Executable File

<div class="card border-0 shadow-sm border-start border-4 border-primary">
<div class="card-header bg-white py-3 border-bottom">
<h6 class="mb-0 fw-bold text-uppercase text-success small" id="titre_formData">
<i class="fas fa-plus-circle me-2"></i><?= _("Ajouter un nouveau Point de Vente") ?>
</h6>
</div>
<div class="card-body p-4">
<form id="formData" class="container-fluid p-0">
<div class="row g-3">
<div class="col-md-8">
<label class="form-label fw-bold text-muted small required"><?= _("Libellé") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-store text-primary"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule fw-bold"
id="libelle" name="libelle" required autocomplete="OFF">
</div>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small">Type</label>
<select name="codeTypePointVente" id="codeTypePointVente" class="selectpicker form-control border-2 shadow-xs" data-container="body">
<?= liste_options($typepointvente, '', false) ?>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-muted small">Email</label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-envelope text-muted"></i></span>
<input type="email" class="form-control border-2 border-start-0" id="email" name="email">
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-muted small"><?= _("Téléphone") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-phone text-muted"></i></span>
<input type="tel" class="form-control border-2 border-start-0" id="telephone" name="telephone">
</div>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small"><?= _("Adresse Postale") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-map-signs text-muted"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule" id="adressePost" name="adressePost">
</div>
</div>
<div class="col-md-8">
<label class="form-label fw-bold text-muted small"><?= _("Adresse Géographique") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-map-marker-alt text-muted"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule" id="adresseGeo" name="adresseGeo">
</div>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small"><?= _("Pays") ?></label>
<select name="codePays" id="codePays" class="selectpicker form-control border-2 shadow-xs"
data-live-search="true" data-container="body" onchange="filtreVilleParPays();">
<?= liste_options($pays, '', false) ?>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small"><?= _("Région") ?></label>
<div id="div_ville">
<select name="codeVille" id="codeVille" class="selectpicker form-control border-2 shadow-xs"
data-live-search="true" data-container="body" onchange="JAVASCRIPT:filtreLocaliteParVille();">
<?= liste_options($ville, '', false) ?>
</select>
</div>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small"><?= _("Ville") ?></label>
<div id="div_localite">
<select name="codeLocalite" id="codeLocalite" class="selectpicker form-control border-2 shadow-xs"
data-live-search="true" data-container="body">
<?= liste_options($localite, '', false) ?>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
// Initialisation Standard des SelectPickers
$('.selectpicker').selectpicker();
// Focus UX Neutral Pro
setTimeout(function() {
$('#libelle').focus();
}, 200);
});
/**
* Exemple de fonction de mise à jour dynamique respectant le protocole
* (A adapter selon votre logique de chargement de div_ville/div_localite)
*/
function actualiserSelectsGeographiques() {
// Après avoir injecté le nouveau HTML dans div_ville ou div_localite
// Il faut détruire et ré-init le plugin
$('.selectpicker').selectpicker('destroy').selectpicker();
}
</script>
<style>
.border-primary { border-color: #212e53 !important; }
.shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.form-control.border-2 { border-width: 2px !important; }
.input-group-text.border-2 { border-width: 2px !important; }
.majuscule { text-transform: uppercase; }
.required:after { content: " *"; color: #dc3545; font-weight: bold; }
/* Harmonisation SelectPicker */
.bootstrap-select > .dropdown-toggle {
border-width: 2px !important;
height: 38px !important;
background-color: #fff !important;
}
</style>