File size: 25,892 Bytes
658ff35
e9af8e8
 
 
 
59856af
e9af8e8
1f30211
e9af8e8
 
 
 
1f30211
 
e9af8e8
ab3bd11
e9af8e8
1f30211
 
 
ab3bd11
1f30211
ab3bd11
1f30211
ab3bd11
e9af8e8
 
ab3bd11
 
 
 
 
 
e9af8e8
 
1f30211
 
 
 
 
 
 
2453745
 
 
 
 
1f30211
 
 
 
2453745
1f30211
 
 
e9af8e8
 
 
 
ab3bd11
e9af8e8
 
1f30211
 
e9af8e8
 
1f30211
 
 
 
 
 
 
 
 
e9af8e8
 
 
1f30211
 
 
 
e9af8e8
1f30211
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2284b70
1f30211
 
e9af8e8
 
2284b70
 
 
 
 
 
269e393
 
 
 
 
 
 
2284b70
 
 
 
ab3bd11
1f30211
 
 
 
e9af8e8
1f30211
 
 
 
 
 
 
 
 
 
 
ab3bd11
e9af8e8
1f30211
 
 
 
 
 
 
 
2284b70
1f30211
 
 
e9af8e8
1f30211
 
ab3bd11
1f30211
ab3bd11
 
e9af8e8
 
1f30211
e9af8e8
 
 
1f30211
e9af8e8
 
 
1f30211
 
 
 
633e8c5
1f30211
633e8c5
 
e9af8e8
2453745
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42b7ee0
 
2453745
 
42b7ee0
6835ab7
42b7ee0
 
 
 
 
2453745
 
 
e457b9b
2453745
42b7ee0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2453745
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42b7ee0
bde5c1c
42b7ee0
 
 
 
 
 
 
 
 
2453745
 
 
 
 
42b7ee0
 
2453745
 
 
 
 
42b7ee0
2453745
 
 
 
 
 
 
 
 
e9af8e8
 
 
 
a5e7e25
 
 
 
 
 
 
 
 
 
 
 
 
 
dba6001
e9af8e8
 
269e393
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4455dc1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f82de50
 
 
 
4455dc1
 
f82de50
4455dc1
 
f82de50
4455dc1
 
 
 
2df69e1
 
 
 
 
a7c5afa
2df69e1
 
 
 
 
 
 
 
 
 
 
 
 
bde5c1c
2df69e1
 
 
bde5c1c
 
 
 
2df69e1
 
 
 
 
 
bde5c1c
 
 
 
 
 
2df69e1
 
 
 
 
 
 
4d77499
2df69e1
 
 
a7c5afa
2df69e1
42344f0
2df69e1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9af8e8
2df69e1
e9af8e8
 
658ff35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#4137A8" />
    <meta name="robots" content="noindex, nofollow" />
    <title>بوابة الباحث الميداني</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <section id="loginView" class="center-view">
        <form id="loginForm" class="access-panel" autocomplete="off">
          <div class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
          </div>
          <p class="eyebrow">قياس الوضع الراهن</p>
          <h1>بوابة الباحث الميداني</h1>
          <p class="lead">أدخل رمز الدخول للوصول إلى العينات وأدوات العمل الميداني.</p>
          <label for="password">رمز الدخول</label>
          <div class="input-shell">
            <input id="password" type="password" inputmode="numeric" placeholder="رمز الدخول" required autofocus />
            <button id="togglePassword" class="icon-button" type="button" aria-label="إظهار رمز الدخول" title="إظهار رمز الدخول">
              <svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" /><circle cx="12" cy="12" r="2.8" /></svg>
            </button>
          </div>
          <p id="loginError" class="form-error" role="alert"></p>
          <button id="loginButton" class="primary-button" type="submit">
            <span>دخول</span>
            <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></svg>
          </button>
        </form>
      </section>

      <section id="researcherView" class="center-view" hidden>
        <div class="researcher-panel">
          <div class="panel-heading">
            <p class="eyebrow">اختيار الملف</p>
            <h1>اختر اسم الباحث</h1>
            <p>سيتم عرض العينات والخريطة والأدوات الخاصة بالباحث المختار.</p>
          </div>
          <div class="directory-tabs" role="tablist" aria-label="طريقة الوصول">
            <button id="researcherModeButton" class="directory-tab active" type="button">اختيار الباحث</button>
            <button id="entityModeButton" class="directory-tab" type="button">البحث عن منشأة</button>
          </div>
          <div class="search-shell directory-search">
            <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
            <input id="researcherSearch" type="search" placeholder="ابحث باسم الباحث" />
          </div>
          <div id="researcherGrid" class="researcher-grid"></div>
          <div id="entitySearchResults" class="entity-search-results" hidden></div>
        </div>
      </section>

      <section id="dashboardView" class="dashboard-view" hidden>
        <header class="topbar">
          <div class="topbar-brand">
            <div class="brand-mark small" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
            </div>
            <div>
              <p>بوابة الباحث الميداني</p>
              <h1 id="researcherName"></h1>
            </div>
          </div>
          <div class="topbar-actions">
            <button id="switchResearcherButton" class="secondary-button compact" type="button">
              <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8M19 8v6M22 11h-6" /></svg>
              تغيير الباحث
            </button>
            <button id="logoutButton" class="icon-button topbar-icon" type="button" aria-label="تسجيل الخروج" title="تسجيل الخروج">
              <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg>
            </button>
          </div>
        </header>

        <div class="dashboard-shell">
          <section class="workspace-header">
            <div>
              <p class="eyebrow">مساحة العمل</p>
              <h2>عينات الباحث وأدوات الزيارة الميدانية</h2>
            </div>
            <div id="summaryStats" class="summary-stats"></div>
          </section>

          <section class="quick-actions" aria-label="أدوات الباحث">
            <a id="researcherMapLink" class="tool-action map-action" target="_blank" rel="noopener">
              <span class="tool-icon"><svg viewBox="0 0 24 24"><path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6Z M9 3v15M15 6v15" /></svg></span>
              <span><strong>الخريطة الشاملة</strong><small>عرض جميع مواقع الباحث</small></span>
              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
            </a>
            <a id="formLink" class="tool-action form-action" target="_blank" rel="noopener">
              <span class="tool-icon"><svg viewBox="0 0 24 24"><path d="M6 2h9l4 4v16H6V2Z M14 2v5h5M9 12h7M9 16h7M9 8h2" /></svg></span>
              <span><strong>استمارة المسح</strong><small>فتح الاستمارة عند طلب المنشأة</small></span>
              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
            </a>
            <button id="shareFormButton" class="tool-action share-action" type="button">
              <span class="tool-icon"><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></span>
              <span><strong>مشاركة الاستمارة</strong><small>رسالة رسمية جاهزة عبر واتساب</small></span>
              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
            </button>
          </section>

          <section class="contacts-section" aria-labelledby="contactsTitle">
            <div class="section-heading">
              <div>
                <p class="eyebrow">مرجع التواصل</p>
                <h2 id="contactsTitle">ممثلو المدن الصناعية</h2>
              </div>
              <div class="contacts-heading-actions">
                <p>الأرقام متاحة دائمًا للرجوع إليها، وسيتم تمييز ممثل المدينة المختارة.</p>
                <button id="toggleContactsButton" class="contacts-toggle" type="button" aria-expanded="true">
                  <span>إخفاء الأرقام</span>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </button>
              </div>
            </div>
            <div id="representativesDirectory" class="representatives-directory"></div>
          </section>

          <section class="controls-panel">
            <div class="city-section">
              <span class="field-label">المدينة الصناعية</span>
              <div id="cityButtons" class="city-buttons" role="radiogroup" aria-label="اختيار المدينة الصناعية"></div>
            </div>
            <div class="filters-grid">
              <label class="field-group search-group">
                <span>البحث</span>
                <div class="search-shell">
                  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
                  <input id="searchInput" type="search" placeholder="اسم المنشأة أو السجل التجاري أو الرقم الموحد" />
                </div>
              </label>
              <label class="field-group">
                <span>حالة المنشأة</span>
                <div class="select-shell">
                  <select id="statusSelect"><option value="">جميع الحالات</option></select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </label>
              <label class="field-group">
                <span>بيانات الموقع</span>
                <div class="select-shell">
                  <select id="locationSelect">
                    <option value="">جميع العينات</option>
                    <option value="madon">إحداثية مدن</option>
                    <option value="base">إحداثية أساسية</option>
                    <option value="statement">إفادة أو ملاحظة مدن فقط</option>
                    <option value="none">لا توجد تفاصيل موقع</option>
                  </select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </label>
              <button id="clearFiltersButton" class="clear-button" type="button">
                <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
                مسح الفلاتر
              </button>
            </div>
          </section>

          <section class="results-section">
            <div class="results-header">
              <div>
                <p id="resultsMeta" class="results-meta"></p>
                <h2 id="resultsTitle">العينات</h2>
              </div>
            </div>
            <div id="samplesGrid" class="samples-grid"></div>
            <div id="noResults" class="empty-state" hidden>
              <h3>لا توجد نتائج مطابقة</h3>
              <p>جرّب تغيير المدينة أو الحالة أو كتابة جزء من اسم المنشأة.</p>
            </div>
            <div id="loadMoreWrap" class="load-more-wrap" hidden>
              <button id="loadMoreButton" class="secondary-button" type="button">عرض المزيد</button>
              <p id="loadMoreMeta"></p>
            </div>
          </section>
        </div>
      </section>

      <section id="adminView" class="admin-view" hidden>
        <header class="topbar admin-topbar">
          <div class="topbar-brand">
            <div class="brand-mark small" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
            </div>
            <div>
              <p>قياس الوضع الراهن</p>
              <h1>لوحة متابعة الإنتاجية</h1>
            </div>
          </div>
          <button id="adminLogoutButton" class="icon-button topbar-icon" type="button" aria-label="تسجيل الخروج" title="تسجيل الخروج">
            <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg>
          </button>
        </header>

        <div class="admin-shell">
          <section class="admin-heading">
            <div>
              <p class="eyebrow">لوحة قيادة تشغيلية</p>
              <h2>ملخص الأداء الميداني</h2>
              <p id="adminUpdatedAt">تتم مزامنة البيانات من سجل التوثيق في Google Drive.</p>
            </div>
            <div class="admin-heading-actions">
              <span id="adminSyncStatus" class="sync-status"><i></i><span>مزامنة تلقائية كل دقيقة</span></span>
              <button id="refreshAdminButton" class="secondary-button compact" type="button">
                <svg viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M6.1 9A7 7 0 0 1 18 6l2 5M17.9 15A7 7 0 0 1 6 18l-2-5" /></svg>
                تحديث
              </button>
            </div>
          </section>

          <section id="adminStats" class="admin-stats"></section>
          <section id="adminInsight" class="admin-insight" aria-live="polite"></section>

          <section class="admin-overview-grid">
            <article class="admin-panel progress-panel">
              <div class="admin-panel-heading">
                <div><p class="eyebrow">الموقف العام</p><h3>نسبة الإنجاز</h3></div>
              </div>
              <div id="adminProgressOverview" class="progress-overview"></div>
            </article>

            <article class="admin-panel trend-panel">
              <div class="admin-panel-heading">
                <div><p class="eyebrow">آخر 7 أيام</p><h3>حركة التوثيق</h3></div>
                <span id="adminTrendTotal" class="panel-metric"></span>
              </div>
              <div id="adminTrendChart" class="trend-chart" aria-label="إنجاز آخر سبعة أيام"></div>
            </article>

            <article class="admin-panel city-panel">
              <div class="admin-panel-heading">
                <div><p class="eyebrow">التغطية الميدانية</p><h3>تقدم المدن</h3></div>
              </div>
              <div id="adminCityProgress" class="city-progress-list"></div>
            </article>
          </section>

          <section id="adminControls" class="admin-controls">
            <label class="field-group admin-search">
              <span>البحث</span>
              <div class="search-shell">
                <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
                <input id="adminSearch" type="search" placeholder="اسم المنشأة أو الباحث أو السجل التجاري" />
              </div>
            </label>
            <label class="field-group">
              <span>الباحث</span>
              <div class="select-shell">
                <select id="adminResearcherFilter"><option value="">جميع الباحثين</option></select>
                <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
              </div>
            </label>
            <label class="field-group">
              <span>المدينة</span>
              <div class="select-shell">
                <select id="adminCityFilter"><option value="">جميع المدن</option></select>
                <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
              </div>
            </label>
            <label class="field-group">
              <span>التاريخ</span>
              <input id="adminDateFilter" class="date-input" type="date" />
            </label>
            <label class="field-group">
              <span>الحالة الميدانية</span>
              <div class="select-shell">
                <select id="adminStatusFilter"><option value="">جميع الحالات</option></select>
                <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
              </div>
            </label>
            <button id="clearAdminFilters" class="clear-button admin-clear" type="button">
              <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
              مسح الفلاتر
            </button>
          </section>

          <section class="admin-grid">
            <article class="admin-panel productivity-panel">
              <div class="admin-panel-heading">
                <div><p class="eyebrow">ترتيب الأداء</p><h3>إنتاجية الباحثين</h3></div>
                <span id="activeResearchersCount" class="panel-metric"></span>
              </div>
              <div id="researcherProductivity" class="productivity-list"></div>
            </article>
            <article class="admin-panel records-panel">
              <div class="admin-panel-heading">
                <div><p class="eyebrow">آخر التحديثات</p><h3>سجل التوثيق</h3></div>
                <span id="adminRecordsCount"></span>
              </div>
              <div id="adminRecords" class="admin-records"></div>
              <div id="adminEmpty" class="empty-state" hidden>
                <h3>لا توجد نتائج مطابقة</h3>
                <p>غيّر البحث أو الفلاتر لعرض سجلات أخرى.</p>
              </div>
            </article>
          </section>
        </div>
      </section>
    </main>

    <aside id="selectionBar" class="selection-bar" hidden aria-live="polite">
      <div class="selection-summary">
        <strong id="selectionCount">0 منشأة محددة</strong>
        <span>يمكن جمعها في رسالة واحدة</span>
      </div>
      <div class="selection-actions">
        <button id="clearSelectionButton" class="selection-clear" type="button">إلغاء التحديد</button>
        <button id="sendSelectionButton" class="selection-send" type="button">
          <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>
    </aside>

    <footer>إعداد نوف الناصر</footer>
    <div id="toast" class="toast" role="status" aria-live="polite"></div>

    <div id="shareDialog" class="dialog-backdrop" hidden>
      <section class="share-dialog" role="dialog" aria-modal="true" aria-labelledby="shareDialogTitle">
        <div class="dialog-header">
          <div>
            <p class="eyebrow">مشاركة مباشرة</p>
            <h2 id="shareDialogTitle">إرسال الاستمارة عبر واتساب</h2>
          </div>
          <button id="closeShareDialog" 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="shareForm" class="share-form" novalidate>
          <label class="dialog-field" for="recipientPhone">
            <span>رقم جوال المستلم</span>
            <div class="phone-input-shell">
              <span dir="ltr">+966</span>
              <input
                id="recipientPhone"
                type="tel"
                inputmode="numeric"
                autocomplete="tel"
                placeholder="05xxxxxxxx"
                maxlength="16"
                required
              />
            </div>
            <small>يمكن إدخال الرقم بصيغة 05xxxxxxxx أو 9665xxxxxxxx.</small>
          </label>
          <p id="recipientPhoneError" class="dialog-error" role="alert"></p>

          <label class="dialog-field" for="messagePreview">
            <span>معاينة الرسالة</span>
            <textarea id="messagePreview" rows="12" readonly></textarea>
          </label>

          <div class="dialog-actions">
            <button id="copyShareMessage" 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="sendShareButton" class="whatsapp-button" type="submit" disabled>
              <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>

    <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="openMadonGroup" class="group-button" type="button">
              <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></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>
          <p class="group-help">عند فتح المجموعة ستكون الرسالة منسوخة وجاهزة للصق والإرسال.</p>
        </form>
      </section>
    </div>

    <div id="documentationDialog" class="dialog-backdrop" hidden>
      <section class="share-dialog documentation-dialog" role="dialog" aria-modal="true" aria-labelledby="documentationDialogTitle">
        <div class="dialog-header">
          <div>
            <p class="eyebrow">توثيق ميداني</p>
            <h2 id="documentationDialogTitle">إضافة إفادة ميدانية</h2>
          </div>
          <button id="closeDocumentationDialog" 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>

        <div id="documentationEntity" class="documentation-entity"></div>
        <div id="documentationUnavailable" class="service-warning" hidden>
          خدمة الحفظ لم تُفعّل بعد. يجب نشر Google Apps Script وإضافة رابط الخدمة في ملف الإعداد.
        </div>

        <form id="documentationForm" class="share-form" novalidate>
          <label class="dialog-field" for="fieldStatus">
            <span>الحالة الميدانية</span>
            <div class="select-shell">
              <select id="fieldStatus" required>
                <option value="">اختر الحالة</option>
                <option value="مغلقة مؤقتًا">مغلقة مؤقتًا</option>
                <option value="مغلقة نهائيًا">مغلقة نهائيًا</option>
                <option value="تم الاستيفاء">تم الاستيفاء</option>
                <option value="رفض الإدلاء بالبيانات">رفض الإدلاء بالبيانات</option>
                <option value="أخرى">أخرى</option>
              </select>
              <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
            </div>
          </label>

          <label id="otherStatusField" class="dialog-field other-status-field" for="otherStatus" hidden>
            <span>توضيح الحالة الأخرى</span>
            <input id="otherStatus" type="text" maxlength="120" placeholder="اكتب الحالة الميدانية..." />
            <small>ستظهر هذه العبارة كحالة المنشأة في لوحة المشرف.</small>
          </label>

          <label class="dialog-field" for="fieldStatement">
            <span>الإفادة الميدانية</span>
            <textarea id="fieldStatement" rows="5" maxlength="1500" placeholder="اكتب الإفادة بشكل واضح ومختصر..." required></textarea>
            <small><span id="statementCount">0</span> / 1500 حرف</small>
          </label>

          <div class="dialog-field">
            <span>الصور المرفقة <small class="optional-label">اختياري</small></span>
            <label class="photo-picker" for="documentationPhotos">
              <svg viewBox="0 0 24 24"><path d="M4 7h3l2-3h6l2 3h3v13H4V7Z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" /></svg>
              <strong>التقاط أو اختيار الصور</strong>
              <small>يمكن الحفظ دون صورة، أو الاحتفاظ وإضافة حتى 3 صور عند الحاجة.</small>
            </label>
            <input id="documentationPhotos" class="visually-hidden" type="file" accept="image/*" multiple />
            <div id="photoPreviews" class="photo-previews"></div>
          </div>

          <p id="documentationError" class="dialog-error" role="alert"></p>
          <div id="uploadProgress" class="upload-progress" hidden>
            <span id="uploadProgressBar"></span>
          </div>

          <div class="dialog-actions">
            <button id="cancelDocumentationButton" class="secondary-button" type="button">إلغاء</button>
            <button id="saveDocumentationButton" class="whatsapp-button documentation-save" type="submit">
              <svg viewBox="0 0 24 24"><path d="M5 3h12l2 2v16H5V3Z M8 3v6h8V3M8 21v-8h8v8" /></svg>
              حفظ التوثيق
            </button>
          </div>
        </form>
      </section>
    </div>

    <script src="data.js"></script>
    <script src="documentation-config.js"></script>
    <script src="app.js"></script>
  </body>
</html>