{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Add Exercises</title>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" >
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" >
<style>
.img-thumbs {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  margin: 1.5rem 0;
  padding: 0.75rem;
}
.img-thumbs-hidden {
  display: none;
}
.img-wrap span.close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff2e9;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-wrap {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
}
ul#imgList {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    gap: 10px;
    padding: 0;
}
.thumb-Images img.thumb {
    height: 130px;
    width: 130px;
    object-fit: contain;
}
.wrapper-thumb {
  position: relative;
  display:inline-block;
  margin: 1rem 0;
  justify-content: space-around;
}

.img-preview-thumb {
  background: #fff;
  border: 1px solid none;
  border-radius: 0.25rem;
  box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
  margin-right: 1rem;
  max-width: 140px;
  padding: 0.25rem;
}

.remove-btn{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:.7rem;
  top:-5px;
  right:10px;
  width:20px;
  height:20px;
  background:white;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}

.remove-btn:hover{
  box-shadow: 0px 0px 3px grey;
  transition:all .3s ease-in-out;
}

/* videos */

/* .video-upload input[type="file"] {
  position: absolute;
  right: -9999px;
  visibility: hidden;
  opacity: 0;
} */
.video-upload input[type="submit"] {
  position: relative;
  padding: 1rem 3rem;
  background: #0c8fda;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
  border: 0;
  color: #fff;
}
.video-upload input[type="submit"]:hover {
  background: #0b7fc2;
  color: #fff;
  cursor: pointer;
  transition: 0.2s all;
}
.video-upload label {
    position: relative;
    padding: 1rem 3rem;
    background: #1e39c3;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    color: #fff;
}
div.files {
  background: #eee;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 10px;
}
div.files ul {
  list-style: none;
  padding: 0;
  max-height: 150px;
  overflow: auto;
}
div.files ul li {
  padding: 0.5rem 0;
  padding-right: 2rem;
  position: relative;
}
div.files ul li i {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translatey(-50%);
}

span.file-size {
  color: #999;
  padding-left: 0.5rem;
}
.checkbox > input:checked {
    background-color: #1733C1;
    border: 1px solid #1733C1;
}
.checkbox > input {
    height: 21px;
    width: 21px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 1px solid #ccc;
    transition-duration: 0.3s;
    background-color: #ffffff;
    cursor: pointer;
    margin-right: 10px;
}
.checkbox > input:checked + span::before {
    content: '\2713';
    display: block;
    text-align: center;
    color: #ffffff;
    position: absolute;
    left: 6px;
    top: 2px;
    font-size: 13px;
}
.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}
.minutes-cols {
    width: 100%;
    background: #f0f0f0;
    border-radius: 10px;
}
</style>
<div class="main-content pt-0">
	<div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-12">
                <h2 class="f-22 mb-0 bold">Add Exercise</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>   
        </div>
        <form class="row" action="/edit-discover-exerices/{{exe_obj.id}}" id="add-discover-exerices" method="POST" enctype="multipart/form-data" novalidate="novalidate">
            {%csrf_token%}
            <div class="row new-user-table bookings exercise-add mt-3">
                <div class="col-12 col-md-12">
                    <div class="card addService fortune dashboard-card">
                        <h4 class="f-16 bold border-btm pb-2 mb-3">Add Exercise</h4>
                        <div class="row">
                            <div class="col-12 mb-4">
                                <div class="card p-4">
                                    <div class="picUpdate d-flex align-items-center justify-content-between">
                                        <div class="profile-pic text-center">
                                            <div class="d-block align-items-center">
                                                <div class="text-center">
                                                    <img src="{% if exe_obj.primary_image %} {{ exe_obj.primary_image }} {% else %}/static/admin/images/user-default.png{% endif %}"
                                                        id="profile-image" />
                                                </div>
                                                <div class="px-3">
                                                    <input type="file" name='primary_image' id="myFileInput"
                                                        onchange="loadfile(event)" accept="image/*" />
                                                    <input type="button" class="btn mb-0"
                                                        onclick="document.getElementById('myFileInput').click()"
                                                        value="Upload a New Photo" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                          
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Exercise Name</label>
                                <input type="text" placeholder="Exercise Name" name="name" class="form-control" value="{{ exe_obj.name}}">
                            </div>
                            <div class="col-12">
                                <div class="exercise-checks">
                                    {% if exe_obj.exercise_type == "sets" %} 
                                    <label class="checkbox">
                                        <input type="checkbox" id="loggedReps" name="logged" value="Logged In" checked >
                                        <span class="gray">In Reps</span>
                                    </label>
                                    {% else %}
                                    <label class="checkbox ms-3">
                                        <input type="checkbox" id="loggedMins" name="logged" value="Logged In" checked >
                                        <span class="gray">In Mins</span>
                                    </label>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="row">
                                    {% if exe_obj.sets %}
                                    <div class="col-12 col-md-9"> 
                                        <div class="row minutes-cols"> 
                                            <div class="col-12 col-md-4">
                                                <label class="col-form-label">Sets</label>
                                                <input type="number" placeholder="Sets" name="sets" class="form-control" id="setsField" value="{{ exe_obj.sets}}">
                                            </div>

                                            <div class="col-12 col-md-4">
                                                <label class="col-form-label">Reps</label>
                                                <input type="number" placeholder="Reps" name="reps" class="form-control" id="repsField" value="{{ exe_obj.reps}}">
                                            </div>

                                            <div class="col-12 col-md-4">
                                                <label class="col-form-label">Weight</label>
                                                <input type="number" placeholder="Weight" name="weight" class="form-control" id="weightField" value="{{ exe_obj.weight}}">
                                            </div>

                                        </div>
                                    </div>
                                    {% else %}
                                    <div class="col-12 col-md-3">
                                        <div class="row  minutes-cols"> 
                                            <div class="col-12">
                                                <label class="col-form-label">Minutes</label>
                                                <input type="number" placeholder="Minutes" name="minutes" class="form-control" id="minutesField" value="{{ exe_obj.minutes }}">
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                           
                         
                         
                            <div class="col-12 mb-3">
                                <label class="col-form-label">Description</label>
                                <textarea class= 'ckeditor' type="texteditor" name="description" id="content"> {{ exe_obj.description }}</textarea>
                            </div>

                          </div>
                            <div class="col-12 mt-4">
                              <label  class="col-form-label">Videos</label>
                              <div class="multi-images video-upload">
                                      <div id="file_list">
                                        <div class="js-file my-4">
                                          <div class="js-thumb"></div>
                                          <p>Uploaded Video Path:  {{ exe_obj.videos }}</p>
                                          <input class="js-inputFile" type="file" name="videos" accept="video/mp4" />
                                        </div>
                                      </div>
                              </div>
                          </div>
                            <div class="col-12">
                                <div class="save-btn text-center mt-4">
                                    <button type="submit" class="save-btn">Add Sub-Exercise</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
	</div>
</div>
<div id="validationModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title">Invalid Image Size</h5>
              <button type="button" class="btn-close" onclick="closeModal()" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <p>The image dimensions should be at least 800 x 650 pixels. Please select a larger image.</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
          </div>
      </div>
  </div>
</div>
</div>
</div>
{%endblock%}

{%block js%}
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- images uplaod-->
<script>

    const repsCheckbox = document.getElementById("loggedReps");
    const minsCheckbox = document.getElementById("loggedMins");
    const setsField = document.getElementById("setsField");
    const repsField = document.getElementById("repsField");
    const weightField = document.getElementById("weightField");
    const minutesField = document.getElementById("minutesField");

    repsCheckbox.addEventListener("change", function() {
        if (this.checked) {
            minsCheckbox.checked = false;
            setsField.disabled = false;
            repsField.disabled = false;
            weightField.disabled = false;
            minutesField.disabled = true;
        }
    });

    minsCheckbox.addEventListener("change", function() {
        if (this.checked) {
            repsCheckbox.checked = false;
            setsField.disabled = true;
            repsField.disabled = true;
            weightField.disabled = true;
            minutesField.disabled = false;
        }
    });

function loadfile(event){
	var image = document.getElementById('profile-image');
	image.src = URL.createObjectURL(event.target.files[0]);
};

var imgUpload = document.getElementById('upload-img')
  , imgPreview = document.getElementById('img-preview')
  , imgUploadForm = document.getElementById('form-upload')
  , totalFiles
  , previewTitle
  , previewTitleText
  , img;

imgUpload.addEventListener('change', previewImgs, true);

function previewImgs(event) {
  totalFiles = imgUpload.files.length;
  
     if(!!totalFiles) {
    imgPreview.classList.remove('img-thumbs-hidden');
  }
  
  for(var i = 0; i < totalFiles; i++) {
    wrapper = document.createElement('div');
    wrapper.classList.add('wrapper-thumb');
    removeBtn = document.createElement("span");
    nodeRemove= document.createTextNode('x');
    removeBtn.classList.add('remove-btn');
    removeBtn.appendChild(nodeRemove);
    img = document.createElement('img');
    img.src = URL.createObjectURL(event.target.files[i]);
    img.classList.add('img-preview-thumb');
    wrapper.appendChild(img);
    wrapper.appendChild(removeBtn);
    imgPreview.appendChild(wrapper);
   
    $('.remove-btn').click(function(){
      $(this).parent('.wrapper-thumb').remove();
    });    

  }
  
  
}
</script>

<!-- Videos-->
<script>
{% comment %} /**
 * 複数ファイルアップロード処理
 */
 var $fileList = $('#file_list');
$fileList
  .on('click.deleteFile', '.js-deleteBtn', function(evt) {    // ファイル削除イベント
  var $li = $(this).closest('.js-file');
  // input[type="file"]が1つ以上の場合は該当のinpuタグを削除する
  if ($fileList.find('.js-file').length > 1) {
    $li.remove();
  } else {
    $li.find('.js-thumb').remove();
  }
  return false;
})
  .on('change.inputFile', '.js-inputFile', function(e) {    // ファイル選択時のイベント
  var $input = $(this),
      $li = $input.closest('.js-file'),
      $newLi = $li.clone();

  $newLi.find('.js-inputFile').val(null);
  // 新しくinputタグを追加する
  $fileList.append($newLi);

  var file = e.target.files[0],
      reader = new FileReader(),
      $thumb = $input.prevAll('.js-thumb:first');

  reader.onload = (function(file) {
    return function(e) {
      if (file.type.match('image.*')) {
        $thumb.empty();
        var imageArea = `
<div class="col-12"><img src="${e.target.result}" style="object-fit: cover; width: 100%;height: 50vw;max-height: 300px;"></div>
<div class="col-12">
<div>${file.name}</div>
<button class="js-editBtn btn btn-success edit"><i class="fa fa-edit"></i></button>
<button class="js-deleteBtn btn btn-danger"><i class="fa fa-ban"></i></button>
</div>
`;
        $thumb.append(imageArea);
      } else if (file.type.match('video.*')) {
        $thumb.empty();
        var videoArea = `
<div class="col-12"><video src="${e.target.result}" loop="false" controls="controls" download="false" style="object-fit: cover; width: 100%;height: 50vw;max-height: 300px;"></video></div>
<div class="col-12">
<div>${file.name}</div>
<button class="js-editBtn btn btn-success edit"><i class="fa fa-edit"></i></button>
<button class="js-deleteBtn btn btn-danger"><i class="fa fa-ban"></i></button>
</div>
`;
        $thumb.append(videoArea);
      }
    };
  })(file);
  reader.readAsDataURL(file);
  $input.hide();
  return this;
}); {% endcomment %}


</script>
<script>
  function loadfile(event) {
      const file = event.target.files[0];
      const img = new Image();
      
      img.src = URL.createObjectURL(file);
      img.onload = function() {
          const width = img.naturalWidth;
          const height = img.naturalHeight;

          console.log(width)
          console.log(height)


          if (width < 800 || height < 650) {
              // Show modal instead of alert

              showModal();
              document.getElementById('myFileInput').value = ''; // Clear the file input
          } else {
              // If the image meets the size requirement, proceed with your logic
              console.log("Image is valid:", width, "x", height);
              // Your code to handle the image goes here
              var image = document.getElementById('profile-image');
            image.src = URL.createObjectURL(event.target.files[0]);

          }

          URL.revokeObjectURL(img.src); // Clean up memory
      };
  }

  function showModal() {
      const modal = document.getElementById('validationModal');
      modal.style.display = 'block';
  }

  function closeModal() {
      const modal = document.getElementById('validationModal');
      modal.style.display = 'none';
  }

  // Optional: Close the modal when clicking outside of it
  window.onclick = function(event) {
      const modal = document.getElementById('validationModal');
      if (event.target == modal) {
          modal.style.display = 'none';
      }
  };
</script>
{% endblock %}