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

</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 Sub-Exercise</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>   
        </div>
        <form class="row" action="/add-sub-exercise/{{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">Add 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 text-center">
                                            <div class="d-block align-items-center">
                                                <div class="text-center">
                                                    <img src="/static/admin/images/user-default.png"
                                                        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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </div>

                            <div class="col-12 mb-3">
                                <label class="col-form-label">Description</label>
                                <textarea class= 'ckeditor' type="texteditor" name="content" id="content"></textarea>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="col-form-label">Comments</label>
                                <textarea class= 'ckeditor' type="texteditor" name="content" id="content"></textarea>
                            </div>
                          
                           
                            <div class="col-12 mb-3">
                                <label class="col-form-label">Note</label>
                                <textarea class= 'ckeditor' type="texteditor" name="content" id="content"></textarea>
                            </div>

                            <div class="col-12">
                              <label  class="col-form-label">Images</label>
                              <div class="multi-images">
                                      <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">
                                      <div id="file_list">
                                        <div class="js-file my-4">
                                          <div class="js-thumb"></div>
                                          <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>

{%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>


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 %}