<!DOCTYPE html>
<html>

<head>
  <title> Dashboard - Doors & Specialities </title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/demo-custom/microbiotech/images/favicon.png" type="image/x-icon">
  <%- include('./includes/css-links') %>
</head>

<body>
  <main>
    <div class="dashboard-wrapper">
      <%- include('./includes/sidebar') %>
      <div class="dashboard-content">
        <div class="dashboard-card">
          <h2 class="mb-4"><%- course.title %></h2>
          <h5 id="top-heading" class="theme-h5">Add Module</h5>
          <form action="/demo-custom/microbiotech/api/course/new-module" class="product-upload-form" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="courseId" value="<%= course._id %>">
            <div class="row g-4">
              <div class="col-12">
                <div class="card-inner">
                  <h6 class="card-inner-h6">Upload thumbnail Image (JPG, PNG, WEBP)</h6>
                  <div class="img-upload-wrapper">
                    <input name="thumbnail" class="d-none image-upload" type="file" id="course-thumbnail" accept="image/*">
                    <label class="full-with-btn" for="course-thumbnail">Insert Image</label>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="card-inner">
                  <h6 class="card-inner-h6">Upload Video (MP4, AVI, MKV)</h6>
                  <div class="img-upload-wrapper">
                    <input class="vid-url" type="hidden" name="videoUrl" required>
                    <input class="d-none video-upload" type="file" id="course-video" accept="video/mp4,video/x-msvideo,video/x-matroska">
                    <label class="full-with-btn" for="course-video">Insert Video</label>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="card-inner">
                  <div class="row g-4">
                    <div class="col-12">
                      <div class="input-field">
                        <h6 class="card-inner-h6">Title</h6>
                        <input name="title" type="text" value="" required>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="input-field">
                        <h6 class="card-inner-h6">Description (Optional)</h6>
                        <textarea name="description"></textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button type="submit" class="theme-btn submit-product-form mt-3 ms-auto">Add Module</button>
          </form>
        </div>
        <div class="dashboard-card mt-3">
          <table class="table dashboard-table product-table">
            <thead>
              <tr>
                <th></th>
                <th>Thumbnail</th>
                <th>Title</th>
                <th>Duration</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <% course.modules.forEach((item,ind)=> { %>
              <tr>
                <td><%- ind + 1 %></td>
                <td>
                  <% if(item.thumbnailUrl) { %>
                  <img style="width: 150px;" class="img-fluid" src="/demo-custom/microbiotech<%- item.thumbnailUrl%>" />
                  <% } %>
                </td>
                <td><%- item.title %></td>
                <td><%- Math.floor(item.duration / 60) %> min <%- parseInt(item.duration % 60) %> sec</td>
                <td>
                  <!-- <a class="edit-module" href="/demo-custom/microbiotech/admin/edit-module/<%- item._id %>" title="Edit Modules"><i class="fa-solid fa-video"></i></a>
                  <a class="modify-item" title="Edit Course"><i class="fa-solid fa-pen-to-square"></i></a>
                  <form class="dangerous-form" data-warning="Do You want to Delete Course (<%- item.title %>)" action="/demo-custom/microbiotech/api/brand/delete" method="post">
                    <input type="hidden" name="id" value="<%= item.id %>">
                    <button class="delete-item" title="Delete Color"><i class="fa-solid fa-trash"></i></button>
                  </form> -->
                </td>
              </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
  <%- include('./includes/model-section-modal') %>
  <%- include('./includes/footer') %>
  <%- include('./includes/media-library') %>
  <%- include('./includes/script-links') %>
  <script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.1/"
        }
    }
  </script>
  <script type="module">
    import {
      ClassicEditor,
      Paragraph,
      Essentials,
      List,
      Font,
      Link,
      AutoLink
    } from 'ckeditor5';
    ClassicEditor
      .create(document.querySelector('[name="description"]'), {
        fontColor: {
          colors: [{
              color: 'hsl(0, 0%, 100%)',
              label: 'White'
            },
            {
              color: 'hsl(43, 74%, 49%)',
              label: 'Highlight'
            }
          ]
        },
        plugins: [Essentials, Paragraph, List],
        toolbar: [
          'undo', 'redo', '|', 'bulletedList', 'numberedList'
        ],
        initialData: ``,
      })
      .then(editor => {
        editor.model.document.on('change:data', (evt, data) => {
          $(`[name="description"]`).val((editor.getData()));
        });
      })
      .catch(error => {
        console.error(error);
      });
    ClassicEditor
      .create(document.querySelector('[name="shortDescription"]'), {
        fontColor: {
          colors: [{
              color: 'hsl(0, 0%, 100%)',
              label: 'White'
            },
            {
              color: 'hsl(43, 74%, 49%)',
              label: 'Highlight'
            }
          ]
        },
        plugins: [Essentials, Paragraph, List],
        toolbar: [
          'undo', 'redo', '|', 'bulletedList', 'numberedList'
        ],
        initialData: ``,
      })
      .then(editor => {
        editor.model.document.on('change:data', (evt, data) => {
          $(`[name="shortDescription"]`).val((editor.getData()));
        });
      })
      .catch(error => {
        console.error(error);
      });
  </script>
</body>

</html>