@extends('layouts.base')

@section('header')
Angebote
@endsection

@section('content')
    <div class="container">
      <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
        <div class="col-md-7 px-0">
          <h1 class="display-4 font-italic">Sonderangebote <span class="ml-10">({{$hits->count}} Angebote)</span></h1>
          <p class="lead my-3">Finde immer die günstigsten Angebote im Bereich Spirituosen. Regelmäßig neue Schnäppchen.</p>
          <!--p class="lead mb-0"><a href="/about" class="text-white font-weight-bold">Erfahre mehr...</a></p-->
        </div>
      </div>


<?php 

if ( empty($data) ) {
	/* Keine Angebote */
?>
<div class="alert alert-secondary">
	<h4 class="alert-heading">Keine Angebote</h4>
	Momentan liegen keine Angebote vor. Probieren Sie es später noch einmal.
</div>
<?php 
	/* Ende Keine Angebote */
} else {
	/* Liste Angebote */

	$count = 0;

	foreach( $data as $offer) {


		if ($offer->spirit_type == "RSS-Feeds") {
			#$offer->angebotsname = "dem " . $offer->angebotsname;
		} else if ( !in_array(strtolower($offer->spirit_type), $views) ) {
			$offer->url = "misc";
			$offer->angebotsname = "anderen Angeboten";
			$offer->linktext = "Weitere günstige Angebote entdecken.";
			$offer->spirit_type = "Verschiedenes";
		} 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 h-100">
				<a class="text-dark" href="/{{ $offer->url }}">
					Hier geht es zu den {{ $offer->angebotsname }}
				</a>
			</h3>
<?php
		if ( "RSS-Feeds" == $offer->spirit_type) {
?>
		
			<p class="card-text "><span class="rounded off-badge oi oi-rss-alt"></span></p>
<?php
		} else {
?>
			<p class="card-text ">Bis zu <span class="bg-danger rounded off-badge off-badge-small">{{ $offer->procent}}%</span> sparen!</p>
<?php
		}
?>
			
			<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