@extends('layouts.admin.admin')

@section('content')
<div id="content" class="main-content">
    <br />
    <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
   
        <h6 class="text-warning">Note: Only <span class="text-danger">'.jpg & .jpeg' </span>format file is allowed, taking resolution <span class="text-danger">'1080 x 720' </span> pixels which should be less than or equal to <span class="text-danger">'700Kb'</span>.</h6>
        <!-- <h6 class="text-warning">Only '.jpg & .jpeg' format file is supported.</h6> -->
        <!-- <h6 class="text-warning">Resolution '1080 x 720' pixels are allowed.</h6>
        <h6 class="text-warning">Banner must not be greater than '700 KB'.</h6> -->
  
    <div class="container">
        <br><br>
        <div class="container">
            <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-12 col-md-12 col-sm-12 col-12">
                                    <h4>Default Background</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            @include('layouts.admin.alerts')
                            <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="/storage/images/banners/banner_1.jpg?t={{ date('Y-m-d H:i:s') }}"
                                                alt="Photo by Nathan Guerrero" class="rounded"  style="max-height:250px;max-weight:250px;">
                                        </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><span class="text-white"> Sliding BANNER-1 </span></div>
                                                <small class="d-block text-muted">{{\Carbon\Carbon::parse($banners[0]->created_at)->diffForHumans()}}</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="/storage/images/banners/banner_2.jpg?t={{ date('Y-m-d H:i:s') }}"
                                                alt="Photo by Nathan Guerrero" class="rounded" style="max-height:250px;max-weight:250px;">
                                        </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><span class="text-white">Sliding BANNER-2</span></div>
                                                <small class="d-block text-muted">{{\Carbon\Carbon::parse($banners[1]->created_at)->diffForHumans()}}</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="/storage/images/banners/banner_3.jpg?t={{ date('Y-m-d H:i:s') }}"
                                                alt="Photo by Rose Bradley" class="rounded"  style="max-height:250px;max-weight:250px;">
                                        </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><span class="text-white">Sliding BANNER-3</span></div>
                                                <small class="d-block text-muted">{{\Carbon\Carbon::parse($banners[2]->created_at)->diffForHumans()}}</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>
                            <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="uploadOnChange()" accept="image/jpg">
                            <div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog modal-lg">
                        
                              <!-- 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>
                                                            <br />
                                                          <span style="font-size:12px;color:white"> 
                                                             <span><b id="file_name"></b></span> ( <span><b id="file_size"></b></span>  )
                                                           </span><br />
                                                            
                                                            <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();$('.done').show();$('#progress_div').show();uploadNow();">Start Upload</button>
                                  <button type="button" class="btn btn-danger operation" data-dismiss="modal">Cancel</button>
                                </div>
                              </div>
                        
                            </div>
                          
                        </div>
                        
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--  END CONTENT AREA  -->
<script>
    imgInp.onchange = evt => {
        const [file] = imgInp.files
        if (file) {
            logo.src = URL.createObjectURL(file)
        }
    }


    bgimgInp.onchange = evt => {
        const [file] = bgimgInp.files
        if (file) {
            bgImg.src = URL.createObjectURL(file)
        }
    }
    banimgInp.onchange = evt => {
        const [file] = banimgInp.files
        if (file) {
            bannerImg.src = URL.createObjectURL(file)
        }
    }

    footerBackgroundInp.onchange = evt => {
        const [file] = footerBackgroundInp.files
        if (file) {
            footerBackground.src = URL.createObjectURL(file)
        }
    }
</script>
@endsection