Subversion Repositories SmartDukaan

Rev

Rev 32457 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 32457 Rev 37508
Line 1... Line 1...
1 
<style>
 1 
<style>
2 
    .row {
 2 
    .nm-wrapper {
- 
 
 3 
        background: #f5f7fa;
3 
        margin: 0 auto;
 4 
        padding: 20px;
4 
    }
 5 
    }
5 
 
 6 
 
- 
 
 7 
    /* ─── Custom month-grid calendar ─────────────────────────────────── */
6 
    .modal-content {
 8 
    .nc-header {
- 
 
 9 
        display: flex;
7 
        background: white;
 10 
        align-items: center;
- 
 
 11 
        gap: 10px;
- 
 
 12 
        margin-bottom: 12px;
8 
    }
 13 
    }
9 
 
 14 
 
- 
 
 15 
    .nc-title {
- 
 
 16 
        font-size: 18px;
- 
 
 17 
        font-weight: 600;
- 
 
 18 
        color: #111;
- 
 
 19 
        flex: 1;
- 
 
 20 
        text-align: center;
- 
 
 21 
    }
- 
 
 22 
 
- 
 
 23 
    .nc-nav-btn {
- 
 
 24 
        background: #fff;
- 
 
 25 
        border: 1px solid #d1d5db;
- 
 
 26 
        border-radius: 6px;
- 
 
 27 
        padding: 6px 12px;
- 
 
 28 
        cursor: pointer;
- 
 
 29 
        font-size: 14px;
- 
 
 30 
    }
- 
 
 31 
 
- 
 
 32 
    .nc-nav-btn:hover {
- 
 
 33 
        background: #f9fafb;
- 
 
 34 
    }
- 
 
 35 
 
- 
 
 36 
    .nc-nav-btn.today {
- 
 
 37 
        padding: 6px 14px;
- 
 
 38 
    }
- 
 
 39 
 
- 
 
 40 
    .nc-grid {
- 
 
 41 
        width: 100%;
- 
 
 42 
        border-collapse: collapse;
- 
 
 43 
        table-layout: fixed;
- 
 
 44 
    }
- 
 
 45 
 
- 
 
 46 
    .nc-grid th {
- 
 
 47 
        background: #f3f4f6;
- 
 
 48 
        padding: 8px;
- 
 
 49 
        font-size: 11px;
- 
 
 50 
        font-weight: 600;
- 
 
 51 
        letter-spacing: 0.5px;
- 
 
 52 
        color: #6b7280;
- 
 
 53 
        text-transform: uppercase;
- 
 
 54 
        border: 1px solid #e5e7eb;
- 
 
 55 
        text-align: left;
- 
 
 56 
    }
- 
 
 57 
 
- 
 
 58 
    .nc-grid td {
- 
 
 59 
        vertical-align: top;
- 
 
 60 
        border: 1px solid #e5e7eb;
- 
 
 61 
        height: 110px;
- 
 
 62 
        padding: 4px;
- 
 
 63 
        background: #fff;
- 
 
 64 
    }
- 
 
 65 
 
- 
 
 66 
    .nc-grid td.nc-other-month {
- 
 
 67 
        background: #fafbfc;
- 
 
 68 
        color: #9ca3af;
- 
 
 69 
    }
- 
 
 70 
 
- 
 
 71 
    .nc-grid td.nc-today .nc-day-num {
- 
 
 72 
        background: #2563eb;
- 
 
 73 
        color: #fff;
- 
 
 74 
        border-radius: 999px;
- 
 
 75 
        width: 24px;
- 
 
 76 
        height: 24px;
- 
 
 77 
        display: inline-flex;
- 
 
 78 
        align-items: center;
- 
 
 79 
        justify-content: center;
- 
 
 80 
    }
- 
 
 81 
 
- 
 
 82 
    .nc-day-num {
- 
 
 83 
        font-size: 12px;
- 
 
 84 
        font-weight: 600;
- 
 
 85 
        color: #374151;
- 
 
 86 
        margin-bottom: 4px;
- 
 
 87 
        padding: 0 4px;
- 
 
 88 
    }
- 
 
 89 
 
- 
 
 90 
    .nc-events {
- 
 
 91 
        display: flex;
- 
 
 92 
        flex-direction: column;
- 
 
 93 
        gap: 2px;
- 
 
 94 
        overflow-y: auto;
- 
 
 95 
        max-height: 82px;
- 
 
 96 
    }
- 
 
 97 
 
- 
 
 98 
    .nc-event {
- 
 
 99 
        font-size: 11px;
- 
 
 100 
        padding: 2px 6px;
- 
 
 101 
        border-radius: 4px;
- 
 
 102 
        color: #fff;
- 
 
 103 
        cursor: pointer;
- 
 
 104 
        overflow: hidden;
- 
 
 105 
        text-overflow: ellipsis;
- 
 
 106 
        white-space: nowrap;
- 
 
 107 
    }
- 
 
 108 
 
10 
    .modelHeaderCustom {
 109 
    .nc-event:hover {
- 
 
 110 
        opacity: 0.9;
- 
 
 111 
    }
- 
 
 112 
 
- 
 
 113 
    .nc-more {
- 
 
 114 
        font-size: 10px;
- 
 
 115 
        color: #6b7280;
- 
 
 116 
        padding: 2px 6px;
- 
 
 117 
        cursor: pointer;
- 
 
 118 
    }
- 
 
 119 
 
- 
 
 120 
    .nm-crumb {
- 
 
 121 
        color: #374151;
11 
        font-size: 14px;
 122 
        font-size: 14px;
- 
 
 123 
        margin: 4px 0 16px;
- 
 
 124 
        padding: 8px 12px;
- 
 
 125 
        background: #fff;
- 
 
 126 
        border-radius: 6px;
- 
 
 127 
        border: 1px solid #e5e7eb;
- 
 
 128 
    }
- 
 
 129 
 
- 
 
 130 
    .nm-crumb a {
- 
 
 131 
        color: #2563eb;
- 
 
 132 
    }
- 
 
 133 
 
- 
 
 134 
    /* Tabs */
- 
 
 135 
    .nm-tabs {
- 
 
 136 
        display: flex;
- 
 
 137 
        gap: 4px;
- 
 
 138 
        border-bottom: 1px solid #e5e7eb;
- 
 
 139 
        margin-bottom: 16px;
- 
 
 140 
    }
- 
 
 141 
 
- 
 
 142 
    .nm-tab {
- 
 
 143 
        padding: 10px 18px;
- 
 
 144 
        color: #6b7280;
- 
 
 145 
        cursor: pointer;
- 
 
 146 
        text-decoration: none;
- 
 
 147 
        border-bottom: 2px solid transparent;
12 
        font-weight: bold;
 148 
        font-weight: 500;
- 
 
 149 
        font-size: 14px;
- 
 
 150 
    }
- 
 
 151 
 
- 
 
 152 
    .nm-tab:hover {
- 
 
 153 
        color: #111827;
- 
 
 154 
        text-decoration: none;
- 
 
 155 
    }
- 
 
 156 
 
- 
 
 157 
    .nm-tab.active {
- 
 
 158 
        color: #2563eb;
- 
 
 159 
        border-bottom-color: #2563eb;
- 
 
 160 
    }
- 
 
 161 
 
- 
 
 162 
    .nm-tab-badge {
- 
 
 163 
        background: #e5e7eb;
- 
 
 164 
        color: #374151;
- 
 
 165 
        padding: 2px 8px;
- 
 
 166 
        border-radius: 10px;
- 
 
 167 
        font-size: 11px;
- 
 
 168 
        margin-left: 6px;
- 
 
 169 
    }
- 
 
 170 
 
- 
 
 171 
    .nm-tab-content {
- 
 
 172 
        display: none;
13 
    }
 173 
    }
14 
 
 174 
 
15 
    .border-highlight {
 175 
    .nm-tab-content.active {
16 
        border: 3px solid red;
 176 
        display: block;
17 
    }
 177 
    }
18 
 
 178 
 
19 
    hr {
 179 
    .nm-card {
20 
        background-color: #007aff;
 180 
        background: #fff;
- 
 
 181 
        border: 1px solid #e5e7eb;
21 
        border: none;
 182 
        border-radius: 8px;
22 
        height: 1px;
 183 
        padding: 20px;
23 
        background: #007aff;
 184 
        margin-bottom: 16px;
24 
    }
 185 
    }
25 
 
 186 
 
- 
 
 187 
    .nm-card-title {
- 
 
 188 
        font-size: 18px;
- 
 
 189 
        font-weight: 600;
- 
 
 190 
        margin: 0 0 4px 0;
- 
 
 191 
        color: #111827;
- 
 
 192 
    }
- 
 
 193 
 
26 
    .control-label {
 194 
    .nm-section-label {
- 
 
 195 
        font-size: 11px;
- 
 
 196 
        letter-spacing: 0.5px;
- 
 
 197 
        color: #6b7280;
- 
 
 198 
        font-weight: 600;
- 
 
 199 
        margin: 20px 0 12px 0;
- 
 
 200 
        text-transform: uppercase;
- 
 
 201 
    }
- 
 
 202 
 
- 
 
 203 
    .nm-section-label:first-child {
27 
        margin-top: 0;
 204 
        margin-top: 0;
- 
 
 205 
    }
- 
 
 206 
 
- 
 
 207 
    .nm-format-row {
- 
 
 208 
        display: flex;
- 
 
 209 
        gap: 12px;
28 
        margin-bottom: 0;
 210 
        margin-bottom: 16px;
- 
 
 211 
    }
- 
 
 212 
 
- 
 
 213 
    .nm-format {
- 
 
 214 
        flex: 1;
- 
 
 215 
        border: 1px solid #e5e7eb;
- 
 
 216 
        border-radius: 8px;
29 
        padding-top: 7px;
 217 
        padding: 14px;
- 
 
 218 
        cursor: pointer;
- 
 
 219 
        background: #fff;
- 
 
 220 
        display: flex;
- 
 
 221 
        align-items: center;
- 
 
 222 
        gap: 12px;
- 
 
 223 
    }
- 
 
 224 
 
- 
 
 225 
    .nm-format.active {
- 
 
 226 
        border-color: #2563eb;
- 
 
 227 
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
- 
 
 228 
    }
- 
 
 229 
 
- 
 
 230 
    .nm-format .nm-format-icon {
- 
 
 231 
        width: 34px;
- 
 
 232 
        height: 34px;
- 
 
 233 
        border-radius: 8px;
- 
 
 234 
        background: #eff6ff;
- 
 
 235 
        color: #2563eb;
- 
 
 236 
        display: flex;
- 
 
 237 
        align-items: center;
- 
 
 238 
        justify-content: center;
- 
 
 239 
        font-size: 16px;
- 
 
 240 
    }
- 
 
 241 
 
- 
 
 242 
    .nm-format-name {
- 
 
 243 
        font-weight: 600;
- 
 
 244 
        font-size: 14px;
- 
 
 245 
        color: #111827;
- 
 
 246 
    }
- 
 
 247 
 
- 
 
 248 
    .nm-format-sub {
- 
 
 249 
        font-size: 12px;
- 
 
 250 
        color: #6b7280;
- 
 
 251 
    }
- 
 
 252 
 
- 
 
 253 
    .nm-format-full {
- 
 
 254 
        flex-basis: 100%;
- 
 
 255 
        text-decoration: none;
- 
 
 256 
    }
- 
 
 257 
 
- 
 
 258 
    .nm-format-full:hover {
- 
 
 259 
        border-color: #2563eb;
- 
 
 260 
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
- 
 
 261 
        text-decoration: none;
- 
 
 262 
    }
- 
 
 263 
 
- 
 
 264 
    .nm-format-full .nm-format-arrow {
- 
 
 265 
        margin-left: auto;
- 
 
 266 
        color: #2563eb;
- 
 
 267 
        font-size: 18px;
- 
 
 268 
    }
- 
 
 269 
 
- 
 
 270 
    .nm-field {
- 
 
 271 
        margin-bottom: 16px;
- 
 
 272 
    }
- 
 
 273 
 
- 
 
 274 
    .nm-field-label {
- 
 
 275 
        display: block;
- 
 
 276 
        font-size: 13px;
30 
        font-weight: bold;
 277 
        font-weight: 500;
- 
 
 278 
        color: #374151;
- 
 
 279 
        margin-bottom: 6px;
- 
 
 280 
    }
- 
 
 281 
 
- 
 
 282 
    .nm-field-label .nm-req {
- 
 
 283 
        color: #dc2626;
- 
 
 284 
    }
- 
 
 285 
 
- 
 
 286 
    .nm-input, .nm-select, .nm-textarea {
- 
 
 287 
        width: 100%;
- 
 
 288 
        padding: 8px 10px;
- 
 
 289 
        border: 1px solid #d1d5db;
- 
 
 290 
        border-radius: 6px;
31 
        font-size: 14px;
 291 
        font-size: 14px;
- 
 
 292 
        background: #fff;
- 
 
 293 
        color: #111827;
- 
 
 294 
    }
- 
 
 295 
 
- 
 
 296 
    .nm-textarea {
- 
 
 297 
        min-height: 84px;
- 
 
 298 
        resize: vertical;
32 
    }
 299 
    }
33 
 
 300 
 
34 
    .form-group {
 - 
 
35 
        border-bottom: 1px solid #eff2f7;
 301 
    .nm-input:focus, .nm-select:focus, .nm-textarea:focus {
36 
        padding-bottom: 15px;
 302 
        outline: 2px solid #93c5fd;
37 
        margin-bottom: 15px;
 303 
        border-color: #2563eb;
38 
    }
 304 
    }
39 
 
 305 
 
40 
    .right {
 306 
    .nm-charcount {
41 
        float: right;
 307 
        float: right;
- 
 
 308 
        font-size: 12px;
- 
 
 309 
        color: #6b7280;
42 
    }
 310 
    }
43 
 
 311 
 
44 
    .form-control {
 312 
    .nm-two-col {
- 
 
 313 
        display: grid;
- 
 
 314 
        grid-template-columns: 1fr 1fr;
45 
        color: black;
 315 
        gap: 16px;
- 
 
 316 
    }
46 
 
 317 
 
- 
 
 318 
    .nm-help {
- 
 
 319 
        font-size: 12px;
- 
 
 320 
        color: #6b7280;
- 
 
 321 
        margin-top: 4px;
47 
    }
 322 
    }
48 
 
 323 
 
- 
 
 324 
    .nm-actions {
- 
 
 325 
        display: flex;
- 
 
 326 
        gap: 10px;
- 
 
 327 
        justify-content: flex-end;
- 
 
 328 
        padding-top: 8px;
- 
 
 329 
    }
- 
 
 330 
 
- 
 
 331 
    .nm-btn {
- 
 
 332 
        padding: 9px 16px;
- 
 
 333 
        border-radius: 6px;
- 
 
 334 
        font-size: 14px;
- 
 
 335 
        font-weight: 500;
- 
 
 336 
        border: 1px solid transparent;
- 
 
 337 
        cursor: pointer;
- 
 
 338 
    }
- 
 
 339 
 
- 
 
 340 
    .nm-btn-outline {
- 
 
 341 
        background: #fff;
- 
 
 342 
        border-color: #d1d5db;
- 
 
 343 
        color: #374151;
- 
 
 344 
    }
- 
 
 345 
 
49 
    .table-align-center {
 346 
    .nm-btn-outline:hover {
- 
 
 347 
        background: #f9fafb;
- 
 
 348 
    }
- 
 
 349 
 
- 
 
 350 
    .nm-btn-primary {
- 
 
 351 
        background: #2563eb;
- 
 
 352 
        color: #fff;
- 
 
 353 
    }
- 
 
 354 
 
- 
 
 355 
    .nm-btn-primary:hover {
- 
 
 356 
        background: #1d4ed8;
- 
 
 357 
    }
- 
 
 358 
 
- 
 
 359 
    .nm-panel {
- 
 
 360 
        display: none;
- 
 
 361 
    }
- 
 
 362 
 
- 
 
 363 
    .nm-panel.active {
- 
 
 364 
        display: block;
- 
 
 365 
    }
- 
 
 366 
 
- 
 
 367 
    .nm-preview {
- 
 
 368 
        display: none;
- 
 
 369 
    }
- 
 
 370 
 
- 
 
 371 
    .nm-preview.active {
- 
 
 372 
        display: block;
- 
 
 373 
    }
- 
 
 374 
 
- 
 
 375 
    .nm-preview-label {
- 
 
 376 
        font-size: 11px;
- 
 
 377 
        letter-spacing: 0.6px;
- 
 
 378 
        color: #6b7280;
- 
 
 379 
        font-weight: 600;
- 
 
 380 
        margin-bottom: 10px;
- 
 
 381 
        text-transform: uppercase;
- 
 
 382 
    }
- 
 
 383 
 
- 
 
 384 
    /* Push preview */
- 
 
 385 
    .nm-phone {
- 
 
 386 
        background: linear-gradient(160deg, #6b7ba0, #a97b8e);
- 
 
 387 
        border-radius: 20px;
- 
 
 388 
        padding: 34px 18px 22px 18px;
- 
 
 389 
        min-height: 360px;
- 
 
 390 
        position: relative;
- 
 
 391 
        overflow: hidden;
- 
 
 392 
    }
- 
 
 393 
 
- 
 
 394 
    .nm-phone-notch {
- 
 
 395 
        position: absolute;
- 
 
 396 
        top: 12px;
- 
 
 397 
        left: 50%;
- 
 
 398 
        transform: translateX(-50%);
- 
 
 399 
        width: 78px;
- 
 
 400 
        height: 22px;
- 
 
 401 
        background: #111;
- 
 
 402 
        border-radius: 12px;
- 
 
 403 
    }
- 
 
 404 
 
- 
 
 405 
    .nm-phone-time {
50 
        text-align: center;
 406 
        text-align: center;
- 
 
 407 
        color: #fff;
- 
 
 408 
        font-weight: 300;
- 
 
 409 
        font-size: 44px;
- 
 
 410 
        margin-top: 26px;
51 
    }
 411 
    }
52 
 
 412 
 
- 
 
 413 
    .nm-phone-date {
- 
 
 414 
        text-align: center;
- 
 
 415 
        color: #fff;
- 
 
 416 
        font-size: 14px;
- 
 
 417 
        margin-top: -4px;
53 
</style>
 418 
    }
54 
 
 419 
 
- 
 
 420 
    .nm-noti-card {
- 
 
 421 
        background: rgba(255, 255, 255, 0.96);
- 
 
 422 
        border-radius: 12px;
- 
 
 423 
        padding: 12px;
- 
 
 424 
        margin-top: 60px;
55 
<script>
 425 
    }
56 
 
 426 
 
57 
    $(document).ready(function () {
 - 
 
58 
        $('#fofo-users').multiselect({
 - 
 
59 
            includeSelectAllOption: true,
 - 
 
60 
            multiple: true,
 - 
 
61 
            maxHeight: 200,
 - 
 
62 
            buttonWidth: '180px',
 - 
 
63 
            numberDisplayed: 1,
 427 
    .nm-noti-head {
64 
            nonSelectedText: 'Users',
 - 
 
65 
            nSelectedText: ' - Users Selected',
 - 
 
66 
            allSelectedText: 'All Users Selected',
 - 
 
67 
            enableFiltering: true,
 - 
 
68 
            enableCaseInsensitiveFiltering: true
 - 
 
69 
        });
 - 
 
70 
 
 - 
 
71 
        $('#state-users').multiselect({
 - 
 
72 
            includeSelectAllOption: true,
 - 
 
73 
            multiple: true,
 428 
        display: flex;
74 
            maxHeight: 200,
 - 
 
75 
            buttonWidth: '180px',
 - 
 
76 
            numberDisplayed: 1,
 - 
 
77 
            nonSelectedText: 'Users',
 - 
 
78 
            nSelectedText: ' - Users Selected',
 - 
 
79 
            allSelectedText: 'All Users Selected',
 - 
 
80 
            enableFiltering: true,
 - 
 
81 
            enableCaseInsensitiveFiltering: true
 - 
 
82 
        });
 - 
 
83 
 
 - 
 
84 
        $('#internal-users').multiselect({
 - 
 
85 
            includeSelectAllOption: true,
 - 
 
86 
            multiple: true,
 429 
        align-items: center;
87 
            maxHeight: 200,
 - 
 
88 
            buttonWidth: '180px',
 - 
 
89 
            numberDisplayed: 1,
 - 
 
90 
            nonSelectedText: 'Users',
 - 
 
91 
            nSelectedText: ' - Users Selected',
 - 
 
92 
            allSelectedText: 'All Users Selected',
 - 
 
93 
            enableFiltering: true,
 - 
 
94 
            enableCaseInsensitiveFiltering: true
 - 
 
95 
        });
 430 
        gap: 8px;
96 
    });
 431 
    }
97 
 
 432 
 
- 
 
 433 
    .nm-noti-app-icon {
- 
 
 434 
        width: 28px;
- 
 
 435 
        height: 28px;
- 
 
 436 
        background: #4a80c8;
- 
 
 437 
        border-radius: 7px;
- 
 
 438 
        color: #fff;
- 
 
 439 
        display: flex;
- 
 
 440 
        align-items: center;
- 
 
 441 
        justify-content: center;
- 
 
 442 
        font-weight: 700;
- 
 
 443 
        font-size: 12px;
- 
 
 444 
    }
98 
 
 445 
 
99 
    $(function () {
 446 
    .nm-noti-app-name {
- 
 
 447 
        font-size: 12px;
- 
 
 448 
        font-weight: 600;
- 
 
 449 
        color: #333;
100 
        let pickerElement = $('input[name="dateTime"]');
 450 
        text-transform: uppercase;
101 
        pickerElement.daterangepicker(getSingleDatePicker());
 451 
        letter-spacing: 0.5px;
- 
 
 452 
        flex: 1;
102 
    });
 453 
    }
103 
 
 454 
 
- 
 
 455 
    .nm-noti-when {
- 
 
 456 
        font-size: 12px;
- 
 
 457 
        color: #666;
104 
</script>
 458 
    }
105 
 
 459 
 
- 
 
 460 
    .nm-noti-title {
- 
 
 461 
        font-weight: 700;
- 
 
 462 
        font-size: 14px;
- 
 
 463 
        color: #111;
- 
 
 464 
        margin-top: 6px;
- 
 
 465 
        line-height: 1.3;
- 
 
 466 
    }
- 
 
 467 
 
- 
 
 468 
    .nm-noti-body {
- 
 
 469 
        font-size: 13px;
- 
 
 470 
        color: #444;
- 
 
 471 
        margin-top: 3px;
- 
 
 472 
        line-height: 1.35;
- 
 
 473 
    }
- 
 
 474 
 
- 
 
 475 
    /* Popup preview */
- 
 
 476 
    .nm-popup-screen {
- 
 
 477 
        background: #111827;
- 
 
 478 
        border-radius: 20px;
- 
 
 479 
        min-height: 360px;
- 
 
 480 
        position: relative;
- 
 
 481 
        padding: 22px;
- 
 
 482 
        display: flex;
- 
 
 483 
        align-items: center;
- 
 
 484 
        justify-content: center;
- 
 
 485 
        overflow: hidden;
- 
 
 486 
    }
- 
 
 487 
 
- 
 
 488 
    /* Faux app background — a gradient + mock UI blocks that get blurred so the popup
- 
 
 489 
       sits on top of "something that looks like the app" instead of a solid black slab. */
- 
 
 490 
    .nm-popup-bg {
- 
 
 491 
        position: absolute;
- 
 
 492 
        inset: 0;
- 
 
 493 
        background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 40%, #ede9fe 100%);
- 
 
 494 
        filter: blur(6px);
- 
 
 495 
    }
- 
 
 496 
 
- 
 
 497 
    .nm-popup-bg::before, .nm-popup-bg::after {
- 
 
 498 
        content: '';
- 
 
 499 
        position: absolute;
- 
 
 500 
        left: 8%;
- 
 
 501 
        right: 8%;
- 
 
 502 
        background: rgba(255, 255, 255, 0.85);
- 
 
 503 
        border-radius: 12px;
- 
 
 504 
    }
- 
 
 505 
 
- 
 
 506 
    .nm-popup-bg::before {
- 
 
 507 
        top: 12%;
- 
 
 508 
        height: 40px;
- 
 
 509 
    }
- 
 
 510 
 
106 
<section class="wrapper">
 511 
    .nm-popup-bg::after {
- 
 
 512 
        bottom: 12%;
- 
 
 513 
        height: 120px;
- 
 
 514 
    }
- 
 
 515 
 
- 
 
 516 
    .nm-popup-dim {
- 
 
 517 
        position: absolute;
- 
 
 518 
        inset: 0;
- 
 
 519 
        background: rgba(17, 24, 39, 0.55);
- 
 
 520 
    }
- 
 
 521 
 
- 
 
 522 
    .nm-popup-card {
- 
 
 523 
        background: #fff;
- 
 
 524 
        border-radius: 14px;
- 
 
 525 
        padding: 18px;
- 
 
 526 
        width: 92%;
- 
 
 527 
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
- 
 
 528 
        position: relative;
- 
 
 529 
        z-index: 1;
- 
 
 530 
    }
- 
 
 531 
 
- 
 
 532 
    .nm-popup-image {
- 
 
 533 
        width: 100%;
- 
 
 534 
        max-height: 140px;
- 
 
 535 
        object-fit: cover;
- 
 
 536 
        border-radius: 10px;
- 
 
 537 
        margin-bottom: 12px;
107 
    <div class="row">
 538 
        display: block;
- 
 
 539 
    }
- 
 
 540 
 
- 
 
 541 
    .nm-popup-close {
- 
 
 542 
        position: absolute;
- 
 
 543 
        top: 12px;
- 
 
 544 
        right: 12px;
- 
 
 545 
        background: #4b5563;
- 
 
 546 
        color: #fff;
- 
 
 547 
        width: 22px;
- 
 
 548 
        height: 22px;
- 
 
 549 
        border-radius: 50%;
- 
 
 550 
        display: flex;
- 
 
 551 
        align-items: center;
- 
 
 552 
        justify-content: center;
- 
 
 553 
        font-size: 14px;
- 
 
 554 
        cursor: default;
- 
 
 555 
    }
- 
 
 556 
 
- 
 
 557 
    .nm-popup-title {
- 
 
 558 
        font-weight: 700;
- 
 
 559 
        font-size: 15px;
- 
 
 560 
        color: #111;
- 
 
 561 
    }
- 
 
 562 
 
- 
 
 563 
    .nm-popup-body {
- 
 
 564 
        font-size: 13px;
- 
 
 565 
        color: #4b5563;
- 
 
 566 
        margin-top: 6px;
- 
 
 567 
        line-height: 1.4;
- 
 
 568 
    }
- 
 
 569 
 
- 
 
 570 
    .nm-popup-cta {
108 
        <div class="col-lg-12">
 571 
        display: block;
- 
 
 572 
        background: #2563eb;
- 
 
 573 
        color: #fff;
- 
 
 574 
        padding: 10px;
- 
 
 575 
        border-radius: 10px;
- 
 
 576 
        text-align: center;
- 
 
 577 
        margin-top: 14px;
- 
 
 578 
        font-weight: 600;
- 
 
 579 
        font-size: 14px;
- 
 
 580 
    }
- 
 
 581 
 
- 
 
 582 
    /* Story preview */
- 
 
 583 
    .nm-story-screen {
- 
 
 584 
        background: #111;
- 
 
 585 
        border-radius: 20px;
- 
 
 586 
        min-height: 360px;
- 
 
 587 
        position: relative;
- 
 
 588 
        padding: 18px;
- 
 
 589 
        color: #fff;
- 
 
 590 
        display: flex;
- 
 
 591 
        flex-direction: column;
- 
 
 592 
    }
- 
 
 593 
 
- 
 
 594 
    .nm-story-head {
- 
 
 595 
        display: flex;
- 
 
 596 
        align-items: center;
- 
 
 597 
        gap: 8px;
- 
 
 598 
    }
- 
 
 599 
 
- 
 
 600 
    .nm-story-body {
- 
 
 601 
        flex: 1;
- 
 
 602 
        display: flex;
- 
 
 603 
        align-items: center;
- 
 
 604 
        justify-content: center;
- 
 
 605 
        color: #6b7280;
- 
 
 606 
        font-size: 13px;
- 
 
 607 
        text-align: center;
- 
 
 608 
        padding: 10px;
- 
 
 609 
    }
- 
 
 610 
 
- 
 
 611 
    .nm-story-title {
- 
 
 612 
        font-weight: 700;
- 
 
 613 
        font-size: 15px;
- 
 
 614 
        margin-top: 8px;
- 
 
 615 
    }
- 
 
 616 
 
- 
 
 617 
    .nm-story-msg {
- 
 
 618 
        font-size: 12px;
- 
 
 619 
        color: #d1d5db;
- 
 
 620 
        margin-top: 4px;
- 
 
 621 
        line-height: 1.4;
- 
 
 622 
    }
- 
 
 623 
 
- 
 
 624 
    .nm-story-cta {
- 
 
 625 
        border: 1px solid #fff;
- 
 
 626 
        border-radius: 26px;
- 
 
 627 
        padding: 10px;
- 
 
 628 
        text-align: center;
- 
 
 629 
        margin-top: 12px;
- 
 
 630 
        font-weight: 600;
- 
 
 631 
        font-size: 13px;
- 
 
 632 
    }
- 
 
 633 
 
- 
 
 634 
    .nm-preview-cap {
- 
 
 635 
        text-align: center;
- 
 
 636 
        font-size: 12px;
- 
 
 637 
        color: #6b7280;
- 
 
 638 
        margin-top: 8px;
- 
 
 639 
    }
- 
 
 640 
 
- 
 
 641 
    /* Desktop: keep the Live Preview + Summary column pinned as the form scrolls.
109 
            <h3 class="page-header"><i class="icon_document_alt"></i>SEND NOTIFICATION</h3>
 642 
       Bootstrap 3 rows use floats, so cols don't match heights — sticky then has
- 
 
 643 
       no room to move within its parent. Force flex on the compose row so
- 
 
 644 
       col-lg-4 stretches to match col-lg-8, giving sticky the scroll room it needs. */
- 
 
 645 
    @media (min-width: 992px) {
- 
 
 646 
        .nm-compose-row {
- 
 
 647 
            display: flex;
- 
 
 648 
            flex-wrap: wrap;
- 
 
 649 
        }
- 
 
 650 
 
- 
 
 651 
        .nm-compose-row > [class*="col-"] {
- 
 
 652 
            display: flex;
110 
            <ol class="breadcrumb">
 653 
            flex-direction: column;
- 
 
 654 
        }
- 
 
 655 
 
- 
 
 656 
        .nm-preview-sticky {
- 
 
 657 
            position: sticky;
- 
 
 658 
            top: 16px;
111 
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
 659 
            align-self: flex-start; /* pin to top of the flex col, don't stretch */
- 
 
 660 
        }
- 
 
 661 
    }
- 
 
 662 
 
112 
                <li><i class="icon_document_alt"></i>SEND NOTIFICATION</li>
 663 
    /* Mobile: preview column is hidden inline; floating button opens it as a modal. */
- 
 
 664 
    .nm-preview-fab {
- 
 
 665 
        display: none;
- 
 
 666 
        position: fixed;
- 
 
 667 
        right: 16px;
- 
 
 668 
        bottom: 16px;
- 
 
 669 
        z-index: 1030;
- 
 
 670 
        background: #2563eb;
- 
 
 671 
        color: #fff;
- 
 
 672 
        border: 0;
- 
 
 673 
        border-radius: 999px;
- 
 
 674 
        padding: 12px 18px;
- 
 
 675 
        font-weight: 600;
- 
 
 676 
        font-size: 13px;
- 
 
 677 
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
- 
 
 678 
    }
- 
 
 679 
 
- 
 
 680 
    @media (max-width: 991px) {
- 
 
 681 
        .nm-preview-col {
- 
 
 682 
            display: none;
- 
 
 683 
        }
- 
 
 684 
 
- 
 
 685 
        .nm-compose-form-col {
- 
 
 686 
            flex: 0 0 100%;
- 
 
 687 
            max-width: 100%;
- 
 
 688 
        }
- 
 
 689 
 
- 
 
 690 
        .nm-preview-fab {
- 
 
 691 
            display: inline-flex;
- 
 
 692 
            align-items: center;
113 
            </ol>
 693 
            gap: 6px;
114 
        </div>
 694 
        }
- 
 
 695 
    }
- 
 
 696 
 
- 
 
 697 
    .nm-summary-row {
- 
 
 698 
        display: flex;
- 
 
 699 
        justify-content: space-between;
- 
 
 700 
        padding: 8px 0;
- 
 
 701 
        font-size: 13px;
- 
 
 702 
        border-bottom: 1px solid #f3f4f6;
- 
 
 703 
    }
- 
 
 704 
 
- 
 
 705 
    .nm-summary-row:last-child {
- 
 
 706 
        border-bottom: none;
- 
 
 707 
    }
- 
 
 708 
 
- 
 
 709 
    .nm-summary-key {
- 
 
 710 
        color: #6b7280;
- 
 
 711 
    }
- 
 
 712 
 
- 
 
 713 
    .nm-summary-val {
- 
 
 714 
        color: #111827;
- 
 
 715 
        font-weight: 500;
- 
 
 716 
        text-align: right;
- 
 
 717 
    }
- 
 
 718 
 
- 
 
 719 
    .nm-summary-badge {
- 
 
 720 
        background: #eff6ff;
- 
 
 721 
        color: #2563eb;
- 
 
 722 
        padding: 2px 8px;
- 
 
 723 
        border-radius: 10px;
- 
 
 724 
        font-size: 12px;
- 
 
 725 
    }
- 
 
 726 
 
- 
 
 727 
    .nm-chip {
- 
 
 728 
        display: inline-block;
- 
 
 729 
        margin: 3px 4px;
- 
 
 730 
        padding: 4px 10px;
- 
 
 731 
        background: #eef2ff;
- 
 
 732 
        color: #3730a3;
- 
 
 733 
        border-radius: 12px;
- 
 
 734 
        font-size: 13px;
- 
 
 735 
    }
- 
 
 736 
 
- 
 
 737 
    .nm-chip .nm-chip-x {
- 
 
 738 
        color: #b91c1c;
- 
 
 739 
        margin-left: 6px;
- 
 
 740 
        cursor: pointer;
- 
 
 741 
    }
- 
 
 742 
 
- 
 
 743 
    /* Dropzone */
- 
 
 744 
    .nm-dropzone {
- 
 
 745 
        border: 2px dashed #d1d5db;
- 
 
 746 
        border-radius: 10px;
- 
 
 747 
        padding: 20px;
- 
 
 748 
        text-align: center;
- 
 
 749 
        cursor: pointer;
- 
 
 750 
        background: #fafbfc;
- 
 
 751 
        transition: background 0.15s, border-color 0.15s;
- 
 
 752 
    }
- 
 
 753 
 
- 
 
 754 
    .nm-dropzone:hover {
- 
 
 755 
        background: #f3f4f6;
- 
 
 756 
    }
- 
 
 757 
 
- 
 
 758 
    .nm-dropzone.nm-dropzone-hover {
- 
 
 759 
        background: #eff6ff;
- 
 
 760 
        border-color: #2563eb;
- 
 
 761 
    }
- 
 
 762 
 
- 
 
 763 
    .nm-dropzone-label {
- 
 
 764 
        color: #6b7280;
- 
 
 765 
        font-size: 13px;
- 
 
 766 
    }
- 
 
 767 
 
- 
 
 768 
    .nm-dropzone-label i {
- 
 
 769 
        font-size: 26px;
- 
 
 770 
        color: #9ca3af;
- 
 
 771 
        margin-bottom: 8px;
- 
 
 772 
        display: block;
- 
 
 773 
    }
- 
 
 774 
 
- 
 
 775 
    .nm-dropzone-label b {
- 
 
 776 
        color: #111827;
- 
 
 777 
        font-weight: 600;
- 
 
 778 
        display: block;
- 
 
 779 
        margin-bottom: 2px;
- 
 
 780 
        font-size: 14px;
- 
 
 781 
    }
- 
 
 782 
 
- 
 
 783 
    .nm-file-input {
- 
 
 784 
        display: none;
- 
 
 785 
    }
- 
 
 786 
 
- 
 
 787 
    .nm-thumb-list {
- 
 
 788 
        list-style: none;
- 
 
 789 
        padding-left: 0;
- 
 
 790 
        margin-top: 10px;
- 
 
 791 
        display: flex;
- 
 
 792 
        flex-wrap: wrap;
- 
 
 793 
        gap: 8px;
- 
 
 794 
    }
- 
 
 795 
 
- 
 
 796 
    .nm-thumb {
- 
 
 797 
        position: relative;
- 
 
 798 
        width: 80px;
- 
 
 799 
        height: 80px;
- 
 
 800 
        border-radius: 8px;
- 
 
 801 
        overflow: hidden;
- 
 
 802 
        background: #f3f4f6;
- 
 
 803 
        border: 1px solid #e5e7eb;
- 
 
 804 
    }
- 
 
 805 
 
- 
 
 806 
    .nm-thumb img {
- 
 
 807 
        width: 100%;
- 
 
 808 
        height: 100%;
- 
 
 809 
        object-fit: cover;
- 
 
 810 
    }
- 
 
 811 
 
- 
 
 812 
    .nm-thumb-spinner {
- 
 
 813 
        position: absolute;
- 
 
 814 
        inset: 0;
- 
 
 815 
        display: flex;
- 
 
 816 
        align-items: center;
- 
 
 817 
        justify-content: center;
- 
 
 818 
        color: #6b7280;
- 
 
 819 
        font-size: 20px;
- 
 
 820 
    }
- 
 
 821 
 
- 
 
 822 
    .nm-thumb-x {
- 
 
 823 
        position: absolute;
- 
 
 824 
        top: 2px;
- 
 
 825 
        right: 2px;
- 
 
 826 
        background: rgba(0, 0, 0, 0.6);
- 
 
 827 
        color: #fff;
- 
 
 828 
        width: 20px;
- 
 
 829 
        height: 20px;
- 
 
 830 
        border-radius: 50%;
- 
 
 831 
        display: flex;
- 
 
 832 
        align-items: center;
- 
 
 833 
        justify-content: center;
- 
 
 834 
        font-size: 14px;
- 
 
 835 
        cursor: pointer;
- 
 
 836 
    }
- 
 
 837 
 
- 
 
 838 
    .nm-empty {
- 
 
 839 
        text-align: center;
- 
 
 840 
        padding: 60px 20px;
- 
 
 841 
        color: #6b7280;
- 
 
 842 
        background: #fff;
- 
 
 843 
        border: 1px solid #e5e7eb;
- 
 
 844 
        border-radius: 8px;
- 
 
 845 
    }
- 
 
 846 
 
- 
 
 847 
    .nm-empty i {
- 
 
 848 
        font-size: 36px;
- 
 
 849 
        color: #d1d5db;
- 
 
 850 
        margin-bottom: 12px;
- 
 
 851 
        display: block;
- 
 
 852 
    }
- 
 
 853 
</style>
- 
 
 854 
 
- 
 
 855 
<section class="nm-wrapper">
- 
 
 856 
    <div class="nm-crumb">
- 
 
 857 
        <i class="fa fa-home"></i> <a href="${rc.contextPath}/dashboard">Home</a> /
- 
 
 858 
        <i class="fa fa-bell-o"></i> Notifications Manager
115 
    </div>
 859 
    </div>
116 
 
 860 
 
117 
    <div class="row">
 861 
    <!-- Tabs -->
118 
        <h4 class="modelHeaderCustom" style="font-size:22px;padding-bottom:2%">Enter Message</h4>
 - 
 
119 
        <form id="create-recharge-form">
 - 
 
120 
            <div class="col-lg-4">
 862 
    <div class="nm-tabs">
121 
 
 - 
 
122 
                <div class="row">
 - 
 
123 
                    <div class="col-lg-5 form-group">
 863 
        <a href="javascript:void(0)" class="nm-tab active" data-tab="compose">Compose</a>
124 
                        <p class="bold-details">Partner Name</p>
 864 
        <a href="javascript:void(0)" class="nm-tab" data-tab="calendar">Calendar View</a>
125 
                    </div>
 - 
 
126 
                    <div class="col-lg-6 form-group">
 865 
        #* Content Library and Bulk Send tabs — feature under construction, hidden for now.
127 
                        <select class="form-control input-sm" id="fofo-users" name="fofo-users" placeholder="Partners"
 866 
        <a href="javascript:void(0)" class="nm-tab" data-tab="library">Content Library <span class="nm-tab-badge" id="nmDraftCount">0</span></a>
128 
                                multiple="multiple">
 - 
 
129 
                            <option value="" disabled selected>Partners</option>
 867 
        <a href="javascript:void(0)" class="nm-tab" data-tab="bulk">Bulk Send</a>
130 
                            #foreach($fofoId in $customRetailersMap.keySet())
 - 
 
131 
                                <option value="$fofoId">$customRetailersMap.get($fofoId).getBusinessName()</option>
 - 
 
132 
                            #end
 - 
 
133 
                        </select>
 - 
 
134 
                    </div>
 868 
        *#
135 
                </div>
 869 
    </div>
136 
 
 870 
 
- 
 
 871 
    <!-- ─── Compose tab ─────────────────────────────────────────────── -->
137 
                <div class="row">
 872 
    <div class="nm-tab-content active" data-tab-content="compose">
138 
                    <div class="col-lg-5 form-group">
 873 
        <!-- Format selector — full page width, spans over the two-column layout below.
139 
                        <p class="bold-details">State Name</p>
 874 
             4 equal cards (Banner is a placeholder — COMING SOON). -->
140 
                    </div>
 875 
        <div class="nm-card">
141 
                    <div class="col-lg-6 form-group">
 876 
            <div class="nm-format-row">
142 
                        <select class="form-control input-sm" id="state-users" name="state-users" placeholder="State"
 877 
                <div class="nm-format active" data-format="PUSH">
143 
                                multiple="multiple">
 878 
                    <div class="nm-format-icon"><i class="fa fa-bell"></i></div>
144 
                            <option value="" disabled selected>State</option>
 879 
                    <div>
145 
                            #foreach($warehouseMap in $warehouseMap.entrySet())
 880 
                        <div class="nm-format-name">Push notification</div>
146 
                                <option value="$warehouseMap.getKey()">$warehouseMap.getValue()</option>
 881 
                        <div class="nm-format-sub">Phone notification tray</div>
147 
                            #end
 - 
 
148 
                        </select>
 - 
 
149 
                    </div>
 882 
                    </div>
150 
                </div>
 883 
                </div>
151 
 
 - 
 
152 
                <div class="row">
 - 
 
153 
                    <div class="col-lg-5 form-group">
 884 
                <div class="nm-format" data-format="IN_APP_POPUP">
154 
                        <p class="bold-details">Internal User</p>
 885 
                    <div class="nm-format-icon"><i class="fa fa-square-o"></i></div>
155 
                    </div>
 886 
                    <div>
156 
                    <div class="col-lg-6 form-group">
 887 
                        <div class="nm-format-name">In-app pop-up</div>
157 
                        <select class="form-control input-sm" id="internal-users" name="internal-users"
 - 
 
158 
                                placeholder="Users" multiple="multiple">
 - 
 
159 
                            <option value="" disabled selected>Users</option>
 888 
                        <div class="nm-format-sub">Modal over the app</div>
160 
                            #foreach($userId in $userMap.keySet())
 - 
 
161 
                                <option value="$userId">$userMap.get($userId).getEmailId()</option>
 - 
 
162 
                            #end
 - 
 
163 
                        </select>
 - 
 
164 
                    </div>
 889 
                    </div>
165 
                </div>
 890 
                </div>
166 
 
 - 
 
- 
 
 891 
                <div class="nm-format" data-format="STORY">
- 
 
 892 
                    <div class="nm-format-icon"><i class="fa fa-mobile"></i></div>
167 
                <div class="row">
 893 
                    <div>
168 
                    <div class="col-lg-5 form-group">
 894 
                        <div class="nm-format-name">Story</div>
169 
                        <p class="bold-details">Campaign Name</p>
 895 
                        <div class="nm-format-sub">Home-screen stories strip</div>
170 
                    </div>
 896 
                    </div>
- 
 
 897 
                </div>
- 
 
 898 
                <div class="nm-format" style="cursor:not-allowed;opacity:0.75;position:relative;">
171 
                    <div class="col-lg-6 form-group">
 899 
                    <div class="nm-format-icon"><i class="fa fa-image"></i></div>
- 
 
 900 
                    <div>
172 
                        <input placeholder="Campaign Name" id="campaignName" name="campaignName" type="text" value=""
 901 
                        <div class="nm-format-name">Banner Management</div>
173 
                               class="form-control input-sm">
 902 
                        <div class="nm-format-sub">Home-screen full-width banner</div>
174 
                    </div>
 903 
                    </div>
- 
 
 904 
                    <span style="position:absolute;top:6px;right:6px;color:#f59e0b;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;background:#fef3c7;letter-spacing:0.4px;">COMING SOON</span>
175 
                </div>
 905 
                </div>
- 
 
 906 
            </div>
- 
 
 907 
        </div>
176 
 
 908 
 
- 
 
 909 
        <div class="row nm-compose-row">
- 
 
 910 
            <!-- Left column: form -->
- 
 
 911 
            <div class="col-lg-8 col-md-8 nm-compose-form-col">
- 
 
 912 
 
- 
 
 913 
                <!-- Recipients (shared) -->
177 
                <div class="row">
 914 
                <div class="nm-card">
- 
 
 915 
                    <h4 class="nm-card-title" id="nmDetailsTitle">Notification details</h4>
- 
 
 916 
                    <div class="nm-section-label">Recipients</div>
178 
                    <div class="col-lg-5 form-group">
 917 
                    <div class="nm-two-col">
- 
 
 918 
                        <div class="nm-field">
- 
 
 919 
                            <label class="nm-field-label">Partner Name</label>
- 
 
 920 
                            <select class="nm-select" id="fofo-users" name="fofo-users" multiple="multiple">
- 
 
 921 
                                #foreach($fofoId in $customRetailersMap.keySet())
- 
 
 922 
                                    <option value="$fofoId">$customRetailersMap.get($fofoId).getBusinessName()</option>
- 
 
 923 
                                #end
- 
 
 924 
                            </select>
- 
 
 925 
                        </div>
- 
 
 926 
                        <div class="nm-field">
- 
 
 927 
                            <label class="nm-field-label">State Name</label>
- 
 
 928 
                            <select class="nm-select" id="state-users" name="state-users" multiple="multiple">
- 
 
 929 
                                #foreach($warehouseMap in $warehouseMap.entrySet())
- 
 
 930 
                                    <option value="$warehouseMap.getKey()">$warehouseMap.getValue()</option>
- 
 
 931 
                                #end
- 
 
 932 
                            </select>
- 
 
 933 
                        </div>
- 
 
 934 
                        <div class="nm-field">
- 
 
 935 
                            <label class="nm-field-label">Internal User</label>
- 
 
 936 
                            <select class="nm-select" id="internal-users" name="internal-users" multiple="multiple">
- 
 
 937 
                                #foreach($userId in $userMap.keySet())
- 
 
 938 
                                    <option value="$userId">$userMap.get($userId).getEmailId()</option>
- 
 
 939 
                                #end
- 
 
 940 
                            </select>
- 
 
 941 
                        </div>
179 
                        <p class="bold-details">Title</p>
 942 
                        <div class="nm-field">
- 
 
 943 
                            <label class="nm-field-label">Campaign Group <span style="color:#6b7280;font-weight:400;">(optional)</span></label>
- 
 
 944 
                            <select class="nm-select" id="nmCampaignGroup">
- 
 
 945 
                                <option value="">— None (ungrouped) —</option>
- 
 
 946 
                                <option value="__new__">+ Create new campaign group…</option>
- 
 
 947 
                            </select>
- 
 
 948 
                            <div class="nm-help">Group related notifications together (e.g. all Monsoon Restock sends).
- 
 
 949 
                                Optional.
- 
 
 950 
                            </div>
180 
                    </div>
 951 
                        </div>
181 
                    <div class="col-lg-6 form-group">
 952 
                        <div class="nm-field">
- 
 
 953 
                            <label class="nm-field-label">Send label <span style="color:#6b7280;font-weight:400;">(what to call this specific send)</span></label>
182 
                        <input placeholder="Title" id="title" name="title" type="text" value=""
 954 
                            <input class="nm-input" id="campaignName" name="campaignName" type="text"
183 
                               class="form-control input-sm">
 955 
                                   placeholder="e.g. Morning wave">
- 
 
 956 
                        </div>
184 
                    </div>
 957 
                    </div>
185 
                </div>
 958 
                </div>
186 
 
 959 
 
187 
 
 - 
 
- 
 
 960 
                <!-- Content -->
188 
                <div class="row">
 961 
                <div class="nm-card">
- 
 
 962 
                    <div class="nm-section-label">Content</div>
- 
 
 963 
                    <div class="nm-field">
- 
 
 964 
                        <label class="nm-field-label">
- 
 
 965 
                            Title <span class="nm-req">*</span>
- 
 
 966 
                            <span class="nm-charcount"><span id="titleCount">0</span>/80</span>
- 
 
 967 
                        </label>
- 
 
 968 
                        <input class="nm-input" id="title" name="title" type="text" maxlength="80"
- 
 
 969 
                               placeholder="Short attention-grabbing title">
- 
 
 970 
                    </div>
189 
                    <div class="col-lg-5 form-group">
 971 
                    <div class="nm-field">
190 
                        <p class="bold-details">Message</p>
 972 
                        <label class="nm-field-label">
- 
 
 973 
                            Message <span class="nm-req">*</span>
- 
 
 974 
                            <span class="nm-charcount"><span id="messageCount">0</span>/240</span>
- 
 
 975 
                        </label>
- 
 
 976 
                        <textarea class="nm-textarea" id="message" name="message" maxlength="240"
- 
 
 977 
                                  placeholder="Body of the notification"></textarea>
191 
                    </div>
 978 
                    </div>
- 
 
 979 
 
- 
 
 980 
                    <!-- Push: multi-image + attachment -->
- 
 
 981 
                    <div class="nm-panel active" data-panel="PUSH">
- 
 
 982 
                        <div class="nm-field">
- 
 
 983 
                            <label class="nm-field-label">Images <span style="color:#6b7280;font-weight:400;">(optional · shown as a carousel)</span></label>
- 
 
 984 
                            <div class="nm-dropzone" data-target="pushImages" data-multi="true">
- 
 
 985 
                                <input type="file" class="nm-file-input" accept="image/*" multiple>
- 
 
 986 
                                <div class="nm-dropzone-label">
- 
 
 987 
                                    <i class="fa fa-upload"></i>
- 
 
 988 
                                    <b>Upload images</b>
- 
 
 989 
                                    Drag &amp; drop or click to browse · PNG, JPG up to 5 MB each
- 
 
 990 
                                </div>
- 
 
 991 
                            </div>
- 
 
 992 
                            <ul class="nm-thumb-list" data-target="pushImages"></ul>
- 
 
 993 
                        </div>
- 
 
 994 
                        <div class="nm-field">
- 
 
 995 
                            <label class="nm-field-label">Attachment <span style="color:#6b7280;font-weight:400;">(optional)</span></label>
- 
 
 996 
                            <label class="nm-btn nm-btn-outline" style="display:inline-block;cursor:pointer;">
- 
 
 997 
                                <i class="fa fa-paperclip"></i> Attach document
- 
 
 998 
                                <input type="file" id="notifyDocument" name="notifyDocument" style="display:none;">
- 
 
 999 
                            </label>
- 
 
 1000 
                            <div class="nm-help">A PDF or image partners can open from the notification.</div>
- 
 
 1001 
                        </div>
- 
 
 1002 
                    </div>
- 
 
 1003 
 
- 
 
 1004 
                    <!-- Popup: single image -->
- 
 
 1005 
                    <div class="nm-panel" data-panel="IN_APP_POPUP">
- 
 
 1006 
                        <div class="nm-field">
- 
 
 1007 
                            <label class="nm-field-label">Pop-up image <span style="color:#6b7280;font-weight:400;">(optional)</span></label>
- 
 
 1008 
                            <div class="nm-dropzone" data-target="popupImage" data-multi="false">
- 
 
 1009 
                                <input type="file" class="nm-file-input" accept="image/*">
- 
 
 1010 
                                <div class="nm-dropzone-label">
- 
 
 1011 
                                    <i class="fa fa-upload"></i>
- 
 
 1012 
                                    <b>Upload pop-up image</b>
- 
 
 1013 
                                    Drag &amp; drop or click to browse · PNG, JPG up to 5 MB
- 
 
 1014 
                                </div>
- 
 
 1015 
                            </div>
- 
 
 1016 
                            <ul class="nm-thumb-list" data-target="popupImage"></ul>
- 
 
 1017 
                        </div>
- 
 
 1018 
                    </div>
- 
 
 1019 
 
- 
 
 1020 
                    <!-- Story: multi-card carousel -->
- 
 
 1021 
                    <div class="nm-panel" data-panel="STORY">
- 
 
 1022 
                        <div class="nm-field">
- 
 
 1023 
                            <label class="nm-field-label">Story cards <span style="color:#6b7280;font-weight:400;">(shown as a carousel)</span></label>
- 
 
 1024 
                            <div class="nm-dropzone" data-target="storyCards" data-multi="true">
- 
 
 1025 
                                <input type="file" class="nm-file-input" accept="image/*" multiple>
- 
 
 1026 
                                <div class="nm-dropzone-label">
- 
 
 1027 
                                    <i class="fa fa-upload"></i>
- 
 
 1028 
                                    <b>Upload story cards</b>
- 
 
 1029 
                                    Drag &amp; drop or click to browse · PNG, JPG up to 5 MB each
- 
 
 1030 
                                </div>
- 
 
 1031 
                            </div>
- 
 
 1032 
                            <ul class="nm-thumb-list" data-target="storyCards"></ul>
- 
 
 1033 
                        </div>
- 
 
 1034 
                    </div>
- 
 
 1035 
 
- 
 
 1036 
                    <!-- Shared: Link a live scheme / offer / product -->
- 
 
 1037 
                    <div class="nm-field" style="border-top:1px solid #f3f4f6;padding-top:16px;margin-top:16px;">
- 
 
 1038 
                        <label class="nm-field-label">Link a live scheme / offer / product <span
- 
 
 1039 
                                style="color:#6b7280;font-weight:400;">(optional)</span></label>
192 
                    <div class="col-lg-6 form-group">
 1040 
                        <div class="nm-two-col">
- 
 
 1041 
                            <select class="nm-select" id="linkableType">
- 
 
 1042 
                                <option value="">— Pick a type —</option>
- 
 
 1043 
                                <option value="SCHEME">Scheme</option>
- 
 
 1044 
                                <option value="OFFER">Offer</option>
- 
 
 1045 
                                <option value="PRODUCT">Product</option>
- 
 
 1046 
                            </select>
- 
 
 1047 
                            <div>
- 
 
 1048 
                                <!-- Populated for SCHEME / OFFER (dropdown of active items) -->
- 
 
 1049 
                                <select class="nm-select" id="linkablePicker" style="display:none;">
- 
 
 1050 
                                    <option value="">— Loading —</option>
- 
 
 1051 
                                </select>
- 
 
 1052 
                                <!-- Populated for PRODUCT (Bootstrap typeahead against /entity) -->
- 
 
 1053 
                                <div id="linkableSearchWrap" style="display:none;">
193 
                        <textarea rows="3" cols="90" placeholder="Message" id="message" name="message" type="text"
 1054 
                                    <input class="nm-input" id="linkableSearchInput" type="text"
- 
 
 1055 
                                           placeholder="Type at least 2 letters to search products…"
194 
                                  value="" class="form-control input-sm"></textarea>
 1056 
                                           autocomplete="off" data-provide="typeahead">
- 
 
 1057 
                                </div>
- 
 
 1058 
                            </div>
- 
 
 1059 
                        </div>
- 
 
 1060 
                        <ul id="linkedEntitiesList" style="list-style:none;padding-left:0;margin-top:10px;"></ul>
- 
 
 1061 
                        <div class="nm-help">Tapping the notification takes the partner straight to the attached
- 
 
 1062 
                            entity.
- 
 
 1063 
                        </div>
195 
                    </div>
 1064 
                    </div>
196 
                </div>
 1065 
                </div>
197 
 
 1066 
 
- 
 
 1067 
                <!-- Tap behaviour -->
- 
 
 1068 
                <div class="nm-card">
- 
 
 1069 
                    <div class="nm-section-label">Tap behaviour</div>
198 
 
 1070 
 
- 
 
 1071 
                    <div class="nm-panel" data-panel="IN_APP_POPUP">
- 
 
 1072 
                        <div class="nm-two-col">
- 
 
 1073 
                            <div class="nm-field">
- 
 
 1074 
                                <label class="nm-field-label">Button label</label>
- 
 
 1075 
                                <input class="nm-input" id="buttonLabelPopup" type="text" placeholder="e.g. View offer">
- 
 
 1076 
                            </div>
- 
 
 1077 
                            <div class="nm-field">
- 
 
 1078 
                                <label class="nm-field-label">Buttons to show</label>
- 
 
 1079 
                                <div><label style="font-weight:400;font-size:13px;">
- 
 
 1080 
                                    <input type="checkbox" id="showCta" checked style="margin-right:6px;">CTA button —
- 
 
 1081 
                                    the main action
- 
 
 1082 
                                </label></div>
- 
 
 1083 
                                <div style="margin-top:6px;"><label style="font-weight:400;font-size:13px;">
- 
 
 1084 
                                    <input type="checkbox" id="showClose" checked style="margin-right:6px;">Close × —
- 
 
 1085 
                                    partner can dismiss it
- 
 
 1086 
                                </label></div>
- 
 
 1087 
                            </div>
- 
 
 1088 
                        </div>
199 
            </div>
 1089 
                    </div>
200 
 
 1090 
 
- 
 
 1091 
                    <div class="nm-panel" data-panel="STORY">
201 
            <div class="col-lg-4">
 1092 
                        <div class="nm-field">
- 
 
 1093 
                            <label class="nm-field-label">Button label</label>
- 
 
 1094 
                            <input class="nm-input" id="buttonLabelStory" type="text" placeholder="e.g. View offer">
- 
 
 1095 
                        </div>
- 
 
 1096 
                    </div>
202 
 
 1097 
 
203 
                <div class="row">
 1098 
                    <div class="nm-two-col">
204 
                    <div class="col-lg-5 form-group">
 1099 
                        <div class="nm-field">
- 
 
 1100 
                            <label class="nm-field-label">Action when tapped</label>
205 
                        <p class="bold-details">Type</p>
 1101 
                            <select class="nm-select" id="type" name="type">
- 
 
 1102 
                                <option value="url">Open a link (web page)</option>
- 
 
 1103 
                                <option value="native">Open native screen</option>
- 
 
 1104 
                                <option value="update">Trigger app update</option>
- 
 
 1105 
                            </select>
206 
                    </div>
 1106 
                        </div>
207 
                    <div class="col-lg-6 form-group">
 1107 
                        <div class="nm-field">
- 
 
 1108 
                            <label class="nm-field-label">Link to open</label>
208 
                        <select id="type" name="type" class="form-control input-sm">
 1109 
                            <select class="nm-select" id="selectedUrl" onchange="nmChangeUrl()">
- 
 
 1110 
                                <option value="" selected disabled>Pick a link</option>
- 
 
 1111 
                                <optgroup label="Partner app (React)">
209 
                            <option value="url">Url</option>
 1112 
                                    <option value="/home">Home</option>
- 
 
 1113 
                                    <option value="/dashboard">Dashboard</option>
210 
                            <option value="native">Native</option>
 1114 
                                    <option value="/sell">Sell Mode</option>
- 
 
 1115 
                                    <option value="/buy/deals">Buy Deals</option>
- 
 
 1116 
                                    <option value="/buy/brands">Brands</option>
- 
 
 1117 
                                    <option value="/buy/hot-deals">Hot Deals</option>
- 
 
 1118 
                                    <option value="/buy/clearance">Clearance</option>
- 
 
 1119 
                                    <option value="/buy/cart">Cart</option>
- 
 
 1120 
                                    <option value="/schemes">Schemes / Earn</option>
211 
                            <option value="update">Update</option>
 1121 
                                    <option value="/orders">Orders</option>
- 
 
 1122 
                                    <option value="/notifications">Notifications</option>
- 
 
 1123 
                                </optgroup>
- 
 
 1124 
                                <optgroup label="Legacy fofo URLs">
- 
 
 1125 
                                    <option value="https://app.smartdukaan.com/pages/home/dashboard">
- 
 
 1126 
                                        app.smartdukaan.com/pages/home/dashboard
- 
 
 1127 
                                    </option>
- 
 
 1128 
                                    <option value="https://app.smartdukaan.com/pages/home/notifications">
- 
 
 1129 
                                        app.smartdukaan.com/pages/home/notifications
- 
 
 1130 
                                    </option>
- 
 
 1131 
                                    <option value="https://app.smartdukaan.com/pages/home/services">
- 
 
 1132 
                                        app.smartdukaan.com/pages/home/services
- 
 
 1133 
                                    </option>
- 
 
 1134 
                                    <option value="https://app.smartdukaan.com/pages/home/recharge">
- 
 
 1135 
                                        app.smartdukaan.com/pages/home/recharge
- 
 
 1136 
                                    </option>
- 
 
 1137 
                                    <option value="https://app.smartdukaan.com/pages/home/damageProtectioninfo">
- 
 
 1138 
                                        app.smartdukaan.com/pages/home/damageProtectioninfo
- 
 
 1139 
                                    </option>
- 
 
 1140 
                                </optgroup>
- 
 
 1141 
                                <option value="other">other (enter below)</option>
212 
                        </select>
 1142 
                            </select>
- 
 
 1143 
                            <input class="nm-input" id="url" name="url" type="text" placeholder="https://..."
- 
 
 1144 
                                   style="margin-top:6px;display:none;">
- 
 
 1145 
                        </div>
213 
                    </div>
 1146 
                    </div>
214 
                </div>
 1147 
                </div>
215 
 
 1148 
 
- 
 
 1149 
                <!-- Push: Delivery -->
- 
 
 1150 
                <div class="nm-card nm-panel active" data-panel="PUSH">
- 
 
 1151 
                    <div class="nm-section-label">Delivery</div>
216 
                <div class="row">
 1152 
                    <div class="nm-two-col">
217 
                    <div class="col-lg-5 form-group">
 1153 
                        <div class="nm-field">
- 
 
 1154 
                            <label class="nm-field-label">Category</label>
- 
 
 1155 
                            <select class="nm-select" id="nmCategory" name="category">
- 
 
 1156 
                                <option value="" selected disabled>Select category</option>
- 
 
 1157 
                                <option value="ANNOUNCE">Announce</option>
- 
 
 1158 
                                <option value="NOTIFICATION">Notification</option>
- 
 
 1159 
                                <option value="REMINDER">Reminder</option>
- 
 
 1160 
                                <option value="ALERT">Alert</option>
- 
 
 1161 
                            </select>
- 
 
 1162 
                            <div class="nm-help">Drives the colour tag on the calendar.</div>
- 
 
 1163 
                        </div>
218 
                        <p class="bold-details">Url</p>
 1164 
                        <div class="nm-field">
- 
 
 1165 
                            <label class="nm-field-label">Notification life span</label>
- 
 
 1166 
                            <select class="nm-select" id="nmHasExpiry">
- 
 
 1167 
                                <option value="no" selected>Lifetime (no expiry)</option>
- 
 
 1168 
                                <option value="yes">Set an expiry date</option>
- 
 
 1169 
                            </select>
- 
 
 1170 
                            <div class="nm-help">Some notifications should stay in the partner's app forever. Pick "Set
- 
 
 1171 
                                an expiry" only when it should auto-remove.
- 
 
 1172 
                            </div>
- 
 
 1173 
                        </div>
- 
 
 1174 
                        <div class="nm-field" id="nmExpiryDateField" style="display:none;">
- 
 
 1175 
                            <label class="nm-field-label">Expiry Date <span class="nm-req">*</span></label>
- 
 
 1176 
                            <input class="nm-input" id="expireSat" name="dateTime" type="text">
- 
 
 1177 
                            <div class="nm-help">After this date it stops showing in the partner's app.</div>
- 
 
 1178 
                        </div>
219 
                    </div>
 1179 
                    </div>
- 
 
 1180 
                </div>
220 
 
 1181 
 
221 
 
 - 
 
- 
 
 1182 
                <!-- Popup: Display rules -->
- 
 
 1183 
                <div class="nm-card nm-panel" data-panel="IN_APP_POPUP">
- 
 
 1184 
                    <div class="nm-section-label">Display rules</div>
222 
                    <div class="col-lg-6 form-group">
 1185 
                    <div class="nm-two-col">
223 
 
 - 
 
- 
 
 1186 
                        <div class="nm-field">
- 
 
 1187 
                            <label class="nm-field-label">Category</label>
224 
                        <select class='form-control input-sm' id='selectedUrl' onchange="changeUrl()">
 1188 
                            <select class="nm-select" id="nmCategoryPopup" name="category">
225 
                            <option selected disabled>Url</option>
 1189 
                                <option value="" selected disabled>Select category</option>
- 
 
 1190 
                                <option value="ANNOUNCE">Announce</option>
226 
                            <option value='https://app.smartdukaan.com/pages/home/dashboard'>
 1191 
                                <option value="NOTIFICATION">Notification</option>
- 
 
 1192 
                                <option value="REMINDER">Reminder</option>
227 
                                http://app.smartdukaan.com/pages/home/dashboard
 1193 
                                <option value="ALERT">Alert</option>
228 
                            </option>
 1194 
                            </select>
- 
 
 1195 
                        </div>
- 
 
 1196 
                        <div class="nm-field">
- 
 
 1197 
                            <label class="nm-field-label">Show on page (route) <span class="nm-req">*</span></label>
- 
 
 1198 
                            <select class="nm-select" id="showOnPage">
229 
                            <option value='https://app.smartdukaan.com/pages/home/notifications'>
 1199 
                                <option value="" selected disabled>Select page</option>
230 
                                http://app.smartdukaan.com/pages/home/notifications
 1200 
                                <option value="/home">/home (Home)</option>
- 
 
 1201 
                                <option value="/dashboard">/dashboard (Dashboard)</option>
- 
 
 1202 
                                <option value="/buy/brands/mobile">/buy/brands/mobile (Buy mode)</option>
231 
                            </option>
 1203 
                                <option value="/sell">/sell (Sell mode)</option>
- 
 
 1204 
                                <option value="/sell/checkout">/sell/checkout (Sell cart)</option>
232 
                            <option value='https://app.smartdukaan.com/pages/home/services'>
 1205 
                                <option value="/buy/cart">/buy/cart (Buy bag)</option>
233 
                                http://app.smartdukaan.com/pages/home/services
 1206 
                                <option value="/wallet">/wallet (My money)</option>
234 
                            </option>
 1207 
                            </select>
235 
                            <option value='https://app.smartdukaan.com/pages/home/recharge'>
 1208 
                            <div class="nm-help">Pick the exact page where the pop-up should appear. Required so it
236 
                                http://app.smartdukaan.com/pages/home/recharge
 1209 
                                doesn't leak onto every screen.
237 
                            </option>
 1210 
                            </div>
- 
 
 1211 
                        </div>
- 
 
 1212 
                        <div class="nm-field">
- 
 
 1213 
                            <label class="nm-field-label">How long it stays up</label>
- 
 
 1214 
                            <select class="nm-select" id="autoCloseSeconds">
238 
                            <option value='https://app.smartdukaan.com/pages/home/damageProtectioninfo'>
 1215 
                                <option value="">Until the partner closes it</option>
239 
                                http://app.smartdukaan.com/pages/home/damageProtectioninfo
 1216 
                                <option value="5">5 seconds</option>
240 
                            </option>
 1217 
                                <option value="10">10 seconds</option>
241 
                            <option value='other'>other</option>
 1218 
                                <option value="30">30 seconds</option>
242 
                        </select>
 1219 
                            </select>
- 
 
 1220 
                        </div>
- 
 
 1221 
                        <div class="nm-field">
- 
 
 1222 
                            <label class="nm-field-label">Live from</label>
- 
 
 1223 
                            <input class="nm-input" id="popupLiveFrom" type="date">
243 
                        <br>
 1224 
                        </div>
- 
 
 1225 
                        <div class="nm-field">
244 
                        <input placeholder="Url" id="url" name="url" type="text" value="" class="form-control input-sm">
 1226 
                            <label class="nm-field-label">Live until <span class="nm-req">*</span></label>
- 
 
 1227 
                            <input class="nm-input" id="popupLiveUntil" type="date">
- 
 
 1228 
                            <div class="nm-help">After this date the pop-up stops appearing.</div>
- 
 
 1229 
                        </div>
245 
                    </div>
 1230 
                    </div>
246 
                </div>
 1231 
                </div>
247 
 
 1232 
 
248 
 
 - 
 
- 
 
 1233 
                <!-- Story: Publishing -->
- 
 
 1234 
                <div class="nm-card nm-panel" data-panel="STORY">
- 
 
 1235 
                    <div class="nm-section-label">Publishing</div>
249 
                <div class="row">
 1236 
                    <div class="nm-two-col">
- 
 
 1237 
                        <div class="nm-field">
- 
 
 1238 
                            <label class="nm-field-label">Category</label>
- 
 
 1239 
                            <select class="nm-select" id="nmCategoryStory" name="category">
- 
 
 1240 
                                <option value="" selected disabled>Select category</option>
- 
 
 1241 
                                <option value="ANNOUNCE">Announce</option>
- 
 
 1242 
                                <option value="NOTIFICATION">Notification</option>
- 
 
 1243 
                                <option value="REMINDER">Reminder</option>
- 
 
 1244 
                                <option value="ALERT">Alert</option>
- 
 
 1245 
                            </select>
- 
 
 1246 
                        </div>
- 
 
 1247 
                        <div class="nm-field">
- 
 
 1248 
                            <label class="nm-field-label">Story category</label>
- 
 
 1249 
                            <select class="nm-select" id="postInCategory">
- 
 
 1250 
                                <option value="" selected disabled>Select category</option>
- 
 
 1251 
                                <option value="all-brands-listing">All brands listing (mobile brands)</option>
- 
 
 1252 
                                <option value="price-change">Price change</option>
- 
 
 1253 
                                <option value="announcement">Announcement</option>
- 
 
 1254 
                                <option value="offer">Offer</option>
- 
 
 1255 
                            </select>
- 
 
 1256 
                        </div>
- 
 
 1257 
                        <div class="nm-field">
- 
 
 1258 
                            <label class="nm-field-label">Play duration per card</label>
- 
 
 1259 
                            <select class="nm-select" id="playDurationSeconds">
- 
 
 1260 
                                <option value="3">3 seconds</option>
- 
 
 1261 
                                <option value="5" selected>5 seconds</option>
- 
 
 1262 
                                <option value="8">8 seconds</option>
- 
 
 1263 
                                <option value="10">10 seconds</option>
- 
 
 1264 
                            </select>
- 
 
 1265 
                        </div>
250 
                    <div class="col-lg-5 form-group">
 1266 
                        <div class="nm-field">
- 
 
 1267 
                            <label class="nm-field-label">Expires after</label>
- 
 
 1268 
                            <select class="nm-select" id="expiresAfterPolicy">
- 
 
 1269 
                                <option value="FIXED_HOURS">24 hours from publish</option>
- 
 
 1270 
                                <option value="ON_DATE">On a set date</option>
- 
 
 1271 
                            </select>
- 
 
 1272 
                        </div>
251 
                        <p class="bold-details">DOCUMENT</p>
 1273 
                        <div class="nm-field">
- 
 
 1274 
                            <label class="nm-field-label">Live from</label>
- 
 
 1275 
                            <input class="nm-input" id="storyLiveFrom" type="date">
- 
 
 1276 
                        </div>
- 
 
 1277 
                        <div class="nm-field" id="storyExpiryOnDateField" style="display:none;">
- 
 
 1278 
                            <label class="nm-field-label">Expires on</label>
- 
 
 1279 
                            <input class="nm-input" id="storyExpiryOnDate" type="date">
- 
 
 1280 
                        </div>
252 
                    </div>
 1281 
                    </div>
253 
                    <div class="col-lg-6 form-group">
 1282 
                </div>
254 
                        <label class="btn btn-file">
 - 
 
255 
 
 - 
 
256 
                            Browse<input type="file" id="notifyDocument" name="notifyDocument" style="display:none">
 - 
 
257 
 
 1283 
 
- 
 
 1284 
                <!-- Actions -->
- 
 
 1285 
                <div class="nm-card">
- 
 
 1286 
                    <div class="nm-actions">
- 
 
 1287 
                        <button class="nm-btn nm-btn-outline" id="nmResetBtn" type="button"><i
- 
 
 1288 
                                class="fa fa-refresh"></i> Reset
258 
                        </label>
 1289 
                        </button>
- 
 
 1290 
                        <button class="nm-btn nm-btn-outline" id="nmScheduleBtn" type="button"><i
- 
 
 1291 
                                class="fa fa-clock-o"></i> Schedule
- 
 
 1292 
                        </button>
- 
 
 1293 
                        <button class="nm-btn nm-btn-primary create-notification-button" type="button">
- 
 
 1294 
                            <i class="fa fa-paper-plane"></i> <span id="nmPrimaryCtaLabel">Send now</span>
- 
 
 1295 
                        </button>
259 
                    </div>
 1296 
                    </div>
260 
                </div>
 1297 
                </div>
- 
 
 1298 
            </div>
261 
 
 1299 
 
- 
 
 1300 
            <!-- Right column: preview + summary. Hidden on mobile; the floating
- 
 
 1301 
                 "Preview" button opens it in a bottom-sheet modal instead. -->
- 
 
 1302 
            <div class="col-lg-4 col-md-4 nm-preview-col">
- 
 
 1303 
                <div class="nm-preview-sticky">
- 
 
 1304 
                    <div class="nm-card">
- 
 
 1305 
                        <div class="nm-preview-label">Live preview</div>
- 
 
 1306 
 
- 
 
 1307 
                        <div class="nm-preview active" data-preview="PUSH">
- 
 
 1308 
                            <div class="nm-phone">
- 
 
 1309 
                                <div class="nm-phone-notch"></div>
- 
 
 1310 
                                <div class="nm-phone-time" id="nmPhoneTime">5:31</div>
- 
 
 1311 
                                <div class="nm-phone-date" id="nmPhoneDate">Tuesday, 14 Jul</div>
- 
 
 1312 
                                <div class="nm-noti-card">
- 
 
 1313 
                                    <div class="nm-noti-head">
- 
 
 1314 
                                        <div class="nm-noti-app-icon">SD</div>
- 
 
 1315 
                                        <div class="nm-noti-app-name">SMARTDUKAAN</div>
- 
 
 1316 
                                        <div class="nm-noti-when">now</div>
- 
 
 1317 
                                    </div>
- 
 
 1318 
                                    <div class="nm-noti-title" id="nmPreviewTitlePush">Restock offer: up to 40% margin
- 
 
 1319 
                                        this week
- 
 
 1320 
                                    </div>
- 
 
 1321 
                                    <div class="nm-noti-body" id="nmPreviewBodyPush">Order now and earn extra margin on
- 
 
 1322 
                                        staples. Free logistics on orders above ₹5,000. Tap to view the catalogue.
- 
 
 1323 
                                    </div>
- 
 
 1324 
                                </div>
- 
 
 1325 
                            </div>
- 
 
 1326 
                            <div class="nm-preview-cap">Partner app · lock-screen push</div>
- 
 
 1327 
                        </div>
- 
 
 1328 
 
- 
 
 1329 
                        <div class="nm-preview" data-preview="IN_APP_POPUP">
- 
 
 1330 
                            <div class="nm-popup-screen">
- 
 
 1331 
                                <!-- Blurred faux app background (dims when the popup covers it) -->
- 
 
 1332 
                                <div class="nm-popup-bg"></div>
- 
 
 1333 
                                <div class="nm-popup-dim"></div>
- 
 
 1334 
                                <div class="nm-popup-card">
- 
 
 1335 
                                    <div class="nm-popup-close" id="nmPopupPreviewClose">×</div>
- 
 
 1336 
                                    <img class="nm-popup-image" id="nmPreviewImagePopup" src="" alt=""
- 
 
 1337 
                                         style="display:none;"/>
- 
 
 1338 
                                    <div class="nm-popup-title" id="nmPreviewTitlePopup">Restock offer: up to 40% margin
- 
 
 1339 
                                        this week
- 
 
 1340 
                                    </div>
- 
 
 1341 
                                    <div class="nm-popup-body" id="nmPreviewBodyPopup">Order now and earn extra margin
- 
 
 1342 
                                        on staples. Free logistics on orders above ₹5,000. Tap to view the catalogue.
- 
 
 1343 
                                    </div>
- 
 
 1344 
                                    <div class="nm-popup-cta" id="nmPreviewCtaPopup">View offer</div>
- 
 
 1345 
                                </div>
- 
 
 1346 
                            </div>
- 
 
 1347 
                            <div class="nm-preview-cap">Partner app · in-app pop-up</div>
- 
 
 1348 
                        </div>
- 
 
 1349 
 
- 
 
 1350 
                        <div class="nm-preview" data-preview="STORY">
- 
 
 1351 
                            <div class="nm-story-screen">
- 
 
 1352 
                                <div class="nm-story-head">
- 
 
 1353 
                                    <div class="nm-noti-app-icon">SD</div>
- 
 
 1354 
                                    <div>
- 
 
 1355 
                                        <div style="font-size:12px;font-weight:600;">SmartDukaan</div>
- 
 
 1356 
                                        <div style="font-size:11px;color:#9ca3af;">Just now</div>
- 
 
 1357 
                                    </div>
- 
 
 1358 
                                </div>
- 
 
 1359 
                                <div class="nm-story-body">Upload a photo or video to fill the story</div>
- 
 
 1360 
                                <div>
- 
 
 1361 
                                    <div class="nm-story-title" id="nmPreviewTitleStory">Restock offer: up to 40% margin
- 
 
 1362 
                                        this week
- 
 
 1363 
                                    </div>
- 
 
 1364 
                                    <div class="nm-story-msg" id="nmPreviewBodyStory">Order now and earn extra margin on
- 
 
 1365 
                                        staples. Free logistics on orders above ₹5,000. Tap to view the catalogue.
- 
 
 1366 
                                    </div>
- 
 
 1367 
                                    <div class="nm-story-cta" id="nmPreviewCtaStory">View offer ↑</div>
- 
 
 1368 
                                </div>
- 
 
 1369 
                            </div>
- 
 
 1370 
                            <div class="nm-preview-cap">Partner app · home-screen story</div>
- 
 
 1371 
                        </div>
- 
 
 1372 
                    </div>
- 
 
 1373 
 
262 
                <div class="row">
 1374 
                    <div class="nm-card">
- 
 
 1375 
                        <h4 class="nm-card-title" style="margin-bottom:8px;">Summary</h4>
- 
 
 1376 
                        <div class="nm-summary-row">
- 
 
 1377 
                            <span class="nm-summary-key">Format</span>
- 
 
 1378 
                            <span class="nm-summary-val"><span id="nmSummaryFormat" class="nm-summary-badge">Push notification</span></span>
- 
 
 1379 
                        </div>
- 
 
 1380 
                        <div class="nm-summary-row">
- 
 
 1381 
                            <span class="nm-summary-key">Recipients</span>
- 
 
 1382 
                            <span class="nm-summary-val" id="nmSummaryRecipients">Not selected</span>
- 
 
 1383 
                        </div>
- 
 
 1384 
                        <div class="nm-summary-row">
- 
 
 1385 
                            <span class="nm-summary-key">Campaign</span>
- 
 
 1386 
                            <span class="nm-summary-val" id="nmSummaryCampaign">—</span>
- 
 
 1387 
                        </div>
- 
 
 1388 
                        <div class="nm-summary-row">
- 
 
 1389 
                            <span class="nm-summary-key">Category</span>
- 
 
 1390 
                            <span class="nm-summary-val" id="nmSummaryCategory">Not set</span>
- 
 
 1391 
                        </div>
- 
 
 1392 
                        <div class="nm-summary-row">
- 
 
 1393 
                            <span class="nm-summary-key">On tap</span>
- 
 
 1394 
                            <span class="nm-summary-val" id="nmSummaryTap"
- 
 
 1395 
                                  style="word-break:break-all;max-width:60%;">—</span>
- 
 
 1396 
                        </div>
263 
                    <div class="col-lg-5 form-group">
 1397 
                        <div class="nm-summary-row">
- 
 
 1398 
                            <span class="nm-summary-key">Expires</span>
- 
 
 1399 
                            <span class="nm-summary-val" id="nmSummaryExpires">—</span>
- 
 
 1400 
                        </div>
264 
                        <p class="bold-details">Image Url</p>
 1401 
                        <div class="nm-summary-row">
- 
 
 1402 
                            <span class="nm-summary-key">Scheduled</span>
- 
 
 1403 
                            <span class="nm-summary-val" id="nmSummarySchedule">Send now</span>
- 
 
 1404 
                        </div>
265 
                    </div>
 1405 
                    </div>
- 
 
 1406 
                </div><!-- /.nm-preview-sticky -->
- 
 
 1407 
            </div>
- 
 
 1408 
        </div>
- 
 
 1409 
    </div>
- 
 
 1410 
 
- 
 
 1411 
    <!-- ─── Calendar tab ────────────────────────────────────────────── -->
- 
 
 1412 
    <div class="nm-tab-content" data-tab-content="calendar">
- 
 
 1413 
        <div class="nm-card">
- 
 
 1414 
            <div style="margin-bottom:12px;font-size:13px;color:#6b7280;">
- 
 
 1415 
                <b style="color:#111;">Legend:</b>
- 
 
 1416 
                <span style="display:inline-block;width:10px;height:10px;background:#3a87ad;border-radius:2px;margin:0 4px 0 12px;"></span>Scheduled
- 
 
 1417 
                <span style="display:inline-block;width:10px;height:10px;background:#5cb85c;border-radius:2px;margin:0 4px 0 12px;"></span>Dispatched
- 
 
 1418 
                <span style="display:inline-block;width:10px;height:10px;background:#999;border-radius:2px;margin:0 4px 0 12px;"></span>Cancelled
- 
 
 1419 
                <span style="display:inline-block;width:10px;height:10px;background:#d9534f;border-radius:2px;margin:0 4px 0 12px;"></span>Failed
- 
 
 1420 
            </div>
- 
 
 1421 
            <div id="notification-calendar">
266 
                    <div class="col-lg-6 form-group">
 1422 
                <div class="nc-header">
- 
 
 1423 
                    <button class="nc-nav-btn" id="ncPrev">‹</button>
- 
 
 1424 
                    <button class="nc-nav-btn today" id="ncToday">Today</button>
- 
 
 1425 
                    <button class="nc-nav-btn" id="ncNext">›</button>
- 
 
 1426 
                    <div class="nc-title" id="ncTitle">—</div>
- 
 
 1427 
                </div>
- 
 
 1428 
                <table class="nc-grid">
- 
 
 1429 
                    <thead>
- 
 
 1430 
                    <tr>
- 
 
 1431 
                        <th>Sun</th>
- 
 
 1432 
                        <th>Mon</th>
- 
 
 1433 
                        <th>Tue</th>
- 
 
 1434 
                        <th>Wed</th>
- 
 
 1435 
                        <th>Thu</th>
- 
 
 1436 
                        <th>Fri</th>
- 
 
 1437 
                        <th>Sat</th>
- 
 
 1438 
                    </tr>
- 
 
 1439 
                    </thead>
- 
 
 1440 
                    <tbody id="ncBody"></tbody>
- 
 
 1441 
                </table>
- 
 
 1442 
            </div>
- 
 
 1443 
        </div>
- 
 
 1444 
 
- 
 
 1445 
        <!-- Upcoming Scheduled Notifications table -->
- 
 
 1446 
        <div class="nm-card" style="margin-top:16px;">
- 
 
 1447 
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
- 
 
 1448 
                <div>
- 
 
 1449 
                    <b style="color:#111;font-size:15px;">Upcoming Scheduled Notifications</b>
- 
 
 1450 
                    <div style="font-size:12px;color:#6b7280;margin-top:2px;">
267 
                        <input placeholder="Image Url" id="imageUrl" name="imageUrl" type="text" value=""
 1451 
                        Content, audience and status for every future PUSH fire in the next
- 
 
 1452 
                        <select id="nslDays" style="border:1px solid #e5e7eb;border-radius:4px;padding:2px 4px;">
- 
 
 1453 
                            <option value="7">7</option>
- 
 
 1454 
                            <option value="30" selected>30</option>
- 
 
 1455 
                            <option value="60">60</option>
268 
                               class="form-control input-sm">
 1456 
                            <option value="90">90</option>
- 
 
 1457 
                        </select>
- 
 
 1458 
                        days.
269 
                    </div>
 1459 
                    </div>
270 
                </div>
 1460 
                </div>
- 
 
 1461 
                <button type="button" id="nslRefresh" class="nm-btn nm-btn-outline">Refresh</button>
- 
 
 1462 
            </div>
- 
 
 1463 
            <div style="overflow-x:auto;">
- 
 
 1464 
                <table class="table table-striped" id="nslTable" style="margin:0;font-size:13px;">
- 
 
 1465 
                    <thead>
- 
 
 1466 
                    <tr>
- 
 
 1467 
                        <th style="white-space:nowrap;">When</th>
- 
 
 1468 
                        <th>Group</th>
- 
 
 1469 
                        <th>Content</th>
- 
 
 1470 
                        <th>Category</th>
- 
 
 1471 
                        <th style="text-align:right;white-space:nowrap;">Audience</th>
- 
 
 1472 
                        <th>Status</th>
- 
 
 1473 
                        <th style="text-align:right;">Actions</th>
- 
 
 1474 
                    </tr>
- 
 
 1475 
                    </thead>
- 
 
 1476 
                    <tbody id="nslBody">
- 
 
 1477 
                    <tr>
- 
 
 1478 
                        <td colspan="7" style="text-align:center;color:#9ca3af;padding:24px;">Loading…</td>
- 
 
 1479 
                    </tr>
- 
 
 1480 
                    </tbody>
- 
 
 1481 
                </table>
- 
 
 1482 
            </div>
- 
 
 1483 
        </div>
271 
 
 1484 
 
- 
 
 1485 
        <!-- Recent Notifications (everything you've created, all formats) -->
- 
 
 1486 
        <div class="nm-card" style="margin-top:16px;">
- 
 
 1487 
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
272 
                <div class="row">
 1488 
                <div>
- 
 
 1489 
                    <b style="color:#111;font-size:15px;">Recent Notifications</b>
273 
                    <div class="col-lg-5 form-group">
 1490 
                    <div style="font-size:12px;color:#6b7280;margin-top:2px;">
- 
 
 1491 
                        Every notification (Push, Pop-up, Story) you've created in the last
274 
                        <input style="zoom:1.3;" type="checkbox" name="showImage" id="showImage" value="false">
 1492 
                        <select id="nrlDays" style="border:1px solid #e5e7eb;border-radius:4px;padding:2px 4px;">
- 
 
 1493 
                            <option value="7">7</option>
275 
                        <span style="font-size:14px;" class="bold-details">Show Image</span>
 1494 
                            <option value="30" selected>30</option>
- 
 
 1495 
                            <option value="60">60</option>
- 
 
 1496 
                            <option value="90">90</option>
- 
 
 1497 
                        </select>
- 
 
 1498 
                        days. Most recent first.
276 
                    </div>
 1499 
                    </div>
277 
                </div>
 1500 
                </div>
- 
 
 1501 
                <button type="button" id="nrlRefresh" class="nm-btn nm-btn-outline">Refresh</button>
278 
            </div>
 1502 
            </div>
- 
 
 1503 
            <div style="overflow-x:auto;">
- 
 
 1504 
                <table class="table table-striped" id="nrlTable" style="margin:0;font-size:13px;">
- 
 
 1505 
                    <thead>
- 
 
 1506 
                    <tr>
- 
 
 1507 
                        <th style="white-space:nowrap;">Created</th>
- 
 
 1508 
                        <th>Format</th>
- 
 
 1509 
                        <th>Group</th>
- 
 
 1510 
                        <th>Content</th>
- 
 
 1511 
                        <th>Category</th>
- 
 
 1512 
                        <th>Delivery</th>
- 
 
 1513 
                        <th style="text-align:right;white-space:nowrap;">Audience</th>
- 
 
 1514 
                        <th style="text-align:right;">Actions</th>
- 
 
 1515 
                    </tr>
- 
 
 1516 
                    </thead>
- 
 
 1517 
                    <tbody id="nrlBody">
- 
 
 1518 
                    <tr>
- 
 
 1519 
                        <td colspan="8" style="text-align:center;color:#9ca3af;padding:24px;">Loading…</td>
- 
 
 1520 
                    </tr>
- 
 
 1521 
                    </tbody>
- 
 
 1522 
                </table>
- 
 
 1523 
            </div>
- 
 
 1524 
        </div>
- 
 
 1525 
    </div>
279 
 
 1526 
 
- 
 
 1527 
    #* Content Library + Bulk Send tab bodies — hidden while the tabs themselves are commented out.
- 
 
 1528 
    <!-- ─── Content Library tab (placeholder) ───────────────────────── -->
- 
 
 1529 
    <div class="nm-tab-content" data-tab-content="library">
- 
 
 1530 
        <div class="nm-empty">
- 
 
 1531 
            <i class="fa fa-folder-open-o"></i>
- 
 
 1532 
            <b style="color:#111;font-size:16px;">Content Library</b>
- 
 
 1533 
            <div style="margin-top:6px;">Saved drafts will appear here. Coming soon.</div>
- 
 
 1534 
        </div>
- 
 
 1535 
    </div>
280 
 
 1536 
 
- 
 
 1537 
    <!-- ─── Bulk Send tab (placeholder) ─────────────────────────────── -->
- 
 
 1538 
    <div class="nm-tab-content" data-tab-content="bulk">
281 
            <div class="col-lg-4">
 1539 
        <div class="nm-empty">
- 
 
 1540 
            <i class="fa fa-upload"></i>
- 
 
 1541 
            <b style="color:#111;font-size:16px;">Bulk Send</b>
- 
 
 1542 
            <div style="margin-top:6px;">Upload a CSV to send notifications in bulk. Coming soon.</div>
- 
 
 1543 
        </div>
- 
 
 1544 
    </div>
- 
 
 1545 
    *#
282 
 
 1546 
 
283 
                <div class="row">
 1547 
    <!-- Mobile-only floating "Preview" button. On desktop the preview panel is
284 
                    <div class="col-lg-5 form-group">
 1548 
         always visible on the right (and sticky-pinned as you scroll). -->
285 
                        <p class="bold-details">Expiry Date</p>
 1549 
    <button type="button" id="nmPreviewFab" class="nm-preview-fab">
286 
                    </div>
 - 
 
287 
                    <div class="col-lg-6 form-group">
 1550 
        <i class="fa fa-mobile"></i> Preview
288 
                        <input id="expireSat" name="dateTime" type="text" value="" class="form-control input-sm">
 - 
 
289 
                    </div>
 1551 
    </button>
- 
 
 1552 
</section>
290 
 
 1553 
 
- 
 
 1554 
<!-- Mobile preview modal — receives the .nm-preview-sticky node on open so we
- 
 
 1555 
     don't duplicate the preview DOM (all the existing jQuery selectors keep working). -->
- 
 
 1556 
<div id="nmMobilePreviewModal" class="modal fade" tabindex="-1" role="dialog">
- 
 
 1557 
    <div class="modal-dialog">
- 
 
 1558 
        <div class="modal-content" style="background:white;">
291 
                    <div class="col-lg-5 form-group">
 1559 
            <div class="modal-header">
- 
 
 1560 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
292 
                        <p class="bold-details">Message Type</p>
 1561 
                <h4 class="modal-title">Live preview</h4>
- 
 
 1562 
            </div>
- 
 
 1563 
            <div class="modal-body" id="nmMobilePreviewBody" style="max-height:80vh;overflow-y:auto;"></div>
- 
 
 1564 
        </div>
- 
 
 1565 
    </div>
- 
 
 1566 
</div>
- 
 
 1567 
 
- 
 
 1568 
<!-- Create Campaign Group modal -->
- 
 
 1569 
<div id="nmGroupModal" class="modal fade" tabindex="-1" role="dialog">
- 
 
 1570 
    <div class="modal-dialog">
- 
 
 1571 
        <div class="modal-content" style="background:white;">
- 
 
 1572 
            <div class="modal-header">
- 
 
 1573 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
- 
 
 1574 
                <h4 class="modal-title">Create Campaign Group</h4>
293 
                    </div>
 1575 
            </div>
- 
 
 1576 
            <div class="modal-body">
294 
                    <div class="col-lg-6 form-group">
 1577 
                <div class="nm-field">
295 
                        <select id="messageType" name="messageType" class="form-control input-sm">
 1578 
                    <label class="nm-field-label">Name <span class="nm-req">*</span></label>
- 
 
 1579 
                    <input class="nm-input" id="nmGroupName" type="text" placeholder="e.g. Monsoon Restock Drive">
- 
 
 1580 
                </div>
- 
 
 1581 
                <div class="nm-field">
296 
                            <option selected disabled>Message Type</option>
 1582 
                    <label class="nm-field-label">Description <span
297 
                            <option value="notification">Notification</option>
 1583 
                            style="color:#6b7280;font-weight:400;">(optional)</span></label>
- 
 
 1584 
                    <textarea class="nm-textarea" id="nmGroupDesc" placeholder="Short note about what this group is for"
298 
                            <option value="announcement">Announcement</option>
 1585 
                              style="min-height:60px;"></textarea>
- 
 
 1586 
                </div>
- 
 
 1587 
                <div class="nm-two-col">
- 
 
 1588 
                    <div class="nm-field">
299 
                            <option value="scheme">Scheme</option>
 1589 
                        <label class="nm-field-label">Starts on <span
- 
 
 1590 
                                style="color:#6b7280;font-weight:400;">(optional)</span></label>
300 
                            <option value="marketing">Marketing</option>
 1591 
                        <input class="nm-input" id="nmGroupStarts" type="date">
301 
                        </select>
 1592 
                    </div>
- 
 
 1593 
                    <div class="nm-field">
- 
 
 1594 
                        <label class="nm-field-label">Ends on <span
- 
 
 1595 
                                style="color:#6b7280;font-weight:400;">(optional)</span></label>
- 
 
 1596 
                        <input class="nm-input" id="nmGroupEnds" type="date">
302 
                    </div>
 1597 
                    </div>
303 
                </div><br>
 1598 
                </div>
- 
 
 1599 
            </div>
- 
 
 1600 
            <div class="modal-footer">
- 
 
 1601 
                <button type="button" class="nm-btn nm-btn-outline" data-dismiss="modal">Cancel</button>
- 
 
 1602 
                <button type="button" id="nmCreateGroupBtn" class="nm-btn nm-btn-primary">Create</button>
- 
 
 1603 
            </div>
- 
 
 1604 
        </div>
- 
 
 1605 
    </div>
- 
 
 1606 
</div>
304 
 
 1607 
 
- 
 
 1608 
<!-- Schedule modal -->
- 
 
 1609 
<div id="nmScheduleModal" class="modal fade" tabindex="-1" role="dialog">
- 
 
 1610 
    <div class="modal-dialog">
- 
 
 1611 
        <div class="modal-content" style="background:white;">
- 
 
 1612 
            <div class="modal-header">
- 
 
 1613 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
- 
 
 1614 
                <h4 class="modal-title">Schedule Notification</h4>
- 
 
 1615 
            </div>
- 
 
 1616 
            <div class="modal-body">
- 
 
 1617 
                <p style="color:#6b7280;font-size:13px;">
- 
 
 1618 
                    Add one or more send times. The notification will fan out at each scheduled moment.
- 
 
 1619 
                </p>
- 
 
 1620 
                <div style="display:flex;gap:8px;">
- 
 
 1621 
                    <input id="scheduleDateInput" type="datetime-local" class="nm-input" style="flex:1;">
- 
 
 1622 
                    <button id="addScheduleDate" type="button" class="nm-btn nm-btn-outline">Add date</button>
- 
 
 1623 
                </div>
- 
 
 1624 
                <ul id="scheduleDatesList" style="list-style:none;padding-left:0;margin-top:12px;min-height:32px;"></ul>
- 
 
 1625 
            </div>
- 
 
 1626 
            <div class="modal-footer">
- 
 
 1627 
                <button type="button" class="nm-btn nm-btn-outline" data-dismiss="modal">Close</button>
- 
 
 1628 
                <button type="button" id="nmSubmitScheduleBtn" class="nm-btn nm-btn-primary">Schedule &amp; save
- 
 
 1629 
                </button>
- 
 
 1630 
            </div>
- 
 
 1631 
        </div>
- 
 
 1632 
    </div>
- 
 
 1633 
</div>
305 
 
 1634 
 
- 
 
 1635 
<!-- Full campaign detail modal (content + audience list + schedules) -->
- 
 
 1636 
<div id="campaignDetailModal" class="modal fade" tabindex="-1" role="dialog">
- 
 
 1637 
    <div class="modal-dialog modal-lg">
- 
 
 1638 
        <div class="modal-content" style="background:white;">
306 
                <div class="row">
 1639 
            <div class="modal-header">
- 
 
 1640 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
- 
 
 1641 
                <h4 class="modal-title" id="cdmTitle">Campaign detail</h4>
- 
 
 1642 
            </div>
- 
 
 1643 
            <div class="modal-body" id="cdmBody" style="max-height:70vh;overflow-y:auto;">
- 
 
 1644 
                <div style="text-align:center;color:#9ca3af;padding:24px;">Loading…</div>
- 
 
 1645 
            </div>
- 
 
 1646 
            <div class="modal-footer">
- 
 
 1647 
                <button type="button" class="nm-btn nm-btn-outline" data-dismiss="modal">Close</button>
- 
 
 1648 
            </div>
- 
 
 1649 
        </div>
- 
 
 1650 
    </div>
- 
 
 1651 
</div>
307 
 
 1652 
 
- 
 
 1653 
<!-- Calendar event detail modal -->
- 
 
 1654 
<div id="scheduleDetailModal" class="modal fade" tabindex="-1" role="dialog">
- 
 
 1655 
    <div class="modal-dialog">
- 
 
 1656 
        <div class="modal-content" style="background:white;">
- 
 
 1657 
            <div class="modal-header">
- 
 
 1658 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
- 
 
 1659 
                <h4 class="modal-title">Scheduled Notification</h4>
- 
 
 1660 
            </div>
- 
 
 1661 
            <div class="modal-body">
- 
 
 1662 
                <p><strong>Campaign:</strong> <span id="ncDetailCampaign"></span></p>
- 
 
 1663 
                <p><strong>Scheduled at:</strong> <span id="ncDetailWhen"></span></p>
- 
 
 1664 
                <p><strong>Status:</strong> <span id="ncDetailStatus"></span></p>
- 
 
 1665 
                <p><strong>Schedule ID:</strong> <span id="ncDetailScheduleId"></span></p>
- 
 
 1666 
 
- 
 
 1667 
                <div id="ncAddScheduleBox"
- 
 
 1668 
                     style="display:none;margin-top:16px;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:#f9fafb;">
- 
 
 1669 
                    <p style="margin:0 0 8px;font-weight:600;">Add another schedule for this campaign</p>
- 
 
 1670 
                    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;">
- 
 
 1671 
                        <div style="flex:1;min-width:140px;">
- 
 
 1672 
                            <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">Date</label>
- 
 
 1673 
                            <input type="date" id="ncAddDate" class="form-control"/>
- 
 
 1674 
                        </div>
- 
 
 1675 
                        <div style="flex:1;min-width:140px;">
- 
 
 1676 
                            <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">Time</label>
- 
 
 1677 
                            <input type="time" id="ncAddTime" class="form-control"/>
- 
 
 1678 
                        </div>
308 
                    <input class="btn btn-primary create-notification-button" type="button" value="Send Notification">
 1679 
                        <button type="button" id="ncAddSaveBtn" class="nm-btn nm-btn-primary">Save</button>
- 
 
 1680 
                    </div>
- 
 
 1681 
                    <p id="ncAddErr" style="display:none;color:#dc2626;font-size:12px;margin:8px 0 0;"></p>
309 
                </div>
 1682 
                </div>
310 
 
 - 
 
311 
            </div><br><br><br>
 1683 
            </div>
- 
 
 1684 
            <div class="modal-footer">
- 
 
 1685 
                <button type="button" class="nm-btn nm-btn-outline" data-dismiss="modal">Close</button>
- 
 
 1686 
                <button type="button" id="ncAddScheduleBtn" class="nm-btn nm-btn-outline" style="display:none;">+ Add
- 
 
 1687 
                    another schedule
- 
 
 1688 
                </button>
- 
 
 1689 
                <button type="button" id="ncCancelBtn" class="nm-btn nm-btn-outline"
- 
 
 1690 
                        style="color:#dc2626;border-color:#fecaca;">Cancel Schedule
- 
 
 1691 
                </button>
- 
 
 1692 
            </div>
312 
        </form>
 1693 
        </div>
313 
    </div>
 1694 
    </div>
- 
 
 1695 
</div>
- 
 
 1696 
 
314 
</section>
 1697 
<script>
- 
 
 1698 
    $(function () {
- 
 
 1699 
        var mopts = {
- 
 
 1700 
            includeSelectAllOption: true, multiple: true, maxHeight: 200,
- 
 
 1701 
            buttonWidth: '100%', numberDisplayed: 1, enableFiltering: true, enableCaseInsensitiveFiltering: true
- 
 
 1702 
        };
- 
 
 1703 
        $('#fofo-users').multiselect($.extend({}, mopts, {nonSelectedText: 'Select partner'}));
- 
 
 1704 
        $('#state-users').multiselect($.extend({}, mopts, {nonSelectedText: 'Select state'}));
- 
 
 1705 
        $('#internal-users').multiselect($.extend({}, mopts, {nonSelectedText: 'Select user'}));
- 
 
 1706 
 
- 
 
 1707 
        $('input[name="dateTime"]').daterangepicker(getSingleDatePicker());
- 
 
 1708 
 
- 
 
 1709 
        function tickPreviewClock() {
- 
 
 1710 
            var d = new Date();
- 
 
 1711 
            var hh = d.getHours(), mm = String(d.getMinutes()).padStart(2, '0');
- 
 
 1712 
            $('#nmPhoneTime').text(hh + ':' + mm);
- 
 
 1713 
            $('#nmPhoneDate').text(d.toLocaleDateString(undefined, {weekday: 'long', day: 'numeric', month: 'short'}));
- 
 
 1714 
        }
315 
 
 1715 
 
- 
 
 1716 
        tickPreviewClock();
- 
 
 1717 
        setInterval(tickPreviewClock, 30000);
- 
 
 1718 
    });
- 
 
 1719 
 
- 
 
 1720 
    function nmChangeUrl() {
- 
 
 1721 
        if ($('#selectedUrl').val() === 'other') {
- 
 
 1722 
            $('#url').show();
- 
 
 1723 
        } else {
- 
 
 1724 
            $('#url').hide();
- 
 
 1725 
        }
- 
 
 1726 
    }
- 
 
 1727 
</script>