@extends('admin.layouts.app')

@section('content')
    @php
        $usersCount   = is_countable($clubUsers) ? count($clubUsers) : 0;
        $coachesCount = is_countable($clubCoaches) ? count($clubCoaches) : 0;
        $ordersCount  = is_countable($clubOrders) ? count($clubOrders) : 0;
    @endphp

    <div class="azp-page club-show-page">

        {{-- HERO / HEADER --}}
        <div class="club-hero">
            <div class="club-hero__bg"></div>

            <div class="club-hero__content">
                <div class="club-hero__main">
                    <div class="club-hero__badge">Backoffice · Clube</div>

                    <div class="club-hero__title-row">
                        <div class="club-hero__avatar">
                            {{ strtoupper(mb_substr($club->name ?? 'C', 0, 1)) }}
                        </div>

                        <div class="club-hero__text">
                            <h1 class="club-hero__title">{{ $club->name }}</h1>
                            <p class="club-hero__subtitle">
                                Gestão de utilizadores, coaches, chat, encomendas e catálogo do clube.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="club-hero__actions">
                    <a href="{{ route('admin.clubs.index') }}" class="btn outline xs club-hero__back">
                        Voltar à lista de clubes
                    </a>
                </div>
            </div>

            <div class="club-kpis">
                <div class="club-kpi">
                    <div class="club-kpi__label">Utilizadores visíveis</div>
                    <div class="club-kpi__value">{{ $usersCount }}</div>
                </div>

                <div class="club-kpi">
                    <div class="club-kpi__label">Coaches</div>
                    <div class="club-kpi__value">{{ $coachesCount }}</div>
                </div>

                <div class="club-kpi">
                    <div class="club-kpi__label">Encomendas</div>
                    <div class="club-kpi__value">{{ $ordersCount }}</div>
                </div>
            </div>
        </div>

        @if(session('status'))
            <div class="flash success club-flash">
                {{ session('status') }}
            </div>
        @endif

        <div class="azp-card club-shell">

            {{-- TABS --}}
            <div class="club-tabs-wrap">
                <div class="azp-tabs club-tabs" role="tablist" aria-label="Secções do clube">
                    <button type="button" class="azp-tab-link active" data-tab="tab-users">
                        <span class="club-tab-icon">👥</span>
                        <span>Utilizadores</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-coaches">
                        <span class="club-tab-icon">🏋️</span>
                        <span>Coaches</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-chat">
                        <span class="club-tab-icon">💬</span>
                        <span>Chat</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-orders">
                        <span class="club-tab-icon">📦</span>
                        <span>Encomendas</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-store">
                        <span class="club-tab-icon">🛍️</span>
                        <span>Loja do clube</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-points-store">
                        <span class="club-tab-icon">★</span>
                        <span>Loja de pontos</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-club-product">
                        <span class="club-tab-icon">➕</span>
                        <span>Adicionar Produto</span>
                    </button>

                    <button type="button" class="azp-tab-link" data-tab="tab-internal-store">
                        <span class="club-tab-icon">🚚</span>
                        <span>Distribuição</span>
                    </button>
                </div>
            </div>

            {{-- UTILIZADORES --}}
            <div class="azp-tab-panel" id="tab-users">

                <div class="club-section-head">
                    <div>
                        <div class="azp-section-title">Utilizadores inscritos</div>
                        <p class="club-section-subtitle">
                            Gestão dos utilizadores associados a este clube, com pesquisa rápida e ações diretas.
                        </p>
                    </div>

                    <div class="club-section-actions">
                        <a href="{{ route('admin.clubs.users.create', $club) }}" class="btn primary club-main-cta">
                            <span class="club-main-cta__plus">+</span>
                            <span>Criar utilizador</span>
                        </a>
                    </div>
                </div>

                <div class="users-panel">
                    <div class="users-panel__top">
                        <form method="GET" action="{{ route('admin.clubs.show', $club) }}" class="users-search-form">
                            <input type="hidden" name="tab" value="tab-users">

                            <div class="users-search-box">
                                <span class="users-search-box__icon">⌕</span>
                                <input
                                    type="text"
                                    name="q"
                                    value="{{ request('q') }}"
                                    placeholder="Pesquisar por nome, email, telemóvel ou ID"
                                    autocomplete="off"
                                >
                            </div>

                            <button type="submit" class="btn primary xs">
                                Pesquisar
                            </button>

                            @if(request('q'))
                                <a href="{{ route('admin.clubs.show', ['club' => $club, 'tab' => 'tab-users']) }}" class="btn outline xs">
                                    Limpar
                                </a>
                            @endif
                        </form>
                    </div>

                    <div class="users-summary-bar">
                        <div class="users-summary-pill">
                            <span class="users-summary-pill__label">Clube</span>
                            <span class="users-summary-pill__value">{{ $club->name }}</span>
                        </div>

                        <div class="users-summary-pill">
                            <span class="users-summary-pill__label">Resultados</span>
                            <span class="users-summary-pill__value">
                                @if(method_exists($clubUsers, 'total'))
                                    {{ $clubUsers->total() }}
                                @else
                                    {{ $usersCount }}
                                @endif
                            </span>
                        </div>

                        @if(request('q'))
                            <div class="users-summary-pill users-summary-pill--soft">
                                <span class="users-summary-pill__label">Pesquisa</span>
                                <span class="users-summary-pill__value">“{{ request('q') }}”</span>
                            </div>
                        @endif
                    </div>

                    <div class="users-grid-head">
                        <div class="users-grid-head__left">
                            <div class="users-grid-head__title">Lista de utilizadores</div>
                            <div class="users-grid-head__text">
                                Interface otimizada para desktop e mobile, com paginação limpa e ações compactas.
                            </div>
                        </div>
                    </div>

                    <div class="users-table-shell">
                        <div class="azp-table-wrap users-table-wrap">
                            <table class="azp-table users-table">
                                <thead>
                                <tr>
                                    <th style="min-width:320px;">Utilizador</th>
                                    <th style="width:90px;">ID</th>
                                    <th style="min-width:240px;">Contacto</th>
                                    <th style="width:120px;">Nível</th>
                                    <th style="width:150px;text-align:right;">Ações</th>
                                </tr>
                                </thead>

                                <tbody>
                                @forelse($clubUsers as $u)
                                    @php
                                        $initial = strtoupper(mb_substr($u->name ?? 'U', 0, 1));

                                        $palette = [
                                            ['bg' => 'linear-gradient(135deg,#111 0%,#333 100%)', 'shadow' => 'rgba(17,17,17,.18)'],
                                            ['bg' => 'linear-gradient(135deg,#1f2937 0%,#4b5563 100%)', 'shadow' => 'rgba(31,41,55,.18)'],
                                            ['bg' => 'linear-gradient(135deg,#0f172a 0%,#334155 100%)', 'shadow' => 'rgba(15,23,42,.18)'],
                                            ['bg' => 'linear-gradient(135deg,#27272a 0%,#52525b 100%)', 'shadow' => 'rgba(39,39,42,.18)'],
                                        ];
                                        $theme = $palette[$u->id % count($palette)];
                                    @endphp

                                    <tr>
                                        <td class="users-table__main" data-label="Utilizador">
                                            <a href="{{ route('admin.users.show', $u) }}" class="user-card-link">
                                                <div class="user-card">
                                                    @if(!empty($u->photo_path))
                                                        <img
                                                            src="{{ asset($u->photo_path) }}"
                                                            alt="{{ $u->name }}"
                                                            class="user-card__avatar-img"
                                                        >
                                                    @else
                                                        <div
                                                            class="user-card__avatar-fallback"
                                                            style="background:{{ $theme['bg'] }}; box-shadow:0 10px 24px {{ $theme['shadow'] }};"
                                                        >
                                                            {{ $initial }}
                                                        </div>
                                                    @endif

                                                    <div class="user-card__content">
                                                        <div class="user-card__topline">
                                                            <div class="user-card__name">
                                                                {{ $u->name }}
                                                            </div>

                                                            @if(!empty($u->birth_date))
                                                                <span class="user-card__mini-tag">
                                                                    {{ \Carbon\Carbon::parse($u->birth_date)->format('d/m/Y') }}
                                                                </span>
                                                            @endif
                                                        </div>

                                                        <div class="user-card__meta-row">
                                                            <span class="user-card__meta-item">
                                                                <strong>Email:</strong> {{ $u->email ?? '—' }}
                                                            </span>

                                                            @if(!empty($u->phone))
                                                                <span class="user-card__meta-dot"></span>
                                                                <span class="user-card__meta-item">
                                                                    <strong>Telemóvel:</strong> {{ $u->phone }}
                                                                </span>
                                                            @endif
                                                        </div>

                                                        <div class="user-card__meta-row">
                                                            @if(!empty($u->nif))
                                                                <span class="user-card__meta-item">
                                                                    <strong>NIF:</strong> {{ $u->nif }}
                                                                </span>
                                                            @endif

                                                            @if(!empty($u->address))
                                                                <span class="user-card__meta-dot"></span>
                                                                <span class="user-card__meta-item user-card__meta-item--truncate" title="{{ $u->address }}">
                                                                    <strong>Morada:</strong> {{ $u->address }}
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>

                                        <td data-label="ID">
                                            <span class="user-id-badge">#{{ $u->id }}</span>
                                        </td>

                                        <td data-label="Contacto">
                                            <div class="users-contact">
                                                <div class="users-contact__main">
                                                    {{ $u->email ?? 'Sem email' }}
                                                </div>
                                                <div class="users-contact__sub">
                                                    {{ $u->phone ?? 'Sem telemóvel' }}
                                                </div>
                                            </div>
                                        </td>

                                        <td data-label="Nível">
                                            <span class="user-level-badge">
                                                {{ isset($u->level) && $u->level !== null && $u->level !== '' ? $u->level : '—' }}
                                            </span>
                                        </td>

                                        <td data-label="Ações" style="text-align:right;">
                                            <div class="azp-actions users-actions">
                                                <a href="{{ route('admin.clubs.users.edit', [$club, $u]) }}" class="btn outline xs users-action-btn">
                                                    Editar
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">
                                            <div class="users-empty">
                                                <div class="users-empty__icon">👤</div>
                                                <div class="users-empty__title">
                                                    Ainda não existem utilizadores associados a este clube
                                                </div>
                                                <div class="users-empty__text">
                                                    Cria o primeiro utilizador para começar a gerir esta área.
                                                </div>

                                                <a href="{{ route('admin.clubs.users.create', $club) }}" class="btn primary">
                                                    Criar primeiro utilizador
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if(method_exists($clubUsers, 'links'))
                        <div class="club-pagination">
                            {{ $clubUsers->appends(['tab' => 'tab-users', 'q' => request('q')])->links() }}
                        </div>
                    @endif
                </div>
            </div>

            {{-- COACHES --}}
            <div class="azp-tab-panel" id="tab-coaches" style="display:none;">
                <div class="club-section-head">
                    <div>
                        <div class="azp-section-title">Coaches do clube</div>
                        <p class="club-section-subtitle">
                            Consulta rápida dos coaches associados a este clube.
                        </p>
                    </div>
                </div>

                <div class="section-card-soft">
                    <div class="azp-table-wrap">
                        <table class="azp-table coaches-table">
                            <thead>
                            <tr>
                                <th style="width:76px;">Foto</th>
                                <th>Nome</th>
                                <th style="width:180px;text-align:right;">Ações</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($clubCoaches as $coach)
                                <tr>
                                    <td data-label="Foto">
                                        <div class="coach-avatar-wrap">
                                            @if(!empty($coach->image_path))
                                                <img
                                                    src="{{ asset('storage/' . ltrim($coach->image_path, '/')) }}"
                                                    alt="{{ $coach->name }}"
                                                    class="coach-avatar"
                                                >
                                            @else
                                                <div class="coach-avatar coach-avatar--fallback">
                                                    {{ strtoupper(mb_substr($coach->name ?? 'C', 0, 1)) }}
                                                </div>
                                            @endif
                                        </div>
                                    </td>

                                    <td class="azp-table-primary" data-label="Nome">
                                        <div class="coach-name">{{ $coach->name }}</div>
                                    </td>

                                    <td data-label="Ações" style="text-align:right;">
                                        <div class="azp-actions">
                                            <a href="{{ route('admin.coaches.show', $coach) }}" class="btn outline xs">
                                                Ver coach
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3">
                                        <div class="users-empty users-empty--small">
                                            <div class="users-empty__title">Sem coaches associados a este clube</div>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- CHAT --}}
            <div class="azp-tab-panel" id="tab-chat" style="display:none;">
                <div class="section-card-soft">
                    @include('admin.clubs._chat', [
                        'club' => $club,
                    ])
                </div>
            </div>

            {{-- ENCOMENDAS --}}
            <div class="azp-tab-panel" id="tab-orders" style="display:none;">
                <div class="club-section-head">
                    <div>
                        <div class="azp-section-title">Encomendas do clube</div>
                        <p class="club-section-subtitle">
                            Acompanhamento de encomendas e respetivo tracking.
                        </p>
                    </div>
                </div>

                <div class="section-card-soft">
                    <div class="azp-table-wrap">
                        <table class="azp-table orders-table">
                            <thead>
                            <tr>
                                <th style="width:80px;">#</th>
                                <th>Código</th>
                                <th>Cliente</th>
                                <th style="width:130px;">Total</th>
                                <th style="width:140px;">Estado</th>
                                <th>Tracking</th>
                                <th style="text-align:right;min-width:220px;">Ações</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($clubOrders as $order)
                                @php
                                    $statusLabel = [
                                        'pending'   => 'Pendente',
                                        'shipped'   => 'Enviado',
                                        'delivered' => 'Entregue',
                                    ][$order->status] ?? $order->status;

                                    $statusClass = [
                                        'pending'   => 'status-pill status-pill--pending',
                                        'shipped'   => 'status-pill status-pill--shipped',
                                        'delivered' => 'status-pill status-pill--delivered',
                                    ][$order->status] ?? 'status-pill';
                                @endphp

                                <tr>
                                    <td data-label="#">
                                        <span class="user-id-badge">{{ $order->id }}</span>
                                    </td>

                                    <td class="azp-table-primary" data-label="Código">
                                        <strong>{{ $order->code }}</strong>
                                    </td>

                                    <td data-label="Cliente">
                                        {{ $order->customer }}
                                    </td>

                                    <td data-label="Total">
                                        € {{ number_format($order->total, 2, ',', ' ') }}
                                    </td>

                                    <td data-label="Estado">
                                        <span class="{{ $statusClass }}">
                                            {{ $statusLabel }}
                                        </span>
                                    </td>

                                    <td data-label="Tracking">
                                        {{ $order->tracking ?: '—' }}
                                    </td>

                                    <td data-label="Ações" style="text-align:right;">
                                        <form action="{{ route('admin.clubs.orders.process', ['club' => $club, 'order' => $order->id]) }}"
                                              method="POST"
                                              class="orders-inline-form">
                                            @csrf

                                            <input
                                                type="text"
                                                name="tracking"
                                                value="{{ $order->tracking }}"
                                                placeholder="Tracking"
                                                class="orders-inline-form__input"
                                            >

                                            <button type="submit" class="btn primary xs">
                                                Processar
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- LOJA DO CLUBE --}}
            <div class="azp-tab-panel" id="tab-store" style="display:none;">
                <div class="section-card-soft">
                    @include('admin.clubs._store', [
                        'club'       => $club,
                        'categories' => $categories,
                    ])
                </div>
            </div>

            {{-- LOJA DE PONTOS --}}
            <div class="azp-tab-panel" id="tab-points-store" style="display:none;">
                <div class="section-card-soft">
                    @include('admin.clubs._points_store', [
                        'club' => $club,
                        'pointStoreProducts' => $pointStoreProducts,
                    ])
                </div>
            </div>

            {{-- TAB PLACEHOLDER PRODUTO --}}
            <div class="azp-tab-panel" id="tab-club-product" style="display:none;">
                <div class="section-card-soft section-card-soft--center">
                    <div class="users-empty users-empty--small">
                        <div class="users-empty__icon">➕</div>
                        <div class="users-empty__title">Área de adicionar produto</div>
                        <div class="users-empty__text">
                            Esta secção está pronta para receber o formulário ou componente de produto do clube.
                        </div>
                    </div>
                </div>
            </div>

            {{-- DISTRIBUIÇÃO --}}
            <div class="azp-tab-panel" id="tab-internal-store" style="display:none;">
                <div class="section-card-soft">
                    @include('admin.clubs._internal_store', [
                        'club'             => $club,
                        'internalGroups'   => $internalGroups,
                        'internalOrders'   => $internalOrders,
                        'internalShipping' => $internalShipping,
                    ])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .club-show-page {
            position: relative;
        }

        .club-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 28px;
            padding: 26px 26px 18px;
            background:
                radial-gradient(circle at top right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.76) 54%, rgba(255,255,255,.92) 100%),
                linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(245,247,250,1) 100%);
            box-shadow:
                0 24px 60px rgba(17,17,17,.07),
                0 10px 24px rgba(17,17,17,.04);
            margin-bottom: 18px;
        }

        .club-hero__bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
        }

        .club-hero__content {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .club-hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(17,17,17,.10);
            background: rgba(255,255,255,.84);
            color: #111;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .02em;
            margin-bottom: 14px;
            box-shadow: 0 8px 20px rgba(17,17,17,.04);
            backdrop-filter: blur(10px);
        }

        .club-hero__title-row {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .club-hero__avatar {
            width: 66px;
            height: 66px;
            border-radius: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #111 0%, #3b3b3b 100%);
            color: #fff;
            font-size: 24px;
            font-weight: 800;
            box-shadow:
                0 16px 34px rgba(17,17,17,.20),
                inset 0 1px 0 rgba(255,255,255,.16);
            flex: 0 0 auto;
        }

        .club-hero__title {
            margin: 0;
            font-size: 28px;
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -.03em;
            color: #111;
        }

        .club-hero__subtitle {
            margin: 8px 0 0;
            font-size: 14px;
            line-height: 1.55;
            color: rgba(17,17,17,.70);
            max-width: 760px;
        }

        .club-hero__actions {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .club-hero__back {
            min-width: 170px;
            justify-content: center;
        }

        .club-kpis {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .club-kpi {
            border: 1px solid rgba(17,17,17,.08);
            background: rgba(255,255,255,.82);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 16px 18px;
            box-shadow:
                0 12px 26px rgba(17,17,17,.04),
                inset 0 1px 0 rgba(255,255,255,.65);
        }

        .club-kpi__label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .02em;
            color: rgba(17,17,17,.56);
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .club-kpi__value {
            font-size: 28px;
            line-height: 1;
            font-weight: 900;
            letter-spacing: -.03em;
            color: #111;
        }

        .club-flash {
            margin-bottom: 16px;
            border-radius: 16px;
        }

        .club-shell {
            padding: 18px !important;
            border-radius: 28px !important;
            box-shadow:
                0 18px 46px rgba(17,17,17,.06),
                0 8px 18px rgba(17,17,17,.03);
            overflow: hidden;
        }

        .club-tabs-wrap {
            position: sticky;
            top: 12px;
            z-index: 5;
            margin: -2px -2px 18px;
            padding: 2px;
            background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(255,255,255,.94));
            backdrop-filter: blur(10px);
        }

        .club-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            border-bottom: none;
            padding: 0;
            margin: 0;
        }

        .club-tabs .azp-tab-link {
            appearance: none;
            border: 1px solid rgba(17,17,17,.09);
            background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
            padding: 10px 14px;
            min-height: 42px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: rgba(17,17,17,.68);
            font-size: 13px;
            font-weight: 700;
            transition: all .18s ease;
            box-shadow:
                0 8px 14px rgba(17,17,17,.03),
                inset 0 1px 0 rgba(255,255,255,.65);
        }

        .club-tabs .azp-tab-link:hover {
            transform: translateY(-1px);
            border-color: rgba(17,17,17,.18);
            color: #111;
            box-shadow:
                0 10px 24px rgba(17,17,17,.06),
                inset 0 1px 0 rgba(255,255,255,.75);
        }

        .club-tabs .azp-tab-link.active {
            background: linear-gradient(135deg, #111 0%, #262626 100%);
            color: #fff;
            border-color: rgba(17,17,17,.65);
            box-shadow:
                0 14px 28px rgba(17,17,17,.16),
                inset 0 1px 0 rgba(255,255,255,.08);
        }

        .club-tab-icon {
            font-size: 14px;
            line-height: 1;
        }

        .club-section-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .club-section-subtitle {
            margin: 6px 0 0;
            color: rgba(17,17,17,.60);
            font-size: 13px;
            line-height: 1.55;
        }

        .club-main-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 40px;
            padding: 0 16px;
            border-radius: 14px !important;
            box-shadow: 0 12px 26px rgba(17,17,17,.10);
        }

        .club-main-cta__plus {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: rgba(255,255,255,.12);
            font-weight: 800;
            line-height: 1;
        }

        .users-panel {
            border: 1px solid rgba(17,17,17,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,250,250,.98) 100%);
            border-radius: 24px;
            padding: 16px;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.75),
                0 18px 34px rgba(17,17,17,.04);
        }

        .users-panel__top {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .users-search-form {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .users-search-box {
            position: relative;
            min-width: 320px;
            max-width: 520px;
            flex: 1 1 320px;
        }

        .users-search-box__icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(17,17,17,.42);
            font-size: 14px;
            pointer-events: none;
        }

        .users-search-box input {
            width: 100%;
            height: 40px;
            border-radius: 14px;
            border: 1px solid rgba(17,17,17,.10);
            background: #fff;
            padding: 0 14px 0 36px;
            font-size: 13px;
            color: #111;
            box-shadow: inset 0 1px 2px rgba(17,17,17,.03);
            transition: all .18s ease;
        }

        .users-search-box input:focus {
            outline: none;
            border-color: #111;
            box-shadow:
                0 0 0 4px rgba(17,17,17,.06),
                inset 0 1px 2px rgba(17,17,17,.03);
        }

        .users-summary-bar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .users-summary-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 999px;
            border: 1px solid rgba(17,17,17,.08);
            background: #fff;
            box-shadow: 0 8px 18px rgba(17,17,17,.03);
        }

        .users-summary-pill--soft {
            background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
        }

        .users-summary-pill__label {
            font-size: 11px;
            font-weight: 800;
            color: rgba(17,17,17,.48);
            text-transform: uppercase;
            letter-spacing: .03em;
        }

        .users-summary-pill__value {
            font-size: 12px;
            font-weight: 800;
            color: #111;
        }

        .users-grid-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }

        .users-grid-head__title {
            font-size: 15px;
            font-weight: 900;
            color: #111;
            letter-spacing: -.02em;
        }

        .users-grid-head__text {
            margin-top: 4px;
            color: rgba(17,17,17,.58);
            font-size: 12px;
            line-height: 1.5;
        }

        .users-table-shell {
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid rgba(17,17,17,.08);
            background: #fff;
            box-shadow:
                0 14px 28px rgba(17,17,17,.04),
                inset 0 1px 0 rgba(255,255,255,.70);
        }

        .users-table-wrap {
            margin: 0;
            overflow: auto;
        }

        .users-table {
            margin: 0;
            min-width: 980px;
            border-collapse: separate;
            border-spacing: 0;
        }

        .users-table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
            color: rgba(17,17,17,.58);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
            padding-top: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(17,17,17,.08);
        }

        .users-table tbody tr {
            transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
        }

        .users-table tbody tr:hover {
            background: rgba(17,17,17,.018);
        }

        .users-table tbody td {
            vertical-align: middle;
            padding-top: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(17,17,17,.06);
        }

        .users-table tbody tr:last-child td {
            border-bottom: none;
        }

        .user-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .user-card {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .user-card__avatar-img,
        .user-card__avatar-fallback {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            object-fit: cover;
            flex: 0 0 auto;
            border: 1px solid rgba(17,17,17,.08);
        }

        .user-card__avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 900;
            font-size: 18px;
            letter-spacing: -.02em;
        }

        .user-card__content {
            min-width: 0;
            flex: 1 1 auto;
        }

        .user-card__topline {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }

        .user-card__name {
            font-size: 15px;
            font-weight: 900;
            color: #111;
            letter-spacing: -.02em;
        }

        .user-card__mini-tag {
            display: inline-flex;
            align-items: center;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: #f5f5f5;
            border: 1px solid rgba(17,17,17,.07);
            color: rgba(17,17,17,.66);
            font-size: 11px;
            font-weight: 700;
        }

        .user-card__meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-width: 0;
        }

        .user-card__meta-item {
            font-size: 12px;
            color: rgba(17,17,17,.62);
            line-height: 1.45;
        }

        .user-card__meta-item strong {
            color: rgba(17,17,17,.82);
            font-weight: 800;
        }

        .user-card__meta-item--truncate {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .user-card__meta-dot {
            width: 4px;
            height: 4px;
            border-radius: 999px;
            background: rgba(17,17,17,.26);
            flex: 0 0 auto;
        }

        .user-id-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            height: 30px;
            padding: 0 10px;
            border-radius: 999px;
            background: linear-gradient(180deg, #fff 0%, #f4f4f4 100%);
            border: 1px solid rgba(17,17,17,.08);
            color: #111;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 8px 18px rgba(17,17,17,.03);
        }

        .users-contact__main {
            font-size: 13px;
            font-weight: 700;
            color: #111;
            line-height: 1.4;
            word-break: break-word;
        }

        .users-contact__sub {
            margin-top: 3px;
            font-size: 12px;
            color: rgba(17,17,17,.56);
            line-height: 1.4;
        }

        .user-level-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, #111 0%, #2f2f2f 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            box-shadow: 0 12px 24px rgba(17,17,17,.12);
        }

        .users-actions {
            display: inline-flex;
            justify-content: flex-end;
            width: 100%;
        }

        .users-action-btn {
            min-width: 78px;
            justify-content: center;
            border-radius: 12px !important;
        }

        .users-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: center;
            padding: 42px 16px;
        }

        .users-empty--small {
            padding: 28px 16px;
        }

        .users-empty__icon {
            width: 58px;
            height: 58px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #111 0%, #363636 100%);
            color: #fff;
            font-size: 24px;
            box-shadow: 0 16px 30px rgba(17,17,17,.14);
        }

        .users-empty__title {
            font-size: 18px;
            font-weight: 900;
            color: #111;
            letter-spacing: -.02em;
        }

        .users-empty__text {
            max-width: 520px;
            color: rgba(17,17,17,.60);
            font-size: 13px;
            line-height: 1.65;
        }

        .club-pagination {
            margin-top: 16px;
            padding-top: 6px;
        }

        .club-pagination nav > div:first-child {
            display: none !important;
        }

        .club-pagination nav > div:last-child {
            display: flex !important;
            justify-content: center;
        }

        .club-pagination .relative.z-0.inline-flex.shadow-sm,
        .club-pagination .inline-flex.-space-x-px {
            gap: 8px !important;
            flex-wrap: wrap;
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        .club-pagination span[aria-current="page"] span,
        .club-pagination a,
        .club-pagination span:not([aria-current="page"]) {
            min-width: 38px;
            height: 38px;
            padding: 0 12px !important;
            border-radius: 12px !important;
            border: 1px solid rgba(17,17,17,.08) !important;
            background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%) !important;
            color: #111 !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 8px 18px rgba(17,17,17,.03) !important;
            line-height: 1 !important;
        }

        .club-pagination span[aria-current="page"] span {
            background: linear-gradient(135deg, #111 0%, #2d2d2d 100%) !important;
            border-color: rgba(17,17,17,.70) !important;
            color: #fff !important;
            box-shadow: 0 12px 24px rgba(17,17,17,.16) !important;
        }

        .club-pagination a:hover {
            background: #fff !important;
            border-color: rgba(17,17,17,.18) !important;
            transform: translateY(-1px);
        }

        .club-pagination svg {
            width: 14px !important;
            height: 14px !important;
            max-width: 14px !important;
            max-height: 14px !important;
            stroke-width: 2.2 !important;
        }

        .club-pagination .hidden.sm\:flex-1,
        .club-pagination .sm\:hidden {
            display: none !important;
        }

        .section-card-soft {
            border: 1px solid rgba(17,17,17,.08);
            background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
            border-radius: 24px;
            padding: 16px;
            box-shadow:
                0 16px 32px rgba(17,17,17,.04),
                inset 0 1px 0 rgba(255,255,255,.75);
        }

        .section-card-soft--center {
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .coach-avatar-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .coach-avatar {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            object-fit: cover;
            border: 1px solid rgba(17,17,17,.08);
            box-shadow: 0 10px 22px rgba(17,17,17,.05);
        }

        .coach-avatar--fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #111 0%, #383838 100%);
            color: #fff;
            font-weight: 800;
        }

        .coach-name {
            font-weight: 800;
            color: #111;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(17,17,17,.08);
            font-size: 12px;
            font-weight: 800;
            background: #f6f6f6;
            color: #444;
        }

        .status-pill--pending {
            background: rgba(179,138,42,.10);
            color: #8f6e17;
            border-color: rgba(179,138,42,.16);
        }

        .status-pill--shipped {
            background: rgba(31,122,58,.10);
            color: #1f7a3a;
            border-color: rgba(31,122,58,.16);
        }

        .status-pill--delivered {
            background: rgba(17,17,17,.08);
            color: #111;
            border-color: rgba(17,17,17,.10);
        }

        .orders-inline-form {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .orders-inline-form__input {
            height: 34px;
            min-width: 132px;
            padding: 0 10px;
            border-radius: 10px;
            border: 1px solid rgba(17,17,17,.12);
            background: #fff;
            font-size: 12px;
        }

        .orders-inline-form__input:focus {
            outline: none;
            border-color: #111;
            box-shadow: 0 0 0 4px rgba(17,17,17,.06);
        }

        @media (max-width: 1024px) {
            .club-kpis {
                grid-template-columns: 1fr;
            }

            .club-hero__title {
                font-size: 24px;
            }

            .users-search-box {
                min-width: 100%;
                max-width: none;
            }
        }

        @media (max-width: 768px) {
            .club-hero {
                border-radius: 22px;
                padding: 18px 16px 14px;
            }

            .club-shell {
                padding: 12px !important;
                border-radius: 22px !important;
            }

            .club-hero__title-row {
                align-items: flex-start;
            }

            .club-hero__avatar {
                width: 56px;
                height: 56px;
                border-radius: 18px;
                font-size: 22px;
            }

            .club-hero__title {
                font-size: 22px;
            }

            .club-tabs .azp-tab-link {
                min-height: 40px;
                padding: 9px 12px;
                font-size: 12px;
            }

            .users-panel {
                padding: 12px;
                border-radius: 18px;
            }

            .users-summary-bar {
                gap: 8px;
            }

            .users-summary-pill {
                width: 100%;
                justify-content: space-between;
            }

            .users-table {
                min-width: 0;
            }

            .users-table thead {
                display: none;
            }

            .users-table,
            .users-table tbody,
            .users-table tr,
            .users-table td {
                display: block;
                width: 100%;
            }

            .users-table tbody {
                padding: 10px;
            }

            .users-table tbody tr {
                border: 1px solid rgba(17,17,17,.08);
                border-radius: 18px;
                background: #fff;
                box-shadow: 0 14px 28px rgba(17,17,17,.04);
                margin-bottom: 12px;
                overflow: hidden;
            }

            .users-table tbody td {
                border-bottom: 1px solid rgba(17,17,17,.05);
                padding: 10px 12px !important;
                text-align: left !important;
            }

            .users-table tbody td:last-child {
                border-bottom: none;
            }

            .users-table td::before {
                content: attr(data-label);
                display: block;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: .04em;
                font-weight: 900;
                color: rgba(17,17,17,.48);
                margin-bottom: 6px;
            }

            .users-table__main::before {
                margin-bottom: 10px;
            }

            .users-actions {
                justify-content: flex-start;
            }

            .club-pagination span[aria-current="page"] span,
            .club-pagination a,
            .club-pagination span:not([aria-current="page"]) {
                min-width: 34px;
                height: 34px;
                font-size: 12px !important;
                border-radius: 10px !important;
            }

            .club-pagination svg {
                width: 12px !important;
                height: 12px !important;
                max-width: 12px !important;
                max-height: 12px !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tabLinks = document.querySelectorAll('.azp-tab-link');
            var panels = document.querySelectorAll('.azp-tab-panel');

            function openTab(tabId) {
                tabLinks.forEach(function (b) {
                    b.classList.remove('active');
                });

                panels.forEach(function (p) {
                    p.style.display = 'none';
                });

                var btn = document.querySelector('.azp-tab-link[data-tab="' + tabId + '"]');
                var panel = document.getElementById(tabId);

                if (btn) btn.classList.add('active');
                if (panel) panel.style.display = '';
            }

            var tabFromUrl = new URLSearchParams(window.location.search).get('tab') || 'tab-users';
            openTab(tabFromUrl);

            tabLinks.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    openTab(this.getAttribute('data-tab'));
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var categoryCheckboxes = document.querySelectorAll('input[name="categories[]"]');
            var subGrid = document.getElementById('subcategories-pill-grid');
            var hint = document.querySelector('.azp-subcategory-hint');
            var selectedJson = document.getElementById('selected-subcategories-json');

            if (!categoryCheckboxes.length || !subGrid) {
                return;
            }

            var selectedSet = new Set();

            try {
                var initial = JSON.parse(selectedJson ? selectedJson.value : '[]');
                if (Array.isArray(initial)) {
                    initial.forEach(function (id) {
                        selectedSet.add(String(id));
                    });
                }
            } catch (e) {}

            var availableMap = new Map();

            function getSelectedCategoryIds() {
                return Array.prototype.slice.call(categoryCheckboxes)
                    .filter(function (cb) { return cb.checked; })
                    .map(function (cb) { return cb.value; });
            }

            function render() {
                subGrid.innerHTML = '';

                var items = Array.from(availableMap.values()).sort(function (a, b) {
                    return String(a.name).localeCompare(String(b.name));
                });

                items.forEach(function (sc) {
                    var id = String(sc.id);

                    var label = document.createElement('label');
                    label.className = 'pill-check';

                    var input = document.createElement('input');
                    input.type = 'checkbox';
                    input.name = 'subcategories[]';
                    input.value = id;
                    input.checked = selectedSet.has(id);

                    input.addEventListener('change', function () {
                        if (input.checked) selectedSet.add(id);
                        else selectedSet.delete(id);
                    });

                    var span = document.createElement('span');
                    span.textContent = sc.name;

                    label.appendChild(input);
                    label.appendChild(span);
                    subGrid.appendChild(label);
                });

                if (hint) {
                    hint.style.display = items.length ? 'none' : 'block';
                }
            }

            function fetchSubcategories(categoryId) {
                var fetchUrl = '/admin/category-subcategories/' + categoryId;

                return fetch(fetchUrl, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                }).then(function (r) {
                    if (!r.ok) throw new Error('HTTP ' + r.status);
                    return r.json();
                });
            }

            function refresh() {
                availableMap = new Map();

                var cats = getSelectedCategoryIds();

                if (!cats.length) {
                    selectedSet = new Set();
                    render();
                    return;
                }

                Promise.all(
                    cats.map(function (catId) {
                        return fetchSubcategories(catId).then(function (items) {
                            if (!Array.isArray(items)) return;

                            items.forEach(function (sc) {
                                var key = String(sc.id);
                                if (!availableMap.has(key)) {
                                    availableMap.set(key, sc);
                                }
                            });
                        }).catch(function () {});
                    })
                ).then(function () {
                    var valid = new Set();

                    selectedSet.forEach(function (id) {
                        if (availableMap.has(String(id))) {
                            valid.add(String(id));
                        }
                    });

                    selectedSet = valid;
                    render();
                });
            }

            Array.prototype.slice.call(categoryCheckboxes).forEach(function (cb) {
                cb.addEventListener('change', refresh);
            });

            refresh();
        });
    </script>
@endpush