@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 class="container-fluid">
      <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-5 col-md-5 col-sm-5 col-5">
                  <div class="p-2">
                    <a href="/albums" class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" ></i> Back</a>
                  </div>

                </div>

                <div class="col-xl-6 col-md-6 col-sm-6 col-6">

                  <h4><i class="fa fa-edit fa-lg fa-fw"></i> Edit Album</h4>

                </div>
              </div>
            </div>
            <div class="widget-content widget-content-area">
              <div class="row">

              <input id="update_album_id" type="hidden" value="{{$album->id}}">
              <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
              
                <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 id="old_album_name" type="hidden" value="{{$album->name}}">



                          </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}}"
                                  onkeypress="return /[0-9a-zA-Z']/i.test(event.key)">
                                <span id="error_album_name_input"></span>

                              </div>

                            </div>
                          </div>
                          <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="validateFileType()" 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="">
                              <img src="{{ $album->cover_image }}" id="covImgBackup" style="max-width: 50%;max-height:300px;display:none"
                                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="page_type" id="page_type" value="edit">


                        </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">
                                        
                                   
                                        <button type="button" class="btn btn-primary btn-sm"
                                          onclick="addMoreImages();"> <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="" 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>

  <!-- 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>
  </div>
    <!-- end of rename folder modal  -->
    <!--  END CONTENT AREA  -->



    @endsection

    <div class="modal fade bd-example-modal-lg" id="addMoreImagesModal" tabindex="-1" role="dialog"
      aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="container-fluid">
            <hr />

            <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 For ( <span name="" id="" class="text-warning"> {{$album->name}} </span>) </</h5>
                  </div>
                </div>
                <div class="card ">
                  <div class="container" style="padding-top: 10px;">
                    <span class="text-warning" style="font-size: small;font-weight: bold; margin-left:0%;">( Note: Only 
                      <span class="text-danger">'.jpg & .jpeg'</span> format is supported. Resolution <span class="text-danger">'1080 x 720'</span> 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;color:white">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"
                            >

                            <span id="error_album_name_input"></span>

                        </div>
                      </div> -->
                      <div class="col-lg-12 col-md-12 col-sm-12 d-flex ">
                        <div class="form-group">
                          <!-- <span style="font-size: small;font-weight: bold;color:white ">Images</span><br /> -->
                          <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;"
                            onchange="uploadOnChange()" 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-success operation mr-1" onclick="updateAlbumImages();">Start
                          Upload</button>
                        <button type="button" class="btn btn-danger 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() {
        const fileInput = document.getElementById('album_cover');
        const selectedFile = fileInput.files[0];   

        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() == "") {
          $("#album_name_input").addClass('border border-danger');
          $("#error_album_name_input").html('').html('<span class="text-danger" style="font-size:8pt;display:block;">Album name input cannot be empty.</span>');
          setTimeout(function() { document.getElementById('album_name_input').focus(); }, 10);
          
          allow = false;
        }
        else {
          $("#album_name_input").removeClass('border border-danger');
          $("#error_album_name_input").html('');

          if (old_album_name === album_name && !selectedFile) {
            swal({
              title: "Album",
              text: "Nothing to update.",
              icon: "warning",
            })

            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);
        if (selectedFile) {                 
          data.append("cover_image_file", selectedFile);
        }
              
        $.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") {
                swal({
                  title: "Album",
                  text: "Updated successfully",
                  icon: "success",

                })
                  .then(function () {
                    location.reload();
                  });
                // alert("Album has been renamed succesfully..")
                // $('#rename_album_div').refresh();
              } else if (data.status = "unsuccess") {
                swal({
                  title: "Album",
                  text: "Unable to update, contact your admin",
                  icon: "success",

                })
                  .then(function () {
                    location.reload();
                  });

                // toastr.error(" ", "Please Contact your Admin", {
                //   "positionClass": "toast-bottom-center animated tada", "closeButton": true,
                //   "debug": true, "preventDuplicates": true
                // });

              }
            } else {

            }
          }
        });
      }
      function addMoreImages() {
       
        $("#addMoreImagesModal").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() {
      swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            buttons:{
                confirm: {
                    text : 'Yes, delete it!',
                    className : 'btn btn-success'
                },
                cancel: {
                    visible: true,
                    className: 'btn btn-danger'
                }
            }
        }).then((Delete) => {
          if(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") {
                    swal({
                          title: "Image deletion",
                          text: "Deleted successfully",
                          icon: "success",
                      
                      }).then(function(){ 
                          location.reload();
                      });
                  } else if (data.status = "unsuccess") {
                    // alert("Not Deleted!");
                    swal({
                      title: "Image deletion",
                      text: "Unable to delete, please contact your admin..",
                      icon: "error",
                      
                    })

                  }
                } 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 {
          swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            buttons:{
                confirm: {
                    text : 'Yes, move it!',
                    className : 'btn btn-success'
                },
                cancel: {
                    visible: true,
                    className: 'btn btn-danger'
                }
            }
        }).then((Delete) => {
          if(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);
            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") {
                    swal({
                        title: "Move Image(s)",
                        text: "Images moved successfully",
                        icon: "success",
                    
                    }).then(function(){ 
                        location.reload();
                    });
                  } else if (data.status = "unsuccess") {
                    swal({
                      title: "Image deletion",
                      text: "Unable to delete, please contact your admin..",
                      icon: "error",                      
                    })

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