@extends('layouts.admin.admin')

<script>
  function manageAlbumType() {
    var user_type = $("#album_type").val();
    if (user_type == 1) {
      $("#event_selection").hide();
      $("#album_name").show();
      $(".album_name").attr('disabled', false)

      //  $(".validate_album_name").hide();
      $('#album_name_input').val("").addClass('edit_album_require')
      $('#event_id').val("").trigger('change').removeClass('edit_album_require')


    } else if (user_type == 2) {
      $("#event_selection").show();
      //  $("#album_name").hide();
      // $(".album_name").attr('disabled',false)

      $(".validate_event_id").hide();

      $('#event_id').val("").trigger('change').addClass('edit_album_require')
      //  $('#album_name_input').val("").removeClass('edit_album_require')

    } else {
      $(".album_name").attr('disabled', true)
      $(".validate_event_id").show();
      $(".validate_album_name").show();

      $('#event_id').val("").trigger('change').removeClass('edit_album_require')
      $('#album_name_input').val("").removeClass('edit_album_require')

    }

  }
</script>


@section('content')
<div id="content" class="main-content">
  <div class="container">
    <br><br>
    <div class="container">
      <div class="row layout-top-spacing">
        <div id="basic" class="col-lg-12 layout-spacing">
          <div class="statbox widget box box-shadow">
            <div class="widget-header">
              <div class="row">
                <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                  <h4>Edit Album</h4>
                </div>
              </div>
            </div>
            <div class="widget-content widget-content-area">
              <div class="row">
                <div class="col-lg-12 col-12 mx-auto">

                  <button type="button" style="display:none" onclick=""
                    id="addAllFoldersNameToArrayButton">click-me</button>

                  <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product-info" role="tab"
                        aria-controls="product-info" aria-selected="true">Album-Details</a>
                    </li>
                    <!-- <li class="nav-item">
                                        <a class="nav-link" id="edit-cover-image-tab" data-toggle="tab" href="#edit-cover-image" role="tab" aria-controls="edit-cover-image-tab" aria-selected="false">Edit Album Cover </a>
                                        </li> -->
                    <li class="nav-item">
                      <a class="nav-link" id="edit-images-tab" data-toggle="tab" href="#edit-images" role="tab"
                        aria-controls="edit-images-tab" aria-selected="false">Edit-Images</a>
                    </li>
                    <!-- <li class="nav-item">
                      <a class="nav-link" id="edit-images-tab" data-toggle="tab" href="#new-images" role="tab"
                        aria-controls="edit-images-tab" aria-selected="false">Add-New-Images</a>
                    </li> -->


                  </ul>

                  <div class="tab-content">
                    <!-- start album details-->

                    <div class="tab-pane fade show active" id="product-info" role="tabpanel"
                      aria-labelledby="product-tab" style="height: 100%;">
                      <section>
                        <div class="row" style="">
                          <div class="col-12">
                            <button class="btn btn-success btn-sm float-right" style="margin-top:10px"
                              onclick="renameAlbum()"> <i class="icon-refresh fa-lg" aria-hidden="true"></i> Update</button>
                            <input id="getValueForAlbumCover" type="hidden" value="">
                            <input id="getValueForAlbumCoverIndex" type="hidden" value="">
                            <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">

                            <input id="old_album_name" type="hidden" value="{{$album->name}}">

                            <input id="update_album_id" type="hidden" value="{{$album->id}}">


                          </div>

                        </div>
                        <br />
                        <div class="row border-bottom" style="margin-bottom: 10px;" id="rename_album_div">



                          <div class="col-6">
                            <div class="form-group">
                              <div id="album_name" style="">
                                <p>Album Name <span class="text-danger "
                                    style="font-size:16pt;display: inline;">*</span><span
                                    class="validate_album_name text-danger" style="display:none">(Please select Album
                                    type first)</span></p>
                                <input type="text" name="album_name" id="album_name_input" placeholder="Album-Name"
                                  class="form-control album_name_input edit_album_require " value="{{ $album->name}}">
                                <span id="error_album_name_input"></span>

                              </div>

                            </div>
                          </div>
                        </div>

                        <div class="row border-bottom" style="margin-bottom: 10px;display:none">

                          <div class="col-6">
                            <p>Upload Cover Image <span class="text-danger "
                                style="font-size:16pt;display: inline;">*</span> :<span style="color:#EDE04D"> (
                                Standard image resolution to be used : approx 350x250) </span> </p>
                            <div class="custom-file mb-4">

                              <input type="file" onchange="checkResolution(1)" class="custom-file-input "
                                id="album_cover" name="album_cover" accept="image/*" style="cursor:pointer"
                                placeholder="Upload-Cover-Image">
                              <label class="custom-file-label" for="customFile" style="cursor:pointer">Choose Cover
                                Image file</label>
                              <br><br>
                              <img src="{{ $album->cover_image }}" id="covImg" style="max-width: 50%;max-height:300px"
                                alt="">
                            </div>



                          </div>

                        </div>


                      </section>
                    </div>
                    <!-- end album details-->

                    <!-- start edit images -->
                    <div class="tab-pane fade" id="edit-images" role="tabpanel" aria-labelledby="edit-images-tab">
                      <div class="row ">
                        <div class="col-12 ">

                          <input id="getValueForAlbumCover" type="hidden" value="">
                          <input id="getValueForAlbumCoverIndex" type="hidden" value="">
                          <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">

                          <input id="album_id" type="hidden" value="{{$album->id}}">

                        </div>
                      </div>
                      <div class="row">
                        <div class="col-12">
                          <div id="album_images" style="width:100%;max-width:100%">
                            <div class="card" style="margin-bottom: 10px;">
                              <div class="card-header">
                                <div class="row">
                                  <div class="col-md-6 col-sm-6 col-12">
                                    <!-- <h6 id="header_"></h6> -->
                                  </div>
                                  <div class="col-md-6 pl-0 col-sm-6 col-12 text-right">
                                    <ul class="list-inline" style="float: right">

                                      <li class="list-inline-item">
                                      
                                        <input type="hidden" class="form-control" placeholder="Example: Event Year, Moments etc ..."
                                        name="album_name" id="album_name" value="" disabled>
                                      <input type="hidden" class="form-control" placeholder="" value="" name="album_id" id="album_id" disabled>
                                        <button type="button" class="btn btn-primary btn-sm" onclick="addMore_images('{{$album->id}}','{{$album->name}}');"> <i class="fa fa-upload" aria-hidden="true"></i> Add-Images</button>
                                      </li>
                                      <li class="list-inline-item">

                                        <button type="button" class="btn btn-danger btn-sm" onclick="delete_image()" id="delete_action" disabled><i
                                            class="fa fa-trash" aria-hidden="true"></i> Delete-Images</button>

                                      </li>
                                      <li class="list-inline-item">

                                        <button type="button" class="btn btn-info btn-sm" onclick="moveImages()">
                                          <i style="font-size:24px" class="fa">&#xf07c;</i>
                                        </button>

                                      </li>
                                      <li class="list-inline-item">
                                        <select id="new_album_id" name="album_type"
                                          class="form-control move_action" style="float: right" disabled>
                                          <option value="0">-Select-Folder-</option>
                                          @foreach($albums as $others)
                                          <option value="{{$others->id}}">{{$others->name}}</option>
                                          @endforeach
                                        </select>                                     
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                              <div class="card-body bg-light">


                                <div class="row mt-4" id="section">
                                  @forelse($album->Photos as $photo)
                                  <div class="col-2" style="margin-bottom: 20px;" id="imgCardId_{{$photo->id}}">
                                    <div class="card">
                                      <div class="form-check">
                                        <input type="checkbox" id="Checkbox-{{$photo->id}}"
                                          onclick="selImages(this,'{{$photo->id}}');" />
                                        <label for="Checkbox-{{$photo->id}}" class="form-check-label"
                                          for="img_{{$photo->id}}">
                                          Select
                                        </label>
                                      </div>
                                      <img alt="{{$album->name}}" src="{{$photo->image}}" style="max-height:150px">
                                    </div>

                                  </div><br />
                                  @empty
                                  <div class="col-lg-12 col-sm-12 col-md-12">
                                    <div style="">
                                      <span>This Album is Empty</span>
                                    </div>
                                  </div>
                                  @endforelse
                                </div>


                              </div>
                            </div>
                          </div>

                        </div>

                      </div>

                    </div>
                    <!-- end edit images -->
                  


                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- start of Add folder Modal  -->
  <div class="modal fade" id="addFolderModalForImages">
    <div class="modal-dialog modal-dialog-centered ">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title" id="addFolderModalHeading"></h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="row " style="margin-bottom: 10px;">
            <div class="col-6">
              <div class="form-group " style="margin-top: 10px;">
                <!-- <label >Add Folder</label>  -->
                <input type="text" name="album_folder_name" id="album_folder_name" placeholder="Folder Name"
                  class="form-control">

              </div>
            </div>

            <div class="col-6">
              <div class="form-group " style="margin-top: 10px;">
                <!-- <label >Add Folder</label>  -->
                <button type="button" class="btn btn-success"
                  onclick="checkAddFolderModalInput($('#album_folder_name').val().trim(),'create')" style=""
                  id="addFolderCreateButton">
                  <i class="fa fa-plus fa-fw" aria-hidden="true"></i>Create
                </button>

                <button type="button" class="btn btn-success" style="display:none" id="addFolderUpdateButton">
                  <i class="icon-refresh fa-fw" aria-hidden="true"></i> Update
                </button>

              </div>
            </div>


          </div>


        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
  <!-- end of Add folder Modal -->

  <!-- The rename folder Modal -->
  <div class="modal fade" id="renameModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title" id="renameFolderModalHeader"></h4>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="card" style="margin-bottom: 10px;">
            <div class="card-header">
              <div class="row">
                <div class="col-12">

                  <div class="form-input">

                    <label class="form-input-label" for="renameFolderModalInput">
                      Folder-Name

                    </label>
                    <input class="form-control" type="text" id="renameFolderModalInput">
                  </div>
                </div>
              </div>
            </div>



          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-success" id="renameModalUpdateButton"><i
                class="fa fa-refresh fa-fw"></i> Update</button>

            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>

        </div>
      </div>
    </div>
    <!-- end of rename folder modal  -->
    <!--  END CONTENT AREA  -->
    <!-- <script>
 function loadOldImage(old_path){
    cover_image.src = old_path;
    $("#album_cover").empty();
  }
album_cover.onchange = evt => {
  const [file] = album_cover.files
   if (file) {
      cover_image.src = URL.createObjectURL(file)
   }
 }



</script> -->




    @endsection
    
<div class="modal fade bd-example-modal-lg" id="addMoreimgs" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="container-fluid">
      <hr />
      <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

      <div class="row row-cards">
        {{-- @foreach($albums as $album) --}}
        <div class="col-sm-12 col-lg-12">
          <div class="card p-3 justify-content-center">
            <div class="d-flex justify-content-center">
              <h5>Update Album Images</h5>
            </div>
          </div>
          <div class="card ">
            <div class="container" style="padding-top: 10px;">
              <span class="text-primary" style="font-size: small;font-weight: bold; margin-left:0%;">( Note: Only 'jpg
                & jpeg' format is supported. Resolution '1080 x 720' pixels are allowed.)
              </span>
              <hr />
              <div class="row clearfix">
                <div class="col-lg-6 col-md-6 col-sm-12">
                  <div class="form-group">
                    <span style="font-size: small;font-weight: bold;">Album Name</span>
                    <input type="text" class="form-control" placeholder="Example: Event Year, Moments etc ..."
                      name="album_name" id="album_name" disabled>
                    <input type="hidden" class="form-control" placeholder="" name="album_id" id="album_id" disabled>

                    <span id="album_name_no_input" class="text-danger" style="display: none">Album name can't be
                      empty</span>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 d-flex justify-content-center">
                  <div class="form-group">
                    <span style="font-size: small;font-weight: bold; ">Images</span><br />
                    <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;"
                      onchange="uploadOnChange('gallery')" multiple accept=".jpg,.jpeg">
                    <button type="button" style="" class="btn btn-primary ml-"
                      onclick="document.getElementById('fileToUpload').click()">Select Images</button>
                    {{-- <button type="button" style="" class="btn btn-red text-red ml-2"
                      onclick="document.getElementById('fileToUpload').click()">Clear All</button> --}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card p-3">
            <div id="progress_div">
              <label class="d-block container" style="font-size: small;font-weight: bold;">Overall Progress <span
                  class="float-right" id="percent">0%</span></label>
              <div class="progress progress-sm">
                <div class="progress-bar" id="progress_bar" role="progressbar" aria-valuenow="77" aria-valuemin="0"
                  aria-valuemax="100" style="width:0%;">
                </div>
              </div>
            </div>
            {{-- <button type="button" class="btn btn-primary done" onclick="smNote()">smNote</button> --}}

            <div class="footer">
              <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                  {{-- <a href="/nb" class="btn btn-primary btn-sm"><i class="fa fa-arrow-left"></i> Back</a> --}}
                  {{-- <a onclick="hideProg_div()" class="btn btn-primary btn-sm"><i class="fa fa-arrow-left">
                      Hide</i></a> --}}

                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 d-flex justify-content-end">
                  <button type="button" class="btn btn-primary operation mr-1" onclick="uploadgallery();">Start
                    Upload</button>
                  <button type="button" class="btn btn-default operation mr-1" data-dismiss="" onclick="window.location.reload();
                              ">Cancel</button>
                </div>
              </div>
            </div>
          </div>
          <div class="card p-3 scroll">
            <div class="row clearfix">
              <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="row">
                  <div class="col-sm-12 col-lg-12">
                    <div class="row" id="image_grid">
                    </div>
                  </div>
                </div>
                <div class="table-responsive" id="users">
                  <table class="table table-hover table-vcenter text-nowrap table_custom border-style list"
                    id="uploadQueueTable">
                    <tbody>
                      <div id="progress_div" style="display: none">
                        <label class="d-block">Progress <span class="float-right" id="percent">0%</span></label>
                        <div class="progress progress-sm">
                          <div class="progress-bar" id="progress_bar" role="progressbar" aria-valuenow="77"
                            aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                          </div>
                        </div>
                      </div>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

    <script>

         function renameAlbum() {
        var album_name = $("#album_name_input").val().trim();
        var album_id = $("#update_album_id").val();
        var old_album_name = $("#old_album_name").val().trim();
        var allow = true;
 
        if (album_name.trim() == "") {
            $("#no_album_name_input").show();
            $("#new_album_name").addClass('border border-danger');
            $("#new_album_name").trigger('focus');
            allow = false;
        }
        else {
          $("#no_album_name_input").hide();
          $("#new_album_name").removeClass('border border-danger');
          if(old_album_name === album_name){
            nothing_to_update_func()

            allow = false;

          }
        }
        
        
       
        if (!allow) {
          return allow;
        }

        var data = new FormData();
        data.append("_token", $("#_token").val());
        data.append("album_name", album_name);
        data.append("album_id", album_id);
        $.ajax({
          type: "POST",
          url: "/rename_album",
          data: data,
          processData: false,
          contentType: false,
          cache: false,
    
          success: function (response) {
            console.log(response)
            var data = JSON.parse(response);
            if (data != "") {
    
              if (data.status == "success") {
                success_popup();
                // alert("Album has been renamed succesfully..")
                // $('#rename_album_div').refresh();
              } else if (data.status = "unsuccess") {
                alert("Not Deleted!");
    
                toastr.error(" ", "Please Contact your Admin", {
                  "positionClass": "toast-bottom-center animated tada", "closeButton": true,
                  "debug": true, "preventDuplicates": true
                });
    
              }
            } else {
    
            }
          }
        });
      }
      function addMore_images(album_id,album_name) {      
        $("#album_name").val(album_name);
        $("#album_id").val(album_id);
        $("#addMoreimgs").modal("show");      
      }
    </script>
    <script>
      var Image_ids = [];
      function selImages(input, img_id) {
        if ($(input).is(':checked')) {
          $("#delete_action").attr('disabled', false);
          $(".move_action").attr('disabled', false);
    
          // alert(img_id);
          Image_ids.push(img_id);
        } else {
          //$("#actions").hide();
          var index;
          for (var i = 0; i < Image_ids.length; i++) {
            index = i;
          }
          Image_ids.splice(index, img_id);
    
          if (Image_ids.length == 0) {
            $("#delete_action").attr('disabled', true);
            $(".move_action").attr('disabled', true);
          }
        }
      }
      // ----------- DELETE IMAGES FUNCTION START-------
      function delete_image() {
        if (confirm("Are you sure you want to delete?")) {
          var image_ids = JSON.stringify(Image_ids);
          var album_name = $("#alb_nm").val();
          var album_id = $("#alb_id").val();
    
          var data = new FormData();
          data.append("_token", $("#_token").val());
          data.append("Image_ids", image_ids);
          data.append("album_name", album_name);
          data.append("album_id", album_id);
    
          $.ajax({
            type: "POST",
            url: "/delete_images",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
    
            success: function (response) {
              console.log(response)
              var data = JSON.parse(response);
              if (data != "") {
    
                if (data.status == "success") {
                  success_del_popup();
                } else if (data.status = "unsuccess") {
                  alert("Not Deleted!");
    
                  toastr.error(" ", "Please Contact your Admin", {
                    "positionClass": "toast-bottom-center animated tada", "closeButton": true,
                    "debug": true, "preventDuplicates": true
                  });
    
                }
              } else {
    
              }
            }
          });
        }
      }
      // ----------- DELETE IMAGES FUNCTION END-------
      function moveImages() {
        var new_album_id = $("#new_album_id").val();
        if (new_album_id == 0) {
          alert("Please Choose New Album From Dropdown")
        } else {
          if (confirm("Are you sure you want to Move Images to other Album?")) {
            var image_ids = JSON.stringify(Image_ids);
            var album_name = $("#alb_nm").val();
            var album_id = $("#alb_id").val();
    
    
            var data = new FormData();
            data.append("_token", $("#_token").val());
            data.append("Image_ids", image_ids);
            data.append("album_name", album_name);
            data.append("album_id", album_id);
            data.append("new_album_id", new_album_id);
    
    
            $.ajax({
              type: "POST",
              url: "/move_imgages",
              data: data,
              processData: false,
              contentType: false,
              cache: false,
    
              success: function (response) {
                console.log(response)
                var data = JSON.parse(response);
                if (data != "") {
    
                  if (data.status == "success") {
                    success_popup();
                  } else if (data.status = "unsuccess") {
                    alert("Not Deleted!");
    
                    toastr.error(" ", "Please Contact your Admin", {
                      "positionClass": "toast-bottom-center animated tada", "closeButton": true,
                      "debug": true, "preventDuplicates": true
                    });
    
                  }
                } else {
    
                }
              }
            });
          }
        }
      }

      function selectImages(folder_id){
  $("#fileToUpload").click();
  selected_folder_id = folder_id;
  if(checkDuplicateValueArray(folder_id)){
    album_folders.push({'folder_id':folder_id,'exist':1})
  }
  
}
function checkDuplicateValueArray(value,array) 
{
  
  // call some function with callback function as argument
  
    
    for(var i=0; i<array.length; i++)  
  {  
      var name = array[i];  
      if(name == value){  
        return true;
      }  
    }  
    return false;
  
 


}

 
    </script>