{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | 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;
}

.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;
}

</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">Edit Sub-Exercise</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>   
        </div>
        <form class="row" action="/edit-sub-exercise/{{sub_exercise_obj.id}}" id="add-trianer" 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">Edit Sub-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">
                                            <div class="d-block align-items-center">
                                                <div class="text-center">
                                                  <img src="{% if sub_exercise_obj.images %}{{ sub_exercise_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">Trainer Name</label>
                                <input type="text" placeholder="Trainer Name" name="t_name" class="form-control" maxlength="15">
                            </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="{{sub_exercise_obj.name}}">
                            </div>
                           <!--  <div class="col-12 col-md-6">
                                <label class="col-form-label">Sub-Exercise</label>
                                <input type="text" placeholder="Sub-Exercise" name="sub_name" class="form-control" maxlength="100">
                            </div> -->
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Focus Area</label>
                                <input type="text" placeholder="Focus Area" name="focus_area" class="form-control" value="{{sub_exercise_obj.focus_area}}">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Sets</label>
                                <input type="number" placeholder="Sets" name="sets" class="form-control" value="{{sub_exercise_obj.sets}}">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Reps</label>
                                <input type="number" placeholder="Reps" name="reps" class="form-control" value="{{sub_exercise_obj.reps}}">
                            </div>
                         
                            <div class="col-12 col-md-12">
                                <label class="col-form-label">YouTube Video link</label>
                                <input type="text" placeholder="video link" name="youtube_link" class="form-control" value="{{sub_exercise_obj.youtube_link}}">
                            </div>

                            <div class="col-12">
                                <label class="col-form-label">Description</label>
                                <textarea rows="4" cols="50" type="text" placeholder="Description" name="description" class="form-control" >{{sub_exercise_obj.description}}</textarea>
                            </div>

                            <div class="col-12">
                                <label class="col-form-label">Comments</label>
                                <textarea rows="4" cols="50" type="text" placeholder="Comments" name="comments" class="form-control" >{{sub_exercise_obj.comments}}</textarea>
                            </div>
                          
                           
                            <div class="col-12">
                                <label class="col-form-label">Note</label>
                                <textarea rows="4" cols="50" type="text" placeholder="Note" name="note" class="form-control" >{{sub_exercise_obj.note}}</textarea>
                            </div>

                            <div class="col-12">
                              <label class="col-form-label">Images</label>
                              <div class="multi-images">
                                  <!-- Existing images -->
                                  {% if sub_exercise_images %}
                                      <div class="form-group mt-2">
                                          <label>Existing Images</label>
                                          <div class="row">
                                              {% for image in sub_exercise_images %}
                                                  <div class="col-12 col-md-3">
                                                      <div class="position-relative sub-exer-img">
                                                          <img src="{{ image }}" class="img-fluid sub-exercs-img" alt="Existing Image">
                                                          <button type="button" class="remove-btn" data-image="{{ image }}">Remove</button>
                                                      </div>
                                                  </div>
                                              {% endfor %}
                                          </div>
                                      </div>
                                  {% endif %}
                                  
                                  <!-- New image upload -->
                                  <div class="form-group mt-2">
                                      <label for="">Choose Images</label>
                                      <input type="file" class="form-control" name="images" multiple id="upload-img" />
                                  </div>
                                  <div class="img-thumbs img-thumbs-hidden" id="img-preview"></div>
                              </div>
                          </div>
                          
                          <div class="col-12 mt-4">
                              <label class="col-form-label">Videos</label>
                              <div class="multi-images video-upload">
                                  <!-- Existing videos -->
                                  {% if sub_exercise_obj.videos %}
                                      <div class="form-group mt-2">
                                          <label>Existing Videos</label>
                                          <div id="file_list " class="row">
                                              {% for video in sub_exercise_videos %}
                                                  <div class="js-file col-12 col-md-6 sub-video">
                                                      <div class="js-thumb">
                                                          <video controls height="220px" width="100%">
                                                              <source src="{{ video }}" type="video/mp4">
                                                          </video>
                                                      </div>
                                                      <button type="button" class="remove-btn" data-video="{{ video }}">Remove</button>
                                                  </div>
                                              {% endfor %}
                                          </div>
                                      </div>
                                  {% endif %}
                                  <input type="hidden" class="form-control" name="removed_images" id="removed_images" value="">
                                  <input type="hidden" class="form-control" name="removed_videos" id="removed_videos" value="">
                                  
                                  
                                  <!-- New video upload -->
                                  <div class="form-group mt-2">
                                      <label for="">Choose Videos</label>
                                      <input class="js-inputFile" type="file" name="videos" accept="video/mp4" />
                                  </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>
  <!-- Modal -->
<div class="modal fade confirm-modal" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title " id="confirmationModalLabel">Confirmation</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body border-0">
        <p class="text-center">Are you sure you want to remove this item?</p>
      </div>
      <div class="modal-footer justify-content-center ">
        <button type="button" class="border-btn" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="save-btn" id="confirmRemoveBtn">Yes</button>
      </div>
    </div>
  </div>
</div>
</div>


{%endblock%}

{%block js%}
<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>


<script>
  // JavaScript for removing existing images and videos
  var removedImages = [];
  var removedVideos = []
  var isImage = false;
  var isVideo = false;
  var removeBtn = null;
  document.querySelectorAll('.remove-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        isImage = this.dataset.image !== undefined;
        isVideo = this.dataset.video !== undefined;
        removeBtn = this; // Keep a reference to the remove button
        
        // Show the confirmation modal
        $('#confirmationModal').modal('show');
        
        // Handle the click on the confirmation modal
        
    });
});
document.getElementById('confirmRemoveBtn').addEventListener('click', function() {
            // Close the modal
            $('#confirmationModal').modal('hide');
            
            // Perform removal logic
            if (isImage) {
                // Remove image logic
                var imageUrl = removeBtn.dataset.image;
                removedImages.push(imageUrl);
                var removedImagesJson = JSON.stringify(removedImages);
                $('#removed_images').val(removedImagesJson);
                // Implement logic to remove image (e.g., AJAX request or form submission with removal flag)
            }
            if (isVideo) {
                // Remove video logic
                var videoUrl = removeBtn.dataset.video;
                removedVideos.push(videoUrl);
                var removedVideosJson = JSON.stringify(removedVideos);
                $('#removed_videos').val(removedVideosJson);
                // Implement logic to remove video (e.g., AJAX request or form submission with removal flag)
            }
            // Remove the image or video element from the DOM
            removeBtn.parentElement.remove();
        });
</script>



<!-- images uplaod-->
<script>

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>
/**
 * 複数ファイルアップロード処理
 */
 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;
});
</script>
{% endblock %}