<link href="/assets/owl.carousel.min.css" rel="stylesheet">

<body>
  <link rel="stylesheet" href="/css/dashboard.css">
  <!-- Sidenav -->
  <% include ../partials/sidebar %>
  <!-- Main content -->
  <div class="main-content">
    <!-- Top navbar -->
    <% include ../partials/navbar %>
    <!-- Header -->
    <input type="hidden" id="selMaterial">
    <div class="header bg-gradient-primary pb-7 pt-5 pt-md-8">
      <div class="container-fluid">
        <% if(locals.role=='Admin') { %>
        <span class="h3 ml-2 mb-0 text-white text-uppercase d-none d-lg-inline-block">
          Summary Data Materi by Admin
        </span>
        <% } %>
        <br>
        <br>
        <div class="header-body">
          <!-- Card stats -->
            <div class="owl-carousel owl-theme">
              <% for(var i =0;i<locals.summaries.length;i++){ %>
                <%
                  var complete = locals.summaries[i].attributes.materials.data.filter(i=>i.attributes.Presented != null&&i.attributes.Presented != '').length; 
                  var count = locals.summaries[i].attributes.materials.data.length;  
                %>
                <div class="item">
                  <div class="card card-stats mb-4 mb-xl-0">
                    <div class="card-body">
                      <div class="row">
                        <div class="col">
                          <span class="h4 font-weight-bold mb-0"><%= (locals.summaries[i].attributes.materials.data.length>0)?locals.summaries[i].attributes.materials.data[0].attributes.Title +' <'+locals.summaries[i].attributes.materials.data[0].attributes.Category+'>' :'' %></span>
                        </div>
                        <div class="col-auto">
                          <div class="icon icon-shape <%= (complete>=count)? 'bg-success':'bg-warning' %> text-white rounded-circle shadow">
                            <i class="fas <%= (complete>=count)? 'fa-check':'fa-spinner' %>"></i>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                          <h5 class="card-title text-muted mb-0"> <%= locals.summaries[i].attributes.Company %>, <%= locals.summaries[i].attributes.Division %></h5>
                        </div>
                        <div class="col-auto">
                          <%
                          var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; 
                          var date  = new Date(locals.summaries[i].attributes.createdAt); 
                          %>
                          <h5 class="card-title text-muted mb-0"> <%= date.toLocaleDateString("id-ID", options) %></h5>
                        </div>
                      </div>
                      <p class="mt-3 mb-0 text-sm">
                        <span class="text-nowrap"><span class="font-weight-bold"><%= complete %></span> <span class="text-muted">dari</span> <b><%= count %></b> divisi</span>
                        <span class="<%= (complete>=count)? 'text-success':'text-warning' %> mr-2"><i class="ni <%= (complete>=count)? 'ni-check-bold':'ni-fat-remove' %>"></i> <%= (complete>=count)? 'Lengkap':'Menunggu' %> </span>
                        <button data-toggle="modal" data-target="#modal-summary" class="btn btn-icon btn-primary btn-sm" material="<%= (locals.summaries[i].attributes.materials.data.length>0)?locals.summaries[i].attributes.materials.data[0].attributes.Title:'' %>" summary="<%= locals.summaries[i].id %>" type="button">
                          <span class="btn-inner--icon"><i class="ni ni-zoom-split-in"></i></span>
                        </button>
                      </p>
                    </div>
                  </div>
                </div>
              <% } %>
              <!-- <div class="item">
                <div class="card card-stats mb-4 mb-xl-0">
                  <div class="card-body">
                    <div class="row">
                      <div class="col">
                        <span class="h4 font-weight-bold mb-0">Multi-verse and Augmented Reality</span>
                      </div>
                      <div class="col-auto">
                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                          <i class="fas fa-spinner"></i>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col">
                        <h5 class="card-title text-muted mb-0"> Yamaha, ICT</h5>
                      </div>
                      <div class="col-auto">
                        <h5 class="card-title text-muted mb-0"> 17 Mar 2022</h5>
                      </div>
                    </div>
                    <p class="mt-3 mb-0 text-sm">
                      <span class="text-nowrap"><span class="font-weight-bold">2</span> <span class="text-muted">dari</span> <b>5</b> divisi</span>
                      <span class="text-warning mr-2"><i class="ni ni-check-bold"></i> Menunggu </span>
                    </p>
                  </div>
                </div>
              </div> -->
            </div>
        </div>
        <br>
        <span class="h3 ml-2 mb-0 text-white text-uppercase d-none d-lg-inline-block">
          Dokumentasi Materi 
          <a data-toggle="modal" data-target="#modal-form" id="addMaterial" href="#"><i class="ni ni-fat-add btn-circle"></i></a>
        </span>
        <br>
        <br>
        <form action="/" method="post">
        <select name="Category" class="form-control form-control-sm ml-2 mt-2" id="categorySelect">
          <option>Pilih Kategory</option>
          <option value="Pintar" <%= locals.category &&(category == 'Pintar')  ? 'selected' : '' %>>Sabtu Pintar</option>
          <option value="Sharing" <%= locals.category &&(category == 'Sharing')  ? 'selected' : '' %>>Sabtu Sharing</option>
        </select>
        <div class="row mt-3 <%= locals.role!='Admin' ?'hide' : '' %>">
          <div class="col-sm">
            <select name="company" class="form-control form-control-sm ml-2" id="companySelect">
              <option value="">Pilih Company</option>
              <option <%= locals.company &&(company == 'All')  ? `selected` : '' %> value="All">Semua</option>
              <% for(var i=0; i<companies.length; i++) {%>
                <% var selected = locals.company &&(company == companies[i].id)  ? `selected` : '' %>
                  <option <%= selected %> value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option>
              <% } %>
            </select>
          </div>
          <div class="col-sm ml-2 pr-2">
            <select <%= !locals.company || (company == '')  ? `disabled` : '' %> name="division" class="form-control form-control-sm ml-0" id="divisionSelect" <% locals.company?'':'disabled' %>>
              <option <%= locals.division &&(division == 'All')  ? `selected` : '' %> value="All">Semua</option>
              <% if(locals.divisions) { for(var i=0; i<divisions.length; i++) {%>
                <% var selected = locals.division &&(division == divisions[i].id)  ? `selected` : '' %>
                  <option <%= selected %> value="<%= divisions[i].id %>"><%= divisions[i].attributes.Name %></option>
              <% } }%>
            </select>
          </div>
        </div>
        <div class="text-right ml-2 mt-4">
          <button type="submit" class="btn btn-success btn-sm">Search</button>
        </div>
      </form>
      </div>
    </div>
    <!-- Page content -->
    <div class="container-fluid mt--7">
      <div class="row justify-content-left">
        <% if(locals.material) { for(var i=0;i<material.length;i++) {%>
        <div class="col-xl-4 order-xl-2 mb-5 mb-xl-0 mt-9">
          <div class="container-fluid card card-profile shadow material">
            <div class="row justify-content-center <%= (locals.editable && (locals.role=='Admin' || !material[i].attributes.By_Admin))?'cardThumbnailImage':'' %>">
              <div class="col-lg-3 order-lg-2">
                <img class="card-thumbnail" src="<%= material[i].attributes.Thumbnail.data?material[i].attributes.Thumbnail.data.attributes.url : ''%>">
              </div>
            </div>
              <div class="option-menu card-header text-center border-0 <%= (locals.editable && (locals.role=='Admin' || !material[i].attributes.By_Admin)) ? 'pt-6' : 'pt-7' %> pb-0 mb-0" <%= (locals.editable && (locals.role=='Admin' || locals.role=='Editor')) ? 'style="z-index: 1;"' : '' %>>
                <div class="p-2">
                  <% if(locals.editable && (locals.role=='Admin' || !material[i].attributes.By_Admin)){ %>
                  <a value="<%= material[i].id %>" href="#" class="btn btn-sm btn-warning removeMaterial">
                    <span class="btn-inner--icon"><i class="ni ni-bag-17"></i></span>
                    <span class="btn-inner--text">Remove</span>
                  </a>
                  <a category="<%= material[i].attributes.Category %>" value="<%= material[i].id %>" href="#" class="btn btn-sm btn-primary editMaterial">
                    <span class="btn-inner--icon"><i class="ni ni-ruler-pencil"></i></span>
                    <span class="btn-inner--text">Edit</span></a>
                    <% } %>
                </div>
              </div>
            <div class="card-body <%= (locals.editable) ? 'pt-0' : 'pt-4' %> pb-0 pb-2">
              <div class="text-center mt-4">
                <h3>
                  <%= material[i].attributes.Title%>
                </h3>
                  <div class="h5 font-weight-300">
                    <% if(material[i].attributes.Presented){ %>
                      <% 
                        var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; 
                        var date  = new Date(material[i].attributes.Presented);
                      %>
                      <i class="ni location_pin mr-2"></i><%= material[i].attributes.Name %>, <%= date.toLocaleDateString("id-ID", options) %>
                    <% } else{ %>
                      Belum Presentasi
                      <% } %>
                  </div>
                <div class="h5 mt-1">
                  <i class="ni business_briefcase-24 mr-2"></i><%= material[i].attributes.company.data?material[i].attributes.company.data.attributes.Name: 'Semua' %> - <%= material[i].attributes.division.data? material[i].attributes.division.data.attributes.Name:'' %>
                </div>
                <hr class="my-2" />
                <a href="/material/<%= material[i].id %>">Masuk</a>
                <hr class="my-2" />
                <% if(material[i].attributes.participants.data.length <= 0) {%>
                <a category="<%= material[i].attributes.Category %>" value="<%= material[i].id %>" href="#" class="btn btn-sm btn-primary completeMaterial">Lengkapi</a>
                <% }else{ %>
                  <a value="<%= material[i].id %>" href="#" class="btn btn-sm btn-primary resetMaterial">Reset</a>
                <% } %>
              </div>
              <div class="row">
                <div class="col">
                  <div class="card-stats card-profile-stats d-flex justify-content-center">
                      <div>
                        <a href="#" class="openParticipants" value="<%= material[i].id %>">
                        <span class="heading"><%= material[i].attributes.participants.data.length %></span>
                      </a>
                      <span class="description">Peserta</span>
                      </div>
                    <div>
                      <span class="heading"><%= material[i].attributes.Attachments.data?material[i].attributes.Attachments.data.length:'0' %></span>
                      <span class="description">Files</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <% } }%>
      </div>
      <!-- Footer -->
      <footer class="footer"></footer>
    </div>
  </div>
  <% include ../partials/dashboard/modal_form %>
  <% include ../partials/dashboard/modal_participants %>
  <% include ../partials/dashboard/modal_pintar_summary %>
  
  <!-- Include scripts -->
  <% include ../partials/scripts %>
  <script src="js/page/dashboard.js"></script>
  <script src="/vendor/owl-carousel/owl.carousel.min.js"></script>
  <script>
    $('.owl-carousel').owlCarousel({
        loop:false,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            800:{
                items:2
            },
            1000:{
                items:4
            }
        }
    })
  </script>
</body>

