@extends('layouts.admin.admin')
@section('content')
<style>
  #add_more {
    display: inline-block;
    background-color: #1A5089;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 25px;
    position: fixed;
    float: right;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    /* visibility: hidden; */
    z-index: 1000;
  }

  #add_more:hover {
    cursor: pointer;
    background-color: #1770e4;
  }

  #add_more:active {
    background-color: #555;
  }

  #action_bar {
    display: inline-block;
    /* background-color: #1A5089; */
    /* text-align: center; */
    position: sticky;
    top: 37px;
    float: left;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    /* visibility: hidden; */
    z-index: 1000;
  }

  #back-to {
    display: inline-block;
    background-color: #1A5089;
    text-align: center;
    position: fixed;
    bottom: 30px;
    float: left;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    /* visibility: hidden; */
    z-index: 1000;
  }

  #back-to:hover {
    cursor: pointer;
    background-color: #1770e4;
  }

  #back-to:active {
    background-color: #555;
  }

  .modal .scroll {
    overflow-y: auto;
    max-height: 350px;
  }

  #image_grid img {
    /* float: left; */
    width: 200px;
    height: 100px;
  }

  .thumbnail img {
    width: 250px;
    height: 200px;
  }

  * {
    /* font-family: Lato; */
    margin: 0;
    padding: 0;
    --transition: 0.15s;
    --border-radius: 0.5rem;
    --background: #0eb9fd;
    --box-shadow: #0eb9fd;
  }

  .cont-bg {
    overflow-y: auto;
    min-height: auto;
    padding: 1rem;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
  }

  .cont-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .cont-main {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* align-content: center;
  justify-content: center; */

  }

  .cont-checkbox {
    /* width: 230px;
  height: 180px; */
    border-radius: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform var(--transition);
  }

  .cont-checkbox {
    /* margin-bottom: 0.80rem; */
    /* margin-right: 0.75rem; */
  }

  .cont-checkbox:active {
    transform: scale(0.9);
  }

  input {
    display: none;
  }

  input:checked+label {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--background);
  }

  input:checked+label img {
    -webkit-filter: none;
    /* Safari 6.0 - 9.0 */
    filter: none;
  }

  input:checked+label .cover-checkbox {
    opacity: 1;
    transform: scale(1);
  }

  input:checked+label .cover-checkbox svg {
    stroke-dashoffset: 0;
  }

  label {
    display: inline-block;
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    /* opacity: 0.6; */
  }

  label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%); */
    /* -webkit-filter: grayscale(100%); Safari 6.0 - 9.0 */
    /* filter: grayscale(100%); */
  }

  label .cover-checkbox {
    position: absolute;
    float: left;
    right: 5px;
    top: 5px;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--box-shadow);
    border: 2px solid #fff;
    transition: transform var(--transition),
      opacity calc(var(--transition) * 1.2) linear;
    opacity: 0;
    transform: scale(0);
  }

  label .cover-checkbox svg {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: top;
    fill: none;
    margin: 5px 0 0 4px;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    transition: stroke-dashoffset 0.4s ease var(--transition);
    stroke-dashoffset: 16px;
  }

  label .info {
    text-align: center;
    margin-top: 0.2rem;
    font-weight: 600;
    font-size: 0.8rem;
  }
</style>
<div class="container-fluid">
  <div class="card" id="action_bar">
    <div class="p-2">
      <div class="row">
        <div class="col-2 " style="padding: 10px">
          <div class="border rounded" style="padding: 8px">
            <a id="" href="/albums" class="btn btn-sm btn-outline-info btn-block" onclick="#"><i
                class="fa fa-arrow-left"></i> Back </a>

          </div>
        </div>
        <div class="col-4 d-flex justify-content-end" style="padding: 10px">
          <h4>Album Name : {{$album->name}}</h4>
          <input type="hidden" class="form-control" id="alb_nm" value="{{$album->name}}" />
          <input type="hidden" class="form-control" id="alb_id" value="{{$album->id}}" />
          {{-- <div class="info">Post date:- {{ date("d F Y",strtotime($album->created_at)) }} at {{
            date("g:ha",strtotime($album->created_at)) }}</div>
          <div class="info">Updated date:- {{ date("d F Y",strtotime($album->updated_at)) }} at {{
            date("g:ha",strtotime($album->updated_at)) }}</div> --}}
        </div>
        <div class="col-6" id="actions">
          <ul class="list-inline" style="float: right">
            <li class="list-inline-item">
              <button type="button" id="" class="btn btn-sm btn-outline-info" onclick="renameAlbum()">Rename-Album</i>
              </button>
            </li>
            <li class="list-inline-item">
              <button type="button" id="" class="btn btn-sm btn-outline-info"
                onclick="addMore_images('{{json_encode($album)}}');">add <i class="fa fa-upload" aria-hidden="true"></i>
              </button>
            </li>
            <li class="list-inline-item">
              <button type="button" id="delete_action" style="font-size: 20px;" style=""
                class="btn btn-lg btn-outline-danger" onclick="delete_image();" disabled><i class="fa fa-trash"
                  aria-hidden="true"></i></button>

            </li>
            <li class="list-inline-item">
              <button type="button" style="font-size: 15px;" style="" class="btn btn-lg btn-outline-primary move_action"
                onclick="moveImages();" disabled><i class='fa  fa-file-image-o'></i> <i class="fa fa-long-arrow-right"
                  aria-hidden="true"></i>
                <i class="fa fa-folder-open" aria-hidden="true"></i>

              </button>

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

              <select name="new_album" class="form-control move_action" id="new_album_id" style="float: right" disabled>
                <option value="0">Select Folder</option>
                @foreach($albums as $others)
                <option value="{{$others->id}}">{{$others->name}}</option>
                @endforeach
              </select>
            </li>
            {{-- <li class="list-inline-item">
              <a tabindex="2" class="btn btn-sm btn-danger" role="button" data-mdb-toggle="popover"
                data-mdb-trigger="focus" title="Dismissible popover"
                data-mdb-content="And here's some amazing content. It's very engaging. Right?">
                Dismissible popover
              </a>
            </li> --}}

          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    @forelse($album->Photos as $photo)
    <div class="col-lg-2 col-sm-2 col-md-2">


      <div class="card bg-light">
        {{-- <svg width="15" height="15" viewBox="0 0 50 50" overflow="visible" stroke="red" stroke-width="10"
          stroke-linecap="round">
          <line x2="50" y2="50" />
          <line x1="50" y2="50" />
        </svg> --}}
        <div class="" style="">
          <input type="checkbox" id="Checkbox-{{$photo->id}}" onclick="selImages(this,'{{$photo->id}}');" />
          <label for="Checkbox-{{$photo->id}}">
            <img alt="{{$album->name}}" src="{{$photo->image}}">
            <span class="cover-checkbox">
              <svg viewBox="0 0 12 10">
                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
              </svg>
            </span>
            {{-- <div class="info">{{ date("d F Y",strtotime($photo->created_at)) }} at {{
              date("g:ha",strtotime($photo->created_at)) }}</div> --}}
          </label>
        </div>
      </div>



    </div>
    @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>



<!-- Large modal -->

<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>
                      <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="card-body bg-light" >
                        <div class="row mt-4" id="image_grid">                            
                        </div>
                      </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>

<div class="modal fade" id="rename_album" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
  aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Rename Album</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="Old_album_name" class="col-form-label">Album Name:</label>
            <input type="text" class="form-control" id="new_album_name">
            <input type="hidden" class="form-control" id="Old_album_id">
            <span id="no_album_name_input" class="text-danger" style="display: none">Album name can't be empty</span>


          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="saverenameAlbum()">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endsection

<script>

  function renameAlbum() {
    let allow=true;
    
    var Old_album_name = $("#alb_nm").val();
    var Old_album_id = $("#alb_id").val();
    $("#rename_album").modal("show");
    $("#new_album_name").val(Old_album_name);
    $("#Old_album_id").val(Old_album_id);

    var album_name = $("#new_album_name").val();
    var album_id = $("#Old_album_id").val();

    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 (!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();
          } 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) {
    var album = JSON.parse(album);
    var album_name = album.name;
    var album_id = album.id;

    $("#addMoreimgs").modal("show");
    $("#album_name").val(album_name);
    $("#album_id").val(album_id);
  }
</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 {

            }
          }
        });
      }
    }
  }
</script>