Kevin Adametz
fe1a9478f4
- 50 EUR je Neupartner bleiben; die Top 3 (500/300/200 EUR) ermittelt jetzt der Umsatz der Neupartner (wie Montenegro, ohne Einmalpunkte/Abos) - Gleichstand bei Umsatzwertung: vorn liegt, wessen letzte gezaehlte Umsatzbuchung frueher kam - Challenge-Seite: Praemie und Top-3-Darstellung auch bei Umsatzwertung, Ranglisten-Hinweis auf Umsatz (DE/EN/ES/FR) - Seeder: neue Texte und Bedingungen (Rangliste, Steuerpflicht, vergünstigter Einstieg bis 31.10.), gleicht Wertung beim Einspielen ab Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1766 lines
63 KiB
PHP
1766 lines
63 KiB
PHP
@extends('layouts.layout-2')
|
||
|
||
@section('styles')
|
||
<style>
|
||
.incentive-hero {
|
||
margin: 0;
|
||
border-radius: .75rem;
|
||
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;
|
||
}
|
||
|
||
.points-section-wide {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.points-section-wide .points-heading {
|
||
text-align: left;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.points-section-wide .point-card {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
/* ===== Aus der frueheren Ranglisten-Seite: Kopf, Teilnahme-Block, Rangliste ===== */
|
||
.inc-header {
|
||
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
||
border-radius: .75rem;
|
||
color: #fff;
|
||
padding: 1.5rem 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inc-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -60%;
|
||
right: -20%;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: rgba(215, 215, 0, 0.08);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.inc-header h5 {
|
||
margin: 0;
|
||
font-weight: 700;
|
||
font-size: 1.35rem;
|
||
}
|
||
|
||
/* Groessere Ueberschriften fuer den Lesefluss */
|
||
.inc-page-title {
|
||
font-size: 1.9rem;
|
||
font-weight: 800;
|
||
margin-bottom: .25rem;
|
||
}
|
||
|
||
.inc-page-subtitle {
|
||
font-size: 1.1rem;
|
||
color: #6b7758;
|
||
font-weight: 600;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.inc-section-heading {
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
margin: .5rem 0 1rem;
|
||
}
|
||
|
||
.inc-info-tile h6,
|
||
.inc-points-section > h6 {
|
||
font-size: 1.15rem;
|
||
}
|
||
|
||
/* Teilnahme-Block ganz oben */
|
||
.inc-join {
|
||
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
||
color: #fff;
|
||
border-radius: .75rem;
|
||
padding: 1.75rem 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inc-join::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -10%;
|
||
width: 320px;
|
||
height: 320px;
|
||
background: rgba(215, 215, 0, 0.08);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.inc-join > .row,
|
||
.inc-join > .collapse {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.inc-join-title {
|
||
font-size: 1.8rem;
|
||
font-weight: 800;
|
||
margin-bottom: .5rem;
|
||
color: #fff;
|
||
}
|
||
|
||
.inc-join-title i {
|
||
color: #d7d700;
|
||
}
|
||
|
||
.inc-join-intro {
|
||
font-size: 1rem;
|
||
opacity: .9;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.inc-join-highlights {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: .5rem;
|
||
margin-bottom: .5rem;
|
||
}
|
||
|
||
.inc-chip {
|
||
display: inline-block;
|
||
background: rgba(255, 255, 255, 0.16);
|
||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
padding: .4rem 1rem;
|
||
font-weight: 600;
|
||
font-size: .95rem;
|
||
}
|
||
|
||
.inc-chip-strong {
|
||
background: #d7d700;
|
||
border-color: #d7d700;
|
||
color: #333;
|
||
font-weight: 800;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.inc-chip-muted {
|
||
background: transparent;
|
||
font-weight: 500;
|
||
font-size: .85rem;
|
||
opacity: .85;
|
||
}
|
||
|
||
.inc-join-stats {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.inc-join-stats .stat-box {
|
||
text-align: center;
|
||
padding: .5rem .9rem;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border-radius: .5rem;
|
||
}
|
||
|
||
.inc-join-stats .stat-label {
|
||
font-size: .68rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
opacity: .8;
|
||
}
|
||
|
||
.inc-join-stats .stat-value {
|
||
font-size: 1.4rem;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.inc-join-form {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||
border-radius: .75rem;
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.inc-join-form .custom-control-label {
|
||
font-size: .95rem;
|
||
}
|
||
|
||
.inc-join-form .btn-participate {
|
||
background: #d7d700;
|
||
color: #333;
|
||
border: none;
|
||
border-radius: 50px;
|
||
font-size: 1.05rem;
|
||
font-weight: 800;
|
||
padding: .7rem 1.5rem;
|
||
transition: transform .2s, box-shadow .2s;
|
||
}
|
||
|
||
.inc-join-form .btn-participate:hover {
|
||
background: #e8e800;
|
||
color: #333;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.inc-join-hint {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border-radius: .5rem;
|
||
padding: .6rem .8rem;
|
||
font-size: .85rem;
|
||
}
|
||
|
||
.inc-join-terms-link {
|
||
display: inline-block;
|
||
margin-top: .9rem;
|
||
color: #fff;
|
||
text-decoration: underline;
|
||
font-size: .9rem;
|
||
}
|
||
|
||
.inc-join-terms-link:hover {
|
||
color: #d7d700;
|
||
}
|
||
|
||
.inc-join-terms {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: .75rem;
|
||
padding: 1.25rem;
|
||
max-height: 360px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.inc-divider {
|
||
border: 0;
|
||
border-top: 3px solid #e3e5dc;
|
||
margin: 1.75rem 0;
|
||
}
|
||
|
||
.inc-header .stat-box {
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.inc-header .stat-label {
|
||
font-size: .68rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
opacity: .75;
|
||
}
|
||
|
||
.inc-header .stat-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.inc-header .badge-qual {
|
||
background: rgba(215, 215, 0, 0.85);
|
||
color: #333;
|
||
font-weight: 700;
|
||
padding: .35rem .8rem;
|
||
border-radius: 50px;
|
||
font-size: .8rem;
|
||
}
|
||
|
||
.inc-header .badge-open {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
padding: .35rem .8rem;
|
||
border-radius: 50px;
|
||
font-size: .8rem;
|
||
}
|
||
|
||
.inc-header .btn-details {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: #fff;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50px;
|
||
padding: .4rem 1.2rem;
|
||
font-weight: 600;
|
||
font-size: .85rem;
|
||
transition: background .2s;
|
||
}
|
||
|
||
.inc-header .btn-details:hover {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.inc-toggle-bar {
|
||
background: #f4f5f0;
|
||
border-radius: 0 0 .75rem .75rem;
|
||
margin-top: -0.75rem;
|
||
padding-top: .75rem;
|
||
}
|
||
|
||
.inc-toggle-bar .btn {
|
||
border: none;
|
||
color: #6b7758;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.inc-info-tile {
|
||
border: none;
|
||
border-radius: .75rem;
|
||
overflow: hidden;
|
||
transition: transform .2s ease, box-shadow .2s ease;
|
||
}
|
||
|
||
.inc-info-tile:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.inc-tile-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.3rem;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.inc-tile-icon-calendar {
|
||
background: linear-gradient(135deg, #6b7758, #4a5340);
|
||
}
|
||
|
||
.inc-tile-icon-plane {
|
||
background: linear-gradient(135deg, #6b7758, #8a9a70);
|
||
}
|
||
|
||
.inc-tile-icon-star {
|
||
background: linear-gradient(135deg, #b8b800, #d7d700);
|
||
}
|
||
|
||
.inc-hero-img {
|
||
border-radius: .75rem;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.inc-hero-img img {
|
||
width: 100%;
|
||
max-height: 350px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.inc-hero-img .hero-gradient {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
|
||
}
|
||
|
||
.inc-intro {
|
||
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
||
color: #fff;
|
||
border-radius: .75rem;
|
||
padding: 1.5rem 2rem;
|
||
font-size: 1rem;
|
||
line-height: 1.65;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inc-intro::before {
|
||
content: '\201C';
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 12px;
|
||
font-size: 6rem;
|
||
opacity: .1;
|
||
font-family: Georgia, serif;
|
||
line-height: 1;
|
||
}
|
||
|
||
.inc-points-section {
|
||
background: #f4f5f0;
|
||
border-radius: .75rem;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.inc-point-card {
|
||
background: #fff;
|
||
border-radius: .75rem;
|
||
padding: 1.2rem;
|
||
height: 100%;
|
||
border-left: 4px solid;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.inc-point-card-partner {
|
||
border-left-color: #6b7758;
|
||
}
|
||
|
||
.inc-point-card-abo {
|
||
border-left-color: #d7d700;
|
||
}
|
||
|
||
.inc-point-card .inc-point-val {
|
||
font-size: 1.4rem;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
}
|
||
|
||
.inc-point-card-partner .inc-point-val {
|
||
color: #6b7758;
|
||
}
|
||
|
||
.inc-point-card-abo .inc-point-val {
|
||
color: #9a9a00;
|
||
}
|
||
|
||
.inc-point-card li {
|
||
font-size: .88rem;
|
||
color: #555;
|
||
margin-bottom: .25rem;
|
||
}
|
||
|
||
.inc-participate {
|
||
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
||
border-radius: .75rem;
|
||
color: #fff;
|
||
padding: 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inc-participate::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -40%;
|
||
left: -20%;
|
||
width: 250px;
|
||
height: 250px;
|
||
background: rgba(215, 215, 0, 0.08);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.inc-participate h5 {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.inc-participate .btn-participate {
|
||
background: #d7d700;
|
||
color: #333;
|
||
border: none;
|
||
border-radius: 50px;
|
||
font-weight: 700;
|
||
padding: .6rem 1.5rem;
|
||
transition: transform .2s, box-shadow .2s;
|
||
}
|
||
|
||
.inc-participate .btn-participate:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.inc-participate .custom-control-label {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-size: .9rem;
|
||
}
|
||
|
||
.inc-participate a {
|
||
color: #d7d700;
|
||
}
|
||
|
||
.inc-terms-toggle {
|
||
border: none;
|
||
border-radius: .75rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inc-terms-toggle .card-header {
|
||
background: #f4f5f0;
|
||
border: none;
|
||
padding: .8rem 1.2rem;
|
||
}
|
||
|
||
.inc-terms-toggle .card-header a {
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
color: #555;
|
||
}
|
||
|
||
.inc-ranking-card {
|
||
border: none;
|
||
border-radius: .75rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
background: #fff;
|
||
width: 100%;
|
||
}
|
||
|
||
.inc-ranking-card .card-header {
|
||
background: #f4f5f0;
|
||
border: none;
|
||
padding: 1.2rem 1.5rem;
|
||
}
|
||
|
||
.inc-ranking-card .card-body {
|
||
background: #fff;
|
||
}
|
||
|
||
.inc-ranking-card .inc-ranking-table {
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.inc-ranking-card .ranking-title {
|
||
font-weight: 700;
|
||
font-size: 1.35rem;
|
||
color: #333;
|
||
}
|
||
|
||
.inc-ranking-card .badge-top {
|
||
background: linear-gradient(135deg, #6b7758, #4a5340);
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
padding: .3rem .7rem;
|
||
font-size: .75rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.inc-ranking-card .hint-text {
|
||
font-size: .8rem;
|
||
color: #888;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.inc-ranking-table {
|
||
margin: 0;
|
||
}
|
||
|
||
.inc-ranking-table thead th {
|
||
background: #fafaf6;
|
||
border-top: none;
|
||
font-size: .78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
color: #6b7758;
|
||
padding: .75rem 1rem;
|
||
}
|
||
|
||
.inc-ranking-table tbody td {
|
||
padding: .75rem 1rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.inc-ranking-table .row-winner {
|
||
background: rgba(215, 215, 0, 0.08);
|
||
}
|
||
|
||
.inc-ranking-table .row-me {
|
||
background: rgba(107, 119, 88, 0.1);
|
||
}
|
||
|
||
.inc-ranking-table .rank-trophy {
|
||
color: #d7d700;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.inc-ranking-table .badge-winner {
|
||
background: linear-gradient(135deg, #b8b800, #d7d700);
|
||
color: #333;
|
||
font-weight: 700;
|
||
border-radius: 50px;
|
||
padding: .25rem .6rem;
|
||
font-size: .72rem;
|
||
}
|
||
|
||
.inc-ranking-table .badge-qualified {
|
||
background: #6b7758;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
border-radius: 50px;
|
||
padding: .25rem .6rem;
|
||
font-size: .72rem;
|
||
}
|
||
|
||
.inc-ranking-table .badge-open-status {
|
||
background: #e8e8e8;
|
||
color: #777;
|
||
font-weight: 600;
|
||
border-radius: 50px;
|
||
padding: .25rem .6rem;
|
||
font-size: .72rem;
|
||
}
|
||
|
||
.inc-ranking-table .check-ok {
|
||
color: #6b7758;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.inc-ranking-table .badge-me {
|
||
background: #6b7758;
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
padding: .15rem .5rem;
|
||
font-size: .7rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.vip-ranking-notice {
|
||
background: rgba(107, 119, 88, 0.08);
|
||
border-bottom: 1px solid rgba(107, 119, 88, 0.15);
|
||
padding: .6rem 1.5rem;
|
||
font-size: .8rem;
|
||
color: #6b7758;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.vip-terms-accepted {
|
||
color: #5a8a5a;
|
||
font-size: 1rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.vip-terms-pending {
|
||
color: #c0392b;
|
||
font-size: 1rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.inc-ranking-card .pagination {
|
||
margin: 0;
|
||
justify-content: center;
|
||
}
|
||
|
||
.inc-ranking-card .page-item .page-link {
|
||
color: #6b7758;
|
||
border-color: #e0e0d8;
|
||
font-size: .85rem;
|
||
}
|
||
|
||
.inc-ranking-card .page-item.active .page-link {
|
||
background-color: #6b7758;
|
||
border-color: #6b7758;
|
||
color: #fff;
|
||
}
|
||
|
||
.inc-ranking-card .page-item.disabled .page-link {
|
||
color: #bbb;
|
||
border-color: #e0e0d8;
|
||
}
|
||
|
||
.pending-banner {
|
||
background: rgba(215, 215, 0, 0.12);
|
||
border: 1px solid rgba(215, 215, 0, 0.3);
|
||
border-radius: .75rem;
|
||
padding: 1rem 1.5rem;
|
||
color: #555;
|
||
}
|
||
|
||
.pending-banner i {
|
||
color: #9a9a00;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.inc-header {
|
||
padding: 1.2rem;
|
||
}
|
||
|
||
.inc-header .stat-box {
|
||
padding: 0 .5rem;
|
||
}
|
||
|
||
.inc-participate {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.inc-join {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.inc-join-title {
|
||
font-size: 1.45rem;
|
||
}
|
||
|
||
.inc-page-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('content')
|
||
{{-- Flash-Nachrichten --}}
|
||
@if (Session::has('alert-success'))
|
||
<div class="alert alert-success">{{ Session::get('alert-success') }}</div>
|
||
@endif
|
||
@if (Session::has('alert-error'))
|
||
<div class="alert alert-danger">{{ Session::get('alert-error') }}</div>
|
||
@endif
|
||
@if (Session::has('alert-info'))
|
||
<div class="alert alert-info">{{ Session::get('alert-info') }}</div>
|
||
@endif
|
||
|
||
{{-- ============================================================
|
||
OBEN: Teilnahme (nicht bestaetigt) oder Kopf mit Stand (bestaetigt)
|
||
============================================================ --}}
|
||
@if ($hasConfirmedParticipation)
|
||
<div class="inc-header mb-4" id="incentive-participant-header">
|
||
<div class="d-flex align-items-center justify-content-between flex-wrap">
|
||
|
||
<div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
|
||
<i class="ion ion-md-trophy mr-2" style="font-size: 1.5rem; color: #d7d700;"></i>
|
||
<h5>{{ $incentive->name }}</h5>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
@if ($participant->rank)
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ __('incentive.your_rank') }}</div>
|
||
<div class="stat-value">{{ $participant->rank }}</div>
|
||
</div>
|
||
@endif
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</div>
|
||
<div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
|
||
</div>
|
||
@if ($participantPayout)
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ __('incentive.payout_so_far') }}</div>
|
||
<div class="stat-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($participantPayout['total']) }}</div>
|
||
</div>
|
||
@endif
|
||
<div class="mr-3">
|
||
@if ($participant->is_qualified)
|
||
<span class="badge-qual">{{ __('incentive.qualified') }}</span>
|
||
@else
|
||
<span class="badge-open">{{ __('incentive.not_yet_qualified') }}</span>
|
||
@endif
|
||
</div>
|
||
<a href="{{ route('user_incentive_details', [$incentive->slug]) }}" class="btn-details">
|
||
<i class="ion ion-md-stats mr-1"></i>{{ __('incentive.my_details') }}
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
@if ($incentive->getLang('terms'))
|
||
<a href="#terms" data-toggle="collapse" class="inc-join-terms-link" aria-expanded="false" aria-controls="terms">
|
||
<i class="ion ion-md-document mr-1"></i>{{ __('incentive.join_terms_toggle') }}
|
||
<i class="ion ion-md-chevron-down ml-1"></i>
|
||
</a>
|
||
<div id="terms" class="collapse">
|
||
<div class="inc-join-terms mt-3">
|
||
<div class="small">{!! $incentive->getLang('terms') !!}</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@else
|
||
<div class="inc-join mb-4" id="incentive-join">
|
||
<div class="row align-items-start">
|
||
<div class="col-lg-7 mb-3 mb-lg-0">
|
||
<h2 class="inc-join-title">
|
||
<i class="ion ion-md-trophy mr-2"></i>
|
||
{{ $participant ? __('incentive.join_confirm_title') : __('incentive.join_title') }}
|
||
</h2>
|
||
<p class="inc-join-intro">
|
||
{{ $participant ? __('incentive.pending_confirmation_banner') : __('incentive.participate_intro') }}
|
||
</p>
|
||
|
||
{{-- Hervorhebungen: worum es geht --}}
|
||
<div class="inc-join-highlights">
|
||
@if ((float) $incentive->amount_per_partner > 0)
|
||
<span class="inc-chip inc-chip-strong">{{ __('incentive.join_highlight_partner', ['amount' => \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner)]) }}</span>
|
||
@elseif ($incentive->points_partner_onetime > 0)
|
||
<span class="inc-chip inc-chip-strong">{{ __('incentive.join_highlight_points', ['points' => number_format($incentive->points_partner_onetime, 0, ',', '.')]) }}</span>
|
||
@endif
|
||
@foreach ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
|
||
<span class="inc-chip">{{ __('incentive.join_highlight_rank', ['amount' => \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount), 'n' => $bonusRank]) }}</span>
|
||
@endforeach
|
||
@if ($incentive->usesAbos() && $incentive->points_abo_onetime > 0)
|
||
<span class="inc-chip">{{ __('incentive.join_highlight_abo', ['points' => number_format($incentive->points_abo_onetime, 0, ',', '.')]) }}</span>
|
||
@endif
|
||
<span class="inc-chip inc-chip-muted">
|
||
<i class="ion ion-md-calendar mr-1"></i>
|
||
{{ $incentive->qualification_start->format('d.m.Y') }} bis {{ $incentive->qualification_end->format('d.m.Y') }}
|
||
</span>
|
||
</div>
|
||
|
||
@if ($participant)
|
||
<div class="inc-join-stats">
|
||
@if ($participant->rank)
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ __('incentive.your_rank') }}</div>
|
||
<div class="stat-value">{{ $participant->rank }}</div>
|
||
</div>
|
||
@endif
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</div>
|
||
<div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
|
||
</div>
|
||
@if ($participantPayout)
|
||
<div class="stat-box">
|
||
<div class="stat-label">{{ $participantPayout['confirmed'] ? __('incentive.payout_so_far') : __('incentive.payout_after_confirmation') }}</div>
|
||
<div class="stat-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($participantPayout['total']) }}</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="col-lg-5">
|
||
<div class="inc-join-form">
|
||
@if ($incentive->isActive())
|
||
@if (!empty($participateHasTrackableAbos))
|
||
<div class="inc-join-hint mb-3">
|
||
<i class="ion ion-md-information-circle mr-1"></i>
|
||
{{ __('incentive.participate_abo_hint') }}
|
||
</div>
|
||
@endif
|
||
<form action="{{ route('user_incentive_participate', [$incentive->slug]) }}" method="POST">
|
||
@csrf
|
||
<div class="custom-control custom-checkbox mb-3">
|
||
<input type="checkbox" class="custom-control-input" id="accept_terms"
|
||
name="accept_terms" value="1" required>
|
||
<label class="custom-control-label" for="accept_terms">
|
||
{{ __('incentive.accept_terms') }}
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-participate btn-block btn-lg">
|
||
<i class="ion ion-md-checkmark mr-1"></i>
|
||
{{ __('incentive.participate_now') }}
|
||
</button>
|
||
</form>
|
||
@else
|
||
<p class="mb-0">{{ __('incentive.not_active') }}</p>
|
||
@endif
|
||
@if ($incentive->getLang('terms'))
|
||
<a href="#terms" data-toggle="collapse" class="inc-join-terms-link" aria-expanded="false" aria-controls="terms">
|
||
<i class="ion ion-md-document mr-1"></i>{{ __('incentive.join_terms_toggle') }}
|
||
<i class="ion ion-md-chevron-down ml-1"></i>
|
||
</a>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@if ($incentive->getLang('terms'))
|
||
<div id="terms" class="collapse">
|
||
<div class="inc-join-terms mt-3">
|
||
<div class="small">{!! $incentive->getLang('terms') !!}</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
<hr class="inc-divider">
|
||
|
||
|
||
{{-- ===== HERO ===== --}}
|
||
@if ($incentive->image)
|
||
<div class="incentive-hero mb-5">
|
||
<img src="{{ asset($incentive->heroImagePath()) }}" 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>
|
||
|
||
@if ($incentive->hasCashPayout() && !$incentive->hasMinimumRequirements())
|
||
{{-- Praemie (Recruiting-Challenge) --}}
|
||
<div class="col-md-4 mb-3 mb-md-0">
|
||
<div class="card info-tile h-100 shadow-sm" id="incentive-payout-tile">
|
||
<div class="card-body text-center py-4">
|
||
<div class="tile-icon tile-icon-plane">
|
||
<i class="ion ion-md-cash"></i>
|
||
</div>
|
||
<h5 class="font-weight-bold mb-3">{{ __('incentive.payout_tile_title') }}</h5>
|
||
@if ((float) $incentive->amount_per_partner > 0)
|
||
<div class="mb-3">
|
||
<div class="tile-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner) }}</div>
|
||
<span class="tile-label">{{ __('incentive.payout_per_partner_label') }}</span>
|
||
</div>
|
||
@endif
|
||
@if ($incentive->rankBonuses() !== [] && !$incentive->isCashChallenge())
|
||
<div>
|
||
<span class="tile-label d-block mb-1">{{ __('incentive.payout_top_bonus_title', ['n' => count($incentive->rankBonuses())]) }}</span>
|
||
@foreach ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
|
||
<div><strong>{{ __('incentive.payout_rank_label', ['n' => $bonusRank]) }}:</strong>
|
||
{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount) }}</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
{{-- 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>
|
||
@endif
|
||
|
||
@if ($incentive->isCashChallenge())
|
||
{{-- Top 3 Bonus (Recruiting-Challenge) --}}
|
||
<div class="col-md-4">
|
||
<div class="card info-tile h-100 shadow-sm" id="incentive-bonus-tile">
|
||
<div class="card-body text-center py-4">
|
||
<div class="tile-icon tile-icon-star">
|
||
<i class="ion ion-md-trophy"></i>
|
||
</div>
|
||
<h5 class="font-weight-bold mb-3">{{ __('incentive.payout_bonus_tile_title', ['n' => max(count($incentive->rankBonuses()), $incentive->max_winners)]) }}</h5>
|
||
@forelse ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
|
||
<div class="mb-2">
|
||
<span class="tile-value" style="color: #6b7758;">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount) }}</span>
|
||
<span class="tile-label d-block">{{ __('incentive.payout_rank_label', ['n' => $bonusRank]) }}</span>
|
||
</div>
|
||
@empty
|
||
<span class="tile-label d-block">{{ __('incentive.ranking_winners_hint', ['n' => $incentive->max_winners]) }}</span>
|
||
@endforelse
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
{{-- 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>
|
||
@if ($incentive->usesAbos())
|
||
<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>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
|
||
{{-- ===== SO FUNKTIONIERT DIE CHALLENGE (Geldpraemie) / PUNKTE-DETAIL ===== --}}
|
||
@if ($incentive->isCashChallenge())
|
||
<div class="points-section points-section-wide mb-5" id="incentive-how-it-works">
|
||
<h4 class="points-heading text-left">
|
||
<i class="ion ion-md-cash text-warning mr-1"></i>
|
||
{{ __('incentive.section_how_it_works') }}
|
||
</h4>
|
||
<div class="row no-gutters">
|
||
<div class="col-12">
|
||
<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.payout_tile_title') }}
|
||
</h6>
|
||
<div class="point-value">
|
||
{{ \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner) }}
|
||
<span class="small font-weight-normal">{{ __('incentive.payout_per_partner_label') }}</span>
|
||
</div>
|
||
<ul>
|
||
<li>{{ __('incentive.points_starter_package_label') }}</li>
|
||
@if ($incentive->rankBonuses() !== [])
|
||
<li>{{ __('incentive.payout_top_bonus_text', ['n' => count($incentive->rankBonuses()), 'list' => collect($incentive->rankBonuses())->map(fn ($amount, $rank) => __('incentive.payout_rank_label', ['n' => $rank]).' '.\App\Services\Incentive\IncentivePayoutService::formatAmount($amount))->implode(', ')]) }}</li>
|
||
@endif
|
||
<li>{{ $incentive->ranksBySalesOfNewPartners() ? __('incentive.payout_ranking_sales_hint') : __('incentive.payout_ranking_hint') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
{{-- ===== 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="{{ $incentive->usesAbos() ? 'col-md-6 mb-3 mb-md-0' : 'col-md-12' }}">
|
||
<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>
|
||
@if ($incentive->includesSalesPoints())
|
||
<li>{{ __('incentive.points_partner_boost') }}</li>
|
||
@endif
|
||
@include('user.incentive._payout_bullets', ['incentive' => $incentive])
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
@if ($incentive->usesAbos())
|
||
<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>
|
||
@if ($incentive->includesSalesPoints())
|
||
<li>{{ __('incentive.points_abo_boost') }}</li>
|
||
@endif
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ===== 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
|
||
|
||
{{-- ============================================================
|
||
LIVE-RANKING – immer sichtbar
|
||
============================================================ --}}
|
||
<div class="inc-ranking-card mt-2 mb-4" id="ranking">
|
||
<div class="card-header">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<i class="ion ion-md-list mr-2" style="font-size: 1.3rem; color: #6b7758;"></i>
|
||
<span class="ranking-title">{{ __('incentive.section_ranking') }}</span>
|
||
<span class="badge-top ml-2">{{ __('incentive.ranking_all_active') }}</span>
|
||
</div>
|
||
<div class="hint-text mt-2">
|
||
{{ __('incentive.ranking_winners_hint', ['n' => $incentive->max_winners]) }}
|
||
{{ __('incentive.ranking_extended_hint', ['n' => $incentive->max_winners]) }}
|
||
<br>{{ __('incentive.ranking_anonymous_hint') }}
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
@if ($isVipView)
|
||
<div class="vip-ranking-notice">
|
||
<i class="ion ion-md-eye mr-1"></i>
|
||
{{ __('incentive.vip_view_notice') }}
|
||
</div>
|
||
@endif
|
||
@if ($ranking->isEmpty())
|
||
<div class="p-4 text-center text-muted">
|
||
<i class="ion ion-md-people mb-2 d-block" style="font-size: 2.5rem; opacity: .4;"></i>
|
||
{{ __('incentive.no_participants_with_points') }}
|
||
</div>
|
||
@else
|
||
<div class="table-responsive">
|
||
<table class="table inc-ranking-table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 60px;">{{ __('incentive.rank') }}</th>
|
||
<th>{{ __('incentive.consultant') }}</th>
|
||
<th class="text-right">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</th>
|
||
@if (!$incentive->ranksByPartnerCount())
|
||
<th class="text-center">{{ __('incentive.partners') }}</th>
|
||
@endif
|
||
@if ($incentive->usesAbos())
|
||
<th class="text-center">{{ __('incentive.abos') }}</th>
|
||
@endif
|
||
@if ($incentive->hasCashPayout())
|
||
<th class="text-right">{{ __('incentive.payout_column') }}</th>
|
||
@endif
|
||
<th class="text-center">{{ __('incentive.status') }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach ($ranking as $p)
|
||
@php
|
||
$isWinner = $p->is_qualified && $p->rank && $p->rank <= $incentive->max_winners;
|
||
$isMe = $participant && $p->id === $participant->id;
|
||
@endphp
|
||
<tr
|
||
class="{{ $isWinner ? 'row-winner' : '' }} {{ $p->is_qualified ? 'font-weight-bold' : '' }} {{ $isMe ? 'row-me' : '' }}">
|
||
<td class="text-center">
|
||
@if ($isWinner && $p->rank && $p->rank <= 3)
|
||
<i class="ion ion-md-trophy rank-trophy"></i>
|
||
@elseif ($p->rank)
|
||
{{ $p->rank }}
|
||
@else
|
||
—
|
||
@endif
|
||
</td>
|
||
<td>
|
||
@if ($p->accepted_terms_at || $isVipView)
|
||
@if ($isVipView)
|
||
@if ($p->accepted_terms_at)
|
||
<i class="ion ion-md-checkmark-circle vip-terms-accepted ml-1"
|
||
title="{{ __('incentive.vip_terms_accepted') }}"></i>
|
||
@else
|
||
<i class="ion ion-md-close-circle vip-terms-pending ml-1"
|
||
title="{{ __('incentive.vip_terms_pending') }}"></i>
|
||
@endif
|
||
@endif
|
||
@if ($p->user && $p->user->account)
|
||
{{ $p->user->account->first_name }} {{ $p->user->account->last_name }}
|
||
@else
|
||
{{ $p->user->email ?? 'N/A' }}
|
||
@endif
|
||
@else
|
||
<span class="text-muted">{{ __('incentive.anonymous_consultant') }}</span>
|
||
@endif
|
||
@if ($isMe)
|
||
<span class="badge-me ml-1">{{ __('incentive.you') }}</span>
|
||
@endif
|
||
</td>
|
||
<td class="text-right">
|
||
<strong>{{ number_format($p->total_points, 0, ',', '.') }}</strong>
|
||
</td>
|
||
@if (!$incentive->ranksByPartnerCount())
|
||
<td class="text-center">
|
||
{{ $p->qualified_partners }}@if ($incentive->min_direct_partners > 0)/{{ $incentive->min_direct_partners }}@endif
|
||
@if ($incentive->min_direct_partners > 0 && $p->qualified_partners >= $incentive->min_direct_partners)
|
||
<span class="check-ok">✓</span>
|
||
@endif
|
||
</td>
|
||
@endif
|
||
@if ($incentive->usesAbos())
|
||
<td class="text-center">
|
||
{{ $p->qualified_abos }}@if ($incentive->min_customer_abos > 0)/{{ $incentive->min_customer_abos }}@endif
|
||
@if ($incentive->min_customer_abos > 0 && $p->qualified_abos >= $incentive->min_customer_abos)
|
||
<span class="check-ok">✓</span>
|
||
@endif
|
||
</td>
|
||
@endif
|
||
@if ($incentive->hasCashPayout())
|
||
@php $rowPayout = $rankingPayouts[$p->id] ?? null; @endphp
|
||
<td class="text-right">
|
||
@if ($rowPayout && $rowPayout['total'] > 0)
|
||
{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($rowPayout['total']) }}
|
||
@else
|
||
—
|
||
@endif
|
||
</td>
|
||
@endif
|
||
<td class="text-center">
|
||
@if ($isWinner)
|
||
<span class="badge-winner">{{ __('incentive.winner') }}</span>
|
||
@elseif ($p->is_qualified)
|
||
<span class="badge-qualified">{{ __('incentive.qualified') }}</span>
|
||
@else
|
||
<span class="badge-open-status">{{ __('incentive.open') }}</span>
|
||
@endif
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
@endif
|
||
@if ($ranking->hasPages())
|
||
<div class="p-3">
|
||
{{ $ranking->links() }}
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@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
|