@extends('layouts.app')

@section('content')
<div class="container">
	<div class="stps">
		<span class="stp"><label>Step 1.</label> It will calculate automatically all the product and blog article images.</span><br>
		<span class="stp"><label>Step 2.</label> On click of optimize all button it will get and optimize all product and blog article images of your store.</span><br>
		<span class="stp"><label>Step 3.</label> It is a one click go for your store, it will optimize and put images back to your store.</span><br>
	</div>
	<div class="loader" style="display: none">
		<img src="{{ asset('image/Preloader_61.gif') }}" width="60px" height="60px">
		<p><strong>Please wait...While we are optimize your store images</strong></p>
		<p><strong style="color: red">Note: Please do not refresh or close your browser tab while we are optimize your store images. It will remove or harm your Store images.</strong></p>
		<!--img src="https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_61.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;"-->
	</div>
	@if($total != '')
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Compression</div>

                <div class="card-body">
                	@if(!empty($success))
                        <div class="alert alert-success" role="alert">
                            {{ $success }}
                        </div>
                    @else
                    <div class="msg" style="color:green;"></div>
					<div class="card-image-ttl"><div class="card-inner1"><image src="https://banner2.cleanpng.com/20180718/brv/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg" height="30" width="50" /><strong>There are {{ $total }}  images that can be optimized.</strong></div><div class="inner-btn"><form action="optimize" role="form" class="form-horizontal" method="post" id="optinform" accept-charset="utf-8">
					@csrf 
					<input type="submit" name="submit" value="Optimize All">
					</form></div></div>
                   @endif
                </div>
            </div>
        </div>
		@if(!empty($success))
		@else
		<div class="col-md-12">
		<div class="scroll">
		<p style="text-align: center; max-width: 360px; margin: 0 auto;">
                    Scroll down for example Image compression.
                </p>
		</div></div>
		
		<div class="col-md-12">
		<div class="row">
			<div class="ptitle-first"><strong>Example product:&nbsp&nbsp </strong><p>{{ $pname }}</p></div>
	
	 
				<div class="col-md-6">
					<div class="first-image">
				<image src={{ $imgsrc }} width="50%"/> <br />
				<span class="caption">Original</span>	
			 </div>
			</div>
			
			<div class="col-md-6">
			<div class="second-image">
				<image src={{ $imgsrc }} width="50%"/><br />
				<span class="caption">Optimize</span>
			  
			</div>
		   </div>
		   
		  </div>
		</div>
		<div class="optimize">
		<div class="col-md-12">
			<p>Original size: 47.2 KB</p>
			<p>Optimized size: 36.4 KB (23% reduction)</p>	
			</div>
		</div>
		@endif
    </div>
	@else
		<div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Compression</div>

                <div class="card-body">
					<strong>There is no image for compression</strong>
				</div>
			</div>
		</div></div>	
	@endif	
</div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('#optinform').submit(function(e){
			$('.loader').css('display', 'block');
		});
    });



</script>