@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;
        }

        .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;
            }
        }
    </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">{{ __('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.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
                                            &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>
                                    <td class="text-center">
                                        {{ $p->qualified_partners }}/{{ $incentive->min_direct_partners }}
                                        @if ($p->qualified_partners >= $incentive->min_direct_partners)
                                            <span class="check-ok">&#10003;</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">&#10003;</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
            @if ($ranking->hasPages())
                <div class="p-3">
                    {{ $ranking->links() }}
                </div>
            @endif
        </div>
    </div>

@endsection