Upload 6 files

README.md

@@ -23,6 +23,7 @@ short_description: بوابة الباحث الميداني الشاملة
 - يتوفر دليل ثابت لممثلي المدن الصناعية مع نسخ الرقم والتواصل عبر واتساب.
 - تتضمن كل عينة نافذة مشاركة تطلب رقم جوال المستلم، وتعرض رسالة رسمية منظمة قبل إرسال رابط الاستمارة عبر واتساب.
 - واجهة الجوال مدمجة: أدوات سريعة في صف واحد، مدن وإحصاءات قابلة للسحب، ودليل ممثلين قابل للطي.
+- زر رسالة مسؤول مدن يفتح قائمة المسؤولين، ويختار مسؤول المدينة تلقائيًا مع إمكانية تغييره قبل الإرسال.
 - البيانات مشفرة داخل `data.js`، ورمز الدخول الافتراضي هو `20302030`.
 
 ## تحديث البيانات

app.js

@@ -27,6 +27,8 @@ const elements = Object.fromEntries(
     "noResults", "loadMoreWrap", "loadMoreButton", "loadMoreMeta", "toast",
     "shareDialog", "closeShareDialog", "shareForm", "recipientPhone", "recipientPhoneError",
     "messagePreview", "copyShareMessage", "sendShareButton",
+    "madonDialog", "closeMadonDialog", "madonForm", "madonRepresentativeOptions",
+    "madonMessagePreview", "copyMadonMessage", "sendMadonMessage",
   ].map((id) => [id, document.getElementById(id)]),
 );
 
@@ -37,6 +39,8 @@ let visibleRows = [];
 let renderedCount = 0;
 let toastTimer;
 let shareRow = null;
+let madonRow = null;
+let selectedRepresentative = null;
 const mobileQuery = window.matchMedia("(max-width: 560px)");
 
 function base64ToBytes(value) {
@@ -300,20 +304,24 @@ function actionLink(label, href, icon) {
 
 function representativeMessage(representative, row = null) {
   const lines = [
-    "السلام عليكم ورحمة الله وبركاته",
+    "السلام عليكم ورحمة الله وبركاته،",
+    "",
+    `الأستاذ/ ${representative.name} المحترم،`,
     "",
-    `الأستاذ ${representative.name} المحترم،`,
-    "نأمل تزويدنا بموقع المنشأة التالية، وذلك لاستكمال بيانات الزيارة الميدانية:",
+    "نأمل التكرم بإفادتنا عن المنشأة الموضحة أدناه، وتزويدنا بموقعها عند توفره، وذلك لاستكمال بيانات الزيارة الميدانية.",
   ];
   if (row) {
     lines.push(
       "",
-      `المنشأة: ${row.establishmentName || "-"}`,
-      `السجل التجاري: ${row.commercialRecord || "-"}`,
-      `المدينة: ${row.city || "-"}`,
+      "*بيانات المنشأة:*",
+      `• المنشأة: ${row.establishmentName || "-"}`,
+      `• السجل التجاري: ${row.commercialRecord || "-"}`,
+      `• المدينة الصناعية: ${row.city || "-"}`,
+      `• حالة العينة: ${row.status || "-"}`,
     );
+    if (row.madonStatement) lines.push(`• إفادة مدن المسجلة: ${row.madonStatement}`);
   }
-  lines.push("", "شاكرين لكم تعاونكم.");
+  lines.push("", "شاكرين لكم تعاونكم وتجاوبكم.");
   return lines.join("\n");
 }
 
@@ -468,21 +476,6 @@ function createMadonInfo(row) {
   return section;
 }
 
-function sampleMessage(row) {
-  return [
-    "السلام عليكم ورحمة الله وبركاته",
-    "",
-    "أستاذي الكريم،",
-    "نأمل تزويدنا بموقع المنشأة التالية، وذلك لاستكمال بيانات الزيارة الميدانية:",
-    "",
-    `المنشأة: ${row.establishmentName || "-"}`,
-    `السجل التجاري: ${row.commercialRecord || "-"}`,
-    `المدينة: ${row.city || "-"}`,
-    "",
-    "شاكرين لكم تعاونكم.",
-  ].join("\n");
-}
-
 function formMessage(row = null) {
   const lines = [
     "السلام عليكم ورحمة الله وبركاته،",
@@ -532,6 +525,50 @@ function closeShareDialog() {
   shareRow = null;
 }
 
+function renderMadonOptions(recommended) {
+  const fragment = document.createDocumentFragment();
+  REPRESENTATIVES.forEach((representative, index) => {
+    const label = document.createElement("label");
+    label.className = "representative-option";
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = "madonRepresentative";
+    input.value = String(index);
+    input.checked = representative === recommended;
+    const content = document.createElement("span");
+    const name = document.createElement("strong");
+    name.textContent = representative.name;
+    const meta = document.createElement("small");
+    meta.textContent = `${representative.city} • ${representative.phone}`;
+    content.append(name, meta);
+    const check = createIcon("m5 12 4 4L19 6");
+    label.append(input, content, check);
+    input.addEventListener("change", () => {
+      selectedRepresentative = representative;
+      elements.madonMessagePreview.value = representativeMessage(representative, madonRow);
+    });
+    fragment.append(label);
+  });
+  elements.madonRepresentativeOptions.replaceChildren(fragment);
+}
+
+function openMadonDialog(row) {
+  madonRow = row;
+  selectedRepresentative =
+    findRepresentative(row.representativeCity || row.city) || REPRESENTATIVES[0];
+  renderMadonOptions(selectedRepresentative);
+  elements.madonMessagePreview.value = representativeMessage(selectedRepresentative, row);
+  elements.madonDialog.hidden = false;
+  document.body.classList.add("dialog-open");
+}
+
+function closeMadonDialog() {
+  elements.madonDialog.hidden = true;
+  document.body.classList.remove("dialog-open");
+  madonRow = null;
+  selectedRepresentative = null;
+}
+
 function createCard(row, index) {
   const card = document.createElement("article");
   card.className = "sample-card";
@@ -578,20 +615,9 @@ function createCard(row, index) {
   const footer = document.createElement("div");
   footer.className = "card-actions";
   footer.append(
-    actionButton("نسخ بيانات العينة", ICONS.copy, () => copyText(sampleMessage(row), "تم نسخ بيانات العينة")),
+    actionButton("رسالة لمسؤول مدن", ICONS.whatsapp, () => openMadonDialog(row)),
     actionButton("مشاركة الاستمارة", ICONS.whatsapp, () => openShareDialog(row)),
   );
-  const representative = findRepresentative(row.representativeCity || row.city);
-  if (representative && !row.coordinates) {
-    const message = representativeMessage(representative, row);
-    footer.append(
-      actionLink(
-        `مراسلة ${representative.name.split(" ")[0]}`,
-        `https://wa.me/${internationalPhone(representative.phone)}?text=${encodeURIComponent(message)}`,
-        ICONS.whatsapp,
-      ),
-    );
-  }
   card.append(header, details, footer);
   return card;
 }
@@ -721,6 +747,26 @@ elements.shareForm.addEventListener("submit", (event) => {
   window.open(`https://wa.me/${phone}?text=${encodeURIComponent(message)}`, "_blank", "noopener");
   closeShareDialog();
 });
+elements.closeMadonDialog.addEventListener("click", closeMadonDialog);
+elements.madonDialog.addEventListener("click", (event) => {
+  if (event.target === elements.madonDialog) closeMadonDialog();
+});
+elements.copyMadonMessage.addEventListener("click", () =>
+  copyText(elements.madonMessagePreview.value, "تم نسخ رسالة مسؤول مدن"),
+);
+elements.madonForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  if (!selectedRepresentative) return;
+  const message = representativeMessage(selectedRepresentative, madonRow);
+  window.open(
+    `https://wa.me/${internationalPhone(selectedRepresentative.phone)}?text=${encodeURIComponent(message)}`,
+    "_blank",
+    "noopener",
+  );
+  closeMadonDialog();
+});
 document.addEventListener("keydown", (event) => {
-  if (event.key === "Escape" && !elements.shareDialog.hidden) closeShareDialog();
+  if (event.key !== "Escape") return;
+  if (!elements.shareDialog.hidden) closeShareDialog();
+  if (!elements.madonDialog.hidden) closeMadonDialog();
 });

index.html

@@ -228,6 +228,43 @@
       </section>
     </div>
 
+    <div id="madonDialog" class="dialog-backdrop" hidden>
+      <section class="share-dialog madon-dialog" role="dialog" aria-modal="true" aria-labelledby="madonDialogTitle">
+        <div class="dialog-header">
+          <div>
+            <p class="eyebrow">التواصل مع مدن</p>
+            <h2 id="madonDialogTitle">اختيار مسؤول مدن</h2>
+          </div>
+          <button id="closeMadonDialog" class="icon-button" type="button" aria-label="إغلاق" title="إغلاق">
+            <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
+          </button>
+        </div>
+
+        <form id="madonForm" class="share-form">
+          <fieldset class="representative-picker">
+            <legend>اختر المسؤول الذي ستُرسل إليه الرسالة</legend>
+            <div id="madonRepresentativeOptions" class="representative-options"></div>
+          </fieldset>
+
+          <label class="dialog-field" for="madonMessagePreview">
+            <span>معاينة الرسالة</span>
+            <textarea id="madonMessagePreview" rows="11" readonly></textarea>
+          </label>
+
+          <div class="dialog-actions">
+            <button id="copyMadonMessage" class="secondary-button" type="button">
+              <svg viewBox="0 0 24 24"><path d="M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+              نسخ الرسالة
+            </button>
+            <button id="sendMadonMessage" class="whatsapp-button" type="submit">
+              <svg viewBox="0 0 24 24"><path d="M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.2-4.7A8.5 8.5 0 1 1 20.5 11.5Z M8.6 8.7c.2 3.3 2.7 5.8 6 6.2" /></svg>
+              إرسال للمسؤول
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+
     <script src="data.js"></script>
     <script src="app.js"></script>
   </body>

style.css

@@ -1221,6 +1221,90 @@ footer {
   margin-top: 14px;
 }
 
+.representative-picker {
+  min-width: 0;
+  margin: 0 0 16px;
+  padding: 0;
+  border: 0;
+}
+
+.representative-picker legend {
+  margin-bottom: 8px;
+  color: #344d60;
+  font-weight: 900;
+}
+
+.representative-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.representative-option {
+  position: relative;
+  min-width: 0;
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px;
+  background: #fbfdfe;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.representative-option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.representative-option > span {
+  min-width: 0;
+  flex: 1;
+}
+
+.representative-option strong,
+.representative-option small {
+  display: block;
+}
+
+.representative-option small {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.representative-option > svg {
+  flex: 0 0 auto;
+  color: transparent;
+}
+
+.representative-option:has(input:checked) {
+  background: rgba(0, 176, 80, 0.06);
+  border-color: var(--green);
+  box-shadow: 0 0 0 2px rgba(0, 176, 80, 0.08);
+}
+
+.representative-option:has(input:checked) > svg {
+  color: var(--green);
+}
+
+#madonMessagePreview {
+  width: 100%;
+  min-height: 225px;
+  resize: vertical;
+  padding: 12px;
+  color: var(--ink);
+  background: #f8fafb;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  outline: 0;
+  line-height: 1.75;
+}
+
 .whatsapp-button {
   min-height: 44px;
   display: inline-flex;
@@ -1570,6 +1654,18 @@ select:focus-visible {
     min-height: 220px;
   }
 
+  .representative-options {
+    grid-template-columns: 1fr;
+  }
+
+  .representative-option {
+    min-height: 64px;
+  }
+
+  #madonMessagePreview {
+    min-height: 215px;
+  }
+
   .dialog-actions {
     display: grid;
     grid-template-columns: 1fr;