@extends('layouts.base')

@section('content')
    <div class="container">
      <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
        <div class="col-md-6 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) {


	if ( $count == 5 ) {
		// last card
		$offer->feedname = "Feed aller Angebote"; 
		$offer->linktext = "Zum Feed aller Angebote.";
		$offer->url = "all";
		$offer->spirit_type = "Alle Angebote";
	} else 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->feedname = $offer->feedname . "-Feed";
		$offer->linktext = "Zum ". $offer->spirit_type ." Feed";
	}
	$offer->url = $offer->url . "/feed/";

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

?>
	
<div class="col-md-6 col-sm-12" id="{{ $offer->name }}">
	<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 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" href="/{{ $offer->url }}">
					Hier geht es zum {{ $offer->feedname }}
				</a>
			</h3>
			
			<a class="w-100 u" href="/{{ $offer->url }}" style="word-wrap: none;">{{ $offer->linktext }}</a>
		</div>
			<img data-href="/{{ $offer->url }}" class="card-img-right border-left-0 img-thumbnail d-none d-xs-none d-md-block float-right 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