10.April 2026
This commit is contained in:
parent
4a8f4b4abc
commit
396d049439
203 changed files with 18098 additions and 2911 deletions
953
resources/views/user/incentive/show.blade.php
Normal file
953
resources/views/user/incentive/show.blade.php
Normal file
|
|
@ -0,0 +1,953 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
.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.1rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</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.total_points') }}</div>
|
||||
<div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
|
||||
</div>
|
||||
<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('img/incentive/' . $incentive->image) }}" 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>
|
||||
|
||||
{{-- 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>
|
||||
|
||||
{{-- 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="col-md-6 mb-3 mb-md-0">
|
||||
<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>
|
||||
<li>{{ __('incentive.points_partner_boost') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<li>{{ __('incentive.points_abo_boost') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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
|
||||
============================================================ --}}
|
||||
@if ($participant)
|
||||
<div class="inc-header mb-3">
|
||||
<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.total_points') }}</div>
|
||||
<div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
|
||||
</div>
|
||||
<div>
|
||||
@if ($participant->is_qualified)
|
||||
<span class="badge-qual">{{ __('incentive.qualified') }}</span>
|
||||
@else
|
||||
<span class="badge-open">{{ __('incentive.not_yet_qualified') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pending-banner mb-4">
|
||||
<i class="ion ion-md-information-circle mr-1"></i>
|
||||
{{ __('incentive.pending_confirmation_banner') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($incentive->image)
|
||||
<div class="inc-hero-img mb-4">
|
||||
<img src="{{ asset('img/incentive/' . $incentive->image) }}" alt="{{ $incentive->name }}"
|
||||
style="max-height: 450px;">
|
||||
<div class="hero-gradient"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<h3 class="font-weight-bold mb-3">
|
||||
<i class="ion ion-md-trophy mr-2" style="color: #d7d700;"></i>{{ $incentive->name }}
|
||||
</h3>
|
||||
|
||||
@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>
|
||||
|
||||
{{-- 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>
|
||||
|
||||
{{-- 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="col-md-6 mb-3 mb-md-0">
|
||||
<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_partner_boost') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<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_boost') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="inc-participate mb-4">
|
||||
<h5>
|
||||
<i class="ion ion-md-log-in mr-1"></i>
|
||||
{{ __('incentive.participate_title') }}
|
||||
</h5>
|
||||
@if ($incentive->isActive())
|
||||
<p class="small mb-3" style="opacity: .85;">{{ __('incentive.participate_intro') }}</p>
|
||||
@if (!empty($participateHasTrackableAbos))
|
||||
<div class="mb-3 p-2 small" style="background: rgba(255,255,255,0.12); border-radius: .5rem;">
|
||||
<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') }}
|
||||
@if ($incentive->getLang('terms'))
|
||||
(<a href="#terms" data-toggle="collapse">{{ __('incentive.show_terms') }}</a>)
|
||||
@endif
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-participate btn-block">
|
||||
<i class="ion ion-md-checkmark mr-1"></i>
|
||||
{{ __('incentive.participate_now') }}
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<p class="mb-0" style="opacity: .8;">{{ __('incentive.not_active') }}</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@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>
|
||||
|
||||
@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">Top {{ $rankingDisplayLimit }}</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 ($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.total_points') }}</th>
|
||||
<th class="text-center">{{ __('incentive.partners') }}</th>
|
||||
<th class="text-center">{{ __('incentive.abos') }}</th>
|
||||
<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)
|
||||
@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>
|
||||
<td class="text-center">
|
||||
{{ $p->qualified_partners }}/{{ $incentive->min_direct_partners }}
|
||||
@if ($p->qualified_partners >= $incentive->min_direct_partners)
|
||||
<span class="check-ok">✓</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ $p->qualified_abos }}/{{ $incentive->min_customer_abos }}
|
||||
@if ($p->qualified_abos >= $incentive->min_customer_abos)
|
||||
<span class="check-ok">✓</span>
|
||||
@endif
|
||||
</td>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
Loading…
Add table
Add a link
Reference in a new issue