@extends('layouts.fk-base')

@section('header')
{{ ucfirst($title) }}
@endsection

@section('feed')
	{!! Feed::link(secure_url($rss_feed) . "/", 'atom', 'Feed von ' . ucfirst($spirit_type) . '-Angeboten', 'de') !!}
@endsection

@section('content')
<main class="site-main" id="main">
<?php
	$header = "";
	$header_text = "Du bist auf der Suche nach einer neuen Lieblingsspirituose? Hier sind alle aktuell reduzierten Angebote aufgelistet. Viel Spaß beim stöbern!";
	if ( "Alle Angebote" == $spirit_type ) {
		$header = "Alle aktuellen Sonderangebote";
	} else if ( "Andere Angebote" == $spirit_type ){
		$header = "Aktuelle Spirituosen-Sonderangebote";
	} else {
		$header = "Aktuelle " . ucfirst($spirit_type) . "-Angebote";
		$header_text = "Du bist auf der Suche nach einem neuen Lieblings" . $spirit_type . "? Hier sind alle aktuell reduzierten " . ucfirst($spirit_type) . "s aufgelistet. Happy Dramming!";
	}
?>
<div class="container">
		<nav class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumb">
		    <ol class="breadcrumb">
			<!-- Breadcrumb NavXT 6.2.1 -->
<li class="home breadcrumb-item"><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Gehe zur Startseite: Fuselkönig.de" href="https://www.fuselkoenig.de" class="home"><span property="name">Startseite</span></a><meta property="position" content="1"></span></li>
<li class="post post-angebote-archive breadcrumb-item"><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Schau dir Angebote an." href="/angebote/" class="post post-angebote-archive"><span property="name">Angebote</span></a><meta property="position" content="2"></span></li>
<li class="archive taxonomy type current-item breadcrumb-item active" aria-current="page"><span property="itemListElement" typeof="ListItem"><span property="name">{{ ucfirst($spirit_type) }}</span><meta property="position" content="3"></span></li>
		    </ol>
		</nav>
	</div>

    <div class="container">

<header class="page-header">
	<div class="card taxonomy-card">
		<div class="card-body">
			<h1 class="card-title page-title">{{ $header }}</h1>
			<p>
			{{ $header_text }}
			</p>
			@include('snippets.fk-sortbuttons')
		</div>
	</div>
</header><!-- .page-header -->

	{{ $data->appends(Input::except('page'))->links() }}

<?php
/*
      <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark bbg-white ttext-dark box-shadow">
        <div class="col-md-6 px-0">
	  <h1 class="display-4 font-italic">{{ ucfirst($spirit_type) }} <span class="text-mute ml-10">({{$count}} Angebote)</span><!-- --></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">Zurück zur Übersicht...</a></p>
        </div>
      </div>
 */ ?>

<?php 
if ( !$data->count() ) {
	/* Keine Angebote */
?>
<div class="alert alert-secondary" data-track-content data-content-name="{{ ucfirst($spirit_type) }}" data-content-piece="Keine Angebote" data-content-target="">
	<h4 class="alert-heading">Keine Angebote</h4>
	Momentan liegen keine {{ $title }} vor. Probieren Sie es später noch einmal.
</div>
<?php 
	/* Ende Keine Angebote */
} else {
	/* Liste Angebote */

//@include('snippets.sortbuttons')
$css_border_left = "";

foreach( $data as $offer) {
?>





	<div class="card <?php echo $css_border_left; ?>">
      <div class="row ">
        <div class="col-md-4">
	    <div class="card-header-dp-none">
		<p><strong>
		<span style="visibility: hidden;">
		{{ ucfirst($offer->spirit_type) }} <span class="float-right">{{ $offer->shop }}</span>
		</span>
		</strong></p>
	    </div>
	    <div class="card-img-overlay card-img-overlay-badge" >
	    <p class="card-text float-right rounded off-badge"  >{{ $offer->procent}} %</p>
            </div>
	    <img src="{{ $offer->image_url }}" class="card-img img-fluid mx-auto d-block" >
          </div>
          <div class="col-md-8 px-10">
	    <div class="card-header">
		<p><strong>
		<a style="color: inherit;" href="/angebote/search?q={{ ucfirst($offer->spirit_type) }}" title="Alle {{ ucfirst($offer->spirit_type) }} anzeigen">{{ ucfirst($offer->spirit_type) }}</a> <span class="float-right">{{ $offer->shop }}</span>
		</strong></p>
	    </div>
            <div class="card-block card-body px-3">

	    <h3 class="card-title">{{ $offer->name }}</h3>

		<div class="row">
		      <span class="card-text col-md-6">
			<p>
		              <strong class="new-price">Neuer Preis: {{ TF::fF($offer->discounted_price) }} €</strong>
			      <br>
			      statt <strong><del>{{ TF::fF($offer->original_price) }} €</del></strong>
			      <br>
			      {{ TF::fF($offer->base_price ) }} € / Liter
<!--
			      <span sstyle="color:red;">Alter Preis: <del>{{ TF::fF($offer->original_price) }} €</del></span>
				<strong style="font-size: 1.5rem;">{{ TF::fF($offer->discounted_price) }} €</strong>
				<strong style="font-size: 1rem;">{{ TF::fF($offer->discounted_price) }} €</strong>
				<br>
				statt <del>{{ TF::fF($offer->original_price) }} €</del>
			      <br>
			      {{ TF::fF($offer->base_price ) }} € / Liter
-->
			</p>
		      </span>
		      <p class="card-text col-md-6">
		      	      Alkohol: {{ TF::fF($offer->abv) }} %
			      <br>
			      Volumen: {{ TF::fF($offer->volume) }} Liter
			      <br>
			      Versand: {{ TF::fF($offer->shipping_costs) }} €
			      <br>
			      <br>
		      </p>
                </div>
            </div>
            <div class="card-footer row">
		<div class="col-md-6 col-sm-6">
		    <a href="{{ $offer->url }}" class="btn btn-primary">Zum Shop</a>
		</div>
		<div class="col-md-6 col-sm-6">
		<p>
				Preis vom {{ strftime("%d. %B %Y", $offer->created_at) }}
		</p>
		</div>
<?php
	/*if ( $offer['include_post_link'] ) {
?>
	    <a href="<?php echo get_post_permalink( $post ); ?>#title" class="btn btn-light" title="Kommentieren und mehr">Detailansicht</a>
<?php
	}
	*/
?>
	    <!--p class="float-right">Preis vom {{ strftime("%d. %B", $offer->created_at) }}</p-->
            </div>
          </div>

        </div>
      </div>

<?php
	}
/*
<div class="col-md-6 col-sm-12" id="{{ $offer->name }}" data-track-content data-content-name="{{ ucfirst($spirit_type) }}" data-content-piece="{{ $offer->name }}" data-content-target="{{ $offer->url }}">
		<div class="card flex-md-row mb-4 box-shadow h-md-250 h-sm-500">

			<!-- >= md -->
			<div class="card-body d-none d-md-flex flex-row align-items-start">
				<div class="card-img-overlay" title="{{$offer->name}} :: {{ $offer->shop }}">
					<p class="card-text bg-danger float-right rounded off-badge">{{ $offer->procent}}%</p>
<!--
					<p class="card-text h-100 float-right">
						<span class="bg-danger ffloat-right rounded off-badge">{{ $offer->procent}}%</span>
						<span class="created_at d-flex ffloat-right rounded">{{ date("d.m.y", $offer->created_at) }}</span>
					</p>
-->

					<!--p class="card-text created_at h-100 float-right  d-flex fflex-column justify-content-end">{{ $offer->created_at}}</p-->
				</div>
				<div class="card-img-overlay w-55">
					<div class="d-inline align-items-start text-left w-100 mb-2">
						<a class="s-link" title="Alles anzeigen von: {{ $offer->spirit_type }}" href="/search?q={{ $offer->spirit_type }}"><strong class="text-primary">{{ $offer->spirit_type }}</strong></a>
						<a class="text-dark float-right" href="{{ $offer->shop_url }}">{{ $offer->shop }}</a>
					</div>

					<h4 class="mb-0 hide-overflow h-45">
						<a class="text-dark ttext-truncate hide-overflow" href="{{ $offer->url }}" title="{{$offer->name}}" >{{ $offer->name }}</a>
						<span class="text-fade-out"></span>
					</h4>

					<p class="card-text mb-auto text-success w-100"><strong class="ffloat-right text-large" style="margin-left: 3px;">{{ TF::fF($offer->discounted_price) }}€</strong>* <del class="text-danger">{{ TF::fF($offer->original_price) . "€" }}</del>
						<span class="float-right text-muted">{{ TF::fF($offer->base_price ) }}€/L</span>
					</p>
					<div class="mb-1 text-muted w-100">
						<span class="float-right">{{ TF::fF($offer->volume) . " Liter" }}</span><span>{{ TF::fF($offer->abv) . "%" }} Alk.</span>
					</div>
					<a class="u ttext-large" href="{{ $offer->url }}" title="Link zum Angebot bei {{$offer->shop}}">Jetzt bestellen</a>
					<p class="text-muted text-small w-100 nnmt-10">
						Versand: <strong>{{ TF::fF($offer->shipping_costs) }}€</strong> 
<?php
		if ( "" != $offer->free_shipping ) {
?>
						<span class=" float-right">Gratis ab <strong>{{ $offer->free_shipping }}</strong></span>
<?php
		} else {
?>
						<span class=" float-right">Versand ist nie kostenlos.</span>
<?php
	}
?>
						<br>
<!--
						<span class=" float-right">{{ date("d.m.Y", $offer->created_at) }}</span>
-->
						<span class=" float-right">* Preis vom <strong>{{ strftime("%d. %B", $offer->created_at) }}</strong></span>
					</p>
				</div>
			</div>
			<img class="card-img-right flex-auto d-none d-md-block border-white img-thumbnail" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{$offer->name}} :: {{ $offer->shop }}">

			<!-- <= sm -->
			<!-- Maybe make the image a link
				<a href="{{ $offer->url }}">
				</a>
			-->
<?php
		// sets style explicitly for Drankdozijn
		if ( "Drankdozijn" == $offer->shop ) {
			$style = 'margin-left: auto; margin-right: 25px; width:50%; object-fit: cover; width: 70px;';
		} else {
			$style = '';
		}
?>
			<img style="{{ $style }}" class="card-img-top flex-auto d-sm-block img-thumbnail d-md-none" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{$offer->name}} :: {{ $offer->shop }}">
			<div class="card-body .d-md-none d-lg-none d-xl-none d-xs-flex flex-column align-items-start">
<!--
				<div class="h-100 card-img-overlay">
					<p class="card-text bg-danger float-right rounded" style="color: white; font-size: 150%; padding-right: 10px; padding-left:10px; opacity: 0.9;">{{ $offer->procent}}%</p>
				</div>
-->
				<div class="flex-column bg-dark-opacity" >
					<div class="d-inline align-items-start text-left w-100 mb-2">
						<p class="card-text bg-danger rounded off-badge text-center" title="{{$offer->name}} :: {{ $offer->shop }}"><strong>{{ $offer->procent}}%</strong> gesenkt</p>
						<a class="text-dark float-right text-dotted" href="{{ $offer->shop_url }}">{{ $offer->shop }}</a>
					</div>
					<div class="d-block align-items-start text-left w-100 mb-2">
						<strong class="text-primary">{{ $offer->spirit_type }}</strong>
					</div>
					<h3 class="mb-0 d-inline-block hide-overflow h-100">
					<a class="text-dark ttext-truncate" href="{{ $offer->url }}" title="{{$offer->name}}" >{{ $offer->name }}</a>
					</h3>

					<div class="mb-1 text-muted w-100">
						<span class="float-right">{{ TF::fF($offer->volume) . " Liter" }}</span><span>{{ TF::fF($offer->abv) . "%" }} Alk.</span>
					</div>

					<p class="card-text mb-auto text-success w-100"><strong class="ffloat-right text-large" style="margin-left: 3px;">{{ TF::fF($offer->discounted_price) }}€</strong>* <del class="text-danger">{{ TF::fF($offer->original_price) . "€" }}</del>
					<span class="float-right text-muted">{{ TF::fF($offer->base_price ) }}€/L</span>
					</p>
					<strong><a href="{{ $offer->url }}" class="text-large">Jetzt bestellen</a></strong>
					<p class="text-muted text-small w-100 nmt-10">
						Versand: <strong>{{ TF::fF($offer->shipping_costs) }}€</strong> 
<?php
		if ( "" != $offer->free_shipping ) {
?>
						<span class=" float-right">Gratis ab <strong>{{ $offer->free_shipping }}</strong></span>
<?php
		} else {
?>
						<span class=" float-right">Versand ist nie kostenlos.</span>
<?php
		} 
?>
						<br>
						<span class=" float-right">* Preis vom <strong>{{ strftime("%d. %B", $offer->created_at) }}</strong></span>
					</p>
				</div>
			</div>
		</div>
	</div>
<?php
*/
?>

	{{ $data->appends(Input::except('page'))->links() }}

<?php
	/* Ende Liste Angebote */
}
?>

<!-- ./container -->
    </div>
</main>
@endsection

@section('scripts')
<script>
$(window).on("load", function(){
	$("img.card-img-top").each( function(k, v){
		
		// sets style like with Drankdozijn
		if ( (this.naturalWidth / this.naturalHeight) < 0.3 ) {
			console.log("debug: changing css for " + this.title);
			$(this).css("width", this.naturalWidth);
			$(this).css("onject-fit", "cover");
			$(this).css("margin-left", "auto");
			$(this).css("margin-right", "25px");
		}
	});
});
</script>
@endsection