mivita/resources/views/user/incentive/show.blade.php
2026-09-22 12:54:20 +00:00

1295 lines
53 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('layouts.layout-2')
@section('styles')
<style>
.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);
}
.inc-ranking-card .card-header {
background: #f4f5f0;
border: none;
padding: 1.2rem 1.5rem;
}
.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
@if ($hasConfirmedParticipation)
{{-- ============================================================
ANSICHT: TEILNEHMER – kompakter Header, Info eingeklappt
============================================================ --}}
<div class="inc-header mb-0">
<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>
</div>
<div class="inc-toggle-bar mb-3">
<button type="button" id="incentive-info-toggle" class="btn btn-block py-2 text-center" data-toggle="collapse"
data-target="#incentive-info" aria-expanded="false" aria-controls="incentive-info">
<i class="ion ion-md-arrow-dropdown mr-1" id="incentive-info-icon"></i>
<span id="incentive-info-label">{{ __('incentive.read_more') }}</span>
</button>
</div>
{{-- Eingeklappter Info-Bereich --}}
<div id="incentive-info" class="collapse mb-3">
@if ($incentive->image)
<div class="inc-hero-img mb-4">
<img src="{{ asset($incentive->heroImagePath()) }}" alt="{{ $incentive->name }}">
<div class="hero-gradient"></div>
</div>
@endif
@if ($incentive->getLang('description'))
<div class="inc-intro mb-4">
{!! $incentive->getLang('description') !!}
</div>
@endif
<div class="row">
<div class="col-lg-8">
{{-- Qualifikationszeitraum --}}
<div class="card inc-info-tile shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="inc-tile-icon inc-tile-icon-calendar mr-3">
<i class="ion ion-md-calendar"></i>
</div>
<div>
<h6 class="font-weight-bold mb-2">{{ __('incentive.section_period') }}</h6>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<strong>{{ __('incentive.qualification_period') }}:</strong>
{{ $incentive->qualification_start->format('d.m.Y') }}
– {{ $incentive->qualification_end->format('d.m.Y') }}
</li>
<li class="text-muted">
<strong>{{ __('incentive.calculation_period') }}:</strong>
{{ __('incentive.calculation_period_hint', ['date' => $incentive->calculation_end->format('d.m.Y')]) }}
</li>
</ul>
</div>
</div>
</div>
</div>
@if ($incentive->hasCashPayout() && !$incentive->hasMinimumRequirements())
@include('user.incentive._payout_tile', ['incentive' => $incentive])
@else
{{-- Mindestqualifikation --}}
<div class="card inc-info-tile shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="inc-tile-icon inc-tile-icon-plane mr-3">
<i class="ion ion-md-airplane"></i>
</div>
<div>
<h6 class="font-weight-bold mb-2">{{ __('incentive.section_min_qual') }}</h6>
<p class="text-muted small mb-2">{{ __('incentive.min_qual_intro') }}</p>
<ul class="list-unstyled mb-2">
<li class="mb-1">
<strong style="color: #6b7758;">{{ $incentive->min_direct_partners }}</strong>
{{ __('incentive.min_partners_label') }}
</li>
<li>
<strong style="color: #6b7758;">{{ $incentive->min_customer_abos }}</strong>
{{ __('incentive.min_abos_label') }}
</li>
</ul>
<p class="text-muted small mb-0">
<i class="ion ion-md-information-circle mr-1"></i>
{{ __('incentive.min_qual_ranking_hint') }}
</p>
</div>
</div>
</div>
</div>
@endif
@if ($incentive->hasCashPayout() && $incentive->ranksByPartnerCount())
@include('user.incentive._how_it_works', ['incentive' => $incentive])
@else
{{-- Punkte-System --}}
<div class="inc-points-section mb-4">
<h6 class="font-weight-bold mb-3">
<i class="ion ion-md-star mr-1" style="color: #d7d700;"></i>
{{ __('incentive.section_points') }}
</h6>
<div class="row">
<div class="{{ $incentive->usesAbos() ? 'col-md-6 mb-3 mb-md-0' : 'col-md-12' }}">
<div class="inc-point-card inc-point-card-partner">
<h6 class="font-weight-bold mb-1" style="font-size: .9rem;">
<i class="ion ion-md-person-add mr-1"></i>
{{ __('incentive.points_partners_title') }}
</h6>
<div class="inc-point-val mb-2">
{{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
</div>
<ul class="pl-3 mb-0">
<li>{{ __('incentive.points_onetime_label') }}</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="inc-point-card inc-point-card-abo">
<h6 class="font-weight-bold mb-1" style="font-size: .9rem;">
<i class="ion ion-md-ribbon mr-1"></i>
{{ __('incentive.points_abos_title') }}
</h6>
<div class="inc-point-val mb-2">
{{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
</div>
<ul class="pl-3 mb-0">
<li>{{ __('incentive.points_onetime_label') }}</li>
<li>{{ __('incentive.points_abo_direct') }}</li>
@if ($incentive->includesSalesPoints())
<li>{{ __('incentive.points_abo_boost') }}</li>
@endif
</ul>
</div>
</div>
@endif
</div>
</div>
@endif
</div>
<div class="col-lg-4">
@if ($incentive->getLang('terms'))
<div class="card inc-terms-toggle mb-4">
<div class="card-header">
<a href="#terms" data-toggle="collapse" class="d-flex align-items-center">
<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" class="collapse">
<div class="card-body">
<div class="small">{!! $incentive->getLang('terms') !!}</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
<script>
(function() {
var collapse = document.getElementById('incentive-info');
var icon = document.getElementById('incentive-info-icon');
var label = document.getElementById('incentive-info-label');
if (collapse) {
collapse.addEventListener('show.bs.collapse', function() {
icon.className = 'ion ion-md-arrow-dropup mr-1';
label.textContent = '{{ __('incentive.read_less') }}';
});
collapse.addEventListener('hide.bs.collapse', function() {
icon.className = 'ion ion-md-arrow-dropdown mr-1';
label.textContent = '{{ __('incentive.read_more') }}';
});
}
})();
</script>
@else
{{-- ============================================================
ANSICHT: NOCH KEINE ZUSTIMMUNG (Punkte laufen) ODER KEIN TEILNEHMER
Teilnahme-Block zuerst, damit er auch mobil sofort sichtbar ist.
============================================================ --}}
<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">{{ __('incentive.payout_so_far') }}</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>
<hr class="inc-divider">
{{-- Danach alles, was auch nach der Bestätigung angezeigt wird --}}
<h2 class="inc-page-title">
<i class="ion ion-md-trophy mr-2" style="color: #d7d700;"></i>{{ $incentive->name }}
</h2>
@if ($incentive->getLang('subtitle'))
<p class="inc-page-subtitle">{{ $incentive->getLang('subtitle') }}</p>
@endif
@if ($incentive->image)
<div class="inc-hero-img mb-4">
<img src="{{ asset($incentive->heroImagePath()) }}" alt="{{ $incentive->name }}"
style="max-height: 450px;">
<div class="hero-gradient"></div>
</div>
@endif
@if ($incentive->getLang('description'))
<div class="inc-intro mb-4">
{!! $incentive->getLang('description') !!}
</div>
@endif
<h3 class="inc-section-heading">{{ __('incentive.section_info') }}</h3>
<div class="row">
<div class="col-lg-6">
{{-- Qualifikationszeitraum --}}
<div class="card inc-info-tile shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="inc-tile-icon inc-tile-icon-calendar mr-3">
<i class="ion ion-md-calendar"></i>
</div>
<div>
<h6 class="font-weight-bold mb-2">{{ __('incentive.section_period') }}</h6>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<strong>{{ __('incentive.qualification_period') }}:</strong>
{{ $incentive->qualification_start->format('d.m.Y') }}
bis {{ $incentive->qualification_end->format('d.m.Y') }}
</li>
@if (!$incentive->calculation_end->isSameDay($incentive->qualification_end))
<li class="text-muted">
<strong>{{ __('incentive.calculation_period') }}:</strong>
{{ __('incentive.calculation_period_hint', ['date' => $incentive->calculation_end->format('d.m.Y')]) }}
</li>
@endif
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
@if ($incentive->hasCashPayout() && !$incentive->hasMinimumRequirements())
@include('user.incentive._payout_tile', ['incentive' => $incentive])
@else
{{-- Mindestqualifikation --}}
<div class="card inc-info-tile shadow-sm mb-4">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="inc-tile-icon inc-tile-icon-plane mr-3">
<i class="ion ion-md-airplane"></i>
</div>
<div>
<h6 class="font-weight-bold mb-2">{{ __('incentive.section_min_qual') }}</h6>
<p class="text-muted small mb-2">{{ __('incentive.min_qual_intro') }}</p>
<ul class="list-unstyled mb-2">
<li class="mb-1">
<strong style="color: #6b7758;">{{ $incentive->min_direct_partners }}</strong>
{{ __('incentive.min_partners_label') }}
</li>
<li>
<strong style="color: #6b7758;">{{ $incentive->min_customer_abos }}</strong>
{{ __('incentive.min_abos_label') }}
</li>
</ul>
<p class="text-muted small mb-0">
<i class="ion ion-md-information-circle mr-1"></i>
{{ __('incentive.min_qual_ranking_hint') }}
</p>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
@if ($incentive->hasCashPayout() && $incentive->ranksByPartnerCount())
@include('user.incentive._how_it_works', ['incentive' => $incentive])
@else
{{-- Punkte-System --}}
<div class="inc-points-section mb-4">
<h6 class="font-weight-bold mb-3">
<i class="ion ion-md-star mr-1" style="color: #d7d700;"></i>
{{ __('incentive.section_points') }}
</h6>
<div class="row">
<div class="{{ $incentive->usesAbos() ? 'col-md-6 mb-3 mb-md-0' : 'col-md-12' }}">
<div class="inc-point-card inc-point-card-partner">
<h6 class="font-weight-bold mb-1" style="font-size: .9rem;">
<i class="ion ion-md-person-add mr-1"></i>
{{ __('incentive.points_partners_title') }}
</h6>
<div class="inc-point-val mb-2">
{{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
</div>
<ul class="pl-3 mb-0">
<li>{{ __('incentive.points_onetime_label') }}</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="inc-point-card inc-point-card-abo">
<h6 class="font-weight-bold mb-1" style="font-size: .9rem;">
<i class="ion ion-md-ribbon mr-1"></i>
{{ __('incentive.points_abos_title') }}
</h6>
<div class="inc-point-val mb-2">
{{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
<span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
</div>
<ul class="pl-3 mb-0">
<li>{{ __('incentive.points_onetime_label') }}</li>
<li>{{ __('incentive.points_abo_direct') }}</li>
@if ($incentive->includesSalesPoints())
<li>{{ __('incentive.points_abo_boost') }}</li>
@endif
</ul>
</div>
</div>
@endif
</div>
</div>
@endif
@endif
{{-- ============================================================
LIVE-RANKING – immer sichtbar
============================================================ --}}
<div class="inc-ranking-card mt-2 mb-4">
<div class="card-header">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<div class="d-flex align-items-center">
<i class="ion ion-md-list mr-2" style="font-size: 1.2rem; color: #6b7758;"></i>
<span class="ranking-title">{{ __('incentive.section_ranking') }}</span>
<span class="badge-top ml-2">{{ __('incentive.ranking_all_active') }}</span>
</div>
<span
class="hint-text">{{ __('incentive.ranking_winners_hint', ['n' => $incentive->max_winners]) }}</span>
</div>
<div class="hint-text mt-2">
{{ __('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
&mdash;
@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>&nbsp;
@else
<i class="ion ion-md-close-circle vip-terms-pending ml-1"
title="{{ __('incentive.vip_terms_pending') }}"></i>&nbsp;
@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">&#10003;</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">&#10003;</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
&mdash;
@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