@extends('layouts.admin.admin')

@section('content')
<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>
<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-2 col-lg-2">
        <div class=" p-3">
            <a href="/albums" class="btn btn-primary btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
        </div>
    </div> --}}
    <div class="col-sm-12 col-lg-12 ">
        <div class=" p-3">
             <div class="d-flex justify-content-center" >
              <h5>Upload New Album</h5>
            </div>
        </div>
    </div>

        <div class="col-sm-12 col-lg-12">
            <div class="card p-3">
                <div class="" 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">
                                <label style="font-size: small;font-weight: bold;">Album Name</label>
                                  <input type="text" class="form-control" placeholder="Example: Event Year, Moments etc ..." name="album_name" id="album_name">
                                  <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">
                              <div class="form-group">
                                <label style="font-size: small;font-weight: bold; ">Image</label><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-2"  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" style="display: none">
                    <label class="d-block " 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 operationDiv" style="display:none;">
                  <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-6">
                    {{-- <a href="/albums" 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" id="image_preview" style="display: none">
                <div class="row clearfix">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                         <div class="row" id="image_grid">
                         </div>
                     </div>
                </div>
          </div>
        </div>
     </div>

     <script>
        function resetVideoModalData(){

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

    </script>
@endsection