@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">Alkobote.de</h1>
          <p class="lead my-3">Finde immer die günstigsten Angebote im Bereich Spirituosen. Täglich neue Schnäppchen.</p>
          <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Erfahre mehr...</a></p>
        </div>
      </div>


<?php 

$count = 0;

foreach( $data as $offer) {


	if ( "Anderes" == $offer->spirit_type ) {
		$offer->url = "misc";
		$offer->angebotsname = "anderen Angeboten";
		$offer->linktext = "Weitere günstige Angebote entdecken.";
	} else {
		$offer->url = lcfirst($offer->url) ;
		$offer->angebotsname = $offer->angebotsname . "angeboten";
		$offer->linktext = "Den günstigsten ". $offer->spirit_type ." finden.";
	}

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

?>
	

        <!--div class="col-md-6">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-primary">{{ ucfirst($offer->spirit_type) }}</strong>
              <h3 class="mb-0">
              </h3>
	      <a href="/{{ $offer->spirit_type }}">Alle {{ ucfirst($offer->spirit_type) }}</a>
            </div>
	    <img class="card-img-right flex-auto d-none d-md-block" src="{{ $offer->image_url }}" alt="Card image cap">
          </div>
        </div-->

<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 hide-overflow">
				<a class="text-dark" href="/{{ $offer->url }}">
					Hier geht es zu den {{ $offer->angebotsname }}
				</a>
			</h3>
			<a class="w-100" href="/{{ $offer->url }}" style="word-wrap: none;">{{ $offer->linktext }}</a>
			<!--p class="card-text mb-auto text-success w-100"><del class="text-danger">{{ TF::fF($offer->original_price) . "€" }}</del> <strong class="float-right">{{ TF::fF($offer->discounted_price) . "€" }}</strong></p-->
		</div>
			<img data-href="/{{ $offer->url }}" class="card-img-right 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