@extends('pages/page')

@section('js')      
    <script src="/assets/vendor/typeahead.js/typeahead.bundle.js"></script>
        <script src="/assets/vendor/handlebars/handlebars-v4.0.2.js"></script>
    <script src="/assets/js/typeahead.js"></script>
@endsection

@section('css')
    @parent
    <link href="{{ asset('assets/css/typeahead.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/subcategory.css') }}" rel="stylesheet"> {{-- We borrow the subcat layout for images --}}
    <link href="{{ asset('assets/css/image-library.css') }}" rel="stylesheet">
    <style>
		.product input[type="checkbox"]:checked {accent-color:#646262;border-radius: 50%;}
		.download-all {background-color: #f47a20;color:#fff;text-align:center;}
		.icon-part {width:50px;text-align:center;color:#fff;background-color:#ccc;float:right;padding:7px 0;border-radius:0 4px 4px 0;}
		.download-text {float:left;width:calc(100% - 50px);padding:7px 0;background-color: #f47a20;border-radius:4px 0 0 4px}
		.download-checkbox {position:absolute;top:10px;right:14px;z-index:9;}
		.icon-part.active {cursor:pointer;}
		.product {
		  position: relative;
		}
		
		.product label {
		  background-color: #fff;
		  border: 1px solid #ccc;
		  border-radius: 50%;
		  cursor: pointer;
		  height: 15px;
		  right: 15px;
		  position: absolute;
		  top: 15px;
		  width: 15px;
		  z-index:9;
		}
		
		.product label:after {
		  border: none;
		  content: "";
		  height: 9px;
		  right: 2px;
		  opacity: 0;
		  position: absolute;
		  top: 2px;		  
		  width: 9px;
		  border-radius:50%;
		  background-color:#ccc;
		}
		
		.product input[type="checkbox"] {
		  visibility: hidden;
		}
		
		.product input[type="checkbox"]:checked + label {
		  background-color: #fff;
		  border-color: #ccc;
		}
		
		.product input[type="checkbox"]:checked + label:after {
		  opacity: 1;
		}
    </style>
@endsection

@section('extra_nav')
    
    <div class="visible-xs">
        <form method="post" action="{{ route('form','redirect') }} ">

            {!! csrf_field() !!}
            
          <div class="form-group">                        
            <select class="form-control jump-menu" name="redirect" id="redirect">
                <option value="">Image category</option>
                @foreach ($sectors as $sector)
                    @if ($sector->url == "new-products")
                        @continue
                    @endif

                    <option value="{{ route('image_library',$sector->url) }}" @if (route('image_library',$sector->url) == Request::url()) selected="selected" @endif>{{ $sector->title }}</option>
                @endforeach
            </select>
          </div>
          <noscript>
            <button type="submit" class="btn btn-default">GO</button>
            </noscript>
        </form>
    </div>
    <div class="hidden-xs">

        <h3>Image category</h3>
        <ul>
        @foreach ($sectors as $sector)
            @if ($sector->url == "new-products")
                @continue
            @endif

            <li><a href="{{ route('image_library',$sector->url) }}">{{ $sector->title }}</a></li>
        @endforeach
        </ul>
    </div>
@endsection

@section('below_content')

        @php
            $alerts = app(Cartalyst\Alerts\Alerts::class)->get();
        @endphp

        @foreach ($alerts as $alert)
            <div class="alert alert-{{ $alert->class }} alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                {{ $alert->message }}
            </div>
        @endforeach
<div class="row">
<div class="col-md-7">
    <form class="form-inline" id="typeahead-form" action="{{ route('image_library_search') }}" method="post">
        {!! csrf_field() !!}
      <div class="form-group" style="width:300px;">
        <label for="ajax-search-terms" class="sr-only">Quick order</label>
        <input type="text" class="form-control typeahead" id="ajax-search-terms" name="code" placeholder="Product code or description" value="{{ $query ?? '' }}" style="width:300px;">            
      </div>      
      <button class="btn btn-orange" type="submit" value="Submit">Search</button>
      
    </form>
 </div>   
 <!--div class="col-md-5"><div class="download-all"><div class="download-text"><span class="download-counter">0 products</span> selected</div><div class="icon-part"><i class="fa fa-download" aria-hidden="true"></i></div></div-->
</span>
 </div>
 </div>   


    @if ($extras)
    <div class="extra_content clearfix" style="border:0;">
        <div class="row grid-links" style="max-height: 100%;overflow-y: hidden;border-top:0;">

            @foreach ($extras as $extra) {{-- $extra here is an image --}}
             <div class="col-md-3">
                <div class="product" style="position:relative">
					<!--input class="download-checkbox" type="checkbox" name="image[{{ $extra->id }}]" value="{{ $extra->id }}" id="download-checkbox{{ $extra->id }}"><label for="download-checkbox{{ $extra->id }}"></label-->
                    <a href="{{ route('image_library_download',$extra->id) }}">            
                        <div class="image-wrapper">
                            <img src="/imagecache/square/{{ $extra->src }}" class="img-responsive" alt="@if ($extra->product()) {{ $extra->product()->first()->title }} @endif">
                        </div>
                        <h3 class="small-animal">@if ($extra->product()) {{ $extra->product()->first()->title }} @endif</h3>
                    </a>
                    <a href="{{ route('image_library_download',$extra->id) }}" class="btn btn-orange">Download</a>                    
                </div>
            </div>
            
            @if (($loop->index + 1) % 4 == 0)
                <div class="clearfix"></div>            
            @endif

            @endforeach
                    
        </div>
            
        
    </div>
    @endif

    @if ($sector_categories)

        <h3>Please select a subcategory</h3>
        @foreach ($sector_categories as $sector_categorie)
            <div class="image-library-sub-menu-category">
                <a href="{{ route('image_library', [$sector_categorie->sector->url, $sector_categorie->url]) }}">{{ $sector_categorie->title }}</a>
            </div>
        @endforeach


    @endif
<script>
	$(document).ready(function(){
		
		$(document).on('click','.download-checkbox, .download-checkbox + label', function(){
			var count = $('.download-checkbox:checked').length;
			if(count > 0){
				$('.icon-part').addClass('active');
			} else {
				$('.icon-part').removeClass('active');
			}
			if(count == 1) {
				var count_string = '1 product';
			} else {
				var count_string = count+' products';
			}
			
			$('.download-counter').html(count_string);
		});
		
		$(document).on('click','.icon-part.active',function(){
			var images = [];
			var token = $('input[name="_token"]').val();
			$("input:checkbox:checked").each(function(){
				images.push($(this).val());
			});
			
			$.ajax({
			  url: '/ajax/download-images',		  
			  type: "post",
			  data: {'ids':images,"_token": token},
			  success: function(data){                
				//console.log(location.protocol + "//" + location.host+'/'+data);
				  var link = document.createElement("a");
				  link.download = name;
				  link.href = location.protocol + "//" + location.host+'/'+data;
				  document.body.appendChild(link);
				  link.click();
				  document.body.removeChild(link);
				  delete link;
			  }
			});
		
		});
		
	});
</script>
@endsection