
 
 <script>
   
  async function updateFilesListAxios(AlbumID) {
        axios.get('/album/getsubalbumsAxios/'+AlbumID)
        .then(async function (response) {
          $("#btnBackFiles").attr("data-address",response.data.parentUrl)
          // handle success
          console.log(response.data);
          $("#SubAlbumsTable").empty();
          $("#publicAlbumFiles").empty();
          $("#PublicSubAlbumsTable").empty();
          $("#albumFilesPopUp").empty();
          var idSubAlbums ;
          var idFiles ;
          if(response.data.albumType){
          idSubAlbums="SubAlbumsTable";
          idFiles = "albumFilesPopUp";
          }else {
          
           
          idSubAlbums="PublicSubAlbumsTable";
          idFiles = "albumPublicFilesPopUp";
          }
          
          for (var i = 0; i < response.data.subAlbums.length; i++) {
            await $( "#"+idSubAlbums ).append(
                $("<tr class='border-bottom-info'style='text-align:center'><th scope='row'></th><td> &nbsp <i class='fa-solid fa-folder'> &nbsp </i>"+response.data.subAlbums[i].Name+"</td><td><button id='"+response.data.subAlbums[i].Url+"' class='btn btn-primary btnChooseFolder' type='button'>فولدر ها</button></td></tr>")
              );
           }
           for (var i = 0; i < response.data.albumFiles.length; i++) {
             await $( "#"+idFiles ).append(
                 $("<tr class='border-bottom-info'style='text-align:center'><th scope='row'>"+i+"</th><td>"+response.data.albumFiles[i].Name+"</td><td><img style='max-height: 70px' src='"+response.data.albumFiles[i].Url+"' /></td><td><button  id='"+response.data.albumFiles[i]._id+"' data-address='"+response.data.albumFiles[i].Url+"' class='btn btn-primary btnChooseFile' type='button'>انتخاب</button></td><td><button data-address='"+response.data.albumFiles[i].Url+"' class='btn btn-primary btnCopyAddress' type='button'>کپی آدرس</button></td></tr>")
               );
            }
        })
    }
   
   
 </script>
 
 <script type="text/javascript">
 
 document.addEventListener("DOMContentLoaded", function(){
 
   
     // Initialize instances:
     var socket = io.connect();
     var siofu = new SocketIOFileUpload(socket);
     socket.emit('address', {id: "<%= privateAlbums[0].Url %>" });
     // Configure the three ways that SocketIOFileUpload can read files:
    
     siofu.listenOnInput(document.getElementById("upload_input"));
     siofu.listenOnDrop(document.getElementById("file_drop"));
     
 // var uplodProgressBarParrent = document.getElementById("uplodProgressBarParrent");
 // var uplodProgressBar = document.getElementById("uplodProgressBar");
 siofu.addEventListener("start", function(event){
   console.log("EVENTS Start", event);
   uplodProgressBarParrent.style.display = "block";
   console.log("File Ali Start is", event.file.name , "percent loaded");
   $("#uplodProgressBarParrent").append(
      $("<div class='progress'><div id='"+event.file.name+"'class='progress-bar-animated bg-primary progress-bar-striped'role='progressbar'style='width: 90.42%' aria-valuenow='10' aria-valuemin='0'aria-valuemax='100'></div></div>")
    );
 }); 
   
     // Do something on upload progress:
     siofu.addEventListener("progress", function(event){
         console.log("EVENTS", event);
         var percent = event.bytesLoaded / event.file.size * 100;
         console.log("File is", percent.toFixed(2), "percent loaded");
         console.log("File Ali is", event.file.name , "percent loaded");
         document.getElementById(event.file.name).style.width = percent.toFixed(2) + "%"
         document.getElementById(event.file.name).innerHTML = parseInt(percent.toFixed(2))
         
         
         
     });
 
     // Do something when a file is uploaded:
     siofu.addEventListener("complete", function(event){
       document.getElementById(event.file.name).parentNode.remove()
       console.log(event.success);
       socket.on("uploadedFile", (url) => {
         console.log(url); 
         var urlArray = url.split("/");
            urlArray.splice(0 , 1);
            url = "";
            for(var i=0; i < urlArray.length; i++) {
              url =   url + '/'  + urlArray[i] 
            }
          console.log("urlArray")
          console.log(urlArray)
          console.log("url")
          console.log(url)
          
         axios.get('/album/getFileByAlbumAndNameAxios/'+url.split("/")[url.split("/").length - 2]+'/'+url.split("/")[url.split("/").length - 1])
         .then(async function (response) {
           
           setAlbumFiles(response.data.file.Url,response.data.file._id)
           
           
         })
         
       });
       
     });
 
 }, false);
 </script>

<script>
   
    $(document).ready(function() {
      
      
      $(".btnCopyAddress").on('click', function(event){
          event.stopPropagation();
          event.stopImmediatePropagation();
          var select = $(this);
          var address = select.attr('data-address');
          navigator.clipboard.writeText("https://panel.hadafebartar.com"+address);
          
          alert("آدرس فایل کپی شد");
          
          
          
      });
    
     $(document.body).on('click', '.btnRemoveFile' ,async function(){
      
          event.stopPropagation();
          event.stopImmediatePropagation();
          var id = $(this).attr('data-address');
          var parent = $(this).parent();
          $("#" + id ).remove();
          parent.remove()
          alert(id)
          
          
      });
      
      $(document.body).on('click', '.btnChooseFolder' ,async function(){
      
          var select = $(this);
          var id = select.attr('id');
          alert(id)
          updateFilesListAxios(id)
          
      })

      
      $(document.body).on('click', '#btnBackFiles' ,async function(){
      
          var id = $(this).attr('data-address');
          alert(id)
          updateFilesListAxios(id)
          
          
      })
        
        
     $(document.body).on('click', '.btnChooseFile' ,async function(){
        event.stopPropagation();
        event.stopImmediatePropagation();
        var select = $(this);
        var address = select.attr('data-address');
        var id = select.attr('id');
        alert("تصویر با موفقیت افزوده شد");
        
        setAlbumFiles(address,id)
         
        
    });
    });
    
    function setAlbumFiles(address,id) {
        $( "#AlbumFiles" ).append(
            $("<input type='text' name='Files' id='"+id+"' class='d-none' value='"+id+"'>")
          );
          
         $( "#FilesDiv" ).append(
            $("<div style='width: 200px;height: 200px;'><figure style='width: 200px;height: 200px' class='col-xl-3 col-md-4 col-6 FilesFigure' itemprop='associatedMedia'><img class='img-thumbnail'style='width: 200px;height: 200px;' src='"+address+"' itemprop='thumbnail' alt='Image description'></figure><button class='btn btn-primary btnRemoveFile'type='button' style='width:80% ;position: absolute;bottom: 5px;right: 30px;'data-address='"+id+"'> حذف تصویر</button></div>")
          );
    }
  </script> 
  <!-- Scrolling long content-->
 <div class="modal fade" id="buttonPrivateAlbumSelectFiles" tabindex="-1" role="dialog" aria-labelledby="buttonPrivateAlbumSelectFiles" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="buttonPrivateAlbumSelectFiles">مدیریت آلبوم و فایل </h5>
         <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
       
       <div class="col-sm-12">
       <div class="card">
         <div class="card-header">
           <h5>مشاهده لیست دسته بندی مقاله سامانه هدف برتر </h5>
         </div>
       
       <div class="table-responsive">
         <table class="table">
           <thead>
             <tr class="border-bottom-primary" style="text-align:center">
               <th scope="col">#</th>
               <th scope="col">  آلبوم های شما </th>
               <th scope="col">   مشاهده فولدر ها </th>
             </tr>
           </thead>
           <tbody id="SubAlbumsTable">
       
             <% for (var i = 0; i < privateAlbums.length; i++) { %>
             <tr class="border-bottom-info" style="text-align:center">
               <th scope="row"><%= i + 1 %></th>
               <td> &nbsp <i class="fa-solid fa-folder"> &nbsp </i><%= privateAlbums[i].Name %></td>
               <td><button id="<%= privateAlbums[i].Url %>" class="btn btn-primary btnChooseFolder" type="button">فولدر ها </button></td>
                 
             </tr>
             <% } %>
       
           </tbody>
         </table>
        </div>
        </div>
        </div>
       
       
       <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h5>فایل های موجود در این آلبوم </h5>
          </div>
        
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr class="border-bottom-primary" style="text-align:center">
                <th scope="col">#</th>
                <th scope="col"> نام فایل </th>
                <th scope="col"> تصویر فایل  </th>
                <th scope="col">  انتخاب  </th>
                <th scope="col">  کپی آدرس تصویر  </th>
              </tr>
            </thead>
            <tbody id="albumFilesPopUp">
        
              <% for (var i = 0; i < privateAlbumFiles.length; i++) { %>
              <tr class="border-bottom-info" style="text-align:center">
                <th scope="row"><%= i + 1 %></th>
                <td><%= privateAlbumFiles[i].Name %></td>
                <td><img style="max-height: 70px" src="<%=privateAlbumFiles[i].Url%>" /></td>
                <td><button  id="<%=privateAlbumFiles[i]._id%>" data-address="<%=privateAlbumFiles[i].Url%>" class="btn btn-primary btnChooseFile" type="button">انتخاب</button></td>
                <td><button data-address="<%=privateAlbumFiles[i].Url%>" class="btn btn-primary btnCopyAddress" type="button">کپی آدرس</button></td>
              </tr>
              <% } %>
        
            </tbody>
          </table>
         </div>
         </div>
         </div>
       
       
       </div>
       <div class="modal-footer">
         <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button>
         <button class="btn btn-primary" id="btnBackFiles" data-address="" type="button">بازگشت</button>
       </div>
     </div>
   </div>
 </div>
 
 
 
 
 <!-- Scrolling long content-->
  <div class="modal fade" id="buttonPublicAlbumSelectFiles" tabindex="-1" role="dialog" aria-labelledby="buttonPublicAlbumSelectFiles" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="buttonPublicAlbumSelectFiles">مدیریت آلبوم و فایل </h5>
          <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        
        <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h5>مشاهده لیست دسته بندی مقاله سامانه هدف برتر </h5>
          </div>
        
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr class="border-bottom-primary" style="text-align:center">
                <th scope="col">#</th>
                <th scope="col">  آلبوم های شما </th>
                <th scope="col">   مشاهده فولدر ها </th>
              </tr>
            </thead>
            <tbody id="PublicSubAlbumsTable">
        
              <% for (var i = 0; i < publicAlbums.length; i++) { %>
              <tr class="border-bottom-info" style="text-align:center">
                <th scope="row"><%= i + 1 %></th>
                <td> &nbsp <i class="fa-solid fa-folder"> &nbsp </i><%= publicAlbums[i].Name %></td>
                <td><button id="<%= publicAlbums[i].Url %>" class="btn btn-primary btnChooseFolder" type="button">فولدر ها </button></td>
                  
              </tr>
              <% } %>
        
            </tbody>
          </table>
         </div>
         </div>
         </div>
        
        
        <div class="col-sm-12">
         <div class="card">
           <div class="card-header">
             <h5>فایل های موجود در این آلبوم </h5>
           </div>
         
         <div class="table-responsive">
           <table class="table">
             <thead>
               <tr class="border-bottom-primary" style="text-align:center">
                 <th scope="col">#</th>
                 <th scope="col"> نام فایل </th>
                 <th scope="col"> تصویر فایل  </th>
                 <th scope="col">  انتخاب  </th>
                 <th scope="col">  کپی آدرس تصویر  </th>
               </tr>
             </thead>
             <tbody id="albumPublicFilesPopUp">
         
               <% for (var i = 0; i < publicAlbumFiles.length; i++) { %>
               <tr class="border-bottom-info" style="text-align:center">
                 <th scope="row"><%= i + 1 %></th>
                 <td><%= publicAlbumFiles[i].Name %></td>
                 <td><img style="max-height: 70px" src="<%=publicAlbumFiles[i].Url%>" /></td>
                 <td><button  id="<%=publicAlbumFiles[i]._id%>" data-address="<%=publicAlbumFiles[i].Url%>" class="btn btn-primary btnChooseFile" type="button">انتخاب</button></td>
                 <td><button data-address="<%=publicAlbumFiles[i].Url%>" class="btn btn-primary btnCopyAddress" type="button">کپی آدرس</button></td>
               </tr>
               <% } %>
         
             </tbody>
           </table>
          </div>
          </div>
          </div>
        
        
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button>
          <button class="btn btn-primary" id="btnBackFiles" data-address="" type="button">بازگشت</button>
        </div>
      </div>
    </div>
  </div>

