<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="blogForm" method="post" action="/manage-blogs/update-blogs" enctype="multipart/form-data" novalidate>
            <div class="card card-info">
                <div class="card-header">
                    <h4 class="card-title">
                        <%=sectionTitle%>
                    </h4>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Titel</label>
                            <input type="text" id="title" name="title" class="form-control"
                                placeholder="Enter title" required value="<%=dataInfo.title%>"
                                oninput="capitalizeFirstLetter(this)"
                                oninput="validate(this)">
                        </div>
                        
                

                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Kategorie </label>
                            <select
                              id="category_id"
                              name="category_id"
                              class="form-control"
                              required
                            >
                              <option selected disabled>Wählen</option>
                              <% if (categories && categories.length) { %> <% for (let item of
                              categories) { %>
                              <option value="<%= item.id %>" <%=dataInfo.blog_category_id === item.id ? 'selected' : '' %>><%= item.title %></option>
                              <% } %> <% } else { %>
                              <option disabled>No categories available</option>
                              <% } %>
                            </select>
                          </div>


                          <div class="form-group col-md-6">
                            <label for="inputName">Ausgewähltes Bild </label>
                            <input
                              type="file"
                              class="form-control imagepickerWithPreviewId"
                              data-previewelement="imagePreview"
                              id="image"
                              name="image"
                              accept="image/*"
                              onchange="return fileValidation()"
                              style="padding: 4px 4px;"
                            />
                            <label
                              id="image-error"
                              style="display: none"
                              class="error"
                              for="image"
                              >Please upload file having extensions .jpeg/.jpg/.png/.gif
                              only.</label
                            >
              
                          
                          </div>

                          <div class="form-group col-md-6">
                            
                    <%if(dataInfo.image !=null && dataInfo.image !="" ){%>
                        <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                            src="/<%=dataInfo.image %>" alt="Image">
                        <%}else{%>
                            <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                src="/images/no-image.jpg%>" alt="Image">
                            <%}%>
                        </div>


                        <div class="form-group col-md-12">
                            <label class="required" for="inputName">Summary</label>
                            <textarea
                              type="text"
                              id="summary"
                              data-lang="en"
                              name="summary"
                              class="form-control summary"
                              placeholder="Enter Seiteninhalt"
                              required
                            ><%=dataInfo.summary %></textarea>
                          </div>


                          <div class="form-group col-md-12">
                            <label class="" for="inputName">Inhalt </label>
                            <textarea
                              type="text"
                              id="editor"
                              data-oc-toggle="ckeditor"
                              data-lang="en"
                              name="content"
                              class="form-control editor"
                              placeholder="Enter Inhalt"
                            ><%=dataInfo.content %></textarea>
                            <!-- <div id="editor-error" style="color: red;font-weight: 700; display: none;">Please provide the Seiteninhalt.</div> -->


                          </div>



                      <div class="form-group col-md-6">
                        <label  for="inputName">Video</label>
                        <input
                          type="file"
                          class="form-control imagepickerWithPreviewId"
                          data-previewelement="videoPreview"
                          id="video"
                          name="video"
                          accept="video/*"
                          style="padding: 4px 4px;"
                          onchange="return fileValidation()"
                        />
                        <%if(dataInfo.video !=null && dataInfo.video !=""
                        ){%>
                     
                        <video id="videoPreview" width="320" height="240" controls  src="/<%=dataInfo.video %>">
                          Your browser does not support the video tag.
                        </video>
        
                        <%}else{%>
                        <img
                          class="img-thumbnail"
                          id="imagePreview"
                          style="width: 100px"
                          src="/images/no-image.jpg%>"
                          alt="Image"
                        />
                        <%}%>
                      </div>

                      <div class="form-group col-md-6">
                        <label class="" for="inputName">Video-Miniaturansicht</label>
                        <input
                          type="file"
                          class="form-control imagepickerWithPreviewId3"
                          data-previewelement="imagePreview3"
                          id="image"
                          name="video_thumbnail"
                          
                          
                          accept="image/*"
                          onchange="return fileValidation()"
                          style="padding: 4px 4px;"
                        />
                        <label
                          id="image-error"
                          style="display: none"
                          class="error"
                          for="image"
                          >Please upload file having extensions .jpeg/.jpg/.png/.gif
                          only.</label
                        >
                        <div class="form-group col-md-6 mt-3">
                            <img
                              class="img-thumbnail"
                              id="imagePreview3"
                              style="width: 100px"
                              src=""
                              alt=""
                            />
        
                            <%if(dataInfo.video_thumbnail !=null && dataInfo.video_thumbnail !=""
                            ){%>
                            <img
                              class="img-thumbnail"
                              id="imagePreview3"
                              style="width: 100px"
                              src="/<%=dataInfo.video_thumbnail %>"
                              alt="Image"
                            />
                            <%}else{%>
                            <img
                              class="img-thumbnail"
                              id="imagePreview"
                              style="width: 100px"
                              src="/images/no-image.jpg%>"
                              alt="Image"
                            />
                            <%}%>
                          </div>
                      </div>
          
                      <div class="form-group col-md-6">
                        <label for="inputName">PDF</label>
                        <input
                          type="file"
                          class="form-control imagepickerWithPreviewId"
                          id="pdf"
                          name="pdf"
                          accept="application/pdf"
                          style="padding: 4px 4px;"
                          onchange="return fileValidation()"
                        />
                      </div>


                      <div class="form-group col-md-6">
                        <label class="required" for="inputName">Status</label>
                        <select id="active_status" name="active_status" class="form-control" required>
                            <option selected disabled>Select Status</option>
                            <option value="1" <%=dataInfo.status==1 ? 'selected' : '' %>>Active
                            </option>
                            <option value="0" <%=dataInfo.status==0 ? 'selected' : '' %>>Inactive
                            </option>
                        </select>
                    </div>

                        <input type="hidden" id="page_id" name="page_id" value="<%=dataInfo.id%>" />
                        <input type="hidden" id="old_image" name="old_image" value="<%=dataInfo.image%>" />
                        <input type="hidden" id="old_video" name="old_video" value="<%=dataInfo.video%>" />
                        <input type="hidden" id="old_pdf" name="old_pdf" value="<%=dataInfo.pdf%>" />
                        <input
                        type="hidden"
                        id="old_video_thumbnail"
                        name="old_video_thumbnail"
                        value="<%=dataInfo.video_thumbnail %>"
                      />


                     
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" id="savebtn" class="btn btn-info">Speichern</button>
                    <button type="button" class="btn btn-default">
                        <a href="/manage-blogs/listing">Zurück</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<script>
    function fileValidation() {
   const fileInput = document.getElementById('video');
   const file = fileInput.files[0];
   const previewElement = document.getElementById('videoPreview');
   
   if (file) {
     // Check the file type
     const validTypes = ['video/mp4', 'video/webm', 'video/ogg'];
     if (!validTypes.includes(file.type)) {
       alert('Please select a valid video file (mp4, webm, or ogg).');
       fileInput.value = ''; // Clear the input if the file is invalid
       return false;
     }

     // Check the file size (5MB example)
   //   const maxSize = 5 * 1024 * 1024; // 5MB
   //   if (file.size > maxSize) {
   //     alert('The file size exceeds the maximum limit of 5MB.');
   //     fileInput.value = ''; // Clear the input if the file is too large
   //     return false;
   //   }

     // Show a preview of the video
     previewElement.style.display = 'block'; // Make the video player visible
     const videoURL = URL.createObjectURL(file);
     previewElement.src = videoURL; // Set the video source
   }
   return true; // Proceed with form submission if validation passes
 }
 </script>

<script>
  $(document).ready(function () {
  $("#cmsForm").validate({
    rules: {
      html_data: {
        required: true
      },
      short_description: {
        required: true
      }
    },
    messages: {
      html_data: {
        required: "Please enter the content"
      },
      short_description: {
        required: "Please enter a short description"
      }
    },
    submitHandler: function(form) {
      form.submit(); // Submit the form if all validations pass
    }
  });
});

</script>

<%- contentFor('pageStyleSection')%>
    <link rel="stylesheet" href="/stylesheets/style.css" />