@extends('layouts.base')

@section('header')
RSS-Feeds
@endsection

@section('content')
    <div class="container">
      <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
        <div class="col-md-8 px-0">
          <h1 class="display-4 font-italic">Angebote als RSS-Feeds</h1>
          <p class="lead my-3">Finde immer die günstigsten Angebote im Bereich Spirituosen, praktischerweise als RSS-Feed direkt aufs Handy.</p>
          <p class="lead mb-0"><a href="/" class="text-white font-weight-bold">Zurück zur Übersicht...</a></p>
        </div>
      </div>

<?php 

$count = 0;

foreach( $data as $offer) {

	// BUG: Logo is broken on smaller devices.
	$width="";

	if ( !in_array(strtolower($offer->spirit_type), $views) ) {
		// card of misc offers
		$offer->url = "misc";
		$offer->feedname = "Feed der weiteren Angebote"; 
		$offer->linktext = "Zum Feed der weiteren Angebote.";
		$offer->spirit_type = "Verschiedenes";
	} else {
		// main cards
		$offer->url = lcfirst($offer->url) ;
	}
	$offer->url = $offer->url . "/feed/";

	if ( 5 == $count ) {
		$width="width=270";
	}


	if ( $count % 2 == 0) {
?>
 <div class="row mb-2">
<?php
	}

?>
	
<div class="col-md-6 col-sm-12" id="{{ $offer->name }}" data-track-content data-content-name="RSS-Feed" data-content-piece="{{ ucfirst($offer->spirit_type) }}" data-content-target="{{ $offer->url }}">
	<div class="card flex-md-row mb-4 box-shadow h-md-250 h-sm-500">
		<img class="card-img-top flex-auto d-xs-block d-sm-block img-thumbnail d-md-none" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
			<div class="card-body d-flex flex-column align-items-start">
					<div data-href="/{{ $offer->url }}" class="card-img-overlay js-link-replacement" title="Link zum RSS-Feed">
						<span class="float-right rounded btn btn-rss oi oi-rss-alt" title="RSS-Feed" aria-hidden="true"></span>
					</div>
					<div class="d-inline align-items-start text-left w-100 mb-2">
						<strong class="text-dark">{{ $offer->spirit_type }}</strong>
					</div>
					<h3 class="mb-0 d-inline-block h-100">
						<a class="text-dark card-link" href="/{{ $offer->url }}">
							Hier geht es zum {{ $offer->feedname }}
						</a>
					</h3>
				
					<a class="w-100 u card-link" href="/{{ $offer->url }}" style="word-wrap: none;" title="Link zum RSS-Feed">{{ $offer->linktext }}</a>
			</div>
			<img {{ $width }} data-href="/{{ $offer->url }}" class="card-img-right border-white img-thumbnail d-none d-xs-none d-md-block float-right img-responsive js-link-replacement" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
	</div>
</div>

<?php

	
	if ( $count % 2 == 1) {
?>
 </div>
<?php
	}

	$count++;

}

// schließt den row div wieder bei ungerade anzahl
if ( $count % 2 == 1) {
?>
 </div>
<?php
}
?>

    </div>

@endsection


@section('scripts')
<script>
$(".js-link-replacement").hover(function(){
	$(this).css( 'cursor', 'pointer' );
},
function(){
	$(this).css( 'cursor', 'inherit');
});

$(".js-link-replacement").click(function(){
	window.location.href = $(this).data("href");
});
</script>
@endsection