Saturday_Sharing_Front/views/partials/dashboard/modal_form.ejs

 <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-md" role="document">
       <div class="modal-content">
          <div class="modal-body p-0">
               <div class="card bg-secondary border-0 mb-0">
                  <div id="pickCategory" class="card-header bg-transparent pb-5">
                     <div class="text-muted text-center mt-2 mb-3"><small>Pilih Tipe Materi</small></div>
                     <div class="text-muted text-center mt-2 mb-3 bold"><strong>Sabtu</strong></div>
                     <div class="btn-wrapper text-center">
                        <% if (locals.role == 'Admin'){ %>
                        <a onhref="#" <%= (locals.role=="Admin")? 'id=btnPintar' : 'id=btnDisabled' %> class="btn btn-neutral btn-icon">
                        <span class="btn-inner--icon"><img src="img/icons/pintar.png"></span>
                        <span class="btn-inner--text">Pintar</span>
                        </a>
                        <% } %>
                        <a href="#" id="btnSharing" class="btn btn-neutral btn-icon">
                        <span class="btn-inner--icon"><img src="img/icons/sharing.png"></span>
                        <span class="btn-inner--text">Sharing</span>
                        </a>
                        
                     </div>
                  </div>
                  <div id="pickForm" class="hide card-body px-lg-5 py-lg-5">
                     <% if (locals.role == 'Admin'){ %>
                        <form role="form" id="formCreateAdmin">
                           <input class="categoryField" type="hidden" name="Category">
                           <input type="hidden" name="withSummary" value="y">
                           <div class="text-center text-muted mb-4">
                              <small>Daftarkan Materi Saturday <span class="categoryTitle"></span></small>
                           </div>
                           <div class="form-group mb-3">
                              <label for="modalCompanySelect" class="form-control-label">Company</label>
                              <div class="input-group input-group-merge input-group-alternative" style="background-color: white;">
                                 <div class="input-group">
                                    <span class="col-9 input-group-text"><i class="ni ni-istanbul"></i>&nbsp;Pilih Company</span>
                                    <div class="form-group col-3 input-group-text" style="justify-content: end;">
                                       <label for="modalCompanyAll" class="form-control-label">&nbsp;All</label>
                                       <label class="custom-toggle">
                                         <input class="modalCompanyAll" type="checkbox">
                                         <span class="custom-toggle-slider rounded-circle"></span>
                                       </label>
                                   </div>
                                 </div>
                                 <select multiple name="company" class="form-control modalCompanySelect">
                                    <!-- <option value="">Pilih company</option> -->
                                    <option hidden class="hide" value="All">Semua</option>
                                    <% for(var i=0; i<companies.length; i++) {%>
                                       <option value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option>
                                    <% } %>
                                  </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="modalDivisionSelect" class="form-control-label">Division</label>
                              <div class="input-group input-group-merge input-group-alternative" style="background-color: white;">
                                 <div class="input-group">
                                    <span class="col-9 input-group-text"><i class="ni ni-shop"></i>&nbsp;Pilih Divisi</span>
                                    <div class="form-group col-3 input-group-text" style="justify-content: end;">
                                       <label for="modalDivisiAll" class="form-control-label">&nbsp;All</label>
                                       <label class="custom-toggle">
                                         <input class="modalDivisiAll" type="checkbox">
                                         <span class="custom-toggle-slider rounded-circle"></span>
                                       </label>
                                   </div>
                                 </div>
                                 <select name="division" class="form-control modalDivisionSelect" disabled>
                                    <!-- <option value="All">Semua</option> -->
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="title" class="form-control-label">Judul</label>
                              <div class="input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-books"></i></span>
                                 </div>
                                 <input name="Title" class="form-control" placeholder="Judul Materi" type="text" id="title">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="description" class="form-control-label">Tentang </label>
                              <textarea rows="3" name="Description" class="form-control" placeholder="Materi mengenai" type="text" id="description">
                              </textarea>
                           </div>
                           <div class="form-group mb-0">
                              <label for="date" class="form-control-label">Periode</label>
                              <div class="row align-items-center">
                                 <div class="col">
                                     <div class="form-group">
                                         <div class="input-group">
                                             <div class="input-group-prepend">
                                                 <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                                             </div>
                                             <input name="Start_Date" class="form-control datepicker" placeholder="Start date" type="text">
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col">
                                     <div class="form-group">
                                         <div class="input-group">
                                             <div class="input-group-prepend">
                                                 <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                                             </div>
                                             <input name="End_Date" class="form-control datepicker" placeholder="End date" type="text">
                                         </div>
                                     </div>
                                 </div>
                             </div>
                           </div>
                           <div class="form-group">
                              <label for="videoFile" class="form-control-label">File Gambar</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-camera-compact"></i></span>
                                 </div>
                                 <input accept="image/*" id="thumbnail" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="thumbnail">Masukkan file thumbnail materi</label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="formAttachmentPintar" class="form-control-label">File Materi</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-book-bookmark"></i></span>
                                 </div>
                                 <input multiple="multiple" id="formAttachment" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="formAttachment">Masukkan file bahan presentasi</label>
                              </div>
                              <ul id="uploadedAttachment"></ul>
                           </div>
                           <div class="completeData hide">
                              <div class="form-group mb-3">
                                 <label class="form-control-label">Presenter</label>
                                 <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-single-02"></i></span>
                                    </div>
                                    <input name="Name" class="form-control" placeholder="Dipresentasikan oleh" type="text">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="date" class="form-control-label">Tanggal</label>
                                 <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                                    </div>
                                    <input name="Presented" class="form-control datepicker" placeholder="Dipresentasikan pada">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="join-form" class="form-control-label">File absensi <a href="/template/Absensi_Sharing_Template.xlsx" download>Template</a></label>
                                 <div class="custom-file input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-badge"></i></span>
                                    </div>
                                    <input accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" class="custom-file-input" id="join-form" lang="en">
                                    <label class="custom-file-label" for="join-form">Masukkan file excel absensi</label>
                                 </div>
                                 <small id="participantCounter"></small>
                                 <input type="hidden" name="ParticipantList"/>
                              </div>
                              <div class="form-group">
                                 <label for="videoFile" class="form-control-label">Video Presentasi</label>
                                 <div class="custom-file input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-camera-compact"></i></span>
                                    </div>
                                    <input accept="video/*" id="videoFile" type="file" class="custom-file-input" lang="en">
                                    <label class="custom-file-label" for="videoFile">Masukkan file video presentasi</label>
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="formFile" class="form-control-label">File Gambar Kegiatan</label>
                                 <div class="custom-file input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-image"></i></span>
                                    </div>
                                    <input multiple="multiple" accept="image/*" id="formFile" type="file" class="custom-file-input" lang="en">
                                    <label class="custom-file-label" for="formFile">Masukkan file gambar kegiatan saat presentasi</label>
                                 </div>
                                 <ul id="uploadedFile"></ul>
                              </div>
                           </div>
                           <div class="text-center">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                              <button type="submit" class="btn btn-primary">Save</button>
                           </div>
                        </form>
                     <% } else{ %>
                        <form role="form" id="formCreate">
                           <input class="categoryField" type="hidden" name="Category">
                           <div class="text-center text-muted mb-4">
                              <small>Isi Materi Saturday <span class="categoryTitle"></span></small>
                           </div>
                           <div class="form-group mb-3">
                              <label for="presenter" class="form-control-label">Presenter</label>
                              <div class="input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-single-02"></i></span>
                                 </div>
                                 <input name="Name" class="form-control" placeholder="Dipresentasikan oleh" type="text" id="presenter">
                              </div>
                           </div>
                           <% if (locals.role == 'Sub-Admin'){ %>
                              <input type="hidden" name='company' value="<%= locals.company %>">
                           <% } else{ %>
                              <div class="form-group">
                                 <label for="modalCompanySelect" class="form-control-label">Company</label>
                                 <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-istanbul"></i></span>
                                    </div>
                                    <select name="company" class="form-control modalCompanySelect">
                                       <option  value="">Pilih Company</option>
                                       <% for(var i=0; i<companies.length; i++) {%>
                                          <option value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option>
                                       <% } %>
                                    </select>
                                 </div>
                              </div>
                           <% } %>
                           <% if (locals.role == 'Sub-Admin'){ %>
                              <input type="hidden" name='division' value="<%= locals.division %>">
                           <% } else{ %>
                              <div class="form-group">
                                 <label for="modalDivisionSelect" class="form-control-label">Division</label>
                                 <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                       <span class="input-group-text"><i class="ni ni-shop"></i></span>
                                    </div>
                                    <select name="division" class="form-control modalDivisionSelect" disabled>
                                       <option  value="">Pilih divisi dari list</option>
                                    </select>
                                 </div>
                              </div>
                           <% } %>
                           <div class="form-group">
                              <label for="title" class="form-control-label">Judul</label>
                              <div class="input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-books"></i></span>
                                 </div>
                                 <input name="Title" class="form-control" placeholder="Judul Materi" type="text" id="title">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="description" class="form-control-label">Tentang </label>
                              <textarea rows="3" name="Description" class="form-control" placeholder="Materi mengenai" type="text" id="description">
                              </textarea>
                           </div>
                           <div class="form-group">
                              <label for="date" class="form-control-label">Tanggal</label>
                              <div class="input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                                 </div>
                                 <input name="Presented" class="form-control datepicker" placeholder="Dipresentasikan pada">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="join-form" class="form-control-label">File absensi <a href="/template/Absensi_Sharing_Template.xlsx" download>Template</a></label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-badge"></i></span>
                                 </div>
                                 <input accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" class="custom-file-input" id="join-form" lang="en">
                                 <label class="custom-file-label" for="join-form">Masukkan file excel absensi</label>
                              </div>
                              <small id="participantCounter"></small>
                              <input type="hidden" name="ParticipantList"/>
                           </div>
                           <div class="form-group">
                              <label for="videoFile" class="form-control-label">Video Presentasi</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-camera-compact"></i></span>
                                 </div>
                                 <input accept="video/*" id="videoFile" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="videoFile">Masukkan file video presentasi</label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="videoFile" class="form-control-label">File Gambar</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-camera-compact"></i></span>
                                 </div>
                                 <input accept="image/*" id="thumbnail" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="thumbnail">Masukkan file thumbnail materi</label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="formAttachment" class="form-control-label">File Materi</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-book-bookmark"></i></span>
                                 </div>
                                 <input multiple="multiple" id="formAttachment" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="formAttachment">Masukkan file bahan presentasi</label>
   
                              </div>
                              <ul id="uploadedAttachment"></ul>
                           </div>
                           <div class="form-group">
                              <label for="formFile" class="form-control-label">File Gambar Kegiatan</label>
                              <div class="custom-file input-group input-group-merge input-group-alternative">
                                 <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-image"></i></span>
                                 </div>
                                 <input multiple="multiple" accept="image/*" id="formFile" type="file" class="custom-file-input" lang="en">
                                 <label class="custom-file-label" for="formFile">Masukkan file gambar saat presentasi</label>
                              </div>
                              <ul id="uploadedFile"></ul>
                           </div>
                           <div class="text-center">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                              <button type="submit" class="btn btn-primary">Save</button>
                           </div>
                        </form>
                     <% } %>
                  </div>
               </div>
          </div>
       </div>
   </div>
</div>