744 lines
24 KiB
PHP
744 lines
24 KiB
PHP
@extends('layouts.layout-2')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.incentive-hero {
|
|
margin: -1.5rem -1.5rem 0 -1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 520px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.incentive-hero img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.incentive-hero .hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom,
|
|
rgba(0, 0, 0, 0.10) 0%,
|
|
rgba(0, 0, 0, 0.25) 40%,
|
|
rgba(0, 0, 0, 0.75) 100%);
|
|
}
|
|
|
|
.incentive-hero .hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 2.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.incentive-hero .hero-badge {
|
|
display: inline-block;
|
|
background: rgba(215, 215, 0, 0.92);
|
|
color: #333;
|
|
font-weight: 700;
|
|
padding: .35rem 1rem;
|
|
border-radius: 50px;
|
|
font-size: .85rem;
|
|
letter-spacing: .5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.incentive-hero h1 {
|
|
font-size: 2.6rem;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
|
|
margin-bottom: .5rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.incentive-hero .hero-subtitle {
|
|
font-size: 1.25rem;
|
|
color: rgba(255, 255, 255, 0.92);
|
|
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.incentive-intro {
|
|
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
|
color: #fff;
|
|
border-radius: .75rem;
|
|
padding: 2rem 2.5rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.7;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.incentive-intro::before {
|
|
content: '\201C';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 15px;
|
|
font-size: 8rem;
|
|
opacity: .12;
|
|
font-family: Georgia, serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
.incentive-intro strong {
|
|
color: #d7d700;
|
|
}
|
|
|
|
.incentive-intro .cta-line {
|
|
color: #d7d700;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.info-tile {
|
|
border: none;
|
|
border-radius: .75rem;
|
|
overflow: hidden;
|
|
transition: transform .25s ease, box-shadow .25s ease;
|
|
}
|
|
|
|
.info-tile:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.info-tile .tile-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.2rem;
|
|
font-size: 1.8rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.tile-icon-calendar {
|
|
background: linear-gradient(135deg, #6b7758, #4a5340);
|
|
}
|
|
|
|
.tile-icon-plane {
|
|
background: linear-gradient(135deg, #6b7758, #8a9a70);
|
|
}
|
|
|
|
.tile-icon-star {
|
|
background: linear-gradient(135deg, #b8b800, #d7d700);
|
|
}
|
|
|
|
.info-tile .tile-value {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.info-tile .tile-label {
|
|
font-size: .82rem;
|
|
color: #888;
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.points-section {
|
|
background: #f4f5f0;
|
|
border-radius: .75rem;
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.points-section .points-heading {
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.point-card {
|
|
background: #fff;
|
|
border-radius: .75rem;
|
|
padding: 1.5rem;
|
|
height: 100%;
|
|
border-left: 4px solid;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.point-card-partner {
|
|
border-left-color: #6b7758;
|
|
}
|
|
|
|
.point-card-abo {
|
|
border-left-color: #d7d700;
|
|
}
|
|
|
|
.point-card .point-value {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.point-card-partner .point-value {
|
|
color: #6b7758;
|
|
}
|
|
|
|
.point-card-abo .point-value {
|
|
color: #9a9a00;
|
|
}
|
|
|
|
.point-card ul {
|
|
padding-left: 1.1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.point-card li {
|
|
margin-bottom: .35rem;
|
|
color: #555;
|
|
font-size: .92rem;
|
|
}
|
|
|
|
.gallery-section {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: .5rem;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.gallery-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.gallery-thumb {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: .5rem;
|
|
cursor: pointer;
|
|
aspect-ratio: 4/3;
|
|
}
|
|
|
|
.gallery-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform .35s ease;
|
|
}
|
|
|
|
.gallery-thumb:hover img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.gallery-thumb::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
transition: background .25s ease;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.gallery-thumb:hover::after {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.gallery-lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
background: rgba(0, 0, 0, 0.92);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gallery-lightbox.active {
|
|
display: flex;
|
|
}
|
|
|
|
.gallery-lightbox img {
|
|
max-width: 90vw;
|
|
max-height: 85vh;
|
|
border-radius: .5rem;
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.gallery-lightbox .lb-close {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
color: #fff;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background .2s;
|
|
}
|
|
|
|
.gallery-lightbox .lb-close:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.gallery-lightbox .lb-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #fff;
|
|
font-size: 2.5rem;
|
|
cursor: pointer;
|
|
background: rgba(255, 255, 255, 0.10);
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 52px;
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background .2s;
|
|
}
|
|
|
|
.gallery-lightbox .lb-nav:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.gallery-lightbox .lb-prev {
|
|
left: 1.5rem;
|
|
}
|
|
|
|
.gallery-lightbox .lb-next {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.cta-banner {
|
|
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
|
border-radius: .75rem;
|
|
color: #fff;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-banner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -30%;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cta-banner h3 {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.cta-banner p {
|
|
opacity: .9;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.cta-banner .btn-light {
|
|
font-weight: 700;
|
|
padding: .65rem 2.5rem;
|
|
font-size: 1.05rem;
|
|
border-radius: 50px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
transition: transform .2s ease, box-shadow .2s ease;
|
|
}
|
|
|
|
.cta-banner .btn-light:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.cta-banner .btn-outline-light {
|
|
font-weight: 600;
|
|
padding: .65rem 2rem;
|
|
font-size: 1.05rem;
|
|
border-radius: 50px;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.cta-status-icon {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.2rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.cta-status-icon-success {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #d7d700;
|
|
}
|
|
|
|
.cta-status-icon-warning {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #d7d700;
|
|
}
|
|
|
|
.cta-status-icon-muted {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.terms-toggle {
|
|
border: none;
|
|
border-radius: .75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terms-toggle .card-header {
|
|
background: #f4f5f0;
|
|
border: none;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
.terms-toggle .card-header a {
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.incentive-hero {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.incentive-hero h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.incentive-hero .hero-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.incentive-intro {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.points-section {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
|
|
{{-- ===== HERO ===== --}}
|
|
@if ($incentive->image)
|
|
<div class="incentive-hero mb-5">
|
|
<img src="{{ asset('img/incentive/' . $incentive->image) }}" alt="{{ $incentive->name }}">
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content">
|
|
<span class="hero-badge">
|
|
<i class="ion ion-md-trophy mr-1"></i> {{ __('incentive.section_period') }}:
|
|
{{ $incentive->qualification_start->format('d.m.') }} –
|
|
{{ $incentive->qualification_end->format('d.m.Y') }}
|
|
</span>
|
|
<h1>{{ $incentive->name }}</h1>
|
|
@if ($incentive->getLang('subtitle'))
|
|
<p class="hero-subtitle mb-0">{{ $incentive->getLang('subtitle') }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mb-5 pt-3">
|
|
<h1 class="font-weight-bold">
|
|
<i class="ion ion-md-trophy text-warning mr-2"></i>{{ $incentive->name }}
|
|
</h1>
|
|
@if ($incentive->getLang('subtitle'))
|
|
<p class="lead text-muted">{{ $incentive->getLang('subtitle') }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ===== INTRO-TEXT ===== --}}
|
|
@if ($incentive->getLang('description'))
|
|
<div class="incentive-intro mb-5">
|
|
{!! $incentive->getLang('description') !!}
|
|
</div>
|
|
@else
|
|
<div class="incentive-intro mb-5">
|
|
<p class="mb-1">
|
|
<strong>{{ __('incentive.teaser_intro_bold') }}</strong>
|
|
{{ __('incentive.teaser_intro_text') }}
|
|
</p>
|
|
<p class="mb-0 cta-line">
|
|
{{ __('incentive.teaser_intro_cta', ['n' => $incentive->max_winners]) }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ===== 3 INFO-KARTEN ===== --}}
|
|
<div class="row mb-5">
|
|
|
|
{{-- Qualifikationszeitraum --}}
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card info-tile h-100 shadow-sm">
|
|
<div class="card-body text-center py-4">
|
|
<div class="tile-icon tile-icon-calendar">
|
|
<i class="ion ion-md-calendar"></i>
|
|
</div>
|
|
<h5 class="font-weight-bold mb-3">{{ __('incentive.section_period') }}</h5>
|
|
<div class="mb-2">
|
|
<span class="tile-label d-block">{{ __('incentive.qualification_period') }}</span>
|
|
<span class="tile-value">
|
|
{{ $incentive->qualification_start->format('d.m.Y') }}
|
|
–
|
|
{{ $incentive->qualification_end->format('d.m.Y') }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span class="tile-label d-block">{{ __('incentive.calculation_period') }}</span>
|
|
<strong>{{ __('incentive.teaser_until') }}
|
|
{{ $incentive->calculation_end->format('d.m.Y') }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mindestqualifikation --}}
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card info-tile h-100 shadow-sm">
|
|
<div class="card-body text-center py-4">
|
|
<div class="tile-icon tile-icon-plane">
|
|
<i class="ion ion-md-airplane"></i>
|
|
</div>
|
|
<h5 class="font-weight-bold mb-3">{{ __('incentive.section_min_qual') }}</h5>
|
|
<div class="mb-3">
|
|
<div class="tile-value">{{ $incentive->min_direct_partners }}</div>
|
|
<span class="tile-label">{{ __('incentive.min_partners_label') }}</span>
|
|
</div>
|
|
<div>
|
|
<div class="tile-value">{{ $incentive->min_customer_abos }}</div>
|
|
<span class="tile-label">{{ __('incentive.min_abos_label') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Punkte-System --}}
|
|
<div class="col-md-4">
|
|
<div class="card info-tile h-100 shadow-sm">
|
|
<div class="card-body text-center py-4">
|
|
<div class="tile-icon tile-icon-star">
|
|
<i class="ion ion-md-star"></i>
|
|
</div>
|
|
<h5 class="font-weight-bold mb-3">{{ __('incentive.section_points') }}</h5>
|
|
<div class="mb-3">
|
|
<span class="tile-value" style="color: #6b7758;">
|
|
{{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
|
|
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
|
|
</span>
|
|
<span class="tile-label d-block">{{ __('incentive.points_partners_title') }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="tile-value" style="color: #9a9a00;">
|
|
{{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
|
|
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
|
|
</span>
|
|
<span class="tile-label d-block">{{ __('incentive.points_abos_title') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- ===== PUNKTE-DETAIL ===== --}}
|
|
<div class="points-section mb-5">
|
|
<h4 class="points-heading">
|
|
<i class="ion ion-md-star text-warning mr-1"></i>
|
|
{{ __('incentive.section_points') }}
|
|
</h4>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<div class="point-card point-card-partner">
|
|
<h6 class="font-weight-bold mb-2">
|
|
<i class="ion ion-md-person-add mr-1"></i>
|
|
{{ __('incentive.points_partners_title') }}
|
|
</h6>
|
|
<div class="point-value">
|
|
{{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
|
|
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
|
|
</div>
|
|
<ul>
|
|
<li>{{ __('incentive.teaser_partner_onetime_text') }}</li>
|
|
<li>{{ __('incentive.points_starter_package_label') }}</li>
|
|
<li>{{ __('incentive.points_partner_boost') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="point-card point-card-abo">
|
|
<h6 class="font-weight-bold mb-2">
|
|
<i class="ion ion-md-ribbon mr-1"></i>
|
|
{{ __('incentive.points_abos_title') }}
|
|
</h6>
|
|
<div class="point-value">
|
|
{{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
|
|
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
|
|
</div>
|
|
<ul>
|
|
<li>{{ __('incentive.teaser_abo_onetime_text') }}</li>
|
|
<li>{{ __('incentive.points_abo_direct') }}</li>
|
|
<li>{{ __('incentive.points_abo_boost') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== BILDERGALERIE ===== --}}
|
|
@if (count($galleryImages) > 0)
|
|
<div class="gallery-section mb-5">
|
|
<h4 class="font-weight-bold mb-3 text-center">
|
|
<i class="ion ion-md-images text-primary mr-1"></i>
|
|
{{ __('incentive.gallery_title') }}
|
|
</h4>
|
|
<div class="gallery-grid">
|
|
@foreach ($galleryImages as $idx => $img)
|
|
<div class="gallery-thumb" data-gallery-index="{{ $idx }}">
|
|
<img src="{{ asset($img) }}" alt="Impression {{ $idx + 1 }}" loading="lazy">
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Lightbox --}}
|
|
<div class="gallery-lightbox" id="galleryLightbox">
|
|
<button class="lb-close" title="Schließen">×</button>
|
|
<button class="lb-nav lb-prev" title="Zurück"><i class="ion ion-md-arrow-back"></i></button>
|
|
<button class="lb-nav lb-next" title="Weiter"><i class="ion ion-md-arrow-forward"></i></button>
|
|
<img src="" alt="Gallery" id="lightboxImage">
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ===== CTA-BEREICH ===== --}}
|
|
<div class="cta-banner mb-5">
|
|
@if ($participant && $participant->accepted_terms_at)
|
|
<div class="cta-status-icon cta-status-icon-success">
|
|
<i class="ion ion-md-checkmark-circle"></i>
|
|
</div>
|
|
<h3>{{ __('incentive.you_participate') }}</h3>
|
|
<p class="mb-4">{{ __('incentive.teaser_cta_already_in') }}</p>
|
|
<a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg mr-2">
|
|
<i class="ion ion-md-list mr-1"></i>{{ __('incentive.teaser_cta_to_ranking') }}
|
|
</a>
|
|
<a href="{{ route('user_incentive_details', [$incentive->slug]) }}" class="btn btn-outline-secondary btn-lg">
|
|
<i class="ion ion-md-stats mr-1"></i>{{ __('incentive.my_details') }}
|
|
</a>
|
|
@elseif ($participant)
|
|
<div class="cta-status-icon cta-status-icon-warning">
|
|
<i class="ion ion-md-trophy"></i>
|
|
</div>
|
|
<h3>{{ __('incentive.teaser_pending_title') }}</h3>
|
|
<p class="mb-4">{{ __('incentive.teaser_pending_text') }}</p>
|
|
<a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg">
|
|
<i class="ion ion-md-checkmark mr-1"></i>{{ __('incentive.teaser_cta_confirm') }}
|
|
</a>
|
|
@elseif($incentive->isActive())
|
|
<div class="cta-status-icon cta-status-icon-warning">
|
|
<i class="ion ion-md-trophy"></i>
|
|
</div>
|
|
<h3>{{ __('incentive.teaser_cta_ready') }}</h3>
|
|
<p class="mb-4">{{ __('incentive.teaser_cta_text', ['n' => $incentive->max_winners]) }}</p>
|
|
<a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg">
|
|
<i class="ion ion-md-checkmark mr-1"></i>{{ __('incentive.teaser_cta_button') }}
|
|
</a>
|
|
@else
|
|
<div class="cta-status-icon cta-status-icon-muted">
|
|
<i class="ion ion-md-time"></i>
|
|
</div>
|
|
<h3>{{ __('incentive.teaser_cta_coming_soon') }}</h3>
|
|
<p class="mb-0">{{ __('incentive.not_active') }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- ===== TEILNAHMEBEDINGUNGEN (Collapse) ===== --}}
|
|
@if ($incentive->getLang('terms'))
|
|
<div class="card terms-toggle mb-4">
|
|
<div class="card-header">
|
|
<a href="#terms-teaser" data-toggle="collapse" class="text-body d-flex align-items-center collapsed">
|
|
<i class="ion ion-md-document mr-2"></i>
|
|
<strong>{{ __('incentive.terms') }}</strong>
|
|
<i class="ion ion-md-chevron-down ml-auto"></i>
|
|
</a>
|
|
</div>
|
|
<div id="terms-teaser" class="collapse show">
|
|
<div class="card-body">
|
|
{!! $incentive->getLang('terms') !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@if (count($galleryImages) > 0)
|
|
<script>
|
|
(function() {
|
|
var images = @json(collect($galleryImages)->map(fn($i) => asset($i))->values());
|
|
var current = 0;
|
|
var lightbox = document.getElementById('galleryLightbox');
|
|
var lbImg = document.getElementById('lightboxImage');
|
|
|
|
document.querySelectorAll('.gallery-thumb').forEach(function(el) {
|
|
el.addEventListener('click', function() {
|
|
current = parseInt(el.dataset.galleryIndex);
|
|
lbImg.src = images[current];
|
|
lightbox.classList.add('active');
|
|
});
|
|
});
|
|
|
|
lightbox.querySelector('.lb-close').addEventListener('click', function() {
|
|
lightbox.classList.remove('active');
|
|
});
|
|
|
|
lightbox.querySelector('.lb-prev').addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
current = (current - 1 + images.length) % images.length;
|
|
lbImg.src = images[current];
|
|
});
|
|
|
|
lightbox.querySelector('.lb-next').addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
current = (current + 1) % images.length;
|
|
lbImg.src = images[current];
|
|
});
|
|
|
|
lightbox.addEventListener('click', function(e) {
|
|
if (e.target === lightbox) {
|
|
lightbox.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (!lightbox.classList.contains('active')) return;
|
|
if (e.key === 'Escape') lightbox.classList.remove('active');
|
|
if (e.key === 'ArrowLeft') lightbox.querySelector('.lb-prev').click();
|
|
if (e.key === 'ArrowRight') lightbox.querySelector('.lb-next').click();
|
|
});
|
|
})();
|
|
</script>
|
|
@endif
|
|
@endsection
|