<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="cmsForm" method="post" action="/manage-recipes/update" 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 for="inputName">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"
                              
                            ><%=dataInfo.summary %></textarea>
                          </div> -->


                          <div class="form-group col-md-12">
                            <label class="required" 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"
                              oninput="validate(this)"
                              required
                            ><%=dataInfo.content %></textarea>
                            <div id="editor-error" style="color: red;font-weight: 700; display: none;">*Please provide the Inhalt.</div>

                          </div>


                          <!-- <div class="form-group col-md-12">
                            <label class="required" for="inputName">Dauer </label>
                            <input
                              type="number"
                              id="duration"
                              name="duration"
                              class="form-control"
                              placeholder="Enter Dauer"
                              
                              value="<%=dataInfo.duration %>"
                              oninput="validate(this)"
                            />
                          </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%>" />

                    </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-recipes/list">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>

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