@extends('layouts.main_page_app')

@section('content')
<div class="container-fluid">
    <br />
    <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

    <h5 class="text-info">Note:</h5>
    <h6 class="text-info">Only 'jpg' as case sensetive format is supported.</h6>
    <h6 class="text-info">Resolution '1080 x 720' pixels are allowed.</h6>
    <h6 class="text-info">Banner must not be greater than '700 KB'.</h6>


    <div class="row row-cards">
        <div class="col-sm-6 col-lg-4">
            <div class="card p-3">
                <a href="javascript:void(0)" class="mb-3">
                    <img src="images/banner/banner_1.jpg?t={{ date('Y-m-d H:i:s') }}" alt="Photo by Nathan Guerrero" class="rounded">
                </a>
                <div class="d-flex align-items-center px-2">
                    <!-- <img class="avatar avatar-md mr-3" src="assets/images/xs/avatar1.jpg" alt=""> -->
                    <div>
                        <div>Sliding BANNER-1</div>
                        <small class="d-block text-muted">12 days ago</small>
                    </div>
                    <div class="ml-auto text-muted">
                        <button type="button" class="btn btn-primary ml-2" onclick="$('#banner_no').val('1');document.getElementById('fileToUpload').click()">Upload New</button>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card p-3">
                <a href="javascript:void(0)" class="mb-3">
                    <img src="images/banner/banner_2.jpg?t={{ date('Y-m-d H:i:s') }}" alt="Photo by Nathan Guerrero" class="rounded">
                </a>
                <div class="d-flex align-items-center px-2">
                    <!-- <img class="avatar avatar-md mr-3" src="assets/images/xs/avatar2.jpg" alt=""> -->
                    <div>
                        <div>Sliding BANNER-2</div>
                        <small class="d-block text-muted">12 days ago</small>
                    </div>
                    <div class="ml-auto text-muted">
                        <button type="button" class="btn btn-primary ml-2" onclick="$('#banner_no').val('2');document.getElementById('fileToUpload').click()">Upload New</button>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card p-3">
                <a href="javascript:void(0)" class="mb-3">
                    <img src="images/banner/banner_3.jpg?t={{ date('Y-m-d H:i:s') }}" alt="Photo by Rose Bradley" class="rounded">
                </a>
                <div class="d-flex align-items-center px-2">
                    <!-- <img class="avatar avatar-md mr-3" src="assets/images/xs/avatar3.jpg" alt=""> -->
                    <div>
                        <div>Sliding BANNER-3</div>
                        <small class="d-block text-muted">4 days ago</small>
                    </div>
                    <div class="ml-auto text-muted">
                        <button type="button" class="btn btn-primary ml-2"  onclick="$('#banner_no').val('3');document.getElementById('fileToUpload').click()">Upload New</button>

                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="uploadOnChange('banner')">
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" style="float: left;" id="modal_title"></h4>
        </div>
        <div class="modal-body">
        <div class="card bg-none b-none">
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <input type="text" name="banner_no" id="banner_no" style="display: none;">  
                                    <div id="image_preview">
                                        
                                    </div> 
                                    <span>File Name:<span><b id="file_name"></b></span></span><br />
                                    <span>File Size:<span><b id="file_size"></b></span></span>
                                    <div id="progress_div">
                                    <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>
                                </div></div></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary done" onclick="location.reload();">Done</button>
            <button type="button" class="btn btn-primary operation" onclick="$('.operation').hide();$('#progress_div').show();uploadNow();">Start Upload</button>
          <button type="button" class="btn btn-default operation" data-dismiss="modal">Cancel</button>
        </div>
      </div>
      
    </div>
  </div>
  
@endsection