@extends('layouts.layout-2')

@section('styles')
    <style>
        .incentive-hero {
            margin: 0;
            border-radius: .75rem;
            position: relative;
            overflow: hidden;
            min-height: 520px;
            display: flex;
            align-items: flex-end;
        }

        .incentive-hero img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .incentive-hero .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.10) 0%,
                    rgba(0, 0, 0, 0.25) 40%,
                    rgba(0, 0, 0, 0.75) 100%);
        }

        .incentive-hero .hero-content {
            position: relative;
            z-index: 2;
            padding: 2.5rem;
            width: 100%;
        }

        .incentive-hero .hero-badge {
            display: inline-block;
            background: rgba(215, 215, 0, 0.92);
            color: #333;
            font-weight: 700;
            padding: .35rem 1rem;
            border-radius: 50px;
            font-size: .85rem;
            letter-spacing: .5px;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .incentive-hero h1 {
            font-size: 2.6rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
            margin-bottom: .5rem;
            line-height: 1.15;
        }

        .incentive-hero .hero-subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.92);
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .incentive-intro {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            color: #fff;
            border-radius: .75rem;
            padding: 2rem 2.5rem;
            font-size: 1.1rem;
            line-height: 1.7;
            position: relative;
            overflow: hidden;
        }

        .incentive-intro::before {
            content: '\201C';
            position: absolute;
            top: -10px;
            left: 15px;
            font-size: 8rem;
            opacity: .12;
            font-family: Georgia, serif;
            line-height: 1;
        }

        .incentive-intro strong {
            color: #d7d700;
        }

        .incentive-intro .cta-line {
            color: #d7d700;
            font-weight: 700;
        }

        .info-tile {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .info-tile:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }

        .info-tile .tile-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            font-size: 1.8rem;
            color: #fff;
        }

        .tile-icon-calendar {
            background: linear-gradient(135deg, #6b7758, #4a5340);
        }

        .tile-icon-plane {
            background: linear-gradient(135deg, #6b7758, #8a9a70);
        }

        .tile-icon-star {
            background: linear-gradient(135deg, #b8b800, #d7d700);
        }

        .info-tile .tile-value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .info-tile .tile-label {
            font-size: .82rem;
            color: #888;
            margin-top: .25rem;
        }

        .points-section {
            background: #f4f5f0;
            border-radius: .75rem;
            padding: 2.5rem;
        }

        .points-section .points-heading {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 1.8rem;
            text-align: center;
        }

        .points-section-wide {
            padding: 1.5rem;
        }

        .points-section-wide .points-heading {
            text-align: left;
            margin-bottom: 1rem;
        }

        .points-section-wide .point-card {
            width: 100%;
            height: auto;
        }

        .point-card {
            background: #fff;
            border-radius: .75rem;
            padding: 1.5rem;
            height: 100%;
            border-left: 4px solid;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .point-card-partner {
            border-left-color: #6b7758;
        }

        .point-card-abo {
            border-left-color: #d7d700;
        }

        .point-card .point-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: .5rem;
        }

        .point-card-partner .point-value {
            color: #6b7758;
        }

        .point-card-abo .point-value {
            color: #9a9a00;
        }

        .point-card ul {
            padding-left: 1.1rem;
            margin: 0;
        }

        .point-card li {
            margin-bottom: .35rem;
            color: #555;
            font-size: .92rem;
        }

        .gallery-section {
            overflow: hidden;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: .5rem;
        }

        @media (max-width: 767px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .gallery-thumb {
            position: relative;
            overflow: hidden;
            border-radius: .5rem;
            cursor: pointer;
            aspect-ratio: 4/3;
        }

        .gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

        .gallery-thumb:hover img {
            transform: scale(1.08);
        }

        .gallery-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            transition: background .25s ease;
            border-radius: .5rem;
        }

        .gallery-thumb:hover::after {
            background: rgba(0, 0, 0, 0.15);
        }

        .gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.92);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .gallery-lightbox.active {
            display: flex;
        }

        .gallery-lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: .5rem;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
        }

        .gallery-lightbox .lb-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s;
        }

        .gallery-lightbox .lb-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .gallery-lightbox .lb-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 2.5rem;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.10);
            border: none;
            border-radius: 50%;
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s;
        }

        .gallery-lightbox .lb-nav:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .gallery-lightbox .lb-prev {
            left: 1.5rem;
        }

        .gallery-lightbox .lb-next {
            right: 1.5rem;
        }

        .cta-banner {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            border-radius: .75rem;
            color: #fff;
            padding: 3rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
        }

        .cta-banner h3 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: .5rem;
        }

        .cta-banner p {
            opacity: .9;
            font-size: 1.05rem;
        }

        .cta-banner .btn-light {
            font-weight: 700;
            padding: .65rem 2.5rem;
            font-size: 1.05rem;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .cta-banner .btn-light:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .cta-banner .btn-outline-light {
            font-weight: 600;
            padding: .65rem 2rem;
            font-size: 1.05rem;
            border-radius: 50px;
            border-width: 2px;
        }

        .cta-status-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            font-size: 2rem;
        }

        .cta-status-icon-success {
            background: rgba(255, 255, 255, 0.2);
            color: #d7d700;
        }

        .cta-status-icon-warning {
            background: rgba(255, 255, 255, 0.2);
            color: #d7d700;
        }

        .cta-status-icon-muted {
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.6);
        }

        .terms-toggle {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
        }

        .terms-toggle .card-header {
            background: #f4f5f0;
            border: none;
            padding: 1rem 1.5rem;
        }

        .terms-toggle .card-header a {
            text-decoration: none;
            font-weight: 600;
        }

        @media (max-width: 767px) {
            .incentive-hero {
                min-height: 360px;
            }

            .incentive-hero h1 {
                font-size: 1.8rem;
            }

            .incentive-hero .hero-content {
                padding: 1.5rem;
            }

            .incentive-intro {
                padding: 1.5rem;
            }

            .points-section {
                padding: 1.5rem;
            }
        }

        /* ===== Aus der frueheren Ranglisten-Seite: Kopf, Teilnahme-Block, Rangliste ===== */
        .inc-header {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            border-radius: .75rem;
            color: #fff;
            padding: 1.5rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .inc-header::before {
            content: '';
            position: absolute;
            top: -60%;
            right: -20%;
            width: 300px;
            height: 300px;
            background: rgba(215, 215, 0, 0.08);
            border-radius: 50%;
        }

        .inc-header h5 {
            margin: 0;
            font-weight: 700;
            font-size: 1.35rem;
        }

        /* Groessere Ueberschriften fuer den Lesefluss */
        .inc-page-title {
            font-size: 1.9rem;
            font-weight: 800;
            margin-bottom: .25rem;
        }

        .inc-page-subtitle {
            font-size: 1.1rem;
            color: #6b7758;
            font-weight: 600;
            margin-bottom: 1.25rem;
        }

        .inc-section-heading {
            font-size: 1.35rem;
            font-weight: 700;
            margin: .5rem 0 1rem;
        }

        .inc-info-tile h6,
        .inc-points-section > h6 {
            font-size: 1.15rem;
        }

        /* Teilnahme-Block ganz oben */
        .inc-join {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            color: #fff;
            border-radius: .75rem;
            padding: 1.75rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .inc-join::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 320px;
            height: 320px;
            background: rgba(215, 215, 0, 0.08);
            border-radius: 50%;
        }

        .inc-join > .row,
        .inc-join > .collapse {
            position: relative;
            z-index: 1;
        }

        .inc-join-title {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: .5rem;
            color: #fff;
        }

        .inc-join-title i {
            color: #d7d700;
        }

        .inc-join-intro {
            font-size: 1rem;
            opacity: .9;
            margin-bottom: 1rem;
        }

        .inc-join-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: .5rem;
        }

        .inc-chip {
            display: inline-block;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.35);
            color: #fff;
            border-radius: 50px;
            padding: .4rem 1rem;
            font-weight: 600;
            font-size: .95rem;
        }

        .inc-chip-strong {
            background: #d7d700;
            border-color: #d7d700;
            color: #333;
            font-weight: 800;
            font-size: 1.05rem;
        }

        .inc-chip-muted {
            background: transparent;
            font-weight: 500;
            font-size: .85rem;
            opacity: .85;
        }

        .inc-join-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }

        .inc-join-stats .stat-box {
            text-align: center;
            padding: .5rem .9rem;
            background: rgba(255, 255, 255, 0.12);
            border-radius: .5rem;
        }

        .inc-join-stats .stat-label {
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            opacity: .8;
        }

        .inc-join-stats .stat-value {
            font-size: 1.4rem;
            font-weight: 800;
            line-height: 1.1;
        }

        .inc-join-form {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: .75rem;
            padding: 1.25rem;
        }

        .inc-join-form .custom-control-label {
            font-size: .95rem;
        }

        .inc-join-form .btn-participate {
            background: #d7d700;
            color: #333;
            border: none;
            border-radius: 50px;
            font-size: 1.05rem;
            font-weight: 800;
            padding: .7rem 1.5rem;
            transition: transform .2s, box-shadow .2s;
        }

        .inc-join-form .btn-participate:hover {
            background: #e8e800;
            color: #333;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        .inc-join-hint {
            background: rgba(255, 255, 255, 0.12);
            border-radius: .5rem;
            padding: .6rem .8rem;
            font-size: .85rem;
        }

        .inc-join-terms-link {
            display: inline-block;
            margin-top: .9rem;
            color: #fff;
            text-decoration: underline;
            font-size: .9rem;
        }

        .inc-join-terms-link:hover {
            color: #d7d700;
        }

        .inc-join-terms {
            background: #fff;
            color: #333;
            border-radius: .75rem;
            padding: 1.25rem;
            max-height: 360px;
            overflow-y: auto;
        }

        .inc-divider {
            border: 0;
            border-top: 3px solid #e3e5dc;
            margin: 1.75rem 0;
        }

        .inc-header .stat-box {
            text-align: center;
            padding: 0 1rem;
        }

        .inc-header .stat-label {
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            opacity: .75;
        }

        .inc-header .stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.1;
        }

        .inc-header .badge-qual {
            background: rgba(215, 215, 0, 0.85);
            color: #333;
            font-weight: 700;
            padding: .35rem .8rem;
            border-radius: 50px;
            font-size: .8rem;
        }

        .inc-header .badge-open {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-weight: 600;
            padding: .35rem .8rem;
            border-radius: 50px;
            font-size: .8rem;
        }

        .inc-header .btn-details {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            padding: .4rem 1.2rem;
            font-weight: 600;
            font-size: .85rem;
            transition: background .2s;
        }

        .inc-header .btn-details:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
            text-decoration: none;
        }

        .inc-toggle-bar {
            background: #f4f5f0;
            border-radius: 0 0 .75rem .75rem;
            margin-top: -0.75rem;
            padding-top: .75rem;
        }

        .inc-toggle-bar .btn {
            border: none;
            color: #6b7758;
            font-weight: 600;
        }

        .inc-info-tile {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .inc-info-tile:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .inc-tile-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: #fff;
            flex-shrink: 0;
        }

        .inc-tile-icon-calendar {
            background: linear-gradient(135deg, #6b7758, #4a5340);
        }

        .inc-tile-icon-plane {
            background: linear-gradient(135deg, #6b7758, #8a9a70);
        }

        .inc-tile-icon-star {
            background: linear-gradient(135deg, #b8b800, #d7d700);
        }

        .inc-hero-img {
            border-radius: .75rem;
            overflow: hidden;
            position: relative;
        }

        .inc-hero-img img {
            width: 100%;
            max-height: 350px;
            object-fit: cover;
            display: block;
        }

        .inc-hero-img .hero-gradient {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
        }

        .inc-intro {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            color: #fff;
            border-radius: .75rem;
            padding: 1.5rem 2rem;
            font-size: 1rem;
            line-height: 1.65;
            position: relative;
            overflow: hidden;
        }

        .inc-intro::before {
            content: '\201C';
            position: absolute;
            top: -10px;
            left: 12px;
            font-size: 6rem;
            opacity: .1;
            font-family: Georgia, serif;
            line-height: 1;
        }

        .inc-points-section {
            background: #f4f5f0;
            border-radius: .75rem;
            padding: 1.5rem;
        }

        .inc-point-card {
            background: #fff;
            border-radius: .75rem;
            padding: 1.2rem;
            height: 100%;
            border-left: 4px solid;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .inc-point-card-partner {
            border-left-color: #6b7758;
        }

        .inc-point-card-abo {
            border-left-color: #d7d700;
        }

        .inc-point-card .inc-point-val {
            font-size: 1.4rem;
            font-weight: 800;
            line-height: 1;
        }

        .inc-point-card-partner .inc-point-val {
            color: #6b7758;
        }

        .inc-point-card-abo .inc-point-val {
            color: #9a9a00;
        }

        .inc-point-card li {
            font-size: .88rem;
            color: #555;
            margin-bottom: .25rem;
        }

        .inc-participate {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            border-radius: .75rem;
            color: #fff;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        .inc-participate::before {
            content: '';
            position: absolute;
            bottom: -40%;
            left: -20%;
            width: 250px;
            height: 250px;
            background: rgba(215, 215, 0, 0.08);
            border-radius: 50%;
        }

        .inc-participate h5 {
            font-weight: 700;
        }

        .inc-participate .btn-participate {
            background: #d7d700;
            color: #333;
            border: none;
            border-radius: 50px;
            font-weight: 700;
            padding: .6rem 1.5rem;
            transition: transform .2s, box-shadow .2s;
        }

        .inc-participate .btn-participate:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .inc-participate .custom-control-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: .9rem;
        }

        .inc-participate a {
            color: #d7d700;
        }

        .inc-terms-toggle {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
        }

        .inc-terms-toggle .card-header {
            background: #f4f5f0;
            border: none;
            padding: .8rem 1.2rem;
        }

        .inc-terms-toggle .card-header a {
            text-decoration: none;
            font-weight: 600;
            color: #555;
        }

        .inc-ranking-card {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            background: #fff;
            width: 100%;
        }

        .inc-ranking-card .card-header {
            background: #f4f5f0;
            border: none;
            padding: 1.2rem 1.5rem;
        }

        .inc-ranking-card .card-body {
            background: #fff;
        }

        .inc-ranking-card .inc-ranking-table {
            width: 100%;
            margin-bottom: 0;
        }

        .inc-ranking-card .ranking-title {
            font-weight: 700;
            font-size: 1.35rem;
            color: #333;
        }

        .inc-ranking-card .badge-top {
            background: linear-gradient(135deg, #6b7758, #4a5340);
            color: #fff;
            border-radius: 50px;
            padding: .3rem .7rem;
            font-size: .75rem;
            font-weight: 700;
        }

        .inc-ranking-card .hint-text {
            font-size: .8rem;
            color: #888;
            line-height: 1.45;
        }

        .inc-ranking-table {
            margin: 0;
        }

        .inc-ranking-table thead th {
            background: #fafaf6;
            border-top: none;
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #6b7758;
            padding: .75rem 1rem;
        }

        .inc-ranking-table tbody td {
            padding: .75rem 1rem;
            vertical-align: middle;
        }

        .inc-ranking-table .row-winner {
            background: rgba(215, 215, 0, 0.08);
        }

        .inc-ranking-table .row-me {
            background: rgba(107, 119, 88, 0.1);
        }

        .inc-ranking-table .rank-trophy {
            color: #d7d700;
            font-size: 1.2rem;
        }

        .inc-ranking-table .badge-winner {
            background: linear-gradient(135deg, #b8b800, #d7d700);
            color: #333;
            font-weight: 700;
            border-radius: 50px;
            padding: .25rem .6rem;
            font-size: .72rem;
        }

        .inc-ranking-table .badge-qualified {
            background: #6b7758;
            color: #fff;
            font-weight: 600;
            border-radius: 50px;
            padding: .25rem .6rem;
            font-size: .72rem;
        }

        .inc-ranking-table .badge-open-status {
            background: #e8e8e8;
            color: #777;
            font-weight: 600;
            border-radius: 50px;
            padding: .25rem .6rem;
            font-size: .72rem;
        }

        .inc-ranking-table .check-ok {
            color: #6b7758;
            font-weight: 700;
        }

        .inc-ranking-table .badge-me {
            background: #6b7758;
            color: #fff;
            border-radius: 50px;
            padding: .15rem .5rem;
            font-size: .7rem;
            font-weight: 600;
        }

        .vip-ranking-notice {
            background: rgba(107, 119, 88, 0.08);
            border-bottom: 1px solid rgba(107, 119, 88, 0.15);
            padding: .6rem 1.5rem;
            font-size: .8rem;
            color: #6b7758;
            font-weight: 600;
        }

        .vip-terms-accepted {
            color: #5a8a5a;
            font-size: 1rem;
            vertical-align: middle;
        }

        .vip-terms-pending {
            color: #c0392b;
            font-size: 1rem;
            vertical-align: middle;
        }

        .inc-ranking-card .pagination {
            margin: 0;
            justify-content: center;
        }

        .inc-ranking-card .page-item .page-link {
            color: #6b7758;
            border-color: #e0e0d8;
            font-size: .85rem;
        }

        .inc-ranking-card .page-item.active .page-link {
            background-color: #6b7758;
            border-color: #6b7758;
            color: #fff;
        }

        .inc-ranking-card .page-item.disabled .page-link {
            color: #bbb;
            border-color: #e0e0d8;
        }

        .pending-banner {
            background: rgba(215, 215, 0, 0.12);
            border: 1px solid rgba(215, 215, 0, 0.3);
            border-radius: .75rem;
            padding: 1rem 1.5rem;
            color: #555;
        }

        .pending-banner i {
            color: #9a9a00;
        }

        @media (max-width: 767px) {
            .inc-header {
                padding: 1.2rem;
            }

            .inc-header .stat-box {
                padding: 0 .5rem;
            }

            .inc-participate {
                padding: 1.5rem;
            }

            .inc-join {
                padding: 1.25rem;
            }

            .inc-join-title {
                font-size: 1.45rem;
            }

            .inc-page-title {
                font-size: 1.5rem;
            }
        }
    </style>
@endsection

@section('content')
    {{-- Flash-Nachrichten --}}
    @if (Session::has('alert-success'))
        <div class="alert alert-success">{{ Session::get('alert-success') }}</div>
    @endif
    @if (Session::has('alert-error'))
        <div class="alert alert-danger">{{ Session::get('alert-error') }}</div>
    @endif
    @if (Session::has('alert-info'))
        <div class="alert alert-info">{{ Session::get('alert-info') }}</div>
    @endif

    {{-- ============================================================
         OBEN: Teilnahme (nicht bestaetigt) oder Kopf mit Stand (bestaetigt)
         ============================================================ --}}
    @if ($hasConfirmedParticipation)
        <div class="inc-header mb-4" id="incentive-participant-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap">

                <div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
                    <i class="ion ion-md-trophy mr-2" style="font-size: 1.5rem; color: #d7d700;"></i>
                    <h5>{{ $incentive->name }}</h5>
                </div>

                <div class="d-flex align-items-center flex-wrap">
                    @if ($participant->rank)
                        <div class="stat-box">
                            <div class="stat-label">{{ __('incentive.your_rank') }}</div>
                            <div class="stat-value">{{ $participant->rank }}</div>
                        </div>
                    @endif
                    <div class="stat-box">
                        <div class="stat-label">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</div>
                        <div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
                    </div>
                    @if ($participantPayout)
                        <div class="stat-box">
                            <div class="stat-label">{{ __('incentive.payout_so_far') }}</div>
                            <div class="stat-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($participantPayout['total']) }}</div>
                        </div>
                    @endif
                    <div class="mr-3">
                        @if ($participant->is_qualified)
                            <span class="badge-qual">{{ __('incentive.qualified') }}</span>
                        @else
                            <span class="badge-open">{{ __('incentive.not_yet_qualified') }}</span>
                        @endif
                    </div>
                    <a href="{{ route('user_incentive_details', [$incentive->slug]) }}" class="btn-details">
                        <i class="ion ion-md-stats mr-1"></i>{{ __('incentive.my_details') }}
                    </a>
                </div>

            </div>
            @if ($incentive->getLang('terms'))
                <a href="#terms" data-toggle="collapse" class="inc-join-terms-link" aria-expanded="false" aria-controls="terms">
                    <i class="ion ion-md-document mr-1"></i>{{ __('incentive.join_terms_toggle') }}
                    <i class="ion ion-md-chevron-down ml-1"></i>
                </a>
                <div id="terms" class="collapse">
                    <div class="inc-join-terms mt-3">
                        <div class="small">{!! $incentive->getLang('terms') !!}</div>
                    </div>
                </div>
            @endif
        </div>
    @else
        <div class="inc-join mb-4" id="incentive-join">
            <div class="row align-items-start">
                <div class="col-lg-7 mb-3 mb-lg-0">
                    <h2 class="inc-join-title">
                        <i class="ion ion-md-trophy mr-2"></i>
                        {{ $participant ? __('incentive.join_confirm_title') : __('incentive.join_title') }}
                    </h2>
                    <p class="inc-join-intro">
                        {{ $participant ? __('incentive.pending_confirmation_banner') : __('incentive.participate_intro') }}
                    </p>

                    {{-- Hervorhebungen: worum es geht --}}
                    <div class="inc-join-highlights">
                        @if ((float) $incentive->amount_per_partner > 0)
                            <span class="inc-chip inc-chip-strong">{{ __('incentive.join_highlight_partner', ['amount' => \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner)]) }}</span>
                        @elseif ($incentive->points_partner_onetime > 0)
                            <span class="inc-chip inc-chip-strong">{{ __('incentive.join_highlight_points', ['points' => number_format($incentive->points_partner_onetime, 0, ',', '.')]) }}</span>
                        @endif
                        @foreach ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
                            <span class="inc-chip">{{ __('incentive.join_highlight_rank', ['amount' => \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount), 'n' => $bonusRank]) }}</span>
                        @endforeach
                        @if ($incentive->usesAbos() && $incentive->points_abo_onetime > 0)
                            <span class="inc-chip">{{ __('incentive.join_highlight_abo', ['points' => number_format($incentive->points_abo_onetime, 0, ',', '.')]) }}</span>
                        @endif
                        <span class="inc-chip inc-chip-muted">
                            <i class="ion ion-md-calendar mr-1"></i>
                            {{ $incentive->qualification_start->format('d.m.Y') }} bis {{ $incentive->qualification_end->format('d.m.Y') }}
                        </span>
                    </div>

                    @if ($participant)
                        <div class="inc-join-stats">
                            @if ($participant->rank)
                                <div class="stat-box">
                                    <div class="stat-label">{{ __('incentive.your_rank') }}</div>
                                    <div class="stat-value">{{ $participant->rank }}</div>
                                </div>
                            @endif
                            <div class="stat-box">
                                <div class="stat-label">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</div>
                                <div class="stat-value">{{ number_format($participant->total_points, 0, ',', '.') }}</div>
                            </div>
                            @if ($participantPayout)
                                <div class="stat-box">
                                    <div class="stat-label">{{ $participantPayout['confirmed'] ? __('incentive.payout_so_far') : __('incentive.payout_after_confirmation') }}</div>
                                    <div class="stat-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($participantPayout['total']) }}</div>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>

                <div class="col-lg-5">
                    <div class="inc-join-form">
                        @if ($incentive->isActive())
                            @if (!empty($participateHasTrackableAbos))
                                <div class="inc-join-hint mb-3">
                                    <i class="ion ion-md-information-circle mr-1"></i>
                                    {{ __('incentive.participate_abo_hint') }}
                                </div>
                            @endif
                            <form action="{{ route('user_incentive_participate', [$incentive->slug]) }}" method="POST">
                                @csrf
                                <div class="custom-control custom-checkbox mb-3">
                                    <input type="checkbox" class="custom-control-input" id="accept_terms"
                                        name="accept_terms" value="1" required>
                                    <label class="custom-control-label" for="accept_terms">
                                        {{ __('incentive.accept_terms') }}
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-participate btn-block btn-lg">
                                    <i class="ion ion-md-checkmark mr-1"></i>
                                    {{ __('incentive.participate_now') }}
                                </button>
                            </form>
                        @else
                            <p class="mb-0">{{ __('incentive.not_active') }}</p>
                        @endif
                        @if ($incentive->getLang('terms'))
                            <a href="#terms" data-toggle="collapse" class="inc-join-terms-link" aria-expanded="false" aria-controls="terms">
                                <i class="ion ion-md-document mr-1"></i>{{ __('incentive.join_terms_toggle') }}
                                <i class="ion ion-md-chevron-down ml-1"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </div>

            @if ($incentive->getLang('terms'))
                <div id="terms" class="collapse">
                    <div class="inc-join-terms mt-3">
                        <div class="small">{!! $incentive->getLang('terms') !!}</div>
                    </div>
                </div>
            @endif
        </div>
    @endif

    <hr class="inc-divider">


    {{-- ===== HERO ===== --}}
    @if ($incentive->image)
        <div class="incentive-hero mb-5">
            <img src="{{ asset($incentive->heroImagePath()) }}" alt="{{ $incentive->name }}">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">
                    <i class="ion ion-md-trophy mr-1"></i> {{ __('incentive.section_period') }}:
                    {{ $incentive->qualification_start->format('d.m.') }} &ndash;
                    {{ $incentive->qualification_end->format('d.m.Y') }}
                </span>
                <h1>{{ $incentive->name }}</h1>
                @if ($incentive->getLang('subtitle'))
                    <p class="hero-subtitle mb-0">{{ $incentive->getLang('subtitle') }}</p>
                @endif
            </div>
        </div>
    @else
        <div class="mb-5 pt-3">
            <h1 class="font-weight-bold">
                <i class="ion ion-md-trophy text-warning mr-2"></i>{{ $incentive->name }}
            </h1>
            @if ($incentive->getLang('subtitle'))
                <p class="lead text-muted">{{ $incentive->getLang('subtitle') }}</p>
            @endif
        </div>
    @endif

    {{-- ===== INTRO-TEXT ===== --}}
    @if ($incentive->getLang('description'))
        <div class="incentive-intro mb-5">
            {!! $incentive->getLang('description') !!}
        </div>
    @else
        <div class="incentive-intro mb-5">
            <p class="mb-1">
                <strong>{{ __('incentive.teaser_intro_bold') }}</strong>
                {{ __('incentive.teaser_intro_text') }}
            </p>
            <p class="mb-0 cta-line">
                {{ __('incentive.teaser_intro_cta', ['n' => $incentive->max_winners]) }}
            </p>
        </div>
    @endif

    {{-- ===== 3 INFO-KARTEN ===== --}}
    <div class="row mb-5">

        {{-- Qualifikationszeitraum --}}
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card info-tile h-100 shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="tile-icon tile-icon-calendar">
                        <i class="ion ion-md-calendar"></i>
                    </div>
                    <h5 class="font-weight-bold mb-3">{{ __('incentive.section_period') }}</h5>
                    <div class="mb-2">
                        <span class="tile-label d-block">{{ __('incentive.qualification_period') }}</span>
                        <span class="tile-value">
                            {{ $incentive->qualification_start->format('d.m.Y') }}
                            &ndash;
                            {{ $incentive->qualification_end->format('d.m.Y') }}
                        </span>
                    </div>
                    <div>
                        <span class="tile-label d-block">{{ __('incentive.calculation_period') }}</span>
                        <strong>{{ __('incentive.teaser_until') }}
                            {{ $incentive->calculation_end->format('d.m.Y') }}</strong>
                    </div>
                </div>
            </div>
        </div>

        @if ($incentive->hasCashPayout() && !$incentive->hasMinimumRequirements())
            {{-- Praemie (Recruiting-Challenge) --}}
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="card info-tile h-100 shadow-sm" id="incentive-payout-tile">
                    <div class="card-body text-center py-4">
                        <div class="tile-icon tile-icon-plane">
                            <i class="ion ion-md-cash"></i>
                        </div>
                        <h5 class="font-weight-bold mb-3">{{ __('incentive.payout_tile_title') }}</h5>
                        @if ((float) $incentive->amount_per_partner > 0)
                            <div class="mb-3">
                                <div class="tile-value">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner) }}</div>
                                <span class="tile-label">{{ __('incentive.payout_per_partner_label') }}</span>
                            </div>
                        @endif
                        @if ($incentive->rankBonuses() !== [] && !$incentive->isCashChallenge())
                            <div>
                                <span class="tile-label d-block mb-1">{{ __('incentive.payout_top_bonus_title', ['n' => count($incentive->rankBonuses())]) }}</span>
                                @foreach ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
                                    <div><strong>{{ __('incentive.payout_rank_label', ['n' => $bonusRank]) }}:</strong>
                                        {{ \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount) }}</div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @else
            {{-- Mindestqualifikation --}}
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="card info-tile h-100 shadow-sm">
                    <div class="card-body text-center py-4">
                        <div class="tile-icon tile-icon-plane">
                            <i class="ion ion-md-airplane"></i>
                        </div>
                        <h5 class="font-weight-bold mb-3">{{ __('incentive.section_min_qual') }}</h5>
                        <div class="mb-3">
                            <div class="tile-value">{{ $incentive->min_direct_partners }}</div>
                            <span class="tile-label">{{ __('incentive.min_partners_label') }}</span>
                        </div>
                        <div>
                            <div class="tile-value">{{ $incentive->min_customer_abos }}</div>
                            <span class="tile-label">{{ __('incentive.min_abos_label') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($incentive->isCashChallenge())
            {{-- Top 3 Bonus (Recruiting-Challenge) --}}
            <div class="col-md-4">
                <div class="card info-tile h-100 shadow-sm" id="incentive-bonus-tile">
                    <div class="card-body text-center py-4">
                        <div class="tile-icon tile-icon-star">
                            <i class="ion ion-md-trophy"></i>
                        </div>
                        <h5 class="font-weight-bold mb-3">{{ __('incentive.payout_bonus_tile_title', ['n' => max(count($incentive->rankBonuses()), $incentive->max_winners)]) }}</h5>
                        @forelse ($incentive->rankBonuses() as $bonusRank => $bonusAmount)
                            <div class="mb-2">
                                <span class="tile-value" style="color: #6b7758;">{{ \App\Services\Incentive\IncentivePayoutService::formatAmount($bonusAmount) }}</span>
                                <span class="tile-label d-block">{{ __('incentive.payout_rank_label', ['n' => $bonusRank]) }}</span>
                            </div>
                        @empty
                            <span class="tile-label d-block">{{ __('incentive.ranking_winners_hint', ['n' => $incentive->max_winners]) }}</span>
                        @endforelse
                    </div>
                </div>
            </div>
        @else
        {{-- Punkte-System --}}
        <div class="col-md-4">
            <div class="card info-tile h-100 shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="tile-icon tile-icon-star">
                        <i class="ion ion-md-star"></i>
                    </div>
                    <h5 class="font-weight-bold mb-3">{{ __('incentive.section_points') }}</h5>
                    <div class="mb-3">
                        <span class="tile-value" style="color: #6b7758;">
                            {{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
                            <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                        </span>
                        <span class="tile-label d-block">{{ __('incentive.points_partners_title') }}</span>
                    </div>
                    @if ($incentive->usesAbos())
                        <div>
                            <span class="tile-value" style="color: #9a9a00;">
                                {{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
                                <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                            </span>
                            <span class="tile-label d-block">{{ __('incentive.points_abos_title') }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        @endif

    </div>

    {{-- ===== SO FUNKTIONIERT DIE CHALLENGE (Geldpraemie) / PUNKTE-DETAIL ===== --}}
    @if ($incentive->isCashChallenge())
        <div class="points-section points-section-wide mb-5" id="incentive-how-it-works">
            <h4 class="points-heading text-left">
                <i class="ion ion-md-cash text-warning mr-1"></i>
                {{ __('incentive.section_how_it_works') }}
            </h4>
            <div class="row no-gutters">
                <div class="col-12">
                    <div class="point-card point-card-partner">
                        <h6 class="font-weight-bold mb-2">
                            <i class="ion ion-md-person-add mr-1"></i>
                            {{ __('incentive.payout_tile_title') }}
                        </h6>
                        <div class="point-value">
                            {{ \App\Services\Incentive\IncentivePayoutService::formatAmount((float) $incentive->amount_per_partner) }}
                            <span class="small font-weight-normal">{{ __('incentive.payout_per_partner_label') }}</span>
                        </div>
                        <ul>
                            <li>{{ __('incentive.points_starter_package_label') }}</li>
                            @if ($incentive->rankBonuses() !== [])
                                <li>{{ __('incentive.payout_top_bonus_text', ['n' => count($incentive->rankBonuses()), 'list' => collect($incentive->rankBonuses())->map(fn ($amount, $rank) => __('incentive.payout_rank_label', ['n' => $rank]).' '.\App\Services\Incentive\IncentivePayoutService::formatAmount($amount))->implode(', ')]) }}</li>
                            @endif
                            <li>{{ $incentive->ranksBySalesOfNewPartners() ? __('incentive.payout_ranking_sales_hint') : __('incentive.payout_ranking_hint') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @else
        {{-- ===== PUNKTE-DETAIL ===== --}}
        <div class="points-section mb-5">
            <h4 class="points-heading">
                <i class="ion ion-md-star text-warning mr-1"></i>
                {{ __('incentive.section_points') }}
            </h4>
            <div class="row">
                <div class="{{ $incentive->usesAbos() ? 'col-md-6 mb-3 mb-md-0' : 'col-md-12' }}">
                    <div class="point-card point-card-partner">
                        <h6 class="font-weight-bold mb-2">
                            <i class="ion ion-md-person-add mr-1"></i>
                            {{ __('incentive.points_partners_title') }}
                        </h6>
                        <div class="point-value">
                            {{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
                            <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                        </div>
                        <ul>
                            <li>{{ __('incentive.teaser_partner_onetime_text') }}</li>
                            <li>{{ __('incentive.points_starter_package_label') }}</li>
                            @if ($incentive->includesSalesPoints())
                                <li>{{ __('incentive.points_partner_boost') }}</li>
                            @endif
                            @include('user.incentive._payout_bullets', ['incentive' => $incentive])
                        </ul>
                    </div>
                </div>
                @if ($incentive->usesAbos())
                <div class="col-md-6">
                    <div class="point-card point-card-abo">
                        <h6 class="font-weight-bold mb-2">
                            <i class="ion ion-md-ribbon mr-1"></i>
                            {{ __('incentive.points_abos_title') }}
                        </h6>
                        <div class="point-value">
                            {{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
                            <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                        </div>
                        <ul>
                            <li>{{ __('incentive.teaser_abo_onetime_text') }}</li>
                            <li>{{ __('incentive.points_abo_direct') }}</li>
                            @if ($incentive->includesSalesPoints())
                                <li>{{ __('incentive.points_abo_boost') }}</li>
                            @endif
                        </ul>
                    </div>
                </div>
                @endif
            </div>
        </div>
    @endif

    {{-- ===== BILDERGALERIE ===== --}}
    @if (count($galleryImages) > 0)
        <div class="gallery-section mb-5">
            <h4 class="font-weight-bold mb-3 text-center">
                <i class="ion ion-md-images text-primary mr-1"></i>
                {{ __('incentive.gallery_title') }}
            </h4>
            <div class="gallery-grid">
                @foreach ($galleryImages as $idx => $img)
                    <div class="gallery-thumb" data-gallery-index="{{ $idx }}">
                        <img src="{{ asset($img) }}" alt="Impression {{ $idx + 1 }}" loading="lazy">
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Lightbox --}}
        <div class="gallery-lightbox" id="galleryLightbox">
            <button class="lb-close" title="Schließen">&times;</button>
            <button class="lb-nav lb-prev" title="Zurück"><i class="ion ion-md-arrow-back"></i></button>
            <button class="lb-nav lb-next" title="Weiter"><i class="ion ion-md-arrow-forward"></i></button>
            <img src="" alt="Gallery" id="lightboxImage">
        </div>
    @endif

    {{-- ============================================================
         LIVE-RANKING – immer sichtbar
         ============================================================ --}}
    <div class="inc-ranking-card mt-2 mb-4" id="ranking">
        <div class="card-header">
            <div class="d-flex align-items-center flex-wrap">
                <i class="ion ion-md-list mr-2" style="font-size: 1.3rem; color: #6b7758;"></i>
                <span class="ranking-title">{{ __('incentive.section_ranking') }}</span>
                <span class="badge-top ml-2">{{ __('incentive.ranking_all_active') }}</span>
            </div>
            <div class="hint-text mt-2">
                {{ __('incentive.ranking_winners_hint', ['n' => $incentive->max_winners]) }}
                {{ __('incentive.ranking_extended_hint', ['n' => $incentive->max_winners]) }}
                <br>{{ __('incentive.ranking_anonymous_hint') }}
            </div>
        </div>
        <div class="card-body p-0">
            @if ($isVipView)
                <div class="vip-ranking-notice">
                    <i class="ion ion-md-eye mr-1"></i>
                    {{ __('incentive.vip_view_notice') }}
                </div>
            @endif
            @if ($ranking->isEmpty())
                <div class="p-4 text-center text-muted">
                    <i class="ion ion-md-people mb-2 d-block" style="font-size: 2.5rem; opacity: .4;"></i>
                    {{ __('incentive.no_participants_with_points') }}
                </div>
            @else
                <div class="table-responsive">
                    <table class="table inc-ranking-table mb-0">
                        <thead>
                            <tr>
                                <th style="width: 60px;">{{ __('incentive.rank') }}</th>
                                <th>{{ __('incentive.consultant') }}</th>
                                <th class="text-right">{{ $incentive->ranksByPartnerCount() ? __('incentive.new_partners_short') : __('incentive.total_points') }}</th>
                                @if (!$incentive->ranksByPartnerCount())
                                    <th class="text-center">{{ __('incentive.partners') }}</th>
                                @endif
                                @if ($incentive->usesAbos())
                                    <th class="text-center">{{ __('incentive.abos') }}</th>
                                @endif
                                @if ($incentive->hasCashPayout())
                                    <th class="text-right">{{ __('incentive.payout_column') }}</th>
                                @endif
                                <th class="text-center">{{ __('incentive.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ranking as $p)
                                @php
                                    $isWinner = $p->is_qualified && $p->rank && $p->rank <= $incentive->max_winners;
                                    $isMe = $participant && $p->id === $participant->id;
                                @endphp
                                <tr
                                    class="{{ $isWinner ? 'row-winner' : '' }} {{ $p->is_qualified ? 'font-weight-bold' : '' }} {{ $isMe ? 'row-me' : '' }}">
                                    <td class="text-center">
                                        @if ($isWinner && $p->rank && $p->rank <= 3)
                                            <i class="ion ion-md-trophy rank-trophy"></i>
                                        @elseif ($p->rank)
                                            {{ $p->rank }}
                                        @else
                                            &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

@section('scripts')
    @if (count($galleryImages) > 0)
        <script>
            (function() {
                var images = @json(collect($galleryImages)->map(fn($i) => asset($i))->values());
                var current = 0;
                var lightbox = document.getElementById('galleryLightbox');
                var lbImg = document.getElementById('lightboxImage');

                document.querySelectorAll('.gallery-thumb').forEach(function(el) {
                    el.addEventListener('click', function() {
                        current = parseInt(el.dataset.galleryIndex);
                        lbImg.src = images[current];
                        lightbox.classList.add('active');
                    });
                });

                lightbox.querySelector('.lb-close').addEventListener('click', function() {
                    lightbox.classList.remove('active');
                });

                lightbox.querySelector('.lb-prev').addEventListener('click', function(e) {
                    e.stopPropagation();
                    current = (current - 1 + images.length) % images.length;
                    lbImg.src = images[current];
                });

                lightbox.querySelector('.lb-next').addEventListener('click', function(e) {
                    e.stopPropagation();
                    current = (current + 1) % images.length;
                    lbImg.src = images[current];
                });

                lightbox.addEventListener('click', function(e) {
                    if (e.target === lightbox) {
                        lightbox.classList.remove('active');
                    }
                });

                document.addEventListener('keydown', function(e) {
                    if (!lightbox.classList.contains('active')) return;
                    if (e.key === 'Escape') lightbox.classList.remove('active');
                    if (e.key === 'ArrowLeft') lightbox.querySelector('.lb-prev').click();
                    if (e.key === 'ArrowRight') lightbox.querySelector('.lb-next').click();
                });
            })();
        </script>
    @endif
@endsection