@extends('master')

{{-- This is a near duplicate of subcategory.blade.php; the templates aren't very well structured for product pages --}}

@section('css')	
	<link href="{{ asset('assets/css/page.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/css/subcategory.css') }}" rel="stylesheet">
@endsection

@section('content')

<div class="container subcategory page">
	
	<div class="col-md-3 submenu">
        @if (!empty($pagesection))
        <h2><a href="{{ $pagesection->get_route() }}">{{ $pagesection->title }}</a></h2>
        <ul>
        @foreach ($subnav as $item)
            <li><a href="{{ $item->get_route() }}">{{ $item->title }}</a></li>
        @endforeach
        </ul>   
        @endif

        @yield('extra_nav')

        @if (Auth::check() && !Auth::user()->is_restricted())
            <div id="ctas">
                {{-- Hack, get this properly flexible --}}                        
                @if (!empty($marketplace_menu))
                    <a href="{{ route('view_basket') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/place-an-order.jpg') }}" alt="Place an order"></a>
                    <a href="{{ route('browse') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/product-range.jpg') }}" alt="Search our entire product range"></a>
                    <a href="/contact-us/request-a-catalogue"><img class="img-responsive" src="{{ asset('assets/img/ctas/download-brochure.jpg') }}" alt="Download our latest digital brochures"></a>
                @elseif (!empty($pagesection) && $pagesection->uri == 'account')
                    <a href="{{ route('view_basket') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/place-an-order.jpg') }}" alt="Place an order"></a>
                    <a href="{{ route('image_library') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/image-library.jpg') }}" alt="Search our image library"></a>
                    <a href="{{ route('browse') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/product-range.jpg') }}" alt="Search our entire product range"></a>
                    <a href="/contact-us/request-a-catalogue"><img class="img-responsive" src="{{ asset('assets/img/ctas/download-brochure.jpg') }}" alt="Download our latest digital brochures"></a>
                @elseif (!empty($pagesection) && $pagesection->uri == 'contact-us')
                    <a href="{{ route('account_details') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/account-status.jpg') }}" alt="Check your company account status"></a>
                    <a href="{{ route('image_library') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/image-library.jpg') }}" alt="Search our image library"></a>
                    <a href="{{ route('browse') }}"><img class="img-responsive" src="{{ asset('assets/img/ctas/product-range.jpg') }}" alt="Search our entire product range"></a>
                    <a href="/contact-us/request-a-catalogue"><img class="img-responsive" src="{{ asset('assets/img/ctas/download-brochure.jpg') }}" alt="Download our latest digital brochures"></a>
                @endif
            </div>
        @endif

    </div>
    <div class="col-md-9">

		<div class="row grid-header">
			<div class="col-md-7">
				<h2 class="{{ $sector->uri }}">{{ $subcategory->title }}</h2>
				@if ($subcategory->content)
					{!! $subcategory->content !!}
				@else
					<p>{{ $subcategory->summary }}</p>
				@endif
			</div>

			@if ($subcategory->image && !$subcategory->hero_image)
			<div class="col-md-3 col-md-offset-2">
				<img src="{{ Croppa::url($subcategory->image, 400, 400) }}" class="img-responsive" alt="{{ $subcategory->title }}">
			</div>
			@endif
		</div>


	@if ($products->count())


		<div class="row grid-links" style=" display: flex;flex-flow: row wrap;">
			<div class="col-md-12">
        @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>

		@foreach ($products as $product)
		
			<div class="col-md-4" style="width:calc(100% / 3);">
				<div class="product">
					<a href="{{ $product->get_route() }}">			
						<div class="image-wrapper">
							<img src="/imagecache/square/{{ $product->image() }}" class="img-responsive" alt="{{ $product->title }}">
							<form class="form-inline favformfav" action="{{ route('toggle_favourite') }}" method="post" style="margin-top: 5px">
						{!! csrf_field() !!}						
						<input type="hidden" name="product_id" value="{{ $product->id }}">					  	  
					  	<button class="btn btn-danger btn-xs" type="submit" value="Submit"><i class="fa fa-heart active" aria-hidden="true"></i></button>
					</form>
						</div>
						<h3 class="{{ $sector->uri }}">{{ $product->title }}</h3>
						{{-- <p>Product code: {{ $product->pid }}</p> --}} {{-- Redundant here --}}
					</a>
					
					<form class="form-inline" action="{{ route('add_to_basket') }}" method="post">
						{!! csrf_field() !!}
						@if ($product->variants->count())
						<div class="form-group variant-select">
							<select class="form-control input-sm" name="variant_id">
								@foreach ($product->variants as $variant)
									@if (($loop->index + 1) == 1)
										<option value="">{{ $variant->property }}</option>
									@endif
									<option value="{{ $variant->id }}">{{ $variant->value }}</option>
								@endforeach							
							</select>
						</div>
						@else
						<input type="hidden" name="product_id" value="{{ $product->id }}">
						@endif
					  <div class="form-group">					    
					   	<input type="number" id="quantity-{{ $product->id }}" min="1" length="1" class="form-control input-sm" style="width: 4em" name="quantity" value="1">		   	
					  </div>	  
					  <button class="btn btn-orange" type="submit" value="Submit">Add to basket</button>
					 

					  
					</form>
					
					

				</div>
			</div>
		
			@if (($loop->index + 1) % 3 == 0)
				<!--div class="clearfix"></div-->			
			@endif
		
		@endforeach
		</div>

	@endif

	</div>

</div>


<script>
$(document).ready(function(){
	$(document).on('submit','.favformfav',function(e){
			e.preventDefault(); 
			e.stopPropagation();		
			var product = $(this).find('input[name="product_id"]').val();
			var action='add';
			var token = $(this).find('input[name="_token"]').val();
			if($(this).find('.fa-heart').hasClass('active')){
				$(this).find('.fa-heart').removeClass('active');
				action='remove';
			} else {
				$(this).find('.fa-heart').addClass('active');
				action='add';			
			}
			
			el = $(this);
			
			$.ajax({
			  url: '/ajax/favourite',		  
			  type: "post",
			  data: {'product_id':product, 'action': action,"_token": token},
			  success: function(data){
				console.log(data);
				$(el).parents('.col-md-4').remove();
			  }
			});
			
			return false;
		});
});
</script>

@endsection