Repository navigation
Expand file tree
/
Copy pathadmin_forms.html
More file actions
594 lines (549 loc) · 54.8 KB
/
Copy pathadmin_forms.html
File metadata and controls
594 lines (549 loc) · 54.8 KB
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
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Manage Forms</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- CSS Assets -->
<link rel="stylesheet" href="css/app.css">
<!-- Javascript Assets -->
<script src="js/app.js" defer=""></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="css2?family=Inter:wght@400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<script>
/**
* THIS SCRIPT REQUIRED FOR PREVENT FLICKERING IN SOME BROWSERS
*/
localStorage.getItem("_x_darkMode_on") === "true" &&
document.documentElement.classList.add("dark");
</script>
<style>
.pad{
padding:3rem 4rem 0 4rem;
}
</style>
</head>
<body x-data="" class="is-header-blur" x-bind="$store.global.documentBody">
<!-- App preloader-->
<div class="app-preloader fixed z-50 grid h-full w-full place-content-center bg-slate-50 dark:bg-navy-900">
<div class="app-preloader-inner relative inline-block size-48"></div>
</div>
<!-- Page Wrapper -->
<div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak="">
<!-- Sidebar -->
<div class="sidebar print:hidden">
<!-- Main Sidebar -->
<div class="main-sidebar">
<div class="flex h-full w-full flex-col items-center border-r border-slate-150 bg-white dark:border-navy-700 dark:bg-navy-800">
<!-- Application Logo -->
<div class="flex pt-4">
<!-- Profile -->
<div x-data="usePopper({placement:'right-end',offset:12})" @click.outside="isShowPopper && (isShowPopper = false)" class="flex">
<button @click="isShowPopper = !isShowPopper" x-ref="popperRef" class="avatar size-12">
<img class="rounded-full" src="images/avatar/avatar-12.jpg" alt="avatar">
<span class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-success dark:border-navy-700"></span>
</button>
<div :class="isShowPopper && 'show'" class="popper-root fixed" x-ref="popperRoot">
<div class="popper-box w-64 rounded-lg border border-slate-150 bg-white shadow-soft dark:border-navy-600 dark:bg-navy-700">
<div class="flex items-center space-x-4 rounded-t-lg bg-slate-100 py-5 px-4 dark:bg-navy-800">
<div class="avatar size-14">
<img class="rounded-full" src="images/avatar/avatar-12.jpg" alt="avatar">
</div>
<div>
<a href="#" class="text-base font-medium text-slate-700 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
Patrick Dwamena
</a>
<p class="text-xs text-slate-400 dark:text-navy-300">
Admin
</p>
</div>
</div>
<div class="flex flex-col pt-2 pb-5">
<a href="homepage.html" class="group flex items-center space-x-3 py-2 px-4 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600">
<div class="flex size-8 items-center justify-center rounded-lg bg-error text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</div>
<div>
<h2 class="font-medium text-slate-700 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-100 dark:group-hover:text-accent-light dark:group-focus:text-accent-light">
Home Page
</h2>
<div class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Go to home page
</div>
</div>
</a>
<div class="mt-3 px-4">
<button class="btn h-9 w-full space-x-2 bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Sections Links -->
<div class="is-scrollbar-hidden flex grow flex-col space-y-4 overflow-y-auto pt-6">
<!-- Dashobards -->
<a href="admin_dashboard.html" class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25" x-tooltip.placement.right="'Dashboards'">
<svg class="size-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24">
<path fill="currentColor" fill-opacity=".3" d="M5 14.059c0-1.01 0-1.514.222-1.945.221-.43.632-.724 1.453-1.31l4.163-2.974c.56-.4.842-.601 1.162-.601.32 0 .601.2 1.162.601l4.163 2.974c.821.586 1.232.88 1.453 1.31.222.43.222.935.222 1.945V19c0 .943 0 1.414-.293 1.707C18.414 21 17.943 21 17 21H7c-.943 0-1.414 0-1.707-.293C5 20.414 5 19.943 5 19v-4.94Z"></path>
<path fill="currentColor" d="M3 12.387c0 .267 0 .4.084.441.084.041.19-.04.4-.204l7.288-5.669c.59-.459.885-.688 1.228-.688.343 0 .638.23 1.228.688l7.288 5.669c.21.163.316.245.4.204.084-.04.084-.174.084-.441v-.409c0-.48 0-.72-.102-.928-.101-.208-.291-.355-.67-.65l-7-5.445c-.59-.459-.885-.688-1.228-.688-.343 0-.638.23-1.228.688l-7 5.445c-.379.295-.569.442-.67.65-.102.208-.102.448-.102.928v.409Z"></path>
<path fill="currentColor" d="M11.5 15.5h1A1.5 1.5 0 0 1 14 17v3.5h-4V17a1.5 1.5 0 0 1 1.5-1.5Z"></path>
<path fill="currentColor" d="M17.5 5h-1a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5Z"></path>
</svg>
</a>
<!-- Apps -->
<!-- Admin Bookings -->
<a href="admin_bookings.html" class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25" x-tooltip.placement.right="'Manage Bookings'">
<svg class="size-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.85714 3H4.14286C3.51167 3 3 3.51167 3 4.14286V9.85714C3 10.4883 3.51167 11 4.14286 11H9.85714C10.4883 11 11 10.4883 11 9.85714V4.14286C11 3.51167 10.4883 3 9.85714 3Z" fill="currentColor"></path>
<path d="M9.85714 12.8999H4.14286C3.51167 12.8999 3 13.4116 3 14.0428V19.757C3 20.3882 3.51167 20.8999 4.14286 20.8999H9.85714C10.4883 20.8999 11 20.3882 11 19.757V14.0428C11 13.4116 10.4883 12.8999 9.85714 12.8999Z" fill="currentColor" fill-opacity="0.3"></path>
<path d="M19.757 3H14.0428C13.4116 3 12.8999 3.51167 12.8999 4.14286V9.85714C12.8999 10.4883 13.4116 11 14.0428 11H19.757C20.3882 11 20.8999 10.4883 20.8999 9.85714V4.14286C20.8999 3.51167 20.3882 3 19.757 3Z" fill="currentColor" fill-opacity="0.3"></path>
<path d="M19.757 12.8999H14.0428C13.4116 12.8999 12.8999 13.4116 12.8999 14.0428V19.757C12.8999 20.3882 13.4116 20.8999 14.0428 20.8999H19.757C20.3882 20.8999 20.8999 20.3882 20.8999 19.757V14.0428C20.8999 13.4116 20.3882 12.8999 19.757 12.8999Z" fill="currentColor" fill-opacity="0.3"></path>
</svg>
</a>
<!-- My Bookings -->
<a href="admin_customer_bookings.html" class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25" x-tooltip.placement.right="'My Bookings'">
<svg class="size-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-opacity="0.5" d="M14.2498 16C14.2498 17.5487 13.576 18.9487 12.4998 19.9025C11.5723 20.7425 10.3473 21.25 8.99976 21.25C6.10351 21.25 3.74976 18.8962 3.74976 16C3.74976 13.585 5.39476 11.5375 7.61726 10.9337C8.22101 12.4562 9.51601 13.6287 11.1173 14.0662C11.5548 14.1887 12.0185 14.25 12.4998 14.25C12.981 14.25 13.4448 14.1887 13.8823 14.0662C14.1185 14.6612 14.2498 15.3175 14.2498 16Z" fill="currentColor"></path>
<path d="M17.75 9.00012C17.75 9.68262 17.6187 10.3389 17.3825 10.9339C16.7787 12.4564 15.4837 13.6289 13.8825 14.0664C13.445 14.1889 12.9813 14.2501 12.5 14.2501C12.0187 14.2501 11.555 14.1889 11.1175 14.0664C9.51625 13.6289 8.22125 12.4564 7.6175 10.9339C7.38125 10.3389 7.25 9.68262 7.25 9.00012C7.25 6.10387 9.60375 3.75012 12.5 3.75012C15.3962 3.75012 17.75 6.10387 17.75 9.00012Z" fill="currentColor"></path>
<path fill-opacity="0.3" d="M21.25 16C21.25 18.8962 18.8962 21.25 16 21.25C14.6525 21.25 13.4275 20.7425 12.5 19.9025C13.5763 18.9487 14.25 17.5487 14.25 16C14.25 15.3175 14.1187 14.6612 13.8825 14.0662C15.4837 13.6287 16.7787 12.4562 17.3825 10.9337C19.605 11.5375 21.25 13.585 21.25 16Z" fill="currentColor"></path>
</svg>
</a>
<!-- Forms -->
<a href="admin_forms.html" class="flex size-11 items-center justify-center rounded-lg bg-primary/10 text-primary outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-navy-600 dark:text-accent-light dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" x-tooltip.placement.right="'Manage Forms'">
<svg class="size-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-opacity="0.25" d="M21.0001 16.05V18.75C21.0001 20.1 20.1001 21 18.7501 21H6.6001C6.9691 21 7.3471 20.946 7.6981 20.829C7.7971 20.793 7.89609 20.757 7.99509 20.712C8.31009 20.586 8.61611 20.406 8.88611 20.172C8.96711 20.109 9.05711 20.028 9.13811 19.947L9.17409 19.911L15.2941 13.8H18.7501C20.1001 13.8 21.0001 14.7 21.0001 16.05Z" fill="currentColor"></path>
<path fill-opacity="0.5" d="M17.7324 11.361L15.2934 13.8L9.17334 19.9111C9.80333 19.2631 10.1993 18.372 10.1993 17.4V8.70601L12.6384 6.26701C13.5924 5.31301 14.8704 5.31301 15.8244 6.26701L17.7324 8.17501C18.6864 9.12901 18.6864 10.407 17.7324 11.361Z" fill="currentColor"></path>
<path d="M7.95 3H5.25C3.9 3 3 3.9 3 5.25V17.4C3 17.643 3.02699 17.886 3.07199 18.12C3.09899 18.237 3.12599 18.354 3.16199 18.471C3.20699 18.606 3.252 18.741 3.306 18.867C3.315 18.876 3.31501 18.885 3.31501 18.885C3.32401 18.885 3.32401 18.885 3.31501 18.894C3.44101 19.146 3.585 19.389 3.756 19.614C3.855 19.731 3.95401 19.839 4.05301 19.947C4.15201 20.055 4.26 20.145 4.377 20.235L4.38601 20.244C4.61101 20.415 4.854 20.559 5.106 20.685C5.115 20.676 5.11501 20.676 5.11501 20.685C5.25001 20.748 5.385 20.793 5.529 20.838C5.646 20.874 5.76301 20.901 5.88001 20.928C6.11401 20.973 6.357 21 6.6 21C6.969 21 7.347 20.946 7.698 20.829C7.797 20.793 7.89599 20.757 7.99499 20.712C8.30999 20.586 8.61601 20.406 8.88601 20.172C8.96701 20.109 9.05701 20.028 9.13801 19.947L9.17399 19.911C9.80399 19.263 10.2 18.372 10.2 17.4V5.25C10.2 3.9 9.3 3 7.95 3ZM6.6 18.75C5.853 18.75 5.25 18.147 5.25 17.4C5.25 16.653 5.853 16.05 6.6 16.05C7.347 16.05 7.95 16.653 7.95 17.4C7.95 18.147 7.347 18.75 6.6 18.75Z" fill="currentColor"></path>
</svg>
</a>
<!-- Submit Forms -->
<a href="admin_customer_forms.html"
class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
x-tooltip.placement.right="'Submit Forms'">
<svg class="size-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3111 14.75H5.03356C3.36523 14.75 2.30189 12.9625 3.10856 11.4958L5.24439 7.60911L7.24273 3.96995C8.07689 2.45745 10.2586 2.45745 11.0927 3.96995L13.1002 7.60911L14.0627 9.35995L15.2361 11.4958C16.0427 12.9625 14.9794 14.75 13.3111 14.75Z" fill="currentColor"></path>
<path fill-opacity="0.3" d="M21.1667 15.2083C21.1667 18.4992 18.4992 21.1667 15.2083 21.1667C11.9175 21.1667 9.25 18.4992 9.25 15.2083C9.25 15.0525 9.25917 14.9058 9.26833 14.75H13.3108C14.9792 14.75 16.0425 12.9625 15.2358 11.4958L14.0625 9.36C14.4292 9.28666 14.8142 9.25 15.2083 9.25C18.4992 9.25 21.1667 11.9175 21.1667 15.2083Z" fill="currentColor"></path>
</svg>
</a>
<!-- Chat -->
<a href="admin_chat.html"
class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
x-tooltip.placement.right="'Chat'">
<svg xmlns="http://www.w3.org/2000/svg"
class="size-7"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M8 10h.01M12 10h.01M16 10h.01
M21 12c0 4.418-4.03 8-9 8a9.009 9.009 0 01-5-1.563
l-4.223.885.898-4.21A8.962 8.962 0 013 12
c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</a>
<!-- Users -->
<a href="manage_users.html"
class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
x-tooltip.placement.right="'Manage Users'">
<svg xmlns="http://www.w3.org/2000/svg"
class="size-7"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M5.121 17.804A9 9 0 1118.879 6.196 9 9 0 015.12 17.804z"/>
<path stroke-linecap="round"
stroke-linejoin="round"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</a>
<!-- Cars -->
<a href="manage_cars.html"
class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
x-tooltip.placement.right="'Manage Cars'">
<svg xmlns="http://www.w3.org/2000/svg"
class="size-7"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 13l2-4h14l2 4v6a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-6z"/>
<path stroke-linecap="round" stroke-linejoin="round"
d="M7 17a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
</a>
</div>
<!-- Bottom Links -->
<div class="flex flex-col items-center space-y-3 py-3">
<!-- Settings -->
<a href="edit_profile.html" class="flex size-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg class="size-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-opacity="0.3" fill="currentColor" d="M2 12.947v-1.771c0-1.047.85-1.913 1.899-1.913 1.81 0 2.549-1.288 1.64-2.868a1.919 1.919 0 0 1 .699-2.607l1.729-.996c.79-.474 1.81-.192 2.279.603l.11.192c.9 1.58 2.379 1.58 3.288 0l.11-.192c.47-.795 1.49-1.077 2.279-.603l1.73.996a1.92 1.92 0 0 1 .699 2.607c-.91 1.58-.17 2.868 1.639 2.868 1.04 0 1.899.856 1.899 1.912v1.772c0 1.047-.85 1.912-1.9 1.912-1.808 0-2.548 1.288-1.638 2.869.52.915.21 2.083-.7 2.606l-1.729.997c-.79.473-1.81.191-2.279-.604l-.11-.191c-.9-1.58-2.379-1.58-3.288 0l-.11.19c-.47.796-1.49 1.078-2.279.605l-1.73-.997a1.919 1.919 0 0 1-.699-2.606c.91-1.58.17-2.869-1.639-2.869A1.911 1.911 0 0 1 2 12.947Z"></path>
<path fill="currentColor" d="M11.995 15.332c1.794 0 3.248-1.464 3.248-3.27 0-1.807-1.454-3.272-3.248-3.272-1.794 0-3.248 1.465-3.248 3.271 0 1.807 1.454 3.271 3.248 3.271Z"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Sidebar Panel -->
<div class="sidebar-panel">
<div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
<!-- Sidebar Panel Header -->
<div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
<p class="text-base tracking-wider text-slate-800 dark:text-navy-100">
Submitted Forms
</p>
<button @click="$store.global.isSidebarExpanded = false" class="btn size-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</div>
<!-- Sidebar Panel Body -->
<div x-data="{expandedItem:null}" class="h-[calc(100%-4.5rem)] overflow-x-hidden pb-6" x-init="$el._x_simplebar = new SimpleBar($el);">
<ul class="flex flex-1 flex-col px-4 font-inter">
<li>
<a x-data="navLink" :class="? 'font-medium text-primary dark:text-accent-light' : 'text-slate-600 hover:text-slate-900 dark:text-navy-200 dark:hover:text-navy-50'" class="flex py-2 text-xs+ tracking-wide outline-none transition-colors duration-300 ease-in-out">
Review all submitted forms — you can reject them for the customer to edit or resubmit, approve them, or delete them.
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- App Header Wrapper-->
<nav class="header before:bg-white dark:before:bg-navy-750 print:hidden">
<!-- App Header -->
<div class="header-container relative flex w-full bg-white dark:bg-navy-750 print:hidden">
<!-- Header Items -->
<div class="flex w-full items-center justify-between">
<!-- Left: Sidebar Toggle Button -->
<div class="size-7">
<button class="menu-toggle ml-0.5 flex size-7 flex-col justify-center space-y-1.5 text-primary outline-none focus:outline-none dark:text-accent-light/80" :class="$store.global.isSidebarExpanded && 'active'" @click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!-- Right: Header buttons -->
<div class="-mr-1.5 flex items-center space-x-2">
<!-- Dark Mode Toggle -->
<button @click="$store.global.isDarkModeEnabled = !$store.global.isDarkModeEnabled" class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg x-show="$store.global.isDarkModeEnabled" x-transition:enter="transition-transform duration-200 ease-out absolute origin-top" x-transition:enter-start="scale-75" x-transition:enter-end="scale-100 static" class="size-6 text-amber-400" fill="currentColor" viewbox="0 0 24 24">
<path d="M11.75 3.412a.818.818 0 01-.07.917 6.332 6.332 0 00-1.4 3.971c0 3.564 2.98 6.494 6.706 6.494a6.86 6.86 0 002.856-.617.818.818 0 011.1 1.047C19.593 18.614 16.218 21 12.283 21 7.18 21 3 16.973 3 11.956c0-4.563 3.46-8.31 7.925-8.948a.818.818 0 01.826.404z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x-show="!$store.global.isDarkModeEnabled" x-transition:enter="transition-transform duration-200 ease-out absolute origin-top" x-transition:enter-start="scale-75" x-transition:enter-end="scale-100 static" class="size-6 text-amber-400" viewbox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
</svg>
</button>
<!-- Monochrome Mode Toggle -->
<button @click="$store.global.isMonochromeModeEnabled = !$store.global.isMonochromeModeEnabled" class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-solid fa-palette bg-gradient-to-r from-sky-400 to-blue-600 bg-clip-text text-lg font-semibold text-transparent"></i>
</button>
<!-- Right Sidebar home page icon -->
<button
@click="window.location.href = 'homepage.html'; $store.global.isRightSidebarExpanded = true"
class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg xmlns="http://www.w3.org/2000/svg" class="size-5.5 text-slate-500 dark:text-navy-100" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div x-data="{
showViewModal: false,
showApproveModal: false,
showRejectModal: false,
showDeleteModal: false,
showSuccessModal: false,
modalTitle: '',
modalText: '',
searchQuery: '',
currentPage: 1,
entriesPerPage: 10,
submissions: [
{ id: 1, avatar: 'images/avatar/avatar-20.jpg', fullName: 'John Doe', email: 'john.doe@example.com', phone: '123-456-7890', dob: '1990-01-15', submittedDate: '2025-07-01', ghanaCardNumber: 'GHA-123456-1', licenseNumber: 'DL12345', bookingReason: 'Vacation trip', emergencyName: 'Jane Doe', emergencyPhone: '098-765-4321', status: 'Pending', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 2, avatar: 'images/avatar/avatar-19.jpg', fullName: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-555-5555', dob: '1985-05-20', submittedDate: '2025-07-02', ghanaCardNumber: 'GHA-987654-2', licenseNumber: 'DL98765', bookingReason: 'Business meeting', emergencyName: 'John Smith', emergencyPhone: '111-222-3333', status: 'Approved', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 3, avatar: 'images/avatar/avatar-18.jpg', fullName: 'Peter Jones', email: 'peter.jones@example.com', phone: '222-333-4444', dob: '1992-11-30', submittedDate: '2025-07-02', ghanaCardNumber: 'GHA-112233-3', licenseNumber: 'DL11223', bookingReason: 'Family visit', emergencyName: 'Mary Jones', emergencyPhone: '444-555-6666', status: 'Rejected', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 4, avatar: 'images/avatar/avatar-11.jpg', fullName: 'Mary Anne', email: 'mary.anne@example.com', phone: '333-444-5555', dob: '1998-03-22', submittedDate: '2025-07-03', ghanaCardNumber: 'GHA-445566-4', licenseNumber: 'DL44556', bookingReason: 'Work commute', emergencyName: 'Chris Anne', emergencyPhone: '666-777-8888', status: 'Pending', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 5, avatar: 'images/avatar/avatar-1.jpg', fullName: 'Chris Green', email: 'chris.green@example.com', phone: '777-888-9999', dob: '1980-07-07', submittedDate: '2025-07-04', ghanaCardNumber: 'GHA-778899-5', licenseNumber: 'DL77889', bookingReason: 'Weekend getaway', emergencyName: 'Pat Green', emergencyPhone: '000-111-2222', status: 'Approved', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 6, avatar: 'images/avatar/avatar-2.jpg', fullName: 'Alex Johnson', email: 'alex.j@example.com', phone: '112-233-4455', dob: '1993-09-19', submittedDate: '2025-07-04', ghanaCardNumber: 'GHA-112233-6', licenseNumber: 'DL11223', bookingReason: 'Airport transfer', emergencyName: 'Sam Johnson', emergencyPhone: '556-677-8899', status: 'Pending', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 7, avatar: 'images/avatar/avatar-3.jpg', fullName: 'Patricia Williams', email: 'pat.w@example.com', phone: '987-654-3210', dob: '1975-12-01', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-987654-7', licenseNumber: 'DL98765', bookingReason: 'Moving houses', emergencyName: 'Michael Williams', emergencyPhone: '012-345-6789', status: 'Rejected', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 8, avatar: 'images/avatar/avatar-20.jpg', fullName: 'Michael Brown', email: 'mike.b@example.com', phone: '555-123-4567', dob: '1982-04-12', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-555123-8', licenseNumber: 'DL55512', bookingReason: 'Event transport', emergencyName: 'Susan Brown', emergencyPhone: '555-765-4321', status: 'Approved', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 9, avatar: 'images/avatar/avatar-19.jpg', fullName: 'Linda Davis', email: 'linda.d@example.com', phone: '234-567-8901', dob: '1991-08-25', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-234567-9', licenseNumber: 'DL23456', bookingReason: 'Personal use', emergencyName: 'Robert Davis', emergencyPhone: '876-543-2109', status: 'Pending', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 10, avatar: 'images/avatar/avatar-18.jpg', fullName: 'James Miller', email: 'james.m@example.com', phone: '890-123-4567', dob: '1989-06-11', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-890123-10', licenseNumber: 'DL89012', bookingReason: 'Road trip', emergencyName: 'Nancy Miller', emergencyPhone: '432-109-8765', status: 'Approved', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 11, avatar: 'images/avatar/avatar-11.jpg', fullName: 'Barbara Wilson', email: 'barb.w@example.com', phone: '678-901-2345', dob: '1978-10-18', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-678901-11', licenseNumber: 'DL67890', bookingReason: 'Business trip', emergencyName: 'David Wilson', emergencyPhone: '109-876-5432', status: 'Pending', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] },
{ id: 12, avatar: 'images/avatar/avatar-1.jpg', fullName: 'Robert Moore', email: 'rob.m@example.com', phone: '901-234-5678', dob: '1995-03-03', submittedDate: '2025-07-05', ghanaCardNumber: 'GHA-901234-12', licenseNumber: 'DL90123', bookingReason: 'Tourism', emergencyName: 'Karen Moore', emergencyPhone: '876-543-2109', status: 'Rejected', ghanaCardFrontPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Front', ghanaCardBackPreview: 'https://via.placeholder.com/400x250.png?text=Ghana+Card+Back', licenseFrontPreview: 'https://via.placeholder.com/400x250.png?text=License+Front', licenseBackPreview: 'https://via.placeholder.com/400x250.png?text=License+Back', otherDocsPreviews: [] }
],
selectedSubmission: {},
formatDate(dateString) {
if (!dateString) return '';
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const date = new Date(dateString);
const correctedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
const day = correctedDate.getDate();
const month = months[correctedDate.getMonth()];
const year = correctedDate.getFullYear();
return `${day} ${month} ${year}`;
},
get filteredSubmissions() {
if (this.searchQuery === '') return this.submissions;
return this.submissions.filter(sub => {
const search = this.searchQuery.toLowerCase();
return sub.fullName.toLowerCase().includes(search) ||
sub.email.toLowerCase().includes(search) ||
sub.phone.toLowerCase().includes(search);
});
},
get totalPages() {
return Math.ceil(this.filteredSubmissions.length / this.entriesPerPage);
},
get paginatedSubmissions() {
const start = (this.currentPage - 1) * this.entriesPerPage;
const end = start + this.entriesPerPage;
return this.filteredSubmissions.slice(start, end);
},
handleSuccess(title, text) {
this.modalTitle = title;
this.modalText = text;
this.showSuccessModal = true;
},
updateStatus(status) {
const index = this.submissions.findIndex(s => s.id === this.selectedSubmission.id);
if (index !== -1) this.submissions[index].status = status;
this.showApproveModal = false;
this.showRejectModal = false;
this.handleSuccess('Status Updated', `The form has been successfully ${status.toLowerCase()}.`);
},
deleteSubmission() {
this.submissions = this.submissions.filter(s => s.id !== this.selectedSubmission.id);
this.showDeleteModal = false;
this.handleSuccess('Form Deleted', 'The submitted form has been successfully deleted.');
},
resetPage() {
this.currentPage = 1;
}
}">
<div class="flex flex-col sm:flex-row items-center justify-between py-5 lg:py-6 gap-4">
<h2 class="text-2xl font-medium text-slate-700 dark:text-navy-50">Submitted Forms</h2>
<div class="flex items-center space-x-4">
<label class="block">
<span class="text-xs+">Show:</span>
<select x-model="entriesPerPage" @change="resetPage()" class="form-select rounded-full px-3 py-1 text-xs+">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</label>
<label class="relative flex">
<input x-model="searchQuery" @input.debounce.300ms="resetPage()" class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70" placeholder="Search..." type="text">
<span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
<i class="fa fa-search"></i>
</span>
</label>
</div>
</div>
<div class="card mt-3">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr>
<th class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Customer</th>
<th class="whitespace-nowrap bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Contact Info</th>
<th class="whitespace-nowrap bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Date of Birth</th>
<th class="whitespace-nowrap bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Date Submitted</th>
<th class="whitespace-nowrap bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Status</th>
<th class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Actions</th>
</tr>
</thead>
<tbody>
<template x-for="submission in paginatedSubmissions" :key="submission.id">
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-3 py-3 lg:px-5">
<div class="flex items-center space-x-4">
<div class="avatar size-10"><img class="rounded-full" :src="submission.avatar" alt="avatar"></div>
<span class="font-medium text-slate-700 dark:text-navy-100" x-text="submission.fullName"></span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-3 lg:px-5">
<div class="flex flex-col"><span x-text="submission.email"></span><span class="text-xs text-slate-500" x-text="submission.phone"></span></div>
</td>
<td class="whitespace-nowrap px-3 py-3 lg:px-5" x-text="formatDate(submission.dob)"></td>
<td class="whitespace-nowrap px-3 py-3 lg:px-5" x-text="formatDate(submission.submittedDate)"></td>
<td class="whitespace-nowrap px-3 py-3 lg:px-5">
<div class="badge" :class="{
'bg-success/10 text-success dark:bg-success/15': submission.status === 'Approved',
'bg-warning/10 text-warning dark:bg-warning/15': submission.status === 'Pending',
'bg-error/10 text-error dark:bg-error/15': submission.status === 'Rejected'
}" x-text="submission.status"></div>
</td>
<td class="whitespace-nowrap px-3 py-3 lg:px-5">
<div class="flex items-center space-x-2">
<button @click="selectedSubmission = submission; showViewModal = true" class="btn size-8 p-0 text-info hover:bg-info/20"><i class="fas fa-eye"></i></button>
<button @click="selectedSubmission = submission; showApproveModal = true" class="btn size-8 p-0 text-success hover:bg-success/20"><i class="fas fa-check"></i></button>
<button @click="selectedSubmission = submission; showRejectModal = true" class="btn size-8 p-0 text-warning hover:bg-warning/20"><i class="fas fa-times"></i></button>
<div x-data="{ tooltip: 'Must reject form before deleting' }" x-tooltip="submission.status === 'Approved' ? tooltip : ''">
<button @click="if(submission.status !== 'Approved') { selectedSubmission = submission; showDeleteModal = true; }" :disabled="submission.status === 'Approved'" class="btn size-8 p-0 text-error hover:bg-error/20" :class="submission.status === 'Approved' && 'opacity-50 cursor-not-allowed'"><i class="fas fa-trash"></i></button>
</div>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<div class="flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5">
<div class="text-xs+">
Showing <span x-text="Math.min((currentPage - 1) * entriesPerPage + 1, filteredSubmissions.length)"></span> to <span x-text="Math.min(currentPage * entriesPerPage, filteredSubmissions.length)"></span> of <span x-text="filteredSubmissions.length"></span> entries
</div>
<ol class="pagination">
<li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
<button @click="if (currentPage > 1) currentPage--" class="flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450" :class="{'pointer-events-none opacity-50': currentPage === 1}">
<i class="fas fa-chevron-left text-sm"></i>
</button>
</li>
<template x-for="page in Array.from({ length: totalPages }, (_, i) => i + 1)">
<li class="bg-slate-150 dark:bg-navy-500">
<button @click="currentPage = page" class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors" :class="currentPage === page ? 'bg-primary text-white dark:bg-accent' : 'hover:bg-slate-300 dark:hover:bg-navy-450'">
<span x-text="page"></span>
</button>
</li>
</template>
<li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
<button @click="if (currentPage < totalPages) currentPage++" class="flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450" :class="{'pointer-events-none opacity-50': currentPage === totalPages}">
<i class="fas fa-chevron-right text-sm"></i>
</button>
</li>
</ol>
</div>
</div>
<!-- Modals -->
<template x-teleport="#x-teleport-target">
<div>
<!-- View Modal -->
<div class="fixed inset-0 z-[100] flex items-center justify-center px-4 py-6" x-show="showViewModal" role="dialog" @keydown.window.escape="showViewModal=false">
<div class="absolute inset-0 bg-slate-900/60" @click="showViewModal=false"></div>
<div class="relative flex w-full max-w-4xl flex-col bg-white rounded-lg shadow-lg dark:bg-navy-700" style="max-height:90vh;">
<div class="flex items-center justify-between bg-slate-200 px-4 py-3 rounded-t-lg dark:bg-navy-800">
<h3 class="font-medium text-slate-700 dark:text-navy-100" x-text="`Submission Details: ${selectedSubmission.fullName}`"></h3>
<button @click="showViewModal=false" class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20"><i class="fas fa-times"></i></button>
</div>
<div class="flex-1 overflow-y-auto p-4 sm:p-5 space-y-4">
<div class="border-b border-slate-200 dark:border-navy-500 pb-4">
<h4 class="font-medium text-lg">Personal Details</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-2">
<p><strong>Full Name:</strong> <span x-text="selectedSubmission.fullName"></span></p>
<p><strong>Email:</strong> <span x-text="selectedSubmission.email"></span></p>
<p><strong>Phone:</strong> <span x-text="selectedSubmission.phone"></span></p>
<p><strong>Date of Birth:</strong> <span x-text="formatDate(selectedSubmission.dob)"></span></p>
</div>
</div>
<div class="border-b border-slate-200 dark:border-navy-500 pb-4">
<h4 class="font-medium text-lg">ID & License Information</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-2">
<p><strong>Ghana Card #:</strong> <span x-text="selectedSubmission.ghanaCardNumber"></span></p>
<p><strong>Driver's License #:</strong> <span x-text="selectedSubmission.licenseNumber"></span></p>
</div>
</div>
<div class="border-b border-slate-200 dark:border-navy-500 pb-4">
<h4 class="font-medium text-lg">Additional Information</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-2">
<div><p><strong>Reason for Rental:</strong> <span x-text="selectedSubmission.bookingReason || 'N/A'"></span></p></div>
<div><p><strong>Emergency Contact:</strong> <span x-text="`${selectedSubmission.emergencyName} (${selectedSubmission.emergencyPhone})` || 'N/A'"></span></p></div>
</div>
</div>
<div>
<h4 class="font-medium text-lg">Uploaded Documents</h4>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-2">
<div class="text-center">
<img :src="selectedSubmission.ghanaCardFrontPreview" class="h-32 w-full object-contain rounded-lg border p-1">
<a :href="selectedSubmission.ghanaCardFrontPreview" download class="btn mt-2 w-full bg-primary/10 text-primary hover:bg-primary/20 text-xs">Download<i class="fas fa-download ml-2"></i></a>
</div>
<div class="text-center">
<img :src="selectedSubmission.ghanaCardBackPreview" class="h-32 w-full object-contain rounded-lg border p-1">
<a :href="selectedSubmission.ghanaCardBackPreview" download class="btn mt-2 w-full bg-primary/10 text-primary hover:bg-primary/20 text-xs">Download<i class="fas fa-download ml-2"></i></a>
</div>
<div class="text-center">
<img :src="selectedSubmission.licenseFrontPreview" class="h-32 w-full object-contain rounded-lg border p-1">
<a :href="selectedSubmission.licenseFrontPreview" download class="btn mt-2 w-full bg-primary/10 text-primary hover:bg-primary/20 text-xs">Download<i class="fas fa-download ml-2"></i></a>
</div>
<div class="text-center">
<img :src="selectedSubmission.licenseBackPreview" class="h-32 w-full object-contain rounded-lg border p-1">
<a :href="selectedSubmission.licenseBackPreview" download class="btn mt-2 w-full bg-primary/10 text-primary hover:bg-primary/20 text-xs">Download<i class="fas fa-download ml-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Action Modals -->
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showApproveModal" role="dialog" @keydown.window.escape="showApproveModal = false">
<div class="absolute inset-0 bg-slate-900/60" @click="showApproveModal=false"></div>
<div class="relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700" x-show="showApproveModal">
<div class="avatar size-20"><i class="fas fa-check-circle text-6xl text-success"></i></div>
<div class="mt-4 px-4 sm:px-12"><h3 class="text-lg font-medium">Approve Submission</h3><p class="mt-1">Are you sure you want to approve this form?</p></div>
<div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div><div class="space-x-3"><button @click="showApproveModal = false" class="btn min-w-[7rem] rounded-full bg-slate-200 font-medium text-slate-700 hover:bg-slate-300">Cancel</button><button @click="updateStatus('Approved')" class="btn min-w-[7rem] rounded-full bg-success font-medium text-white hover:bg-success-focus">Approve</button></div>
</div>
</div>
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showRejectModal" role="dialog" @keydown.window.escape="showRejectModal = false">
<div class="absolute inset-0 bg-slate-900/60" @click="showRejectModal=false"></div>
<div class="relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700" x-show="showRejectModal">
<div class="avatar size-20"><i class="fas fa-times-circle text-6xl text-warning"></i></div>
<div class="mt-4 px-4 sm:px-12"><h3 class="text-lg font-medium">Reject Submission</h3><p class="mt-1">Are you sure you want to reject this form?</p></div>
<div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div><div class="space-x-3"><button @click="showRejectModal = false" class="btn min-w-[7rem] rounded-full bg-slate-200 font-medium text-slate-700 hover:bg-slate-300">Cancel</button><button @click="updateStatus('Rejected')" class="btn min-w-[7rem] rounded-full bg-warning font-medium text-white hover:bg-warning-focus">Reject</button></div>
</div>
</div>
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showDeleteModal" role="dialog" @keydown.window.escape="showDeleteModal = false">
<div class="absolute inset-0 bg-slate-900/60" @click="showDeleteModal=false"></div>
<div class="relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700" x-show="showDeleteModal">
<div class="avatar size-20"><i class="fas fa-trash-alt text-6xl text-error"></i></div>
<div class="mt-4 px-4 sm:px-12"><h3 class="text-lg font-medium">Delete Form</h3><p class="mt-1">Are you sure you want to permanently delete this form?</p></div>
<div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div><div class="space-x-3"><button @click="showDeleteModal = false" class="btn min-w-[7rem] rounded-full bg-slate-200 font-medium text-slate-700 hover:bg-slate-300">Cancel</button><button @click="deleteSubmission()" class="btn min-w-[7rem] rounded-full bg-error font-medium text-white hover:bg-error-focus">Delete</button></div>
</div>
</div>
<!-- Success Modal -->
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showSuccessModal" role="dialog" @keydown.window.escape="showSuccessModal = false">
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur" @click="showSuccessModal=false"></div>
<div class="relative max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5" x-show="showSuccessModal">
<svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div class="mt-4"><h2 class="text-2xl text-slate-700 dark:text-navy-100" x-text="modalTitle"></h2><p class="mt-2" x-text="modalText"></p><button @click="showSuccessModal = false" class="btn mt-6 bg-success font-medium text-white hover:bg-success-focus">Close</button></div>
</div>
</div>
</div>
</template>
</div>
</main>
</div>
<!--
This is a place for Alpine.js Teleport feature
@see https://alpinejs.dev/directives/teleport
-->
<div id="x-teleport-target"></div>
<script>
window.addEventListener("DOMContentLoaded", () => Alpine.start());
</script>
</body>
</html>