@extends('layouts.admin.admin')
<style>
  #image_grid img {
    /* float: left; */
    width: 200px;
    height: 200px;
    margin-left: 20px;
    /* object-fit: cover; */
  }

</style>
<script>
  // document.getElementById('page_title').innerHTML = "New Album";
</script>
@section('content')


<div class="container-fluid">
  <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
  <input type="hidden" name="page_type" id="page_type" value="add">

  <!-- <input id="getValueForAlbumCover" type="text" value="">
  <input id="getValueForAlbumCoverIndex" type="text" value=""> -->
  <div class="row layout-top-spacing" id="cancel-row">
      <div class="p-2">
        <a href="/albums" class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" ></i> Back</a>
      </div>

    <div class="col-lg-12 layout-spacing">
      <div class="statbox widget box box-shadow">


        <form id="new_image_album" style="margin-top: 10px;">

          <h3>Album Info</h3>
          <section>
            <div class="row border-bottom" style="margin-bottom: 10px;">              
              
              <div class="col-6">
                <div class="form-group">
                  <div id="album_name">
                    <p>Album Name <span class="text-danger " style="font-size:16pt;display: inline;">*</span> 
                       </span></p>
                    <input type="text" name="album_name" id="album_name_input" placeholder="Album-Name"
                      class="form-control album_name_input step_1" style="width:100%">
                    <span id="error_album_name_input"></span>

                  </div>

                </div>
              </div>
              <!-- <div class="col-6">
                <div class="form-group " style="">
                  <p>Date <span class="text-danger " style="font-size:16pt;display: inline;">*</span></p>
                  <input type="date" name="date_time" id="date_time" placeholder="Date-Time"
                    class="form-control step_1">
                  <span id="error_date_time"></span>
                </div>
              </div> -->
              
              <div class="col-6">
                <div class="custom-file-container" data-upload-id="Imagepreview1">
                  <p style="float: left">Upload Cover Image <span class="text-danger "
                      style="font-size:16pt;display: inline;">*</span> :<small class="text-danger"> ( Standard
                      resolution : approx 350x250) </small> </p>
                  <a href="javascript:void(0)" style="float: right" id="clear_image"
                    class="custom-file-container__image-clear" title="Clear Image">Clear Image
                    <i class="fa fa-times text-danger" aria-hidden="true"></i></a>
                  <label class="custom-file-container__custom-file">
                    <input type="file" class="custom-file-container__custom-file__custom-file-input  step_1"
                      onchange="validateFileType()" id="album_cover" placeholder="Upload-Cover-Image" name="album_cover"
                      accept="image/jpeg, image/png" >
                    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                    <span class="custom-file-container__custom-file__custom-file-control"></span>
                  </label>
                  <div class="custom-file-container__image-preview"></div>
                  <span id="error_album_cover"></span>

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

          <h3>Upload images</h3>
          <section>

            <input type="file" style="display:none ;" multiple id="fileToUpload" name="fileToUpload" accept="image/*"
              onchange=uploadOnChange()>

            <div title="mainFolderDiv" id="mainFolderDiv">

            </div>
            <div title="primaryAlbumDiv" id="primaryAlbumDiv">
            </div>

            <!-- <div title="subFolderDiv" id="mainSubFolderDiv" style="display:none"></div> -->

            <div id="folderUploadImageMainDiv" style="display:none"></div>
            <div id="UploadImageMainDiv" style="display:none"></div>

            <!-- <button onclick="uploadNow()">Finish</button> -->
          </section>


        </form>


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

<div id='folder-image-template' style="display: none;">
  <div class="card" style="margin-bottom: 10px;" id="!!!folder_template_id!!!">
    <div class="card-header">
      <div class="row">
        <div class="col-md-9 col-sm-9 col-12">


          <i style="font-size:24px" class="fa">&#xf07c;</i>
          <h6 id="!!!header_id!!!">!!!folder-name!!! 
            <small><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></small>
          </h6>


          <!-- <span  id="!!!header_id!!!" style="font-size: 15px;">!!!folder-name!!!</span> -->

        </div>

        <div class="col-md-3 pl-0 col-sm-3 col-12 text-right">
          <button type="button" class="btn btn-warning btn-sm"
            onclick="selectImages('!!!UNID!!!')">Select-Images</button>
        </div>
      </div>
    </div>
    <div class="card-body bg-light">


      <div class="row mt-4" id="section_!!!UNID!!!">

      </div>


    </div>
  </div>
</div>
<div class="modal" id="progress_modal">
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-content">


      <!-- Modal body -->
      <div class="modal-body">
        <div class="row " style="margin-bottom: 10px;">
          <div class="col-12" style="text-align: center;">
            <div id="progress_div">
              <div class="progress br-30">
                <div class="progress-bar bg-info" role="progressbar" id="image_upload_progressbar" style="width: 0%"
                  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

              </div>
              <label id="upload_percent">0%</label>
            </div>
            <div id="please_wait" style="display: none;">
              <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <label id="upload_percent">Please wait...</label>
            </div>
          </div>



        </div>
      </div>
    </div>
  </div>
</div>
  @endsection
  <script>
          
     
    function resetVideoModalData() {

      $("#image_preview").empty();
      $("#file_name").empty();
      //    $("#progress_div").hide();
      $('.operation').show();
      $('.done').hide();
    }

  </script>