From 3a5e8a70e2109f54af612ec7598dd415f9cd1ca4 Mon Sep 17 00:00:00 2001
From: jfgiraud <jfgiraud@giraud-finance.com>
Date: Tue, 7 Jul 2026 17:54:53 +0000
Subject: [PATCH] =?UTF-8?q?WIP:=20tout=20ok=20et=20popup=20centr=C3=A9es?=
 =?UTF-8?q?=20et=20modernes=20=20il=20ne=20reste=20plus=20que=20ordreJFG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/ordreGF.css | 205 +++++++++++++++++++++++++++++++++++++++++-----
 js/ordreGF.js   | 214 ++++++++++++++++++++++++++++++++++++------------
 php/ordreGF.php |  40 +++++----
 3 files changed, 367 insertions(+), 92 deletions(-)

diff --git a/css/ordreGF.css b/css/ordreGF.css
index 3b369e6..dcf85c3 100644
--- a/css/ordreGF.css
+++ b/css/ordreGF.css
@@ -156,26 +156,6 @@
   background-color: #283593;
 }
 
-.ordregf-modal {
-  border: none;
-  border-radius: 8px;
-  padding: 20px;
-  background: #1c2030;
-  color: #fff;
-}
-.ordregf-modal input {
-  background: #13161f;
-  border: 1px solid #333;
-  color: white;
-  padding: 5px;
-  margin: 5px 0;
-}
-.modal-actions {
-  margin-top: 15px;
-  display: flex;
-  gap: 10px;
-}
-
 .ordregf-master-row {
   background: linear-gradient(90deg, #001f3f, #004cff) !important;
   color: #ffffff;
@@ -243,3 +223,188 @@ body {
   box-sizing: border-box;
   transition: background 0.2s ease;
 }
+
+/* ===========================
+   MODALES
+=========================== */
+
+.ordregf-modal {
+  width: 520px;
+  max-width: 92vw;
+
+  border: none;
+  border-radius: 18px;
+
+  background: #20263a;
+  color: white;
+
+  padding: 30px;
+
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
+
+  animation: popup 0.18s ease-out;
+}
+
+.ordregf-modal::backdrop {
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(5px);
+}
+
+@keyframes popup {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.ordregf-modal h2 {
+  margin-top: 0;
+  margin-bottom: 25px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.form-group label {
+  font-weight: 600;
+  color: #cfd8ff;
+}
+
+.ordregf-modal input,
+.ordregf-modal select {
+  width: 100%;
+  box-sizing: border-box;
+
+  padding: 12px 14px;
+
+  border-radius: 10px;
+  border: 1px solid #3b4668;
+
+  background: #151b2d;
+  color: white;
+
+  font-size: 15px;
+
+  outline: none;
+
+  transition: 0.25s;
+}
+
+.ordregf-modal input:focus,
+.ordregf-modal select:focus {
+  border-color: #4d84ff;
+  box-shadow: 0 0 0 3px rgba(77, 132, 255, 0.25);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+
+  margin-top: 28px;
+}
+
+.modal-actions button {
+  border: none;
+
+  padding: 11px 22px;
+
+  border-radius: 10px;
+
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+}
+
+.modal-actions button:first-child {
+  background: #444b63;
+  color: white;
+}
+
+.modal-actions button:first-child:hover {
+  background: #59617c;
+}
+
+.modal-actions button:last-child {
+  background: #2dbf5a;
+  color: white;
+}
+
+.modal-actions button:last-child:hover {
+  background: #27a84f;
+}
+
+.form-group .triple {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr 1fr;
+
+  gap: 10px;
+}
+
+#btnRechercher {
+  margin-top: 10px;
+
+  width: 100%;
+
+  padding: 12px;
+
+  border: none;
+
+  border-radius: 10px;
+
+  background: #2962ff;
+
+  color: white;
+
+  font-weight: 600;
+
+  cursor: pointer;
+}
+
+#btnRechercher:hover {
+  background: #1d4ed8;
+}
+
+dialog.ordregf-modal {
+  position: fixed;
+
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  margin: 0;
+
+  width: 520px;
+  max-width: 90vw;
+
+  border: none;
+  border-radius: 18px;
+
+  padding: 30px;
+
+  background: #20263a;
+  color: white;
+
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
+}
+
+dialog.ordregf-modal::backdrop {
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(5px);
+}
diff --git a/js/ordreGF.js b/js/ordreGF.js
index 4a36918..0f02238 100644
--- a/js/ordreGF.js
+++ b/js/ordreGF.js
@@ -1,47 +1,108 @@
 document.addEventListener("DOMContentLoaded", () => {
-  // --- 1. GESTION DES MODALS ET FORMULAIRES ---
+  // =====================================================
+  // OUTILS MODALES
+  // =====================================================
+
+  function openModal(modal) {
+    if (!modal) return;
+
+    modal.showModal();
+
+    // Force le centrage avec le CSS dialog
+    modal.style.transform = "translate(-50%, -50%)";
+  }
+
+  function closeModal(modal) {
+    if (!modal) return;
+    modal.close();
+    modal.style.transform = "";
+  }
+
+  // Fermeture par clic en dehors de la fenêtre
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      const rect = dialog.getBoundingClientRect();
+
+      const inside =
+        e.clientX >= rect.left &&
+        e.clientX <= rect.right &&
+        e.clientY >= rect.top &&
+        e.clientY <= rect.bottom;
+
+      if (!inside) {
+        closeModal(dialog);
+      }
+    });
+  });
+
+  // =====================================================
+  // MODAL CREATION ORDRE
+  // =====================================================
 
-  // Modal Créer Ordre
   const modalCreerOrdre = document.getElementById("modalCreerOrdre");
+
   const btnCreer = document.querySelector(".ordregf-btn-creer");
 
   if (modalCreerOrdre && btnCreer) {
-    btnCreer.addEventListener("click", () => modalCreerOrdre.showModal());
+    btnCreer.addEventListener("click", () => {
+      openModal(modalCreerOrdre);
+    });
 
     document.getElementById("btnAnnuler")?.addEventListener("click", () => {
-      document.getElementById("formCreerOrdre").reset();
-      modalCreerOrdre.close();
-      document.getElementById("btnValider").disabled = true;
+      document.getElementById("formCreerOrdre")?.reset();
+
+      closeModal(modalCreerOrdre);
+
+      const btnValider = document.getElementById("btnValider");
+
+      if (btnValider) {
+        btnValider.disabled = true;
+      }
     });
   }
 
-  // Recherche Action
+  // =====================================================
+  // RECHERCHE ACTION
+  // =====================================================
+
   const btnRechercher = document.getElementById("btnRechercher");
+
   btnRechercher?.addEventListener("click", async () => {
     const isin = document.getElementById("isinRecherche").value;
-    if (!isin) return alert("Veuillez entrer un code ISIN");
+
+    if (!isin) {
+      alert("Veuillez entrer un code ISIN");
+      return;
+    }
 
     const response = await fetch(
       `/php/api_rechercher_action.php?isin=${encodeURIComponent(isin)}`,
     );
+
     const data = await response.json();
 
     if (data.success) {
       document.getElementById("Nom").value = data.company_name;
+
       document.getElementById("ticker").value = data.ticker;
+
       document.getElementById("code_yahoo").value = data.yahoo_code;
+
       document.getElementById("btnValider").disabled = false;
     } else {
       alert("Action non trouvée");
     }
   });
 
-  // Enregistrement Ordre
+  // =====================================================
+  // ENREGISTREMENT ORDRE
+  // =====================================================
+
   document
     .getElementById("formCreerOrdre")
     ?.addEventListener("submit", async (e) => {
       e.preventDefault();
-      // FormData récupère automatiquement tous les champs ayant un attribut "name"
+
       const formData = new FormData(e.target);
 
       const response = await fetch("/php/api_enregistrer_ordre.php", {
@@ -50,6 +111,7 @@ document.addEventListener("DOMContentLoaded", () => {
       });
 
       const result = await response.json();
+
       if (result.success) {
         location.reload();
       } else {
@@ -60,73 +122,117 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
 
-  // Enregistrement Detail
+  // =====================================================
+  // ENREGISTREMENT DETAIL
+  // =====================================================
+
   document
     .getElementById("formCreerDetail")
     ?.addEventListener("submit", async (e) => {
       e.preventDefault();
+
       const response = await fetch("/php/api_enregistrer_detail.php", {
         method: "POST",
         body: new FormData(e.target),
       });
+
       const result = await response.json();
-      if (result.success) location.reload();
-      else
+
+      if (result.success) {
+        location.reload();
+      } else {
         alert(
           "Erreur lors de l'enregistrement du détail : " +
             (result.message || ""),
         );
+      }
     });
 
-  // --- 2. GESTION MODIFICATION (DÉLÉGATION D'ÉVÉNEMENT) ---
+  // =====================================================
+  // MODIFICATION DETAIL
+  // =====================================================
 
   document.addEventListener("click", (e) => {
     const button = e.target.closest(".ordregf-btn-modifier-petit");
-    if (button) {
-      const detail = JSON.parse(button.getAttribute("data-detail"));
-      const modal = document.getElementById("modalModifierDetail");
-      if (modal) {
-        document.getElementById("edit_id").value = detail.Id;
-        document.getElementById("edit_Id_entete").value = detail.Id_entete;
-        document.getElementById("edit_date").value = detail.Date_op;
-        document.getElementById("edit_quantite").value = detail.Quantite;
-        document.getElementById("edit_prix").value = detail.Prix_brut;
-        document.getElementById("edit_frais_broker").value =
-          detail.Frais_brocker || 0;
-        document.getElementById("edit_frais_etat").value =
-          detail.Frais_etat || 0;
-        document.getElementById("edit_frais_autre").value =
-          detail.Frais_autre || 0;
-        document.getElementById("edit_type").value = (
-          detail.Type || ""
-        ).toLowerCase();
 
-        document.getElementById("edit_etat").value = (
-          detail.Etat || ""
-        ).toLowerCase();
+    if (!button) return;
 
-        document.getElementById("edit_ordre").value = (
-          detail.Ordre || ""
-        ).toLowerCase();
+    const detail = JSON.parse(button.getAttribute("data-detail"));
 
-        modal.showModal();
-      }
-    }
+    const modal = document.getElementById("modalModifierDetail");
+
+    if (!modal) return;
+
+    document.getElementById("edit_id").value = detail.Id;
+
+    document.getElementById("edit_Id_entete").value = detail.Id_entete;
+
+    document.getElementById("edit_date").value = detail.Date_op;
+
+    document.getElementById("edit_quantite").value = detail.Quantite;
+
+    document.getElementById("edit_prix").value = detail.Prix_brut;
+
+    document.getElementById("edit_frais_broker").value =
+      detail.Frais_brocker || 0;
+
+    document.getElementById("edit_frais_etat").value = detail.Frais_etat || 0;
+
+    document.getElementById("edit_frais_autre").value = detail.Frais_autre || 0;
+
+    document.getElementById("edit_type").value = (
+      detail.Type || ""
+    ).toLowerCase();
+
+    document.getElementById("edit_etat").value = (
+      detail.Etat || ""
+    ).toLowerCase();
+
+    document.getElementById("edit_ordre").value = (
+      detail.Ordre || ""
+    ).toLowerCase();
+
+    openModal(modal);
   });
 
-  // Soumission Modification
-  const formModif = document.getElementById("formModifierDetail");
-  formModif?.addEventListener("submit", async (e) => {
-    e.preventDefault();
-    const response = await fetch("/php/api_modifier_detail.php", {
-      method: "POST",
-      body: new FormData(e.target),
+  // =====================================================
+  // ENREGISTREMENT MODIFICATION
+  // =====================================================
+
+  document
+    .getElementById("formModifierDetail")
+    ?.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const response = await fetch("/php/api_modifier_detail.php", {
+        method: "POST",
+
+        body: new FormData(e.target),
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        location.reload();
+      } else {
+        alert("Erreur : " + result.message);
+      }
+    });
+
+  //fermer la popup en cliquant à côté
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      const rect = dialog.getBoundingClientRect();
+
+      const inside =
+        e.clientX >= rect.left &&
+        e.clientX <= rect.right &&
+        e.clientY >= rect.top &&
+        e.clientY <= rect.bottom;
+
+      if (!inside) {
+        dialog.close();
+      }
     });
-    const result = await response.json();
-    if (result.success) {
-      location.reload();
-    } else {
-      alert("Erreur : " + result.message);
-    }
   });
 });
diff --git a/php/ordreGF.php b/php/ordreGF.php
index bb9bf96..1c57957 100644
--- a/php/ordreGF.php
+++ b/php/ordreGF.php
@@ -236,20 +236,20 @@ require_once __DIR__ . '/header.php';
     <form id="formCreerOrdre">
         <h2>Créer un nouvel ordre</h2>
         <div class="form-group">
-            <label>ISIN :</label><br>
+            <label>ISIN</label>
             <input type="text" id="isinRecherche" name="isin" required>
             <button type="button" id="btnRechercher">Rechercher</button>
         </div>
         <div class="form-group">
-            <label>Nom :</label><br>
+            <label>Nom :</label>
             <input type="text" name="Nom" id="Nom" readonly>
         </div>
         <div class="form-group">
-            <label>Ticker :</label><br>
+            <label>Ticker :</label>
             <input type="text" name="ticker" id="ticker" readonly>
         </div>
         <div class="form-group">
-            <label>Code Yahoo :</label><br>
+            <label>Code Yahoo :</label>
             <input type="text" name="code_yahoo" id="code_yahoo" readonly>
         </div>
         <div class="modal-actions" style="margin-top: 20px;">
@@ -264,22 +264,24 @@ require_once __DIR__ . '/header.php';
         <input type="hidden" name="Id_entete" id="Id_entete_detail">
         <h2>Ajouter un mouvement</h2>
         <div class="form-group">
-            <label>Date :</label><br>
+            <label>Date :</label>
             <input type="date" name="Date_op" required>
         </div>
         <div class="form-group">
-            <label>Quantité :</label><br>
+            <label>Quantité :</label>
             <input type="number" name="Quantite" required>
         </div>
         <div class="form-group">
-            <label>Prix Brut :</label><br>
+            <label>Prix Brut :</label>
             <input type="number" step="0.001" name="Prix_brut" required>
         </div>
         <div class="form-group">
-            <label>Frais (Broker / Etat / Autre) :</label><br>
-            <input type="number" step="0.01" name="Frais_brocker" placeholder="Broker">
-            <input type="number" step="0.01" name="Frais_etat" placeholder="Etat">
-            <input type="number" step="0.01" name="Frais_autre" placeholder="Autre">
+            <label>Frais</label>
+            <div class="triple">
+                <input type="number" step="0.01" name="Frais_brocker" placeholder="Broker">
+                <input type="number" step="0.01" name="Frais_etat" placeholder="État">
+                <input type="number" step="0.01" name="Frais_autre" placeholder="Autre">
+            </div>
         </div>
         <div class="form-group">
             <label>Ordre (Achat/Vente) :</label>
@@ -315,22 +317,24 @@ require_once __DIR__ . '/header.php';
         <input type="hidden" name="Id_entete" id="edit_Id_entete">
         <h2>Modifier le mouvement</h2>
         <div class="form-group">
-            <label>Date :</label><br>
+            <label>Date :</label>
             <input type="date" name="Date_op" id="edit_date" required>
         </div>
         <div class="form-group">
-            <label>Quantité :</label><br>
+            <label>Quantité :</label>
             <input type="number" name="Quantite" id="edit_quantite" required>
         </div>
         <div class="form-group">
-            <label>Prix Brut :</label><br>
+            <label>Prix Brut :</label>
             <input type="number" step="0.001" name="Prix_brut" id="edit_prix" required>
         </div>
         <div class="form-group">
-            <label>Frais :</label><br>
-            <input type="number" step="0.01" name="Frais_brocker" id="edit_frais_broker" placeholder="Broker">
-            <input type="number" step="0.01" name="Frais_etat" id="edit_frais_etat" placeholder="Etat">
-            <input type="number" step="0.01" name="Frais_autre" id="edit_frais_autre" placeholder="Autre">
+            <label>Frais</label>
+            <div class="triple">
+                <input type="number" step="0.01" name="Frais_brocker" id="edit_frais_broker" placeholder="Broker">
+                <input type="number" step="0.01" name="Frais_etat" id="edit_frais_etat" placeholder="État">
+                <input type="number" step="0.01" name="Frais_autre" id="edit_frais_autre" placeholder="Autre">
+            </div>
         </div>
         <div class="form-group">
             <label>Ordre :</label>