@extends('layouts.app')

@section('title', 'Рейтинг кабінетів')
@section('body_class', 'cabinet-rating-page')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/site/cabinet-rating.css') }}">
@endpush

@section('page_header')
    <div class="real-gifts-header">
        <h2 class="lp-page-title mb-1 d-flex align-items-center">
            <i class="fa-solid fa-trophy mr-2 text-warning"></i>
            Рейтинг кабінетів
        </h2>
        <p class="lp-page-sub">
            Середній рейтинг кабінетів за вибраний період на основі конекшенів та спенду.
            Топ-3 отримують грошові бонуси на кабінет 💰
        </p>
    </div>

    {{-- Блок з правилами нагород --}}
    <div class="mb-3">
        <div class="alert alert-warning mb-2 rating-prize-alert" style="border-radius: 14px;">
            <div class="d-flex flex-column flex-md-row align-items-md-center">
                <div class="mr-md-3 mb-2 mb-md-0">
                    <strong><i class="fa-solid fa-sack-dollar mr-1"></i> Призовий фонд:</strong>
                </div>
                <div class="d-flex flex-wrap">
                    <span class="badge badge-warning mr-2 mb-1 rating-chip">
                        🥇 1 місце — <strong>900$</strong> на кабінет
                    </span>
                    <span class="badge badge-secondary mr-2 mb-1 rating-chip">
                        🥈 2 місце — <strong>600$</strong> на кабінет
                    </span>
                    <span class="badge badge-light mr-2 mb-1 rating-chip" style="border: 1px solid #e5e7eb;">
                        🥉 3 місце — <strong>300$</strong> на кабінет
                    </span>
                    <span class="badge badge-info mb-1 rating-chip">
                        🚀 Найшвидший ріст — <strong>окремий бонус</strong>
                    </span>
                </div>
            </div>
        </div>
        <small class="text-muted rating-subtle-text">
            Чим вищий середній рейтинг (0–100), тим вище місце. Кожен бал може змінити позицію.
        </small>
    </div>
@endsection

@section('content')

    {{-- ШИРОКИЙ ФІЛЬТР ПІД ЗАГОЛОВКОМ --}}
    <form method="GET" class="mb-4">
        <div class="w-100 rating-filter-block"
             style="
                border-radius: 18px;
                padding: 14px 16px;
                background:
                    radial-gradient(circle at 0% 0%, rgba(96,165,250,.20), transparent 55%),
                    radial-gradient(circle at 100% 0%, rgba(192,132,252,.18), transparent 55%),
                    #f9fafb;
                border: 1px solid rgba(148,163,184,.55);
                transition: box-shadow .25s ease, transform .25s ease;
             ">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                <div class="mb-3 mb-md-0">
                    <div class="small text-muted mb-1 d-flex align-items-center">
                        <i class="fa-regular fa-calendar mr-2"></i>
                        <span>Обери період, за який рахуємо рейтинг</span>
                    </div>

                    <div class="d-flex flex-wrap">
                        {{-- З дати --}}
                        <div class="mr-2 mb-2">
                            <label for="from" class="small mb-1 text-muted">З дати</label>
                            <div class="input-group input-group-sm"
                                 style="
                                    border-radius: 999px;
                                    overflow: hidden;
                                    box-shadow: 0 4px 10px rgba(15,23,42,.06);
                                    background: #ffffff;
                                 ">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                          style="
                                            border: 0;
                                            background: linear-gradient(135deg,#e0f2fe,#eef2ff);
                                          ">
                                        <i class="fa-regular fa-calendar-days"></i>
                                    </span>
                                </div>
                                <input type="date"
                                       id="from"
                                       name="from"
                                       value="{{ $from }}"
                                       class="form-control form-control-sm"
                                       style="border:0; box-shadow:none; min-width: 150px;">
                            </div>
                        </div>

                        {{-- По дату --}}
                        <div class="mr-2 mb-2">
                            <label for="to" class="small mb-1 text-muted">По дату</label>
                            <div class="input-group input-group-sm"
                                 style="
                                    border-radius: 999px;
                                    overflow: hidden;
                                    box-shadow: 0 4px 10px rgba(15,23,42,.06);
                                    background: #ffffff;
                                 ">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                          style="
                                            border: 0;
                                            background: linear-gradient(135deg,#e0f2fe,#eef2ff);
                                          ">
                                        <i class="fa-regular fa-calendar-days"></i>
                                    </span>
                                </div>
                                <input type="date"
                                       id="to"
                                       name="to"
                                       value="{{ $to }}"
                                       class="form-control form-control-sm"
                                       style="border:0; box-shadow:none; min-width: 150px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-md-right">
                    <button type="submit"
                            class="btn btn-primary btn-sm d-inline-flex align-items-center px-3 mb-2">
                        <i class="fa-solid fa-ranking-star mr-2"></i>
                        <span>Оновити рейтинг</span>
                    </button>

                    <div class="small text-muted">
                        @if($from && $to)
                            Поточний період:
                            <strong>{{ \Carbon\Carbon::parse($from)->format('d.m.Y') }}
                                — {{ \Carbon\Carbon::parse($to)->format('d.m.Y') }}</strong>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </form>

    @if($cabinetRatings->isEmpty())
        <div class="alert alert-light border" style="border-radius: 14px;">
            За вибраний період немає даних для розрахунку рейтингу.
        </div>
    @else

        {{-- 🚀 Блок "Найшвидший ріст кабінету" --}}
        @if(!empty($fastestCabinet))
            @php
                $fcName       = data_get($fastestCabinet, 'cabinet_name');
                $fcSlug       = data_get($fastestCabinet, 'cabinet_slug');
                $fcAvgRating  = data_get($fastestCabinet, 'avg_rating');
                $fcPrevPlace  = data_get($fastestCabinet, 'prev_place');
                $fcCurrPlace  = data_get($fastestCabinet, 'place');
                $fcDelta      = data_get($fastestCabinet, 'delta_places');
                $fcGrowth     = data_get($fastestCabinet, 'growth_percent');
            @endphp

            <div class="mb-4">
                <div class="cabinet-rating-card rating-rocket-card"
                     style="border-radius: 20px;
                            border: 1px solid rgba(56,189,248,.6);
                            background: radial-gradient(circle at 0% 0%, #e0f2fe, transparent 55%),
                                        radial-gradient(circle at 100% 0%, #f5f3ff, transparent 55%),
                                        #f9fafb;
                            animation-delay: .25s;">
                    <div class="place-badge">
                        <span class="place-number" style="background: #0ea5e9;">
                            🚀
                        </span>
                        <span class="place-icon" style="color:#0ea5e9; font-size:.85rem;">
                            Ракета
                        </span>
                    </div>

                    <div class="cabinet-rating-main">
                        <div class="cabinet-rating-header">
                            <div>
                                <div class="cabinet-name d-flex align-items-center flex-wrap">
                                    Найшвидший ріст:
                                    <span class="ml-2">
                                        {{ $fcName }}
                                        @if($fcSlug)
                                            <span class="cabinet-slug ml-1">{{ $fcSlug }}</span>
                                        @endif
                                    </span>
                                </div>

                                <div class="cabinet-meta">
                                    Стрибок:
                                    <strong>
                                        з {{ $fcPrevPlace ?? '?' }} місця
                                        на {{ $fcCurrPlace ?? '?' }} місце
                                    </strong>
                                    <span class="dot-sep"></span>
                                    Піднявся на
                                    <strong>{{ $fcDelta ?? '?' }}</strong> позицій
                                </div>

                                <div class="small text-muted mt-1">
                                    Ріст рейтингу до минулого місяця:
                                    @if(!is_null($fcGrowth))
                                        <strong>
                                            @if($fcGrowth >= 0)+@endif{{ $fcGrowth }}%
                                        </strong>
                                    @else
                                        <span>немає даних для порівняння</span>
                                    @endif
                                </div>

                                {{-- Приз за найшвидший ріст --}}
                                <div class="mt-2 px-2 py-1 d-inline-flex align-items-center"
                                     style="background: rgba(56,189,248,0.12);
                                            border-radius: 12px;
                                            border: 1px solid rgba(56,189,248,0.6);
                                            font-size: .85rem;">
                                    <i class="fa-solid fa-bolt mr-2 text-info"></i>
                                    <span><strong>Бонус за найшвидший ріст</strong> для цього кабінету</span>
                                </div>
                            </div>

                            <div class="cabinet-score-pill" style="background:#0ea5e9;">
                                {{ $fcAvgRating ?? '—' }}
                            </div>
                        </div>

                        <div class="cabinet-rating-bar-wrapper">
                            <div class="cabinet-rating-bar">
                                <div class="cabinet-rating-bar-fill"
                                     style="width: {{ min(100, max(0, (float)($fcAvgRating ?? 0))) }}%;
                                            background: linear-gradient(90deg,#0ea5e9,#22c55e);"></div>
                            </div>
                        </div>

                        <div class="cabinet-rating-footer">
                            <span class="small text-muted">
                                Середній рейтинг: {{ $fcAvgRating ?? '—' }} / 100
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Основний рейтинг по місцям --}}
        <div class="cabinet-rating-list rating-list-animated">
            @foreach($cabinetRatings as $idx => $cab)
                @php
                    $place = $idx + 1;

                    $badgeClass = '';
                    $icon = null;
                    $tagline = null;
                    $reward = null;

                    if ($place === 1) {
                        $badgeClass = 'first';
                        $icon = 'fa-solid fa-crown';
                        $reward = 900;
                        $tagline = 'Абсолютний лідер! Всі дивляться на вас 👑';
                    } elseif ($place === 2) {
                        $badgeClass = 'second';
                        $icon = 'fa-solid fa-medal';
                        $reward = 600;
                        $tagline = 'Ще трохи — і перше місце ваше 🥈';
                    } elseif ($place === 3) {
                        $badgeClass = 'third';
                        $icon = 'fa-solid fa-award';
                        $reward = 300;
                        $tagline = 'Бронза, але дуже близько до срібла 🥉';
                    } else {
                        if ($cab['avg_rating'] >= 80) {
                            $tagline = 'Ви дуже близько до топів! 🔥';
                        } elseif ($cab['avg_rating'] >= 60) {
                            $tagline = 'Хороший рівень, але є куди рости 💪';
                        } else {
                            $tagline = 'Тут народжуються майбутні чемпіони 🚀';
                        }
                    }

                    $growthText = null;
                    $trendClass = null;
                    $trendLabel = null;
                    $trendIcon = null;

                    if (!empty($cab['prev_place'])) {
                        $dp = $cab['delta_places'] ?? 0;
                        $gp = $cab['growth_percent'] ?? null;

                        if ($dp > 0) {
                            $growthText = "Піднялись на {$dp} місць порівняно з минулим місяцем";
                            $trendClass = 'trend-up';
                            $trendLabel = "+{$dp}";
                            $trendIcon  = 'fa-solid fa-arrow-up';
                        } elseif ($dp === 0) {
                            $growthText = "Тримаєте позицію на рівні минулого місяця";
                            $trendClass = 'trend-flat';
                            $trendLabel = "0";
                            $trendIcon  = 'fa-solid fa-minus';
                        } else {
                            $growthText = "Позиція гірша ніж минулого місяця";
                            $trendClass = 'trend-down';
                            $trendLabel = (string) $dp;
                            $trendIcon  = 'fa-solid fa-arrow-down';
                        }

                        if (!is_null($gp)) {
                            $sign = $gp >= 0 ? '+' : '';
                            $growthText .= " (рейтинг {$sign}{$gp}%)";
                        }
                    }

                    // Затримка анімації для каскаду карток
                    $delay = 0.15 + ($idx * 0.06);
                @endphp

                <div class="cabinet-rating-card {{ $badgeClass }}"
                     style="animation-delay: {{ number_format($delay, 2) }}s;">
                    <div class="place-badge">
                        <span class="place-number">{{ $place }}</span>
                        @if($icon)
                            <span class="place-icon">
                                <i class="{{ $icon }}"></i>
                            </span>
                        @endif
                    </div>

                    <div class="cabinet-rating-main">
                        <div class="cabinet-rating-header">
                            <div>
                                <div class="cabinet-name d-flex align-items-center flex-wrap">
                                    {{ $cab['cabinet_name'] }}
                                    @if(!empty($cab['cabinet_slug']))
                                        <span class="cabinet-slug ml-2">{{ $cab['cabinet_slug'] }}</span>
                                    @endif
                                </div>

                                <div class="cabinet-meta d-flex flex-wrap align-items-center">
                                    <span class="mr-2">
                                        Рейтинг:
                                        <strong>{{ $cab['avg_rating'] }}</strong> / 100
                                    </span>

                                    @if($trendClass && $trendLabel)
                                        <span class="dot-sep d-none d-sm-inline"></span>
                                        <span class="cabinet-trend-pill {{ $trendClass }} ml-sm-2 mt-1 mt-sm-0">
                                            @if($trendIcon)
                                                <i class="{{ $trendIcon }} mr-1"></i>
                                            @endif
                                            {{ $trendLabel }} місць
                                        </span>
                                    @endif
                                </div>

                                {{-- Мотиваційний текст --}}
                                <div class="small text-muted mt-1">
                                    {{ $tagline }}
                                </div>

                                {{-- Міні-нагороди (ачівки) --}}
                                <div class="mt-1">
                                    @if($cab['avg_rating'] >= 90)
                                        <span class="badge badge-soft-success mr-1 mb-1">
                                            🔥 Елітний кабінет (90+)
                                        </span>
                                    @elseif($cab['avg_rating'] >= 80)
                                        <span class="badge badge-soft-primary mr-1 mb-1">
                                            💎 Стабільний топ (80+)
                                        </span>
                                    @endif

                                    @if(!empty($cab['growth_percent']) && $cab['growth_percent'] >= 20)
                                        <span class="badge badge-soft-info mr-1 mb-1">
                                            📈 Сильний ріст ({{ $cab['growth_percent'] }}%)
                                        </span>
                                    @endif
                                </div>

                                {{-- Текст про ріст / падіння --}}
                                @if($growthText)
                                    <div class="small text-muted mt-1">
                                        {{ $growthText }}
                                    </div>
                                @endif

                                {{-- 💰 Нагорода для ТОП-3 --}}
                                @if($reward)
                                    <div class="mt-2 px-2 py-1 d-inline-flex align-items-center"
                                         style="background: rgba(255,215,0,0.18);
                                                border-radius: 12px;
                                                border: 1px solid rgba(250,204,21,0.6);
                                                font-size: .85rem;">
                                        <i class="fa-solid fa-sack-dollar mr-2 text-warning"></i>
                                        <span><strong>{{ $reward }}$</strong> бонус на кабінет</span>
                                    </div>
                                @endif
                            </div>

                            <div class="cabinet-score-pill">
                                {{ $cab['avg_rating'] }}
                            </div>
                        </div>

                        <div class="cabinet-rating-bar-wrapper">
                            <div class="cabinet-rating-bar">
                                <div class="cabinet-rating-bar-fill"
                                     style="width: {{ min(100, max(0, $cab['avg_rating'])) }}%;"></div>
                            </div>
                        </div>

                        <div class="cabinet-rating-footer">
                            <span class="small text-muted">
                                Мін: {{ $cab['min_rating'] }} / Макс: {{ $cab['max_rating'] }}
                            </span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

@endsection