@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>
					 @if($pstatus != 'active' or $pstatus == 'nostatus')
					 	<strong>Please select a plan</strong>
					 @else
						<div class="inner-btn">
						<form action="optimize" role="form" class="form-horizontal" method="post" id="aftrcharge" accept-charset="utf-8">
						@csrf 
						<input type="submit" name="submit" value="Optimize All">
						</form>
						</div>
					@endif	
				</div>
                   @endif
                </div>
            </div>
        </div>
		@if(!empty($success))
		@else
			@if($pstatus != 'active' or $pstatus == 'nostatus')
				<div class="row pricing-plans text-center" style="text-align: center;margin-left: 10px;margin-right: 10px;margin-top: 32px;">
                <div class="col-md-1">
                </div>
                <div class="col-md-2">
                    <div class="pricing-plan-block">
                        <div class="name">BASIC PLAN</div>
                        <div class="price">
                            <span class="currency">$</span>
                            5.60
                            <span class="period">/ mo.</span>
                        </div>
                        <div class="cta">
                           <form action="optimize" role="form" class="form-horizontal" method="post" id="optinform" accept-charset="utf-8">
						@csrf 
						<input type="hidden" name="pname" value="Basic Plan">
						<input type="hidden" name="pprc" value="5.60">
						<input type="submit" name="submit" value="Optimize All">
						</form>
                        </div>
                        <div class="body">
                            <div class="quota">
                                <div class="value">1 000</div>
                                <div class="desc">images per month</div>
                            </div>
                            <div class="pricing-plan-features">
                                <div class="pricing-plan-feature">Auto compression</div>
                                <div class="pricing-plan-feature">Convert PNG to JPG</div>
                                <div class="pricing-plan-feature">only for Product</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="pricing-plan-block">

                        <div class="name">ADVANCED</div>
                        <div class="price">
                            <span class="currency">$</span>
                            14.60
                            <span class="period">/ mo.</span>
                        </div>
                        <div class="cta">
                            <form action="optimize" role="form" class="form-horizontal" method="post" id="optinform" accept-charset="utf-8">
						@csrf 
						<input type="hidden" name="pname" value="advanced">
						<input type="hidden" name="pprc" value="14.60">
						<input type="submit" name="submit" value="Optimize All">
						</form>
                        </div>
                        <div class="body">
                            <div class="quota">
                                <div class="value">2 000</div>
                                <div class="desc">images per month</div>
                            </div>
                            <div class="pricing-plan-features">
                                <div class="pricing-plan-feature">Auto compression</div>
                                <div class="pricing-plan-feature">Convert PNG to JPG</div>
                                <div class="pricing-plan-feature">Product and Blog Featured images</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 advanced">
                    <div class="pricing-plan-block">
                        <div class="ribbon">Popular</div>
                        <div class="name">PREMIUM</div>
                        <div class="price">
                            <span class="currency">$</span>
                            42.50
                            <span class="period">/ mo.</span>
                        </div>
                        <div class="cta">
                             <form action="optimize" role="form" class="form-horizontal" method="post" id="optinform" accept-charset="utf-8">
						@csrf 
						<input type="hidden" name="pname" value="Premium">
						<input type="hidden" name="pprc" value="42.50">
						<input type="submit" name="submit" value="Optimize All">
						</form>
                        </div>
                        <div class="body">
                            <div class="quota">
                                <div class="value">5 000</div>
                                <div class="desc">images per month</div>
                            </div>
                            <div class="pricing-plan-features">
                                <div class="pricing-plan-feature">Auto compression</div>
                                <div class="pricing-plan-feature">Convert PNG to JPG</div>
                                <div class="pricing-plan-feature">Product and Blog Featured images</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="pricing-plan-block">
                        <div class="name">GOLD</div>
                        <div class="price">
                            <span class="currency">$</span>
                            100
                            <span class="period">/ mo.</span>
                        </div>
                        <div class="cta">
                             <form action="optimize" role="form" class="form-horizontal" method="post" id="optinform" accept-charset="utf-8">
						@csrf 
						<input type="hidden" name="pname" value="Gold">
						<input type="hidden" name="pprc" value="100.00">
						<input type="submit" name="submit" value="Optimize All">
						</form>
                        </div>
                        <div class="body">
                            <div class="quota">
                                <div class="value">15 000</div>
                                <div class="desc">images per month</div>
                            </div>
                            <div class="pricing-plan-features">
                                <div class="pricing-plan-feature">Auto compression</div>
                                <div class="pricing-plan-feature">Convert PNG to JPG</div>
                                <div class="pricing-plan-feature">Product and Blog Featured images</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <!--div class="pricing-plan-block">
                        <div class="name">ENTERPRISE</div>
                        <div class="price">
                            <span class="currency">$</span>
                            79
                            <span class="period">/ mo.</span>
                        </div>
                        <div class="cta">
                            <button ng-click="!vm.startingEnterpriseOptimization &amp;&amp; vm.start('ENTERPRISE')" type="button" class="Polaris-Button Polaris-Button--primary" ng-class="{'Polaris-Button--disabled' : vm.startingEnterpriseOptimization }">
                                <!-- ngIf: vm.startingEnterpriseOptimization >
                                <span class="Polaris-Button__Content">
                                    <span class="Polaris-Button__Text">
                                        Optimize images
                                    </span>
                                </span>
                            </button>
                        </div>
                        <div class="body">
                            <div class="quota">
                                <div class="value">55 000</div>
                                <div class="desc">images per month</div>
                            </div>
                            <div class="pricing-plan-features">
                                <div class="pricing-plan-feature">Product images</div>
                                <div class="pricing-plan-feature">Collection images</div>
                                <div class="pricing-plan-feature">Theme Asset images</div>
                                <div class="pricing-plan-feature">Blog Post images</div>
                                <div class="pricing-plan-feature">Lossy/Lossless compression</div>
                                <div class="pricing-plan-feature">Convert PNG to JPG</div>
                                <div class="pricing-plan-feature">Alt Texts</div>
                                <div class="pricing-plan-feature">File names</div>
                                <div class="pricing-plan-feature">360 day backup</div>
                                <div class="pricing-plan-feature">Automatic optimization</div>
                                <div class="pricing-plan-feature">Priority support</div>
                            </div>
                        </div>
                    </div-->
                </div>
            </div>
			@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
		@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() {
        $('#aftrcharge').submit(function(e){
			$('.loader').css('display', 'block');
		});
    });



</script>