@extends('admin.layouts.app')

@section('content')
    @php
        $selectedClubIds = $selectedClubIds ?? [];
        $maxRevenueCard = max(1, collect($revenueCards ?? [])->max('value') ?: 1);
        $selectionLabel = $selectionLabel ?? 'Rede completa';
        $dashboardClubPayload = $clubs->map(function ($club) {
            return [
                'id' => (int) $club->id,
                'name' => $club->name,
                'url' => route('admin.clubs.show', $club),
                'is_selected' => (bool) $club->is_selected,
                'lessons_revenue' => $club->lessons_revenue,
                'reservations_revenue' => $club->reservations_revenue,
                'bar_revenue' => $club->bar_revenue,
                'store_revenue' => $club->store_revenue,
                'total_revenue' => $club->total_revenue,
                'lessons_revenue_raw' => (float) $club->lessons_revenue_raw,
                'reservations_revenue_raw' => (float) $club->reservations_revenue_raw,
                'bar_revenue_raw' => (float) $club->bar_revenue_raw,
                'store_revenue_raw' => (float) $club->store_revenue_raw,
                'total_revenue_raw' => (float) $club->total_revenue_raw,
                'bookings_count' => (int) $club->bookings_count,
                'orders_count' => (int) $club->orders_count,
                'users_count' => (int) $club->users_count,
            ];
        })->values();
    @endphp

    <div class="azp-page azp-dash-v2" data-dashboard-url="{{ route('admin.dashboard.data') }}">
        <section class="dash-hero">
            <div class="dash-hero-main">
                <div class="dash-eyebrow">Backoffice financeiro</div>
                <h1>Dashboard</h1>
                <p><span id="dashSelectionLabel">{{ $selectionLabel ?: 'Sem clubes selecionados' }}</span> · <span id="dashHeroRange">{{ $range['label'] ?? 'Período atual' }}</span></p>
            </div>

            <div class="dash-hero-total">
                <span>Faturação agregada</span>
                <strong id="dashTotalRevenue">{{ $totals['revenue'] ?? 'EUR 0,00' }}</strong>
                <small id="dashSelectedClubsText">{{ number_format((int)($totals['clubs'] ?? 0), 0, ',', ' ') }} clube{{ (int)($totals['clubs'] ?? 0) === 1 ? '' : 's' }} selecionado{{ (int)($totals['clubs'] ?? 0) === 1 ? '' : 's' }}</small>
            </div>
        </section>

        <form method="GET" class="dash-control-panel" id="dashboardFilters">
            <input type="hidden" name="club_filter" id="clubFilterMode" value="custom">
            <input type="hidden" name="from" id="dashFrom" value="{{ $range['from'] ?? '' }}">
            <input type="hidden" name="to" id="dashTo" value="{{ $range['to'] ?? '' }}">
            <input type="text" id="dashRangeAnchor" class="dash-range-anchor" value="" readonly>

            <div class="dash-control-head">
                <div>
                    <div class="dash-section-kicker">Filtro rápido</div>
                    <h2>Clubes e período</h2>
                </div>

                <div class="dash-range-actions">
                    <button type="button" class="dash-range-button" id="dashRangeBtn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                            <path stroke-width="1.8" d="M7 3v3M17 3v3M4 8h16M6 6h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z"/>
                        </svg>
                        <span id="dashRangeLabel">{{ $range['label'] ?? 'Selecionar datas' }}</span>
                    </button>

                    <div class="dash-presets">
                        <button type="button" data-preset="mtd">MTD</button>
                        <button type="button" data-preset="this_month">Este mês</button>
                        <button type="button" data-preset="last_month">Mês passado</button>
                        <button type="button" data-preset="last_30">30 dias</button>
                    </div>
                </div>
            </div>

            <div class="dash-club-tools">
                <div class="dash-search">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                        <path stroke-width="1.8" d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"/>
                        <path stroke-width="1.8" d="M21 21l-4.2-4.2"/>
                    </svg>
                    <input id="clubSearch" type="search" placeholder="Procurar clube" autocomplete="off">
                </div>

                <button type="button" class="dash-chip-action" id="selectAllClubs">Rede completa</button>
                <button type="button" class="dash-chip-action muted" id="clearClubs">Limpar</button>
                <span class="dash-live-status" id="dashLiveStatus" aria-live="polite">Atualiza automaticamente</span>
            </div>

            <div class="dash-club-chips" id="clubChips">
                @foreach($clubs as $club)
                    @php
                        $clubId = (int) $club->id;
                        $isSelected = in_array($clubId, $selectedClubIds, true);
                    @endphp
                    <label class="dash-club-chip{{ $isSelected ? ' is-selected' : '' }}"
                           data-name="{{ mb_strtolower($club->name ?? '') }}">
                        <input type="checkbox" name="club_ids[]" value="{{ $clubId }}" {{ $isSelected ? 'checked' : '' }}>
                        <span class="chip-mark"></span>
                        <span>{{ $club->name }}</span>
                    </label>
                @endforeach
            </div>
        </form>

        <section class="dash-revenue-grid">
            @foreach($revenueCards as $card)
                @php
                    $width = max(6, min(100, (($card['value'] ?? 0) / $maxRevenueCard) * 100));
                @endphp
                <article class="dash-revenue-card" data-card="{{ $card['key'] }}" style="--accent: {{ $card['accent'] }}; --bar: {{ $width }}%;">
                    <div class="revenue-top">
                        <span>{{ $card['label'] }}</span>
                        <i></i>
                    </div>
                    <strong data-card-value>{{ $card['formatted'] }}</strong>
                    <p>{{ $card['description'] }}</p>
                    <div class="revenue-track"><span></span></div>
                </article>
            @endforeach
        </section>

        <section class="dash-snapshot">
            <article>
                <span>Bookings</span>
                <strong id="snapshotBookings">{{ number_format((int)($totals['bookings'] ?? 0), 0, ',', ' ') }}</strong>
            </article>
            <article>
                <span>Encomendas</span>
                <strong id="snapshotOrders">{{ number_format((int)($totals['orders'] ?? 0), 0, ',', ' ') }}</strong>
            </article>
            <article>
                <span>Utilizadores novos</span>
                <strong id="snapshotUsers">{{ number_format((int)($totals['users'] ?? 0), 0, ',', ' ') }}</strong>
            </article>
            <article>
                <span>Clubes ativos na vista</span>
                <strong id="snapshotClubs">{{ number_format((int)($totals['clubs'] ?? 0), 0, ',', ' ') }}</strong>
            </article>
        </section>

        <section class="dash-club-breakdown">
            <div class="dash-section-head">
                <div>
                    <div class="dash-section-kicker">Composição</div>
                    <h2>Faturação por clube</h2>
                </div>
                <span id="clubCount"></span>
            </div>

            <div class="dash-table" id="clubRows">
                <div class="dash-table-head">
                    <span>Clube</span>
                    <span>Aulas</span>
                    <span>Reservas</span>
                    <span>Bar</span>
                    <span>Loja</span>
                    <span>Total</span>
                </div>

                @foreach($clubs->where('is_selected', true)->sortByDesc('total_revenue_raw') as $club)
                    <a class="dash-table-row club-row"
                       href="{{ route('admin.clubs.show', $club) }}"
                       data-name="{{ mb_strtolower($club->name ?? '') }}"
                       data-revenue="{{ (float)($club->total_revenue_raw ?? 0) }}">
                        <span class="club-name">
                            <b>{{ $club->name }}</b>
                            <small>{{ number_format((int)($club->bookings_count ?? 0), 0, ',', ' ') }} bookings · {{ number_format((int)($club->orders_count ?? 0), 0, ',', ' ') }} encomendas</small>
                        </span>
                        <span>{{ $club->lessons_revenue }}</span>
                        <span>{{ $club->reservations_revenue }}</span>
                        <span>{{ $club->bar_revenue }}</span>
                        <span>{{ $club->store_revenue }}</span>
                        <strong>{{ $club->total_revenue }}</strong>
                    </a>
                @endforeach
            </div>

            <div class="dash-empty" id="clubEmpty" style="display:none;">
                Não há clubes visíveis para essa pesquisa.
            </div>
        </section>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css">

    <style>
        .azp-dash-v2{
            --ink:#111827;
            --muted:#667085;
            --line:rgba(15,23,42,.10);
            --panel:rgba(255,255,255,.88);
            --soft:#f6f7fb;
            color:var(--ink);
            padding-top:10px;
        }
        .dash-hero{
            min-height:190px;
            border:1px solid rgba(15,23,42,.10);
            border-radius:24px;
            padding:26px;
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:22px;
            background:
                radial-gradient(780px 300px at 8% 0%, rgba(14,165,233,.22), transparent 58%),
                radial-gradient(620px 300px at 82% 14%, rgba(20,184,166,.20), transparent 56%),
                linear-gradient(135deg, #ffffff, #f7f8fc 62%, #eef7f6);
            box-shadow:0 24px 70px rgba(15,23,42,.10);
            overflow:hidden;
            position:relative;
        }
        .dash-hero::after{
            content:"";
            position:absolute;
            right:-80px;
            bottom:-120px;
            width:360px;
            height:360px;
            border-radius:50%;
            border:52px solid rgba(99,102,241,.10);
        }
        .dash-hero-main,
        .dash-hero-total{ position:relative; z-index:1; }
        .dash-eyebrow,
        .dash-section-kicker{
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.12em;
            color:#0f766e;
        }
        .dash-hero h1{
            margin:6px 0 8px;
            font-size:42px;
            line-height:1;
            letter-spacing:0;
            font-weight:900;
        }
        .dash-hero p{
            margin:0;
            max-width:760px;
            color:var(--muted);
            font-size:14px;
        }
        .dash-hero-total{
            min-width:260px;
            padding:18px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.72);
            background:rgba(255,255,255,.70);
            box-shadow:0 16px 50px rgba(15,23,42,.10);
            backdrop-filter: blur(14px);
        }
        .dash-hero-total span,
        .dash-hero-total small{
            display:block;
            color:var(--muted);
            font-size:12px;
        }
        .dash-hero-total strong{
            display:block;
            margin:5px 0;
            font-size:30px;
            line-height:1;
            font-weight:900;
        }
        .dash-control-panel,
        .dash-club-breakdown{
            margin-top:16px;
            border:1px solid var(--line);
            border-radius:22px;
            background:var(--panel);
            box-shadow:0 14px 46px rgba(15,23,42,.07);
            padding:18px;
        }
        .dash-control-head,
        .dash-section-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
        }
        .dash-control-head h2,
        .dash-section-head h2{
            margin:3px 0 0;
            font-size:20px;
            font-weight:900;
            letter-spacing:0;
        }
        .dash-range-actions,
        .dash-presets,
        .dash-club-tools{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .dash-range-button,
        .dash-presets button,
        .dash-chip-action,
        .dash-apply{
            min-height:38px;
            border:1px solid var(--line);
            border-radius:999px;
            background:#fff;
            color:var(--ink);
            padding:8px 12px;
            font-size:13px;
            font-weight:800;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:8px;
            transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
        }
        .dash-range-button svg{
            width:18px;
            height:18px;
        }
        .dash-range-button:hover,
        .dash-presets button:hover,
        .dash-chip-action:hover,
        .dash-apply:hover,
        .dash-club-chip:hover{
            transform:translateY(-1px);
            box-shadow:0 10px 24px rgba(15,23,42,.10);
            border-color:rgba(15,23,42,.20);
        }
        .dash-apply{
            background:#111827;
            color:#fff;
            border-color:#111827;
        }
        .dash-chip-action.muted{
            color:var(--muted);
            font-weight:700;
        }
        .dash-live-status{
            min-height:38px;
            border:1px solid rgba(20,184,166,.24);
            border-radius:999px;
            background:rgba(240,253,250,.78);
            color:#0f766e;
            padding:8px 12px;
            font-size:12px;
            font-weight:900;
            display:inline-flex;
            align-items:center;
        }
        .azp-dash-v2.is-loading .dash-live-status{
            color:#92400e;
            border-color:rgba(245,158,11,.30);
            background:rgba(255,251,235,.90);
        }
        .dash-club-tools{
            margin-top:16px;
        }
        .dash-search{
            min-width:280px;
            flex:1 1 320px;
            display:flex;
            align-items:center;
            gap:10px;
            border:1px solid var(--line);
            background:#fff;
            border-radius:999px;
            padding:9px 13px;
        }
        .dash-search svg{
            width:18px;
            height:18px;
            color:var(--muted);
        }
        .dash-search input{
            border:0;
            outline:0;
            width:100%;
            background:transparent;
            color:var(--ink);
            font-size:14px;
        }
        .dash-club-chips{
            margin-top:14px;
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            max-height:170px;
            overflow:auto;
            padding:2px 2px 4px;
        }
        .dash-club-chip{
            border:1px solid var(--line);
            border-radius:999px;
            background:#fff;
            padding:9px 12px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            cursor:pointer;
            font-size:13px;
            font-weight:800;
            color:var(--ink);
            transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
            user-select:none;
        }
        .dash-club-chip input{
            position:absolute;
            opacity:0;
            pointer-events:none;
        }
        .chip-mark{
            width:10px;
            height:10px;
            border-radius:50%;
            border:2px solid rgba(15,23,42,.28);
            background:#fff;
        }
        .dash-club-chip.is-selected{
            color:#064e3b;
            border-color:rgba(20,184,166,.35);
            background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(240,253,250,.78));
        }
        .dash-club-chip.is-selected .chip-mark{
            border-color:#14b8a6;
            background:#14b8a6;
            box-shadow:0 0 0 4px rgba(20,184,166,.12);
        }
        .dash-revenue-grid{
            margin-top:16px;
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:14px;
        }
        .dash-revenue-card{
            min-height:176px;
            border:1px solid var(--line);
            border-radius:22px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80)),
                linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
            padding:18px;
            box-shadow:0 14px 42px rgba(15,23,42,.07);
            overflow:hidden;
            position:relative;
        }
        .dash-revenue-card::before{
            content:"";
            position:absolute;
            inset:0;
            border-top:4px solid var(--accent);
            opacity:.9;
            pointer-events:none;
        }
        .revenue-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
        }
        .revenue-top span{
            color:var(--muted);
            font-size:12px;
            font-weight:900;
            text-transform:uppercase;
            letter-spacing:.10em;
        }
        .revenue-top i{
            width:34px;
            height:34px;
            border-radius:12px;
            background:var(--accent);
            box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 28%, transparent);
        }
        .dash-revenue-card strong{
            display:block;
            margin-top:20px;
            font-size:27px;
            line-height:1;
            font-weight:950;
            letter-spacing:0;
        }
        .dash-revenue-card p{
            margin:9px 0 18px;
            color:var(--muted);
            font-size:13px;
        }
        .revenue-track{
            height:8px;
            border-radius:999px;
            background:rgba(15,23,42,.08);
            overflow:hidden;
        }
        .revenue-track span{
            display:block;
            height:100%;
            width:var(--bar);
            border-radius:999px;
            background:var(--accent);
        }
        .dash-snapshot{
            margin-top:16px;
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:14px;
        }
        .dash-snapshot article{
            border:1px solid var(--line);
            border-radius:18px;
            background:#fff;
            padding:15px 16px;
            box-shadow:0 10px 28px rgba(15,23,42,.05);
        }
        .dash-snapshot span{
            display:block;
            color:var(--muted);
            font-size:12px;
            font-weight:800;
        }
        .dash-snapshot strong{
            display:block;
            margin-top:5px;
            font-size:24px;
            font-weight:950;
        }
        #clubCount{
            align-self:center;
            color:var(--muted);
            border:1px solid var(--line);
            border-radius:999px;
            padding:7px 11px;
            background:#fff;
            font-size:12px;
            font-weight:800;
        }
        .dash-table{
            margin-top:14px;
            border:1px solid var(--line);
            border-radius:18px;
            overflow:hidden;
            background:#fff;
        }
        .dash-table-head,
        .dash-table-row{
            display:grid;
            grid-template-columns:minmax(220px,1.5fr) repeat(5,minmax(116px,1fr));
            gap:12px;
            align-items:center;
            padding:12px 14px;
        }
        .dash-table-head{
            background:#f7f8fb;
            color:var(--muted);
            font-size:11px;
            font-weight:900;
            text-transform:uppercase;
            letter-spacing:.10em;
        }
        .dash-table-row{
            color:var(--ink);
            text-decoration:none;
            border-top:1px solid rgba(15,23,42,.07);
            font-size:13px;
            transition:background .12s ease;
        }
        .dash-table-row:hover{
            background:#f9fafb;
            color:var(--ink);
            text-decoration:none;
        }
        .dash-table-row strong{
            font-size:14px;
            font-weight:950;
        }
        .club-name b{
            display:block;
            font-size:14px;
            font-weight:950;
        }
        .club-name small{
            display:block;
            margin-top:3px;
            color:var(--muted);
            font-size:11px;
        }
        .dash-empty{
            margin-top:14px;
            border:1px dashed rgba(15,23,42,.18);
            border-radius:16px;
            padding:18px;
            color:var(--muted);
            text-align:center;
            background:#fff;
            font-weight:800;
        }
        .dash-range-anchor{
            position:absolute !important;
            width:1px !important;
            height:1px !important;
            opacity:0 !important;
            pointer-events:none !important;
        }
        .litepicker .container__months{
            border:1px solid var(--line) !important;
            border-radius:18px !important;
            box-shadow:0 24px 70px rgba(15,23,42,.16) !important;
            overflow:hidden;
        }
        .litepicker .day-item{ border-radius:10px !important; }
        .litepicker .day-item.is-in-range{ background:rgba(20,184,166,.12) !important; }
        .litepicker .day-item.is-start-date,
        .litepicker .day-item.is-end-date{
            background:#14b8a6 !important;
            color:#fff !important;
        }
        @media (max-width:1180px){
            .dash-revenue-grid,
            .dash-snapshot{ grid-template-columns:repeat(2,minmax(0,1fr)); }
            .dash-table{ overflow-x:auto; }
            .dash-table-head,
            .dash-table-row{ min-width:900px; }
        }
        @media (max-width:720px){
            .azp-dash-v2{
                padding-top:0;
                width:100%;
                max-width:100%;
                overflow-x:hidden;
            }
            .azp-dash-v2 *,
            .azp-dash-v2 *::before,
            .azp-dash-v2 *::after{
                max-width:100%;
            }
            .dash-hero{
                min-height:0;
                padding:18px;
                align-items:flex-start;
                flex-direction:column;
                gap:14px;
                border-radius:18px;
            }
            .dash-hero::after{
                right:-130px;
                bottom:-160px;
                width:300px;
                height:300px;
                border-width:42px;
            }
            .dash-hero h1{
                font-size:30px;
                margin-bottom:6px;
            }
            .dash-hero p{
                font-size:13px;
                line-height:1.35;
                overflow-wrap:anywhere;
            }
            .dash-hero-total{
                width:100%;
                min-width:0;
                padding:14px;
                border-radius:14px;
            }
            .dash-hero-total strong{
                font-size:25px;
                overflow-wrap:anywhere;
            }
            .dash-control-panel,
            .dash-club-breakdown{
                border-radius:18px;
                padding:14px;
                margin-top:12px;
            }
            .dash-control-head,
            .dash-section-head{
                gap:10px;
            }
            .dash-control-head h2,
            .dash-section-head h2{
                font-size:18px;
            }
            .dash-range-actions,
            .dash-range-button,
            .dash-presets,
            .dash-club-tools,
            .dash-search,
            .dash-apply{
                width:100%;
                min-width:0;
            }
            .dash-range-button,
            .dash-apply{ justify-content:center; }
            .dash-range-button span{
                min-width:0;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .dash-presets{
                display:grid;
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:8px;
            }
            .dash-presets button{
                width:100%;
                min-width:0;
                justify-content:center;
                padding-left:8px;
                padding-right:8px;
            }
            .dash-club-tools{
                display:grid;
                grid-template-columns:1fr 1fr;
                align-items:stretch;
                gap:8px;
            }
            .dash-search{
                grid-column:1 / -1;
                min-width:0;
                flex-basis:auto;
            }
            .dash-chip-action,
            .dash-live-status{
                justify-content:center;
                width:100%;
                min-width:0;
            }
            .dash-live-status{
                grid-column:1 / -1;
            }
            .dash-club-chips{
                display:grid;
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:8px;
                overflow:visible;
                max-height:none;
                padding:0;
            }
            .dash-club-chip{
                width:100%;
                min-width:0;
                justify-content:flex-start;
                padding:9px 10px;
            }
            .dash-club-chip span:last-child{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .dash-revenue-grid,
            .dash-snapshot{ grid-template-columns:minmax(0,1fr); }
            .dash-revenue-grid,
            .dash-snapshot{
                gap:10px;
                margin-top:12px;
            }
            .dash-revenue-card{
                min-height:0;
                padding:14px;
                border-radius:16px;
            }
            .dash-revenue-card strong{
                margin-top:14px;
                font-size:22px;
                overflow-wrap:anywhere;
            }
            .dash-revenue-card p{
                margin-bottom:12px;
            }
            .dash-snapshot article{
                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:12px;
                padding:13px 14px;
                border-radius:15px;
            }
            .dash-snapshot strong{
                margin-top:0;
                font-size:22px;
            }
            #clubCount{
                align-self:flex-start;
            }
            .dash-table{
                border:0;
                background:transparent;
                overflow:visible;
                display:grid;
                gap:10px;
                width:100%;
                min-width:0;
            }
            .dash-table-head{
                display:none;
                min-width:0;
            }
            .dash-table-row{
                min-width:0;
                width:100%;
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:8px 12px;
                padding:14px;
                border:1px solid var(--line);
                border-radius:16px;
                background:#fff;
                box-shadow:0 10px 28px rgba(15,23,42,.05);
            }
            .dash-table-row .club-name{
                grid-column:1 / -1;
                min-width:0;
                padding-bottom:8px;
                border-bottom:1px solid rgba(15,23,42,.08);
            }
            .club-name b,
            .club-name small{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .dash-table-row > span:not(.club-name),
            .dash-table-row > strong{
                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:10px;
                min-width:0;
                font-size:12px;
                overflow-wrap:anywhere;
            }
            .dash-table-row > span:not(.club-name)::before,
            .dash-table-row > strong::before{
                color:var(--muted);
                font-size:10px;
                font-weight:950;
                text-transform:uppercase;
                white-space:nowrap;
            }
            .dash-table-row > span:nth-of-type(2)::before{ content:"Aulas"; }
            .dash-table-row > span:nth-of-type(3)::before{ content:"Reservas"; }
            .dash-table-row > span:nth-of-type(4)::before{ content:"Bar"; }
            .dash-table-row > span:nth-of-type(5)::before{ content:"Loja"; }
            .dash-table-row > strong{
                grid-column:1 / -1;
                margin-top:2px;
                padding-top:8px;
                border-top:1px solid rgba(15,23,42,.08);
                font-size:15px;
            }
            .dash-table-row > strong::before{ content:"Total"; }
        }
        @media (max-width:430px){
            .dash-table-row{
                grid-template-columns:1fr;
            }
            .dash-club-tools,
            .dash-club-chips{
                grid-template-columns:1fr;
            }
            .dash-chip-action{
                width:100%;
            }
            .dash-presets{
                grid-template-columns:1fr;
            }
        }
        @media (prefers-reduced-motion: reduce){
            .dash-range-button,
            .dash-presets button,
            .dash-chip-action,
            .dash-apply,
            .dash-club-chip{ transition:none !important; }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

    <script>
        (function(){
            var root = document.querySelector('.azp-dash-v2');
            var form = document.getElementById('dashboardFilters');
            var chipsWrap = document.getElementById('clubChips');
            var chipSearch = document.getElementById('clubSearch');
            var selectAll = document.getElementById('selectAllClubs');
            var clearAll = document.getElementById('clearClubs');
            var btn = document.getElementById('dashRangeBtn');
            var lbl = document.getElementById('dashRangeLabel');
            var fromI = document.getElementById('dashFrom');
            var toI = document.getElementById('dashTo');
            var anchor = document.getElementById('dashRangeAnchor');
            var liveStatus = document.getElementById('dashLiveStatus');
            var requestTimer = null;
            var activeController = null;
            var dashboardClubs = @json($dashboardClubPayload);

            if(!root || !form || !chipsWrap) return;

            function normalize(str){
                str = (str || '').toString().toLowerCase();
                try{ str = str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); }catch(e){}
                return str;
            }

            function fmtInt(value){
                var n = parseInt(value || 0, 10);
                if(isNaN(n)) n = 0;
                return n.toLocaleString('pt-PT');
            }

            function money(value){
                var n = parseFloat(value || 0);
                if(isNaN(n)) n = 0;
                return 'EUR ' + n.toLocaleString('pt-PT', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function escapeHtml(value){
                return (value || '').toString()
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function chipLabels(){
                return Array.prototype.slice.call(chipsWrap.querySelectorAll('.dash-club-chip'));
            }

            function checkedClubInputs(){
                return Array.prototype.slice.call(chipsWrap.querySelectorAll('input[type="checkbox"]:checked'));
            }

            function checkedClubIds(){
                return checkedClubInputs().map(function(input){
                    return parseInt(input.value, 10);
                }).filter(function(id){
                    return !isNaN(id);
                });
            }

            function syncChips(){
                chipLabels().forEach(function(label){
                    var input = label.querySelector('input[type="checkbox"]');
                    label.classList.toggle('is-selected', !!(input && input.checked));
                });
            }

            function filterChips(){
                var q = normalize(chipSearch ? chipSearch.value : '');
                chipLabels().forEach(function(label){
                    var name = normalize(label.getAttribute('data-name') || '');
                    label.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';
                });
            }

            function selectedClubsText(total){
                var n = parseInt(total || 0, 10);
                var plural = n === 1 ? '' : 's';
                return fmtInt(n) + ' clube' + plural + ' selecionado' + plural;
            }

            function selectionLabel(selected){
                if(selected.length === dashboardClubs.length && dashboardClubs.length > 0) return 'Rede completa';
                if(selected.length === 0) return 'Sem clubes selecionados';
                return selected.map(function(club){ return club.name; }).join(', ');
            }

            function aggregateSelection(){
                var selectedIds = checkedClubIds();
                var selectedMap = {};
                selectedIds.forEach(function(id){ selectedMap[id] = true; });

                var selected = dashboardClubs.filter(function(club){
                    return !!selectedMap[parseInt(club.id, 10)];
                }).sort(function(a, b){
                    return parseFloat(b.total_revenue_raw || 0) - parseFloat(a.total_revenue_raw || 0);
                });

                var totals = {
                    clubs: selected.length,
                    available_clubs: dashboardClubs.length,
                    users: 0,
                    orders: 0,
                    bookings: 0,
                    revenue_raw: 0,
                    revenue: 'EUR 0,00'
                };

                var revenue = {
                    lessons: 0,
                    reservations: 0,
                    bar: 0,
                    store: 0
                };

                selected.forEach(function(club){
                    revenue.lessons += parseFloat(club.lessons_revenue_raw || 0);
                    revenue.reservations += parseFloat(club.reservations_revenue_raw || 0);
                    revenue.bar += parseFloat(club.bar_revenue_raw || 0);
                    revenue.store += parseFloat(club.store_revenue_raw || 0);
                    totals.users += parseInt(club.users_count || 0, 10);
                    totals.orders += parseInt(club.orders_count || 0, 10);
                    totals.bookings += parseInt(club.bookings_count || 0, 10);
                });

                totals.revenue_raw = revenue.lessons + revenue.reservations + revenue.bar + revenue.store;
                totals.revenue = money(totals.revenue_raw);

                return {
                    totals: totals,
                    selection_label: selectionLabel(selected),
                    revenue_cards: [
                        { key: 'lessons', value: revenue.lessons, formatted: money(revenue.lessons) },
                        { key: 'reservations', value: revenue.reservations, formatted: money(revenue.reservations) },
                        { key: 'bar', value: revenue.bar, formatted: money(revenue.bar) },
                        { key: 'store', value: revenue.store, formatted: money(revenue.store) }
                    ],
                    clubs: selected
                };
            }

            function buildParams(){
                var params = new URLSearchParams();
                params.set('from', fromI ? fromI.value : '');
                params.set('to', toI ? toI.value : '');
                return params;
            }

            function setStatus(text, loading){
                if(liveStatus) liveStatus.textContent = text;
                root.classList.toggle('is-loading', !!loading);
            }

            function updateHero(payload){
                var selection = document.getElementById('dashSelectionLabel');
                var heroRange = document.getElementById('dashHeroRange');
                var total = document.getElementById('dashTotalRevenue');
                var selectedText = document.getElementById('dashSelectedClubsText');

                if(selection) selection.textContent = payload.selection_label || 'Sem clubes selecionados';
                if(heroRange) heroRange.textContent = payload.range ? payload.range.label : '';
                if(total) total.textContent = payload.totals ? payload.totals.revenue : 'EUR 0,00';
                if(selectedText) selectedText.textContent = selectedClubsText(payload.totals ? payload.totals.clubs : 0);
                if(lbl && payload.range) lbl.textContent = payload.range.label;
            }

            function updateRevenueCards(cards){
                cards = cards || [];
                var max = 1;
                cards.forEach(function(card){
                    var value = parseFloat(card.value || 0);
                    if(value > max) max = value;
                });
                cards.forEach(function(card){
                    var el = document.querySelector('[data-card="' + card.key + '"]');
                    if(!el) return;
                    var valueEl = el.querySelector('[data-card-value]');
                    var width = Math.max(6, Math.min(100, ((parseFloat(card.value || 0) / max) * 100)));
                    if(valueEl) valueEl.textContent = card.formatted || 'EUR 0,00';
                    el.style.setProperty('--bar', width + '%');
                });
            }

            function updateSnapshot(totals){
                totals = totals || {};
                var fields = {
                    snapshotBookings: totals.bookings,
                    snapshotOrders: totals.orders,
                    snapshotUsers: totals.users,
                    snapshotClubs: totals.clubs
                };
                Object.keys(fields).forEach(function(id){
                    var el = document.getElementById(id);
                    if(el) el.textContent = fmtInt(fields[id]);
                });
            }

            function rowHtml(club){
                return '' +
                    '<a class="dash-table-row club-row" href="' + escapeHtml(club.url) + '" data-name="' + escapeHtml(normalize(club.name)) + '" data-revenue="' + escapeHtml(club.total_revenue_raw) + '">' +
                        '<span class="club-name">' +
                            '<b>' + escapeHtml(club.name) + '</b>' +
                            '<small>' + fmtInt(club.bookings_count) + ' bookings · ' + fmtInt(club.orders_count) + ' encomendas</small>' +
                        '</span>' +
                        '<span>' + escapeHtml(club.lessons_revenue) + '</span>' +
                        '<span>' + escapeHtml(club.reservations_revenue) + '</span>' +
                        '<span>' + escapeHtml(club.bar_revenue) + '</span>' +
                        '<span>' + escapeHtml(club.store_revenue) + '</span>' +
                        '<strong>' + escapeHtml(club.total_revenue) + '</strong>' +
                    '</a>';
            }

            function updateRows(clubs){
                var rowsWrap = document.getElementById('clubRows');
                if(!rowsWrap) return;
                Array.prototype.slice.call(rowsWrap.querySelectorAll('.club-row')).forEach(function(row){
                    row.parentNode.removeChild(row);
                });
                rowsWrap.insertAdjacentHTML('beforeend', (clubs || []).map(rowHtml).join(''));
                filterRows();
            }

            function applySelectionFromCache(range){
                var payload = aggregateSelection();
                if(range) payload.range = range;
                else payload.range = { label: document.getElementById('dashHeroRange') ? document.getElementById('dashHeroRange').textContent : '' };

                updateHero(payload);
                updateRevenueCards(payload.revenue_cards);
                updateSnapshot(payload.totals);
                updateRows(payload.clubs);
            }

            window.filterRows = function(){
                var rowsWrap = document.getElementById('clubRows');
                var count = document.getElementById('clubCount');
                var empty = document.getElementById('clubEmpty');
                var q = normalize(chipSearch ? chipSearch.value : '');
                var rows = rowsWrap ? Array.prototype.slice.call(rowsWrap.querySelectorAll('.club-row')) : [];
                var visible = 0;

                rows.forEach(function(row){
                    var name = normalize(row.getAttribute('data-name') || '');
                    var ok = !q || name.indexOf(q) !== -1;
                    row.style.display = ok ? '' : 'none';
                    if(ok) visible++;
                });

                if(count) count.textContent = visible + ' / ' + rows.length;
                if(empty) empty.style.display = visible === 0 ? '' : 'none';
            };

            function refreshDashboard(delay){
                clearTimeout(requestTimer);
                requestTimer = setTimeout(function(){
                    var url = root.getAttribute('data-dashboard-url');
                    if(!url) return;

                    if(activeController) activeController.abort();
                    activeController = window.AbortController ? new AbortController() : null;

                    setStatus('A atualizar...', true);

                    fetch(url + '?' + buildParams().toString(), {
                        method: 'GET',
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                        signal: activeController ? activeController.signal : undefined
                    })
                        .then(function(response){
                            if(!response.ok) throw new Error('Erro ao atualizar dashboard');
                            return response.json();
                        })
                        .then(function(payload){
                            dashboardClubs = payload.clubs || [];
                            applySelectionFromCache(payload.range);
                            setStatus('Atualizado agora', false);
                        })
                        .catch(function(error){
                            if(error && error.name === 'AbortError') return;
                            setStatus('Não foi possível atualizar', false);
                        });
                }, delay || 120);
            }

            form.addEventListener('submit', function(e){
                e.preventDefault();
                refreshDashboard(0);
            });

            chipsWrap.addEventListener('change', function(){
                syncChips();
                applySelectionFromCache();
                setStatus('Atualizado agora', false);
            });

            if(chipSearch){
                chipSearch.addEventListener('input', function(){
                    filterChips();
                    filterRows();
                });
            }

            if(selectAll){
                selectAll.addEventListener('click', function(){
                    chipLabels().forEach(function(label){
                        var input = label.querySelector('input[type="checkbox"]');
                        if(input) input.checked = true;
                    });
                    syncChips();
                    applySelectionFromCache();
                    setStatus('Atualizado agora', false);
                });
            }

            if(clearAll){
                clearAll.addEventListener('click', function(){
                    chipLabels().forEach(function(label){
                        var input = label.querySelector('input[type="checkbox"]');
                        if(input) input.checked = false;
                    });
                    syncChips();
                    applySelectionFromCache();
                    setStatus('Atualizado agora', false);
                });
            }

            function pad(n){ return (n < 10 ? '0' : '') + n; }
            function fmtYMD(d){ return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()); }
            function fmtLabel(d){
                return d.toLocaleDateString('pt-PT', { day:'2-digit', month:'short', year:'numeric' });
            }
            function setRange(start, end){
                fromI.value = fmtYMD(start);
                toI.value = fmtYMD(end);
                if(lbl) lbl.textContent = fmtLabel(start) + ' - ' + fmtLabel(end);
            }

            var restoring = true;
            var picker = null;

            if(btn && fromI && toI && anchor && typeof Litepicker !== 'undefined'){
                picker = new Litepicker({
                    element: anchor,
                    singleMode: false,
                    numberOfMonths: 2,
                    numberOfColumns: 2,
                    format: 'YYYY-MM-DD',
                    lang: 'pt-PT',
                    autoApply: true,
                    showTooltip: true,
                    setup: function(p){
                        p.on('selected', function(d1, d2){
                            if(!d1 || !d2) return;
                            setRange(d1.dateInstance, d2.dateInstance);
                            if(!restoring) refreshDashboard(0);
                        });
                    }
                });

                btn.addEventListener('click', function(e){
                    e.preventDefault();
                    try{ picker.show(); }catch(err){}
                });

                try{
                    var s = new Date(fromI.value + 'T00:00:00');
                    var e = new Date(toI.value + 'T00:00:00');
                    if(!isNaN(s.getTime()) && !isNaN(e.getTime())){
                        picker.setDateRange(s, e);
                        setRange(s, e);
                    }
                }catch(e){}
            }
            setTimeout(function(){ restoring = false; }, 0);

            function preset(name){
                var now = new Date();
                var start, end;

                if(name === 'mtd'){
                    start = new Date(now.getFullYear(), now.getMonth(), 1);
                    end = now;
                }else if(name === 'this_month'){
                    start = new Date(now.getFullYear(), now.getMonth(), 1);
                    end = new Date(now.getFullYear(), now.getMonth()+1, 0);
                }else if(name === 'last_month'){
                    start = new Date(now.getFullYear(), now.getMonth()-1, 1);
                    end = new Date(now.getFullYear(), now.getMonth(), 0);
                }else if(name === 'last_30'){
                    end = now;
                    start = new Date(now.getTime() - (29 * 24 * 60 * 60 * 1000));
                }

                if(start && end){
                    restoring = true;
                    if(picker) picker.setDateRange(start, end);
                    setRange(start, end);
                    setTimeout(function(){
                        restoring = false;
                        refreshDashboard(0);
                    }, 0);
                }
            }

            Array.prototype.slice.call(form.querySelectorAll('[data-preset]')).forEach(function(button){
                button.addEventListener('click', function(e){
                    e.preventDefault();
                    preset(button.getAttribute('data-preset'));
                });
            });

            syncChips();
            filterChips();
            applySelectionFromCache();
        })();
    </script>
@endpush